Как выделить активную рубрику и страницу на блоге WordPress

Разместил / Просмотров: 3 817 / комментариев 14

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

Но главное взяться и по ходу дела оказывается, что это совершенно просто, и к тому же в WordPress для этого всё уже готово. Всего лишь нужно задать соответствующий класс в стилях.

Рубрики

На блогах WordPress рубрики выводятся с помощью функции wp_nav_menu, которая в коде разбивает ссылки на списки ul и li. Если посмотреть на исходный код, то каждой категории прописан класс menu-item. А той категории в которой находится пользователь, или активная категория, прописывается класс current-menu-item. Добавляется слово current.

Давайте посмотрим как это выглядит в коде:

<nav>

<ul>
 <li id="menu-item"><a href="#">Иконки</a></li>
 <li id="menu-item"><a href="#">Кнопки</a></li>
</ul>

</nav>

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

А вот так выглядит активная рубрика «Иконки»:

<nav>

<ul>
<li id="current-menu-item"><a href="#">Иконки</a></li>
<li id="menu-item"><a href="#">Кнопки</a></li>
</ul>

</nav>

Теперь просто этому классу нужно задать соответствующие стили, например такие:

.current-menu-item a {
background: #f9f9f9;

}

Теперь фон данной активной ссылки станет светло серым.

Теперь давайте перейдём к страницам.

Страницы

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

При не активной странице спискам задаётся вот этот класс page_item, а той странице где находится пользователь (активной) задаётся класс current_page_item. Таким образом просто нужно задать стили этому классу:

ul li.current_page_item a {
color:#000;
border-bottom: 2px solid #e75a5a;
}

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

Вот и всё, друзья. Пост получился не большим но надеюсь информативным :-) До скорых встреч.

  • Подскажите, пожалуйста, а можно как-то «погасить» активную ссылку в меню на страницу, на которой находишься? Понятно написала или нет?
    Например, нахожусь на Главной и надпись в меню Главная должна быть текстом, а не активной ссылкой.

  • Ольга, пока не знаю как это сделать. Хотя, мне кажется что так не нужно делать :-)

  • Ну, почему же не нужно? Не очень хорошо, когда страница ссылается сама на себя

  • Ольга, Вы за категории сейчас говорите?

  • Это могут быть и категории, все, что есть в меню, меню свое, не встроенное.
    У меня сейчас в менюшке только цвет меняется, если я нахожусь на данной странице. А хотелось бы и вообще ссылку убрать. Чтобы на главной странице не было ссылки в меню на главную, на странице рубрики не было ссылки на эту самую рубрику

  • Ольга, это можно сделать, только через php. На данный момент я не знаю ка это сделать.

  • Спасибо, Александр, поищу

  • Сегодня целый день над этими страницами парюсь!) А тут случайно зашел на Ваш блог, и то что на да прям сразу) Спасибо большое!

  • Влад, рад был помочь Вам :-)

  • apisklov

    Возможно уже поздно, но лучше поздно чем никогда

    1. Подключаем js библиотеку.

    2. Между тегами head вставить такой скрипт

    jQuery(document).ready(function () {

    jQuery(‘li.current_page_item > a’).contents().unwrap();

    });

  • Герман

    Спасибо, дружище! Три дня мучился с этой проблемой и искал в сети, уже хотел плюнуть… Вы единственный кто внятно все рассказал и все теперь работает

  • Рад был помочь :)

  • Герман

    Александр, в таком варианте (я использую виджет «произвольное меню» в сайдбаре) подсвечивается не только активный пункт, но и все вложенные. Не подскажете ли как сделать, чтобы подсветка была независимой от вложенности?

  • Это всё зависит от плагина, нужно спрашивать у автора