WordPress как на ладони
Очень Удобный и Быстрый Хостинг для сайтов на WordPress. Пользуюсь сам и вам рекомендую!

Как сделать текущую страницу (ссылку) в меню неактивной?

Подскажите, пожалуйста, способ сделать так, чтобы в меню ссылка на текущую страницу становилась неактивной или чтобы просто удалить ссылку (тег A). Допустим, есть у нас виджет с произвольным меню, или просто главное меню на сайте:

  • О компании
  • Статьи
  • Всякое-разное
  • Контакты

По умолчанию все пункты кликабельны.

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

Еще скажу по-другому, нужно чтобы ссылка меню не ссылалась на себя.

Как это можно реализовать в вордпрессе?

0
ilya3
6.4 года назад
  • 1
    shevan222 wp-best.ru

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

    Я бы посоветовал использовать CSS, потому что, возможно, это проще. Как пример

    menu-glavnoe-menyu .current-menu-item a {
    		pointer-events: none;
    		cursor: default; 
    }
    ilya3 6.4 года назад

    Ура! Сработало! Действительно очень простое решение. Спасибо!

    Alexander месяц назад

    Так будет более точечно...

    menu-glavnoe-menyu .current-menu-item [aria-current="page"] {
    	color: rgba(255,255,255,0.5); pointer-events: none; cursor: default;
    }
    Комментировать
  • 0
    Kama9096

    Можно сделать так.

    Получаете код меню, как он там у вас получается. Далее у всех функций для элементов есть css классы. У текущего пункта будет current-menu-item, если используется wp_nav_menu(). Вот на основе этого класса можно убрать тег А и заменить его на что угодно.

    Допустим у нас есть такой код на выходе:

    <ul id="menu-glavnoe-menyu" class="menu">
    	<li id="menu-item-40" class="menu-item current-menu-item menu-item-40"><a href="http://example.com/cat/uhod-za-telom">Уход за телом</a></li>
    	<li id="menu-item-39" class="menu-item menu-item-39"><a href="http://example.com/cat/kak-pohudet">Как похудеть</a></li>
    </ul>

    Первая ссылка активная, заменим её на strong:

    // получаем а не выводим меню
    $menu = wp_nav_menu( [ 'echo' => 0, ] );
    
    // заменим текущую ссылку
    $menu = preg_replace( 
    	'/(current-menu-item[^>]+>)<a[^>]+>(.*?)<\/a>(<\/li>)/s',
    	'$1<strong>$2</strong>$3', 
    	$menu
    );
    
    // выводим на экран
    echo $menu;

    Получим такой HTML:

    <ul id="menu-glavnoe-menyu" class="menu">
    	<li id="menu-item-40" class="menu-item current-menu-item menu-item-40"><strong>Уход за телом</strong></li>
    	<li id="menu-item-39" class="menu-item menu-item-39"><a href="http://example.com/cat/kak-pohudet">Как похудеть</a></li>
    </ul>
    Кирилл 5 месяцев назад

    Спасибо огромное! Мне нужен был именно этот способ, не скрывать ссылку с помощью css, а полностью ее удалить.

    Комментировать
  • 0

    Вот простое, лаконичное и логичное решение.

    В пользовательских ссылках вместо ссылки прописываем #. А в CSS используем селектор атрибутов и свойство pointer-events:

      a[href="#"] {
    	pointer-events: none;
      }

    И наслаждаемся своей работой.

    Комментировать
На вопросы могут отвечать только зарегистрированные пользователи. Вход . Регистрация