从子菜单项中删除当前类

我正在建立一个带有下拉菜单（子菜单）的wordpress网站。

enter image description here

为了实现这一点，我在这里使用wordpresswalker 班这是我在functions.php

class CSS_Menu_Maker_Walker extends Walker {

  var $db_fields = array( \'parent\' => \'menu_item_parent\', \'id\' => \'db_id\' );

  function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\\t", $depth);
    $output .= "\\n$indent<ul>\\n";
  }

  function end_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat("\\t", $depth);
    $output .= "$indent</ul>\\n";
  }

  function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

    global $wp_query;
    $indent = ( $depth ) ? str_repeat( "\\t", $depth ) : \'\';
    $class_names = $value = \'\'; 
    $classes = empty( $item->classes ) ? array() : (array) $item->classes;

    /* Add active class */
    if(in_array(\'current-menu-item\', $classes)) {
      $classes[] = \'current\';
      unset($classes[\'current-menu-item\']);
    }

    /* Check for children */
    $children = get_posts(array(\'post_type\' => \'nav_menu_item\', \'nopaging\' => true, \'numberposts\' => 1, \'meta_key\' => \'_menu_item_menu_item_parent\', \'meta_value\' => $item->ID));
    if (!empty($children)) {
      $classes[] = \'has-children\';
    }

    $class_names = join( \' \', apply_filters( \'nav_menu_css_class\', array_filter( $classes ), $item, $args ) );
    $class_names = $class_names ? \' class="\' . esc_attr( $class_names ) . \'"\' : \'\';

    $id = apply_filters( \'nav_menu_item_id\', \'menu-item-\'. $item->ID, $item, $args );
    $id = $id ? \' id="\' . esc_attr( $id ) . \'"\' : \'\';

    $output .= $indent . \'<li\' . $id . $value . $class_names .\'>\';

    $attributes  = ! empty( $item->attr_title ) ? \' title="\'  . esc_attr( $item->attr_title ) .\'"\' : \'\';
    $attributes .= ! empty( $item->target )     ? \' target="\' . esc_attr( $item->target     ) .\'"\' : \'\';
    $attributes .= ! empty( $item->xfn )        ? \' rel="\'    . esc_attr( $item->xfn        ) .\'"\' : \'\';
    $attributes .= ! empty( $item->url )        ? \' href="\'   . esc_attr( $item->url        ) .\'"\' : \'\';

    $item_output = $args->before;
    $item_output .= \'<a\'. $attributes .\'>\';
    $item_output .= $args->link_before . apply_filters( \'the_title\', $item->title, $item->ID ) . $args->link_after;
    $item_output .= \'</a>\';
    $item_output .= $args->after;

    $output .= apply_filters( \'walker_nav_menu_start_el\', $item_output, $item, $depth, $args );
  }

  function end_el( &$output, $item, $depth = 0, $args = array() ) {
    $output .= "</li>\\n";
  }
}

要尝试演示我要实现的目标，请查看以下HTML：

  <nav id="nav-wrap"> 

        <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
           <a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>

        <div class="row">                       

                <ul id="nav" class="nav">
                    <li class="current"><a href="index.html">Home</a></li>
                    <li class="has-children"><a href="#">Dropdown</a>
                      <ul>
                         <li><a href="#">Submenu 01</a></li>
                         <li><a href="#">Submenu 02</a></li>
                         <li><a href="#">Submenu 03</a></li>
                      </ul>
                   </li>
                   <li><a href="demo.html">Demo</a></li>    
                   <li><a href="archives.html">Archives</a></li>
                    <li class="has-children"><a href="single.html">Blog</a>
                            <ul>
                         <li><a href="blog.html">Blog Entries</a></li>
                         <li><a href="single.html">Single Blog</a></li>                      
                      </ul>
                    </li>               
                    <li><a href="page.html">Page</a></li>
                </ul> <!-- end #nav -->              

        </div> 

       </nav> <!-- end #nav-wrap -->

说明：

有一个主导航标记，其类名为：nav-wrap“

在一个简单的div标记中，有一个名为：”row“

里面只是一个简单的(ul li a) 其中，一个类的ul标签和id“nav”下拉列表用一个名为的类的div包装：has-children当用户单击任何项目时，类“current”称为类current当用户单击任何子项时，不会调用。在这种情况下，类“current”应用于其父项。例如，当用户单击“Blog Entries”时，类“current”应用于其父项，即“Blog”

但我实际上得到的是：

<nav id="nav-wrap"> 

        <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
           <a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>

                <div class="row"><ul id="nav" class="nav"><li id="menu-item-557" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home current"><a href="http://127.0.0.1/wordpress/">Home</a></li>
<li id="menu-item-558" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://127.0.0.1/wordpress/about-us/">About Us</a></li>
<li id="menu-item-559" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children has-children"><a href="http://127.0.0.1/wordpress/blog/">Blog</a>
<ul>
    <li id="menu-item-564" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://127.0.0.1/wordpress/blog/category/blogger/">Blogger</a></li>
    <li id="menu-item-565" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://127.0.0.1/wordpress/blog/category/html-css/">HTML-CSS</a></li>
    <li id="menu-item-566" class="menu-item menu-item-type-taxonomy menu-item-object-category"><a href="http://127.0.0.1/wordpress/blog/category/psd/">PSD</a></li>
</ul>
</li>
<li id="menu-item-560" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://127.0.0.1/wordpress/contact-us/">Contact</a></li>
</ul></div> 

       </nav> <!-- end #nav-wrap -->

这是我用来输出菜单的代码header.php

<nav id="nav-wrap"> 

        <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show Menu</a>
           <a class="mobile-btn" href="#" title="Hide navigation">Hide Menu</a>

                <?php wp_nav_menu(array(
                      \'menu\' => \'Main Navigation\', 
                      \'menu_class\'      => \'nav\',
                      \'menu_id\'         => \'nav\',
                      \'container_class\' => \'row\', 
                      \'walker\' => new CSS_Menu_Maker_Walker()
                )); ?> 

       </nav> <!-- end #nav-wrap -->

但是，问题是，当我点击任何我不想要的子项时，它也在应用“current”类。那么，我应该如何删除子菜单项中的“current”类并将其应用于其父类呢。

这是template 我正在将其转换为wp。

小码农CODE

相关推荐

自定义Walker_NAV_MENU以在项目为类别时显示帖子