我正在使用引导框架来设计我的页面样式的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>但是，当我将代码移动到主题中时，引导程序将被忽略。
主题代码：(索引.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>包含引导程序资产文件的目录wwwroot位于主题和原型的根目录中。
主题和原型目录都保存在WAMP的www目录中，并通过本地主机访问。
解决
已检查 Firefox 开发者工具中的 404 错误，并相应地修改了路径。
使用 Firefox 或 Chrome 或 Safari 或 IE 中的开发人员工具检查样式表的 URL，看看它们是否正确或是否为 404-ing。这将告诉您从哪里调用它们，如果您需要使用template_url或stylesheet_url等。
此外，您可以使用免费的CDN进行引导CSS：请参阅 https://www.bootstrapcdn.com/
在主题代码中：(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根目录中添加了一个引导库，因此，请在主题的文件夹中添加一个引导库。
VIMP：您应该始终将脚本和样式表排队。不要直接在代码中使用它们。
您可以通过在父主题或子主题的函数.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');
排队应该优先于硬编码，因为如果您在上面的示例中看到，我们首先检查 bootstrap 是否已排队，以便不会多次包含它。