Учебники

Выделите текущую ссылку в меню WordPress

9 лучших плагинов для редактирования внешнего интерфейса WordPress

Выделение активного пункта меню в главном меню вашего веб-сайта действительно полезно для удобства использования, так что человек, просматривающий ваш сайт, точно знает, какую страницу он просматривает, и упрощает просмотр меню с текущей страницы. Еще до WordPress 3.0 выделение текущего пункта меню на основе страницы, на которой находился посетитель, было более трудоемким, потому что вам приходилось запускать операторы if для каждой ссылки, чтобы проверить, была ли это текущая страница или предок текущей страницы, однако С появлением новой системы перетаскивания меню в WordPress версии 3, теперь каждой ссылке назначены специальные классы, упрощающие их стилизацию.

Базовый вывод меню WordPress

Сначала давайте взглянем на базовый вывод меню WordPress (основанный на простом меню с использованием темы Twenty Ten WordPress ), чтобы вы могли увидеть тип классов, автоматически добавленных к ссылкам:

<ul id="menu-my-menu" class="menu"><li id="menu-item-3" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3"><a href="http://mysite.com">Home</a></li> <li id="menu-item-4" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4"><a href="http://mysite.com/sample-page">Page 1</a></li> <li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-5"><a href="http://mysite.com/sample-page-2">Page 2</a></li> <li id="menu-item-6" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-6"><a href="http://mysite.com/drop-down">Drop Down</a> <ul class="sub-menu"> <li id="menu-item-7" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-7"><a href="http://mysite.com/drop-down-1">Drop Down 1</a></li> <li id="menu-item-8" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-8"><a href="http://mysite.com/drop-down-2">Drop Down 2</a></li> </ul> </li> </ul>

Выделение текущих страниц / категорий / других ссылок меню

Если вы посмотрите на приведенный выше код, вы увидите все различные классы, которые WordPress добавляет в ссылки меню, но вы хотите выделить следующие классы:

  1. .current-menu-item
  2. .current-page-ancestor
  3. .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

Похожие сообщения
Учебники

Как публиковать сообщения в блоге WordPress по электронной почте

Учебники

Как исправить внутреннюю ошибку сервера WordPress 500

Учебники

Полное руководство по управлению изображениями WordPress

Учебники

Полное руководство по управлению изображениями WordPress

Добавить комментарий

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