php - WordPress Navwalker 无法在移动设备上打开
问题描述
我已经在我的项目中实现了 WP_navwalker，但它不会在移动设备上打开。我将在下面发布代码。如果我错过了什么，请告诉我。如果有人可以帮助我找出我可能缺少的东西，我将不胜感激。谢谢你。
我正在使用来自https://github.com/wp-bootstrap/wp-bootstrap-navwalker的最新 navwalker 并按照各种教程进行操作，但似乎无法获得按钮切换来打开菜单。再次感谢您对此的帮助。
函数.php
/**
* Register Custom Navigation Walker
*/
function register_navwalker(){
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'rrspark' ),
) );
function html5blank_header_scripts()
{
if ($GLOBALS['pagenow'] != 'wp-login.php' && !is_admin()) {
wp_register_script('conditionizr', get_template_directory_uri() . '/js/lib/conditionizr-4.3.0.min.js', array(), '4.3.0'); // Conditionizr
wp_enqueue_script('conditionizr'); // Enqueue it!
wp_register_script('modernizr', get_template_directory_uri() . '/js/lib/modernizr-2.7.1.min.js', array(), '2.7.1'); // Modernizr
wp_enqueue_script('modernizr'); // Enqueue it!
wp_register_script('html5blankscripts', get_template_directory_uri() . '/js/scripts.js', array('jquery'), '1.0.0'); // Custom scripts
wp_enqueue_script('html5blankscripts'); // Enqueue it!
}
}
// Load HTML5 Blank conditional scripts
function html5blank_conditional_scripts()
{
if (is_page('pagenamehere')) {
wp_register_script('scriptname', get_template_directory_uri() . '/js/scriptname.js', array('jquery'), '1.0.0'); // Conditional script(s)
wp_enqueue_script('scriptname'); // Enqueue it!
}
}
// Load HTML5 Blank styles
function html5blank_styles()
{
wp_register_style('normalize', get_template_directory_uri() . '/normalize.css', array(), '1.0', 'all');
wp_enqueue_style('normalize'); // Enqueue it!
wp_register_style('html5blank', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
wp_enqueue_style('html5blank'); // Enqueue it!
wp_register_style('montserrat', 'https://fonts.googleapis.com/css?family=Montserrat:400,700', array(), '1.0', 'all');
wp_enqueue_style('montserrat'); // Enqueue it!
wp_register_style('kaushan', 'https://fonts.googleapis.com/css?family=Kaushan+Script', array(), '1.0', 'all');
wp_enqueue_style('kaushan'); // Enqueue it!
wp_register_style('droid', 'https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic', array(), '1.0', 'all');
wp_enqueue_style('droid'); // Enqueue it!
wp_register_style('roboto', 'https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700', array(), '1.0', 'all');
wp_enqueue_style('roboto'); // Enqueue it!
// wp_register_style('agencystyles', get_template_directory_uri() . '/css/agency.css', array(), '1.0', 'all');
// wp_enqueue_style('agencystyles');
wp_register_style('customstyles', get_template_directory_uri() . '/css/style.css', array(), '1.0', 'all');
wp_enqueue_style('customstyles');
// Enqueue it!
}
头文件.php
<nav class="navbar navbar-expand-md navbar-dark navbar-expand-md fixed-top" id="mainNav" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a href="/rrspark">
<img src="<?php echo get_template_directory_uri(); ?>/img/homelogo.png" alt="home-brand-logo" style="width: 125px;">
</a>
<div class="collapse navbar-collapse" id="navbar-content">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'depth' => 2,
'container' => 'div',
'container_class' => 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
'menu_class' => 'navbar-nav ml-auto',
'fallback_cb' => 'WP_Bootstrap_Navwalker::fallback',
'walker' => new WP_Bootstrap_Navwalker(),
) );
?>
</div>
</div>
</nav>
在footer.php中关闭body标签之前
<?php wp_footer(); ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="<?php bloginfo('template_url') ?> . /js/bootstrap.js"></script>
编辑，对functions.php进行了更改
/*------------------------------------*\
Functions
\*------------------------------------*/
/**
* Register Custom Navigation Walker
*/
function register_navwalker(){
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'rrspark' ),
) );
// Load HTML5 Blank scripts (header.php)
function html5blank_header_scripts() {
if ( $GLOBALS['pagenow'] != 'wp-login.php' && ! is_admin() ) {
if ( HTML5_DEBUG ) {
// jQuery
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', get_template_directory_uri() . '/js/lib/jquery.js', array(), '1.11.1' );
// Conditionizr
wp_register_script( 'conditionizr', get_template_directory_uri() . '/js/lib/conditionizr-4.3.0.min.js', array(), '4.3.0' );
// Modernizr
wp_register_script( 'modernizr', get_template_directory_uri() . '/js/lib/modernizr.js', array(), '2.8.3' );
// Custom scripts
wp_register_script(
'html5blankscripts',
get_template_directory_uri() . '/js/scripts.js',
array(
'conditionizr',
'modernizr',
'jquery'
),
'1.0.0' );
// Enqueue Scripts
wp_enqueue_script( 'html5blankscripts' );
// If production
} else {
// Scripts minify
wp_register_script( 'html5blankscripts-min', get_template_directory_uri() . '/js/scripts.js', array(), '1.0.0' );
// Enqueue Scripts
wp_enqueue_script( 'html5blankscripts-min' );
}
}
}
// Load HTML5 Blank conditional scripts
function html5blank_conditional_scripts()
{
if (is_page('pagenamehere')) {
wp_register_script('scriptname', get_template_directory_uri() . '/js/scriptname.js', array('jquery'), '1.0.0'); // Conditional script(s)
wp_enqueue_script('scriptname'); // Enqueue it!
}
}
// Load HTML5 Blank styles
function html5blank_styles()
{
wp_register_style('normalize', get_template_directory_uri() . '/normalize.css', array(), '1.0', 'all');
wp_enqueue_style('normalize'); // Enqueue it!
wp_register_style('html5blank', get_template_directory_uri() . '/style.css', array(), '1.0', 'all');
wp_enqueue_style('html5blank'); // Enqueue it!
wp_register_style('montserrat', 'https://fonts.googleapis.com/css?family=Montserrat:400,700', array(), '1.0', 'all');
wp_enqueue_style('montserrat'); // Enqueue it!
wp_register_style('kaushan', 'https://fonts.googleapis.com/css?family=Kaushan+Script', array(), '1.0', 'all');
wp_enqueue_style('kaushan'); // Enqueue it!
wp_register_style('droid', 'https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic', array(), '1.0', 'all');
wp_enqueue_style('droid'); // Enqueue it!
wp_register_style('roboto', 'https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700', array(), '1.0', 'all');
wp_enqueue_style('roboto'); // Enqueue it!
wp_register_style('customstyles', get_template_directory_uri() . '/css/style.css', array(), '1.0', 'all');
wp_enqueue_style('customstyles');
// Enqueue it!
}
add_action( 'wp_enqueue_scripts', 'prefix_enqueue_awesome' );
/**
* Register and load font awesome CSS files using a CDN.
*/
function prefix_enqueue_awesome() {
wp_enqueue_style('font-awesome-5', 'https://use.fontawesome.com/releases/v5.3.0/css/all.css', array(), '5.3.0');
}
// Register HTML5 Blank Navigation
function register_html5_menu()
{
register_nav_menus(array( // Using array to specify more menus if needed
'header-menu' => __('Header Menu', 'html5blank'), // Main Navigation
'sidebar-menu' => __('Sidebar Menu', 'html5blank'), // Sidebar Navigation
'extra-menu' => __('Extra Menu', 'html5blank') // Extra Navigation if needed (duplicate as many as you need!)
));
}
add_action( 'wp_enqueue_scripts', 'custom_load_bootstrap' );
/**
* Enqueue Bootstrap.
*/
function custom_load_bootstrap() {
wp_enqueue_style( 'bootstrap-css', '//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' );
wp_enqueue_script( 'bootstrap-js', '//maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array( 'jquery' ), true );
}
第二次编辑显示开发工具输出
删除向我指出的额外 div 后，我让导航栏展开。问题是导航栏默认在移动设备上打开并且不会关闭。请看图片。
解决方案
推荐阅读
- python - Filtering pandas dataframe based on attribute of object in a column
- html - 是否有可能使用 CSS-Grid 的 `gap` 属性，选择在某些列或行之间存在间隙——而不是在其他列之间？
- javascript - 如何打印由字母 X 构造的 X 并在 TypeScript 中使用下划线作为空格
- html - Sidenav 角度材料试图与其他组件并排
- python - 如何转换熊猫数据框中的所有熊猫时间戳时区
- python - 将字母组合分成具有单个字母值的列 python pandas
- nginx - NGINX LUA 内容长度 +1 字节丢失
- c - 超线程如何影响缓存？
- reactjs - 我想停止在 react-hooks 中渲染
- python - 在Python中的列表内拆分字符串