Выделите текущую ссылку в меню WordPress
Выделение активного пункта меню в главном меню вашего веб-сайта действительно полезно для удобства использования, так что человек, просматривающий ваш сайт, точно знает, какую страницу он просматривает, и упрощает просмотр меню с текущей страницы. Еще до WordPress 3.0 выделение текущего пункта меню на основе страницы, на которой находился посетитель, было более трудоемким, потому что вам приходилось запускать операторы if для каждой ссылки, чтобы проверить, была ли это текущая страница или предок текущей страницы, однако С появлением новой системы перетаскивания меню в WordPress версии 3, теперь каждой ссылке назначены специальные классы, упрощающие их стилизацию.
Сначала давайте взглянем на базовый вывод меню WordPress (основанный на простом меню с использованием темы Twenty Ten WordPress ), чтобы вы могли увидеть тип классов, автоматически добавленных к ссылкам:
Если вы посмотрите на приведенный выше код, вы увидите все различные классы, которые WordPress добавляет в ссылки меню, но вы хотите выделить следующие классы:
- .current-menu-item
- .current-page-ancestor
- .current-post-ancestor
.current-menu-item: Класс, добавленный к пункту меню для текущей страницы, просматриваемой пользователем.
~ Пример: если вы находитесь на странице «О нас» и есть ссылка на страницу «О нас», то он унаследует этот класс.
.current-page-ancestor: Класс, добавленный в пункт меню для родительской страницы, если в настоящее время просматривается дочерняя страница.
~ Пример: если у вас есть страница с именем «Pages» и дочерняя страница с именем «about», если вы находитесь на странице «about», то ссылка меню «Pages» унаследует этот класс.
.current-post-ancestor: Класс, добавляемый в пункт меню, если категория является предком просматриваемого сообщения.
~ Пример: класс добавлен в категорию «Фильм» в меню, если вы в данный момент просматриваете пост «Гарри Поттер», который находится в такой категории.
Это очень простой и общий метод выделения, но он может дать вам хорошее начало. Просто скопируйте и отредактируйте следующий CSS в файле style.css, чтобы выделить ссылки в меню:
.current-menu-item a,
.current-page-ancestor a,
.current-post-ancestor a { background: #000; }Конечно, этот CSS нацелен на ВСЕ текущие классы, а это значит, что если у вас есть несколько меню на сайте или даже меню в областях виджетов, они будут нацелены на них. Поэтому не забудьте настроить CSS в соответствии с вашей темой, чтобы он был нацелен только на то меню, на которое вы хотите настроить таргетинг.
Источник записи: https://www.wpexplorer.com