Как сделать пункт меню некликабельным в WordPress?

Иногда возникает необходимость создать в меню WordPress пункт, который не будет являться прямой ссылкой, а скорее заголовком или разделителем. Это может быть полезно для организации навигации или предоставления дополнительной информации пользователям.

Саммари статьи

ChatGPT

Google AI

Grok

Perplexity

Понимание целей: Навигация vs. Информация

Основное различие между обычным пунктом меню и некликабельным заключается в их назначении. Обычные пункты меню предназначены для перенаправления пользователя на другую страницу. Некликабельные же пункты служат для структурирования меню, например, для группировки подразделов.

Примеры использования: Меню-заголовок, разделы и т.д.

Типичные сценарии использования некликабельных пунктов меню:

• Создание заголовков для разделов в выпадающем меню.
• Отображение категории верхнего уровня, которая сама по себе не имеет отдельной страницы.
• Использование в качестве разделителя между разными группами пунктов меню.

Важность для UX: Предотвращение путаницы пользователей

Правильное использование некликабельных пунктов меню помогает улучшить пользовательский опыт (UX). Четкая структура меню упрощает навигацию и предотвращает случайные клики на пункты, которые не являются ссылками.

Способ 1: Использование произвольных ссылок (самый простой способ)

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

Создание произвольной ссылки в меню WordPress

В админ-панели WordPress перейдите в раздел Внешний вид -> Меню. Добавьте пункт Произвольная ссылка в структуру меню.

Установка ‘#’ в качестве URL (или ‘javascript:void(0)’)

В поле URL для добавленной произвольной ссылки укажите символ # (решетку) или javascript:void(0). В поле Текст ссылки введите название пункта меню.

Минусы использования ‘#’: Проблемы с SEO и доступностью

Использование # в качестве URL может негативно сказаться на SEO, так как поисковые роботы могут расценивать это как ссылку на якорь на текущей странице. Кроме того, это может быть не оптимальным решением с точки зрения доступности для пользователей с ограниченными возможностями.

Способ 2: Использование JavaScript (более сложный способ)

Этот способ позволяет более гибко контролировать поведение некликабельного пункта меню.

Добавление JavaScript-кода в тему (через functions.php или плагин)

Добавьте следующий JavaScript-код в файл functions.php вашей темы (или через плагин для управления кодом):

<?php
/**
 * Prevent menu item from being clickable using JavaScript.
 *
 * @param string $items The HTML list of menu items.
 * @param object $args  An object containing wp_nav_menu() arguments.
 * @return string Modified HTML list of menu items.
 */
function make_menu_item_non_clickable( string $items, object $args ): string {
  $menu_item_id = 'non-clickable-menu-item'; // Replace with your menu item ID

  $js = '<script>
    document.addEventListener("DOMContentLoaded", function() {
      const menuItem = document.getElementById("' . $menu_item_id . '");
      if (menuItem) {
        menuItem.addEventListener("click", function(event) {
          event.preventDefault();
        });
      }
    });
  </script>';

  return $items . $js;
}
add_filter( 'wp_nav_menu_items', 'make_menu_item_non_clickable', 10, 2 );
?>

Назначение ID или класса пункту меню

В админ-панели WordPress, в разделе Внешний вид -> Меню, откройте настройки пункта меню, который вы хотите сделать некликабельным. В поле CSS классы (необязательно) (возможно потребуется включить отображение этого поля в Настройки экрана в правом верхнем углу) укажите, например, non-clickable-menu-item. Или назначьте id в functions.php при помощи фильтра ‘navmenulink_attributes’.

JavaScript-код для предотвращения перехода по ссылке

В приведенном выше коде JavaScript находится обработчик события click, который отменяет стандартное поведение ссылки (event.preventDefault()), предотвращая переход на другую страницу.

Преимущества и недостатки использования JavaScript

• Преимущества: Более гибкий контроль над поведением пункта меню, возможность добавления дополнительных эффектов.
• Недостатки: Требует знания JavaScript, может конфликтовать с другими скриптами на сайте, зависит от включенного JavaScript в браузере пользователя.

Способ 3: Использование плагинов (самый простой способ для новичков)

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

Обзор популярных плагинов для управления меню WordPress

Примеры плагинов:

• Menu Item Visibility Control.
• Page Menu Filter.

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

Установите и активируйте выбранный плагин. Затем перейдите в раздел Внешний вид -> Меню. В настройках пункта меню появится опция, позволяющая сделать его некликабельным. Конкретные шаги настройки зависят от выбранного плагина.

Плюсы и минусы использования плагинов

• Плюсы: Простота использования, не требует знания кода.
• Минусы: Может замедлять работу сайта, зависимость от разработчиков плагина, потенциальная несовместимость с другими плагинами.

Альтернативные решения и лучшие практики

Использование категорий или страниц вместо некликабельных пунктов

Вместо некликабельных пунктов меню рассмотрите возможность использования категорий или страниц для организации контента. Это может быть более предпочтительным с точки зрения SEO и доступности.

Создание выпадающих меню для группировки контента

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

Важность тестирования и оптимизации для удобства пользователей

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