Menu item object page: wp_nav_menu() | Function | WordPress Developer Resources

Как вывести подменю только на родительской странице в WordPress

Опубликовано: ADv Дата 06.12.2014 в рубрике Код за плагин 4 комментария

Встроенная система меню WordPress позволяет автору контента создавать меню в виде простого интерфейса drag n drop, разрешая при этом выбрать уже существующие записи, страницы или создать собственные ссылки и добавить их.

Используя интерфейс drag n drop, можно задать дочерние элементы для меню.

Когда меню выводится в вашей теме с помощью функции wp_nav_menu() WordPress автоматически сгенерирует HTML для меню и подменю в вашей теме, позволяя вам легко создавать меню со ссылкой вроде этого:


<ul>
	<li>Родительское 1</li>
	<li>Родительское 2
<ul>
	<li>Дочернее 1</li>
	<li>Дочернее 2</li>
</ul>
</li>
	<li>Родительское 3
<ul>
	<li>Дочернее A</li>
	<li>Дочернее B</li>
</ul>
</li>
</ul>

Когда WordPress автоматически создает HTML, он также добавит CSS классы, которые можно использовать в своей теме; классы создаются примерно следующие:


<ul>
    <li><a href="">Родительское 1</a></li>
    <li><a href="">Родительское 2</a>
    <ul>
        <li><a href="">Дочернее 1</a></li>
        <li><a href="">Дочернее 2</a></li>
        <li><a href="">Дочернее 3</a></li>
    </ul>
    </li>
    <li><a href="">Родительское 3</a></li>
    <li><a href="">Родительское 4</a></li>
</ul>

В этом примере мы попытаемся отобразить дочернее подменю, только когда вы будете находится на странице «Родительское 2», и скрывать его на всех остальных страницах.

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

Для начала нужно скрыть подменю на всех страницах.


.menu .sub-menu
{
    display: none;
}

Когда пользователь будет находиться на этой странице, WordPress автоматически добавит к ней новый CSS класс current-menu-item (к элементу «Родительское»). Мы можем использовать этот класс для отображения подменю, когда окажемся на нужной странице:


.menu .current-menu-item .sub-menu
{
    display:block;
}

.menu .current-menu-ancestor .sub-menu
{
    display:block;
}

Мы надеемся, что эта статья помогла вам вывести подменю только на родительской странице в WordPress.

По всем вопросам и отзывам просьба писать в комментарии ниже.

Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.

Rating: 5.0/5 (1 vote cast)

Об авторе ADv

Занимаюсь разработкой сайтов и магазинов на WordPress. Оказываю платные помощь и консультации. Skype: advokat_b

Предыдущая статья: Как добавить Google Calendar в WordPress

Следующая статья: Как получить количество расшариваний соц.сетей в WordPress

Понимание элементов меню WordPress — Игорь Бенич

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

Что такое пункт меню WordPress?

Элемент меню WordPress на самом деле является объектом сообщения WordPress. Каждый элемент, который у нас есть в нашей навигации, может быть представлен и прочитан как WP_Post 9.0008 объект. Атрибуты, такие как post_title , которые являются базовыми в обычном объекте WP_Post , здесь могут быть пустыми, и они не используются при отображении нашей навигации.

Если вы вошли в два пункта меню с одной и той же страницы, то будет два объекта WP_Post с одинаковыми атрибутами, за исключением идентификаторов и, возможно, post_parent . Каждый пункт меню, который мы создаем в WordPress, сохраняется в базе данных *wp_prefix*_posts .

Элемент меню на самом деле является настраиваемым типом записи. Тип сообщения: nav_menu_item .

Меню WordPress WP_Post Object

Вот пример пункта меню  Sample Page . Это страница, которая поставляется с WordPress в качестве примера страницы.

Мы не будем вдаваться в подробности того, как устроен каждый пункт меню, но если вам действительно интересно, вы можете проверить в файле  wp-includes/nav-menu.php . Для создания этих меню используется функция .wp_setup_nav_menu_item .

Атрибуты пунктов меню

