wb_sunny

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

6 407 любопытных

Здравствуйте, дорогие читатели блога. Я вот всегда хотел узнать как на 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;
}

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

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

#Похожее: