Wordpress主题中的引导程序不能在浏览器中呈现
我正在做一个WordPress主题，使用bootstrap框架来设计我的页面。我首先在标准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位于主题和原型的根目录中。
主题和原型目录都保存在WAMP的www目录中，并通过本地主机访问。
已解决的
已检查Firefox开发人员工具中的404错误，并相应地修改了路径。
回答 3
Stack Overflow用户
发布于 2018-06-04 07:45:41
使用Firefox或Chrome、Safari或IE中的开发人员工具检查样式表的URL，并查看它们是否正确或是否为404ing。这将告诉你它们是从哪里被调用的，如果你需要使用template_url或stylesheet_url，等等。
此外，您还可以使用免费的CDN for bootstrap CSS:参见https://www.bootstrapcdn.com/
Stack Overflow用户
发布于 2018-06-04 13:07:40
在主题代码：(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根目录中添加了一个引导库，所以，请在你的主题文件夹中添加一个引导库。
Stack Overflow用户
发布于 2018-06-04 13:22:00
VIMP:您应该始终将脚本和样式表排入队列。不要在代码中直接使用它们。
你可以通过在你的父主题或子主题的functions.php文件中使用以下给定的代码来使bootstrap入队。不过，还是推荐创建子主题。
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是否已经入队，这样它就不会被多次包含。
https://stackoverflow.com/questions/50671623
复制相似问题