Существует несколько атрибутов, специфичных для пунктов меню. Если вы работали с обычным объектом WP_Post и взглянули на приведенный выше объект WP_Post , вы могли заметить, что в обычном объекте WP_Post отсутствуют некоторые атрибуты. Позвольте мне описать каждый из них для вас (описание в основном взято из функции, упомянутой выше):

  • ID : идентификатор сохраненного пункта меню в базе данных или term_id, если пункт меню представляет термин таксономии.
  • attr_title : атрибут заголовка элемента ссылки для этого пункта меню.
  • классов : Массив значений атрибутов класса для элемента ссылки этого пункта меню.
  • db_id : Идентификатор БД этого элемента как объекта nav_menu_item, если он существует (0, если он не существует).
  • описание : Описание этого пункта меню.
  • menu_item_parent : Идентификатор базы данных nav_menu_item, который является родителем меню этого элемента, если таковой имеется. 0 иначе.
  • объект : тип изначально представленного объекта, например «категория», «сообщение» или «вложение».
  • object_id
    : Идентификатор БД исходного объекта, который представляет этот пункт меню, например. ID для сообщений и term_id для категорий.
  • post_parent : Идентификатор базы данных родительского объекта исходного объекта, если он есть (0 в противном случае).
  • post_title : Метка «без заголовка», если пункт меню представляет сообщение без заголовка. Это не относится к пункту меню, но полезно знать, что оно может быть пустым.
  • цель : целевой атрибут элемента ссылки для этого пункта меню.
  • title : Название этого пункта меню. Это фактический текст, используемый при создании ссылки.
  • тип : Семейство изначально представленных объектов, таких как «post_type» или «taxonomy».
  • type_label : Метка в единственном числе, используемая для описания этого типа элемента меню.
  • url : URL-адрес, на который указывает этот пункт меню.
  • xfn : Связь XFN, выраженная в ссылке этого пункта меню. Используется как атрибут rel . Перейдите по этой ссылке, чтобы узнать о них больше.
  •   _invalid : указывает, представляет ли пункт меню объект, которого больше не существует. Если это правда, пункт меню не будет отображаться.

Изменение пункта меню WordPress

Теперь, когда мы знаем, какие атрибуты можно использовать или к которым можно получить доступ, мы можем легко изменить пункты меню. Чтобы изменить каждый пункт меню, вы можете использовать фильтр, которому передается объект пункта меню в ранее упомянутой функции. Этот фильтр  wp_setup_nav_menu_item .

В этом примере мы будем использовать «Образец страницы», так как мы видели пример ее объекта WP_Post . Предположим, что эта страница является страницей, которую могут видеть только авторизованные пользователи. Затем мы должны сделать пункт меню для этой страницы недействительным, чтобы он не отображался.

Итак, здесь мы сначала проверяем, находимся ли мы в админке. Если мы смотрим на пункт меню в административной области, мы хотим, чтобы пункт меню не менялся. После этого мы проверяем заголовок нашего пункта меню и, если это не «Образец страницы», то возвращаем обычный пункт меню.

В противном случае мы проверяем, вошел ли пользователь в систему, и если нет, то делаем этот пункт меню недействительным. Мы также проверяем значение URL, которое, если оно пустое, также делает пункт меню недействительным.

Различные сценарии

Этот фильтр можно использовать для изменения элементов меню различными способами, но большинство из них, вероятно, будут использоваться для динамического изменения URL-адреса. Вот некоторые из этих сценариев:

  • Наличие страницы настроек, которая динамически получает строку запроса для идентификатора пользователя 9.0054
  • Скрытие/отображение страницы на основе состояния входа в систему
  • Скрытие/отображение страницы на основе роли пользователя
  • Динамический URL-адрес купона, который меняется каждый день с новым кодом купона
  • Добавление строк запроса Google Analytics (utm)
  • Добавление URL к пользовательским ссылкам

Заключение

Элементы меню WordPress легко расширяются и редактируются. Используя их атрибуты, вы можете понять, как отображать конкретную страницу или как не отображать ее 🙂

Это отличный пример использования ловушек-фильтров, позволяющих изменять пункты меню, если нам это нужно.

У вас когда-нибудь возникала необходимость изменить пункт меню или создать динамически создаваемый пункт меню? Поделитесь с нами своей историей!

Стать спонсором

Нравится:

Нравится Загрузка…

WP Engine — получите 3 месяца бесплатно по годовому плану Партнерская программа

Стать разработчиком WordPress

Узнайте о разработке тем и плагинов в этом полном курсе «Стать разработчиком WordPress». Это не мой бесплатный курс электронной почты, а полный курс, чтобы стать компетентным разработчиком WordPress .

Поиск:

WooCommerce для разработчиков

Я опубликовал новую электронную книгу «WooCommerce для разработчиков». Начните создавать лучшие сайты WooCommerce.

Нужна помощь с WooCommerce?

Я работаю с агентством WooCommerce Grow Development , чтобы помочь магазинам, использующим WooCommerce, разработать индивидуальную разработку и поддержку сайта.

Контакты Grow Development

Помогите мне написать больше

Стать спонсором

Подписаться на блог по электронной почте

Введите адрес электронной почты, чтобы подписаться на этот блог и получать уведомления о новых сообщениях по электронной почте.

Присоединяйтесь к 40 714 другим подписчикам

Адрес электронной почты

Категории

  • Статьи
  • БаддиПресс
  • Бизнес
  • Гутенберг
  • JavaScript
  • PHP
  • Плагины
  • Быстрый совет
  • Реагировать
  • отзывов
  • Темы
  • WooCommerce
  • WordPress

Timber\MenuItem – Документация Timber

Обзор #

Свойства #

