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

Встроенная система меню 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 id="navbar-1" class="menu">
    <li id="menu-item-1" class="menu-item menu-item-type-post_type menu-item-object-page firstmenuitem"><a href="">Родительское 1</a></li>
    <li id="menu-item-2" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children"><a href="">Родительское 2</a>
    <ul class="sub-menu">
        <li id="menu-item-3" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="">Дочернее 1</a></li>
        <li id="menu-item-4" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="">Дочернее 2</a></li>
        <li id="menu-item-5" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="">Дочернее 3</a></li>
    </ul>
    </li>
    <li id="menu-item-6" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="">Родительское 3</a></li>
    <li id="menu-item-7" class="menu-item menu-item-type-post_type menu-item-object-page"><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.

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

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