Выделение текущего пункта меню и рубрики

Всем привет! Наверняка вы не раз видели, что на сайтах особенным образом выделяется текущий пункт меню, соответствующий странице, на которой вы находитесь. Например, активный пункт меню зачастую выделяют другим цветом.
menu
При создании статичных HTML страниц это не вызывает проблем. Для каждой страницы текущему пункту меню присваивается определенный класс, часто разработчики используют active или current. А в CSS для него задаются особые стили.

Но когда мне понадобилось перенести верстку на WordPress, я столкнулась с проблемой. Как выделить текущий пункт меню? Страницы в WordPress создаются динамически, т.е. генерируются в момент обращения к ним. Грубо говоря, когда пользователь обращается к URL адресу страницы, посредством PHP кода она собирается из нескольких кусочков. Чаще всего разметка меню находится в файле header.php и выглядит примерно так:
nav
Возникает резонный вопрос: и как здесь поменять класс у текущего пункта меню? В верстке на HTML у нас было несколько элементов li — выбрал нужный, дописал класс active и вуаля! А здесь их нет, т.к. они тоже генерируются WordPressом динамически.

Гугл мне в помощь, как говорится, но в основном там предлагалось проводить достаточно непростые манипуляции с использованием PHP и JavaScript. Долго я искала на просторах Интернета решение этой проблемы, и уже почти отчаялась. А оказалось, что все делается очень просто.

Открываем в браузере Google Chrome нашу страницу и жмем F12 (или смотрим через Firebug в FireFox). И вот, что мы видим:
current-menu-item
У тега li активного пункта меню Об авторе присутствует особенный класс, которого нет у остальных элементов. WordPress автоматически задает активному элементу дополнительный класс current-menu-item. Нам остается только прописать для него в файле CSS стили оформления.

Еще иногда используется выделение активной рубрики записей. Мне стало интересно, генерирует ли WordPress такой же особый класс для текущей рубрики, и я проверила это подобным образом. И, как оказалось, в этом случае добавляется класс current-cat для тега li. На одном из созданных мной сайтов, я использовала такое оформление:
current-cat

Вот так легко и просто все это делается. Надеюсь, моя статья была вам полезна!

Если у вас остались вопросы или что-то не получается, пишите в комментариях, я обязательно постараюсь вам помочь.

10 комментариев :

Ваш e-mail не будет опубликован. Обязательные поля помечены *