Wordpress 主题中的引导程序不会在浏览器中呈现答案

【问题标题】：Bootstrap in Wordpress theme doesn't render in browserWordpress 主题中的引导程序不会在浏览器中呈现
【发布时间】：2018-11-13 06:14:45
【问题描述】：

我正在使用引导框架来设计我的页面样式的 WordPress 主题。我首先在标准 HTML 中创建了一个模型，以确保一切看起来都是我想要的：

原型代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Mac's Breakfast Anytime</title>
<link rel="stylesheet"
      type="text/css"
      href="http://localhost/prototype/wwwroot/lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet"
      type="text/css"
      href="http://localhost/prototype/wwwroot/css/site.css">



</head>
<body>
        <div class="container body-content">
!!HEADER!!

!!FOOTER!!
        </div>
        <script src="http://localhost/prototype/wwwroot/lib/jquery/dist/jquery.js"></script>
        <script src="http://localhost/prototype/wwwroot/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="http://localhost/prototype/wwwroot/js/site.js"></script>
</body>
</html>

但是，当我将代码移动到我的主题中时，Bootstrap 会被忽略。

主题代码：(index.php)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><?php bloginfo('name')?> <?php wp_title()?></title>

<link rel="stylesheet"
      type="text/css"
      href="<?php bloginfo('template_url'); ?>/wwwroot/lib/bootstrap/dist/css/bootstrap.css">

<link rel="stylesheet"
      type="text/css"
      href="<?php bloginfo('stylesheet_url'); ?>">



<!-- Facebook Open Graph -->
<meta property="og:site_name" content="<?php bloginfo('name');?>"/>
<meta property="og:title" content="<?php wp_title()?>"/>
<meta property="og:url" content="<?php esc_url(the_permalink()); ?>"/>

<!-- WordPress Scripts & Styles -->
<?php wp_head()?>
</head>
<body>
<div class="container body-content">
<?php get_header(); ?>

<?php get_footer(); ?>
</div>
       <script src="<?php bloginfo('template_url'); ?>/wwwroot/lib/jquery/dist/jquery.js"></script>
        <script src="
<?php bloginfo('template_url'); ?>/wwwroot/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script src="
<?php bloginfo('template_url'); ?>/wwwroot/js/site.js"></script>
</body>
</html>

包含 Bootstrap 资产文件的目录 wwwroot 位于 Theme 和 Prototype 的根目录中。

Theme 和 Prototype 目录都保存在 WAMP 的 www 目录中，并通过 Localhost 访问。

已解决

检查了 Firefox 开发者工具中的 404 错误，并相应地修改了路径。

【问题讨论】：

您能否检查任何元素并查看页面顶部以确保正确生成引导文件的路径？您应该能够单击这些链接并直接转到文件。
就是这样。由于我引用它的方式，它没有找到 bootstrap.css。实际上，我忘记了我没有使用在我的原始来源中，所以我添加了它并且一切正常。谢谢！

标签： php css wordpress wordpress-theming bootstrap-4

【解决方案1】：

使用Firefox 或Chrome 或Safari 或IE 中的开发人员工具检查样式表的URL 并查看它们是否正确或是否为404-ing。如果您需要使用template_url 或stylesheet_url 等，这将告诉您从哪里调用它们。

此外，您可以为引导 CSS 使用免费的 CDN：请参阅 https://www.bootstrapcdn.com/

【讨论】：

实际上是在昨晚收到评论而不是答案后这样做的，你是对的。把所有东西都摆平了，现在它工作正常。谢谢！！

【解决方案2】：

在主题代码中：（index.php）您在页眉中有直接链接 CSS，在页脚中有 JS 这不是 WordPress 的立场方式。如果您想在 WordPress 中添加 CSS 和 js，请使用以下代码供您参考。

/**
 * Enqueue scripts and styles.
 */
function enqueue_scripts_and_styles() {

    // Theme Grid.
    wp_enqueue_style( 'custom-grid', get_template_directory_uri() . '/css/grid-min.css');

    // Google fonts montserrat
    wp_enqueue_style('google-montserrat', '//fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800,900','', '20171222');
    // Fontastic fonts
    wp_enqueue_style('icon-fontastic', '//file.myfontastic.com/TjMbeqXLGBrdGfUQhddhPb/icons.css','', '20171222');

    // Fancybox js
    wp_enqueue_script( 'custom-fancybox-js', get_theme_file_uri( '/js/jquery.fancybox.js' ), array( 'jquery' ), '1.0', true );

}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts_and_styles' );

注意： 1）此代码仅供参考，需要添加你的CSS和JS路径。

2) 如果您创建了子主题，请使用 get_stylesheet_directory_uri() 而不是 get_template_directory_uri()。

3) 另外，您已经在 WordPress 根目录中添加了一个引导库，所以请在您的主题文件夹中添加一个引导库。

【讨论】：

能够在不排队的情况下解决它，但无论如何谢谢。

【解决方案3】：

VIMP：您应该始终将您的脚本和样式表排入队列。不要在代码中直接使用它们。

您可以通过在您的父主题或子主题的functions.php 文件中使用以下给定代码来将引导程序加入队列。建议创建子主题。

function my_bootstrap_resources() {
    $style = 'bootstrap';
    $path_to_bootstrap = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css';
    if( ( ! wp_style_is( $style, 'queue' ) ) && ( ! wp_style_is( $style, 'done' ) ) ) {
        //queue up your bootstrap
        wp_enqueue_style( $style, $path_to_bootstrap );
    }
}
add_action('wp_enqueue_scripts', 'my_bootstrap_resources');

入队应该优先于硬编码，因为如果您在上面的示例中看到，我们首先检查引导程序是否已经入队，这样它就不会被多次包含。

【讨论】：