我正在使用bootstrap框架设计页面样式的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="http://www.srcmini.com/<
?php bloginfo('template_url');
?>
/wwwroot/lib/bootstrap/dist/css/bootstrap.css">
<
link rel="stylesheet"type="text/css"href="http://www.srcmini.com/<
?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="http://www.srcmini.com/<
?php bloginfo('template_url');
?>
/wwwroot/lib/jquery/dist/jquery.js">
<
/script>
<
script src="http://www.srcmini.com/<
?php bloginfo('template_url');
?>
/wwwroot/lib/bootstrap/dist/js/bootstrap.js">
<
/script>
<
script src="http://www.srcmini.com/<
?php bloginfo('template_url');
?>
/wwwroot/js/site.js">
<
/script>
<
/body>
<
/html>
包含Bootstrap资产文件的目录wwwroot在主题和原型的根目录中。
主题目录和原型目录都保存在WAMP的www目录中, 并可以通过Localhost访问。
解决了
在Firefox开发人员工具中检查了404错误, 并相应地修改了路径。
#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根目录中添加了一个引导程序库, 因此, 请在主题文件夹中添加一个引导程序库。
#3VIMP:你应该始终将脚本和样式表放入队列。不要在代码中直接使用它们。
你可以在父主题或子主题的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');
【WordPress主题中的Bootstrap无法在浏览器中渲染】排队应该比硬编码更可取, 因为, 如果你在上面的示例中看到, 我们首先要检查引导程序是否已被排队, 以便它不会被多次包含。
推荐阅读
- #yyds干货盘点# MyBatis-Plus——代码生成器(3.5.1+版本)
- bootstrap字形在WordPress主题中不起作用
- 缩放时的bootstrap网格对齐问题
- 使用the_post_thumbnail()图像引导4张卡片可以通过wordpress拉伸以适合自己()
- Avada在菜单项之间添加空格
- 输入凭据后空白wp-login.php页面
- 桌面和移动设备上的背景图片定位
- 更新帖子时自动重定向到wp-admin/post
- Avada WordPress主题(容器背景不起作用)