navigation - How to remove anchor of current menu item in navbar?

admin管理员组

文章数量:1122832

Wordpress nav menu created by wp_nav_menu can highlight current menu item. How can i strip anchor from current menu item?

For example, we have menu:

<ul>
 <li class="current-menu-item"><a href="/somelink">Home</a></li>
 <li><a href="/elselink">Item</a></li>
 ...
</ul>

Can we remove

<a href="/somelink">

and leave just "Home" if it is current page?

UPD. In my functions.php I have a walker like this:

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
  function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"dropdown-menu\">\n";
  }
}

and I've found the walker I need:

//Creating new walker class, which won't make current page linked.
class not_linked_cur_page_MenuWalker extends Walker_Nav_Menu
{
    function start_el(&$output, $item, $depth, $args)
    { //All code below until '$current_url'
      // is native Walker_Nav_Menu code. Then we compare requested URL and current URL.
      // If whey are equal - the text shows in <span> tag instead of <a>.
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

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

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = strlen( $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        ) .'"' : '';

        $current_url = (is_ssl()?'https://':'http://').$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
        $item_url = esc_attr( $item->url );

        if ($item_url == $current_url)
        {
            $item_output = $args->before;
            $item_output .= '<span'. $attributes .'>';
            $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
            $item_output .= '</span>';
            $item_output .= $args->after;
        }
        else
        {
            $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 );
    }
}

How I can make one walker of these two?

Wordpress nav menu created by wp_nav_menu can highlight current menu item. How can i strip anchor from current menu item?

For example, we have menu:

<ul>
 <li class="current-menu-item"><a href="/somelink">Home</a></li>
 <li><a href="/elselink">Item</a></li>
 ...
</ul>

Can we remove

<a href="/somelink">

and leave just "Home" if it is current page?

UPD. In my functions.php I have a walker like this:

class My_Walker_Nav_Menu extends Walker_Nav_Menu {
  function start_lvl(&$output, $depth) {
    $indent = str_repeat("\t", $depth);
    $output .= "\n$indent<ul class=\"dropdown-menu\">\n";
  }
}

and I've found the walker I need:

//Creating new walker class, which won't make current page linked.
class not_linked_cur_page_MenuWalker extends Walker_Nav_Menu
{
    function start_el(&$output, $item, $depth, $args)
    { //All code below until '$current_url'
      // is native Walker_Nav_Menu code. Then we compare requested URL and current URL.
      // If whey are equal - the text shows in <span> tag instead of <a>.
        global $wp_query;
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        $class_names = $value = '';

        $classes = empty( $item->classes ) ? array() : (array) $item->classes;
        $classes[] = 'menu-item-' . $item->ID;

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

        $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
        $id = strlen( $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        ) .'"' : '';

        $current_url = (is_ssl()?'https://':'http://').$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
        $item_url = esc_attr( $item->url );

        if ($item_url == $current_url)
        {
            $item_output = $args->before;
            $item_output .= '<span'. $attributes .'>';
            $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
            $item_output .= '</span>';
            $item_output .= $args->after;
        }
        else
        {
            $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 );
    }
}

How I can make one walker of these two?

• navigation
• links

Share Improve this question edited Sep 25, 2015 at 7:36 Stas Ponomaryov asked Sep 24, 2015 at 14:05 Stas PonomaryovStas Ponomaryov 10111 silver badge33 bronze badges 2

• To remove it altogether you'd probably need to write your own walker (codex.wordpress.org/Class_Reference/Walker_Nav_Menu) or do some jQuery magic. Or you could fake it via CSS by forcing the .current-menu-item > a cursor to 'default': w3schools.com/cssref/… – Michelle Commented Sep 24, 2015 at 15:01
• I've found such walker, but I have another one in my functions.php. Can not stick them together. – Stas Ponomaryov Commented Sep 25, 2015 at 7:31

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

Michelle is right. You could create your own walker and override the default method that creates the anchor.

Or you can hack it by doing this:

jQuery(document).ready(function($) {

    var current =  $("#nav_menu_id").find(".current-menu-item");
    $(current).html( $(current).find("a").html() );

});

Where "nav_menu_id" is the id of your menu you wish to accomplish this on.

Personally, I would invest the time in the walker.

class not_linked_cur_page_MenuWalker extends Walker_Nav_Menu {

    function start_lvl(&$output, $depth = 0, $args = array()) {

        $level = $depth + 1;
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"sub-menu sub-menu-level-$level\" role=\"menu\" aria-hidden=\"true\">\n";

    }

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

        $default_classes = empty($item->classes) ? array () : (array) $item->classes;

        $custom_classes = (array)get_post_meta($item->ID, '_menu_item_classes', true);

        // Global class for all items
        $custom_classes[] = 'menu-item';

        // Now with 100% more accessibility!
        $aria_attr[] = 'role="menuitem"';

        // Is this a top-level menu item?
        if ($depth == 0)
            $custom_classes[] = 'menu-item-top-level';

        // Does this menu item have children?
        if (in_array('menu-item-has-children', $default_classes))
            $custom_classes[] = 'menu-item-has-children';
            $aria_attr[] = 'aria-haspopup="true"';

        // Is this menu item active? (Top level only)
        $active_classes = array('current-menu-item', 'current-menu-parent', 'current-menu-ancestor', 'current_page_item', 'current-page-parent', 'current-page-ancestor');
        if ($depth == 0 && array_intersect($default_classes, $active_classes))
            $custom_classes[] = 'menu-item-active';

        // Give menu item a class based on its level/depth
        $level = $depth + 1;
        if ($depth > 0)
            $custom_classes[] = "menu-item-level-$level";

        $classes = join(' ', $custom_classes);
        $aria = join(' ', $aria_attr);
        !empty($classes)
            and $classes = ' class="'. trim(esc_attr($classes)) . '"';

        $output .= "<li $classes $aria>";

        $attributes  = '';

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

        $title = apply_filters('the_title', $item->title, $item->ID);
         if (in_array('menu-item-active', $custom_classes)){
                $item_output = $args->before
                    . $args->link_before
                    . $title
                    . $args->after;
         }
         else{
            $item_output = $args->before
                . "<a class='menu-item-link' $attributes>"
                . $args->link_before
                . $title
                . '</a> '
                . $args->link_after
                . $args->after;
         }

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

        // Add arrow icon if this item has children
        if (in_array('menu-item-has-children', $default_classes)) {
            $output .= "<button class='sub-menu-toggle' aria-label='Toggle Sub-menu Item' aria-expanded='false'>";
            $output .= "<i class='down-arrow'></i>";
            $output .= "</button>";
        }
    }
}

本文标签： navigationHow to remove anchor of current menu item in navbar