Как вывести подменю только на родительской странице в 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.

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

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

VN:F [1.9.22_1171]
Rating: 5.0/5 (1 vote cast)

Об авторе ADv

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

    Добрый день.
    правильно ли я понимаю, что данную часть кода необходимо вставить в Style.css?

    .menu .sub-menu

    {

    display: none;

    }

    • ADv

      Да, верно

      • Евгений

        Тогда я могу уточнить у Вас.
        Проделывая данную манипуляцию, я могу получить результат в виде
        вывода дочерних страниц только данного родительского пункта.
        Т.е. только вставкой данного куска кода в файл Style.css (например в конец).
        Или хитрость в том, что нужно вставлять в определенное место.
        Я Вас к тому спрашиваю, что при вставке данного кода в самый конец файла Style.css, дочерние пункты меню к сожалению не скрываются.
        Будьте добры подскажите.
        Благодарю.

        • ADv

          Проверьте названия классов. Скорее всего, у Вас они называются иначе.

Scroll To Top