WordPress的Navwalker

时间:2018-07-15 01:28:42

标签: wordpress twitter-bootstrap bootstrap-4 wp-nav-walker

我一直在尝试使用bootstrap 4创建自定义的wordpress模板。我已经安装了navwalker,并且除通过移动设备查看之外,其他所有功能都可以正常工作。出现折叠菜单时,您可以显示带有所有动态加载的li的ul,但是当您在汉堡包菜单外部或按钮本身上单击时,它拒绝关闭。我看到要隐藏的类被调用了,但它又还原为显示。

Header.php

<nav id="collapse" class="navbar navbar-expand-lg navbar-light customNav">
    <!-- <a class="navbar-brand" href="#"><img class="img-fluid  smallLogo 
logo" src="http://localhost/wordpress/igh/wp- 
content/uploads/2018/07/SmallLogo.png" alt="Logo" /></a>--> <span 
class="gold">Template Test</span>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria- 
expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">

      <?php
    wp_nav_menu( array(
        'theme_location'    => 'primary',
        'depth'             => 2,
        'container'         => '',
        'container_class'   => '',
        'container_id'      => 'navbarNavDropdown',
        'menu_class'        => 'navbar-nav ml-auto',
        'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
        'walker'            => new wp_bootstrap_navwalker(),
    ) );
    ?>
    </div>
  </nav>

Functions.php

<?php
// Register Custom Navigation Walker
require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

  //Theme Support
  function wpb_theme_setup(){
register_nav_menus(array(
  'primary' => __('Primary Menu')
));
  }

  /* Theme 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/bootstrap411.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/bootstrap411.css' );
        wp_enqueue_style( 'bootstrap.min' );
    }
    add_action( 'wp_enqueue_scripts', 'wpt_register_css' );

  add_action('after_setup_theme', 'wpb_theme_setup');

0 个答案:

没有答案