Как удалить якорь текущего пункта меню в навигационной панели?

Вопрос или проблема

Навигационное меню WordPress, созданное с помощью wp_nav_menu, может подсвечивать текущий элемент меню. Как убрать ссылку с текущего элемента меню?

Например, у нас есть меню:

<ul>
 <li class="current-menu-item"><a href="https://wordpress.stackexchange.com/somelink">Home</a></li>
 <li><a href="http://wordpress.stackexchange.com/elselink">Item</a></li>
 ...
</ul>

Можем ли мы удалить

<a href="https://wordpress.stackexchange.com/somelink">

и оставить только “Home”, если это текущая страница?

UPD.
В моем functions.php у меня есть walker, как этот:

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";
  }
}

и я нашел нужного мне walker:

//Создание нового класса walker, который не будет связывать текущую страницу.
class not_linked_cur_page_MenuWalker extends Walker_Nav_Menu
{
    function start_el(&$output, $item, $depth, $args)
    { //Весь код ниже до '$current_url'
      // является родным кодом Walker_Nav_Menu. Затем мы сравниваем запрошенный URL и текущий URL.
      // Если они равны - текст отображается в тегe <span> вместо <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 );
    }
}

Как я могу объединить этих двух walkers в один?

Мишель права. Вы можете создать свой walker и переопределить стандартный метод, который создает ссылку.

Или вы можете обойти это следующим образом:

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

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

});

Где “nav_menu_id” – это идентификатор вашего меню, в котором вы хотите этого достичь.

Лично я бы потратил время на 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);

        // Глобальный класс для всех элементов
        $custom_classes[] = 'menu-item';

        // Теперь с улучшенной доступностью!
        $aria_attr[] = 'role="menuitem"';

        // Это элемент меню верхнего уровня?
        if ($depth == 0)
            $custom_classes[] = 'menu-item-top-level';

        // Есть ли у этого элемента меню подэлементы?
        if (in_array('menu-item-has-children', $default_classes))
            $custom_classes[] = 'menu-item-has-children';
            $aria_attr[] = 'aria-haspopup="true"';

        // Активен ли этот элемент меню? (Только верхний уровень)
        $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';

        // Присвойте элементу меню класс в зависимости от его уровня/глубины
        $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
        );

        // Добавить иконку стрелки, если у этого элемента есть подэлементы
        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>";
        }
    }
}

Ответ или решение

Для удаления якоря у текущего элемента меню в навигационной панели WordPress с использованием функции wp_nav_menu, можно воспользоваться созданием кастомного класса "walker" в PHP. Это позволит контролировать отображение каждого элемента меню и модифицировать его согласно заданным требованиям.

Теория:

В WordPress функция wp_nav_menu предоставляет возможность работы с меню, используя специальный класс Walker_Nav_Menu. Этот класс отвечает за генерацию HTML структуры меню и позволяет сделать его полностью настраиваемым. В данной задаче нам необходимо модифицировать вывод для текущего элемента меню (т.е. удалить тег <a> и оставить только текст), когда это элемент активной страницы.

Пример:

На основе предоставленного кода, создадим кастомный класс not_linked_cur_page_MenuWalker, унаследованный от Walker_Nav_Menu, и используем его для изменения вывода элементов меню:

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) {
        $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_names ? ' class="' . esc_attr($class_names) . '"' : '';

        $output .= "<li$id$class_names>";

        $attributes = '';
        $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 . '<span>' . $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after . '</span>' . $args->after;
        } else {
            // Обычный элемент меню - выводим с ссылкой
            $item_output = $args->before . '<a' . $attributes . '>' . $args->link_before . apply_filters('the_title', $item->title, $item->ID) . $args->link_after . '</a>' . $args->after;
        }

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

Применение:

Чтобы применить этот кастомный класс для вашего меню, нужно передать его в параметре walker функции wp_nav_menu:

wp_nav_menu(array(
    'theme_location' => 'your_menu_location',
    'walker' => new not_linked_cur_page_MenuWalker(),
));

Этот подход гарантирует, что при выводе текущего элемента меню он не будет обернут в ссылку, делая его не только визуально отличимым, но и обезопасив от случайных переходов, что полезно для пользовательского опыта.

Оцените материал
Добавить комментарий

Капча загружается...