为了测试起见,我使用了Twentythrteen主题。我遵循了本教程中的步骤,但移动视图中的切换已断开。以下是我所做的:
我去了http://getbootstrap.com/customize/并检查:
- 导航栏在LESS文件下
- 在jQuery插件下崩溃,因为它在这里说了什么(插件依赖性)
已下载文件。
解压缩文件和
-
将CCD_ 1和CCD_第二十九页/css/
-
将
bootstrap.js
和bootstrap.min.js
放置在第二十九页/css/中 -
根据教程建议将此文件放在第二十九页中
更改<nav>
内容header.php
从此:
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
<?php get_search_form(); ?>
</nav><!-- #site-navigation -->
</div><!-- #navbar -->
到此:
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu">
<?php /* Primary navigation */
wp_nav_menu( array(
'menu' => 'main_navigation',
'depth' => 2,
'container' => false,
'menu_class' => 'navbar',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
);
?>
</ul>
</li>
</ul>
</div>
</nav>
并在CCD_ 7的开头添加以下内容:
/* Bootstrap navigation setup */
add_action( 'after_setup_theme', 'wpt_setup' );
if ( ! function_exists( 'wpt_setup' ) ):
function wpt_setup() {
register_nav_menu( 'primary', __( 'Primary navigation', 'wptuts' ) );
} endif;
function wpt_register_js() {
wp_register_script('jquery.bootstrap.min', get_template_directory_uri() . '/js/bootstrap.min.js', 'jquery');
wp_enqueue_script('jquery.bootstrap.min');
}
add_action( 'init', 'wpt_register_js' );
function wpt_register_css() {
wp_register_style( 'bootstrap.min', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'bootstrap.min' );
}
add_action( 'wp_enqueue_scripts', 'wpt_register_css' );
require_once('wp_bootstrap_navwalker.php');
在examplep中加载页面,导航中断:(
我做错了什么?我必须更改代码中的某些内容吗?
编辑:不知道我做的事情是否正确,但我更改了menu
和menu class
值(main_navigation是我在仪表板中为菜单命名的名称)。它仍然不起作用,很难。
wp_nav_menu( array(
'menu' => 'main_navigation',
'depth' => 2,
'container' => false,
'menu_class' => 'navbar',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
查看操作中的问题:导航条损坏
查看您的屏幕截图,您已经无序地包含了javascript文件。您应该在引导程序库之前包含jQuery库。