Имя Тип Описание
дочерние элементы массив Массив дочерних элементов пункта меню. Пусто, если нет пунктов дочернего меню.
has_child_class bool Имеет ли пункт меню CSS-класс menu-item-has-child .
классы массив Массив имен классов.
current bool Связывает ли пункт меню с отображаемой в данный момент страницей.
current_item_parent bool Ссылается ли пункт меню на родительский элемент текущей отображаемой страницы.
current_item_ancestor bool Ссылается ли пункт меню на предка (включая прямого родителя) текущей отображаемой страницы.

Методы #

Имя Тип Возврат/Описание
__TOSTRING
__TOSTRING
.
дочерние элементы array/bool Массив дочерних элементов пункта меню. Пусто, если нет пунктов дочернего меню.
is_external bool Является ли ссылка внешней или нет.
ссылка строка Полный URL, например http://mysite.com/thing/ .
master_object смешанный Какой бы объект (Timber\Post, Timber\Term и т.д.) не представлял пункт меню.
меню \Timber\Menu Объект Timber\Menu , с которым связан пункт меню.
мета смешанный Любое значение, хранящееся в базе данных.
имя строка Метка пункта меню.
путь строка Путь URL, например /foo .
слаг строка URL-безопасный слаг пункта меню.
миниатюра \Timber\Image/null Объект избранного изображения.
заголовок строка Общедоступная метка, например «Foo».
type string Тип пункта меню.

Методы класса #

__toString #

__toString()

возвращает: Строка для элемента .

Волшебный метод для получения метки пункта меню.

Twig

 {{ item }} 

add_child #

add_child( \Timber\MenuItem $item )

2 возвращает :

void

Добавить новый объект Timber\MenuItem в качестве дочернего элемента этого пункта меню.

Наименование Тип Описание
$item \Timber\MenuItem5
  • 0251 Пункт меню для добавления.

  • add_class #

    add_class( string $class_name )

    возвращает: void CSS

    Добавить пункт меню.

    Имя Тип Описание

    детский №

    children( )

    возвращает: array/bool Массив дочерних элементов пункта меню. Пусто, если нет пунктов дочернего меню.

    Получить пункты дочернего меню Timber\MenuItem .

    Twig

     {% для дочернего элемента в item.children %} 

  • {{ child.title }}

    {% endfor %}

  • is_external #

    is_external()

    возвращает: bool Является ли ссылка внешней или нет.

    Проверяет, является ли пункт меню внешней ссылкой.

    Если ваш сайт example.org , то google.com/whatever является внешней ссылкой. Это полезно, когда вы хотите создать правила для цели ссылки.

    Twig

      

    link #

    link()

    возвращает: строка Полный URL-адрес, например http://mysite.com/thing/ .

    Получить полную ссылку на пункт меню.

    Twig

     {% для элемента в menu.items %} 
  • {{ item.title }}

  • {% endfor %}

    master_object #

    master_object()

    возвращает: смешанный Какой бы объект (Лес\Столб, Лес\Термин и т.д.) не представлял пункт меню.

    Позволяет разработчику получить доступ к «главному объекту» (например, публикации или странице), который представляет пункт меню

    Twig

     

    {% для элемента в menu. items %}

    {% endfor %}

    меню( )

    возвращает: \Дерево\Меню Объект Timber\Menu , с которым связан элемент меню.

    Меню Древесины.


    мета #

    мета(строка $key)

    возвращает: смешанный Любое значение хранится в базе данных.

    Получить метазначение пункта меню.

    Такие плагины, как Advanced Custom Fields, позволяют вам устанавливать настраиваемые поля для пунктов меню. С помощью этого метода вы можете получить их значение.

    Имя Тип Описание
    $key string Мета-ключ, для которого требуется получить значение.

    Twig

      link }}">{{ item.title }} 

    имя #

    90 90902 имя( 5 ) возвращает: строка Метка пункта меню.

    Получить метку пункта меню.


    path #

    path()

    возвращает: string Путь URL, например /foo .

    Получить относительный путь ссылки пункта меню.

    Twig

     {% для элемента в menu.items %} 
  • {{ item.title }}

  • {% endfor %}

    slug #

    slug( )

    возвращает: строка Слаг пункта меню, безопасный для URL.

    Получить слаг для пункта меню.

    Twig

     

      {% для элемента в menu.items %}

    • {{ item.name }}

    • { % endfor %}

    Миниатюр #

    Унижен с 1,5,2, чтобы быть удаленным в v2. 0

    Thumbnaul ()

    Thumbnaul ()

    \Timber\Image/null Объект избранного изображения.

    Получить избранное изображение сообщения, связанного с пунктом меню.

    Twig

     {% для элемента в menu.items %} 

  • {% endfor %}

    title #

    title( )

    возвращает: string Общедоступный ярлык, например "Foo".

    Получить общедоступную метку для пункта меню.

    Twig

     {% для элемента в menu.items %} 
  • {{ item.title }}

  • {% endfor %}

    type #

    type( )

    возвращает: string

    Тип пункта меню.

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

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