Активное состояние меню блога при чтении сообщения блога

Активное состояние меню блога при чтении сообщения блога

У вас когда-нибудь при чтении блога на сайте ссылка «Блог» из навигации не находилась в активном состоянии?

Это случалось со мной много раз.

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

В меню WordPress нет ничего нового — они существуют уже более 5 лет. Впервые они были представлены в WordPress 3.0. Лично я начал работать с WordPress примерно через 2 недели. У меня не возникало проблем с созданием навигации без использования wp_nav_menu (), но я слышал о них.

wp_list_pages ()

В WordPress до версии 2.9 функция wp_list_pages () в основном использовалась для создания навигации. Для обратной совместимости WordPress решили сохранить старые классы..

Некоторые из них включают:

  • current_page_item
  • current_page_parent
  • current_page_ancestor
Читать также:  Запросы AJAX

Они обычно известны тем, что используют "_" для отделения слов от класса..

wp_nav_menu ()

wp_nav_menu () предлагает новую функциональность. Новые классы — это нормально. Старые их повторяют, чтобы не сломать все, что было разработано ранее..

Итак, используя wp_nav_menu (), вы увидите указанные выше классы, а также их альтернативы:

  • текущий-пункт-меню
  • текущая-страница-родитель
  • текущее-меню-родитель
  • предок текущей страницы
  • предок текущего меню

Как вы можете видеть, сначала мы переключаемся на «-» вместо «_». Кроме того, у нас есть две версии — одна со «страницей» (если мы действительно на странице) и одна с «меню»..

Что требует добавления «меню» версий ссылок, так это еще одно крупное обновление WordPress 3.0 (помимо меню). Это настраиваемые типы сообщений.

Ссылка может быть не совсем страницей. page используется как ярлык типа сообщения. В других типах публикаций занятия основаны на его слизняке. Меню можно использовать в целом для любых произвольных типов сообщений. Таким образом, мы не будем стилизовать только "страницу" и у нас не будет проблем со стилями других типов записей..

Читать также:  Глубокие ссылки Часть 2

Различия в классификации ссылок

Одно из основных отличий заключается в том, что, хотя старые классы (например, current_page_item) все еще доступны, логика, с которой они добавляются, и новые классы различаются. Таким образом, ссылка может иметь класс current_page_ancestor, но не предок текущего меню, и наоборот..

Это происходит из-за того, что старые классы основаны исключительно на иерархии страниц в соответствии с их родительскими отношениями. Они устанавливаются при редактировании самой страницы.

Однако новые классы основаны исключительно на иерархии самого меню. Что, если у нас есть страница «Контакты», у которой нет родительского элемента, но она добавлена ​​в меню в разделе «О нас»? У второго не будет класса current_page_parent в меню, но будет класс current-menu-parent..

Читать также:  Пользовательский параллакс без какихлибо библиотек

Большинство тем полагаются исключительно на класс current-menu-ancestor для добавления активного состояния к ссылкам. Затем, если мы читаем сообщение в блоге, даже если в навигации есть ссылка «Блог» — у него нет класса предка текущего меню. Это потому, что ссылка на блог не добавляется в меню.

Однако, если вы потрудитесь посмотреть, какие классы на самом деле есть в ссылке на блог, вы увидите, что current_page_parent доступен..

Итак, все, что вам нужно сделать, чтобы убедиться, что ваша тема правильно отображает активное состояние ссылки блога из навигации, при чтении сообщения блога просто добавляется два селектора, так что это:

.current-menu-ancestor {/ * стиль активного состояния * /}

стать:

.current-menu-ancestor, .current_page_parent {/ * стиль активного состояния * /}

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?