Вопрос или проблема
Навигационное меню 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(),
));
Этот подход гарантирует, что при выводе текущего элемента меню он не будет обернут в ссылку, делая его не только визуально отличимым, но и обезопасив от случайных переходов, что полезно для пользовательского опыта.