Вы когда-нибудь хотели, чтобы меню WordPress было более интеллектуальным? Возможно, вы желаете показывать разные варианты навигации для зарегистрированных пользователей или отображать определенные пункты меню только на некоторых разделах.
По умолчанию ВордПресс показывает всем одно и то же статическое меню. Это может сделать сайт общим и бесполезным. Я работал со многими владельцами веб-проектов, которые сталкивались именно с этой проблемой. К счастью, условные меню могут полностью изменить пользовательский опыт.
Когда навигация WP адаптируется к разным посетителям и контекстам, люди быстрее находят то, что нужно. А вы можете направлять их к действиям, которые наиболее важны для бизнеса.
В этом руководстве я расскажу, как добавить условную логику в меню WordPress. Вы узнаете, как создать динамическую навигацию, которая меняется в зависимости от ролей пользователей, конкретных страниц или любых других критериев, которые выберете.
- Зачем добавлять условную логику в меню WordPress
- Создание новых навигационных меню в WordPress
- Создание новых навигационных меню WordPress с помощью классического редактора
- Создание новых навигационных меню в WordPress с помощью FSE
- Отображение другого меню для зарегистрированных пользователей WordPress
- Отображение другого меню для авторизованных пользователей с помощью классического редактора
- Отображение другого меню для авторизованных пользователей с помощью FSE
- Отображение разных меню WordPress в зависимости от роли пользователя
- Показ различного меню в зависимости от роли пользователя с помощью классического редактора
- Отображение меню в зависимости от роли пользователя с помощью FSE
- Отображение разных меню для разных страниц в WordPress
- Отображение разных меню для страниц с помощью классического редактора
- Отображение разных меню с помощью FSE
- Скрытие меню навигации на лендингах в WordPress
- Скрытие меню на лендингах WordPress с помощью классического редактора
- Скрытие меню на лендингах WordPress с помощью FSE
- Бонус: плагин WPBar для улучшения меню с условной логикой
- Устранение неполадок: почему меню не меняется
- FAQ
- Заключение
Зачем добавлять условную логику в меню WordPress
Условная логика в меню WP позволяет автоматически изменять навигацию сайта в зависимости от определенных критериев.
В отличие от стандартного поведения сайта ВордПресс, который отображает одно и то же статическое меню для всех, условные вариации позволяют показывать разные ссылки в зависимости от пользователя или страницы.
Это позволяет более эффективно направлять посетителей, показывая им только те ссылки, которые имеют отношение к их текущему контексту.
Например, можете использовать правила для создания кастомных меню для зарегистрированных пользователей. Вот несколько примеров использования на разных типах сайтов:
- Интернет-магазин. Выделяйте продукты или специальные предложения в зависимости от истории просмотров или покупок клиента.
- Сайт членства WordPress. Показывайте эксклюзивные страницы и ресурсы только для зарегистрированных участников.
- Платформа онлайн-обучения. Отображайте различные категории курсов или уроки в зависимости от прогресса студента.
Вы можете думать об этом как о контроле доступа к меню WordPress.
Создание новых навигационных меню в WordPress
Первый шаг — создать дополнительные навигационные меню, которые хотите отображать в ВордПресс. После этого можете использовать условную логику, чтобы решить, когда каждое меню будет отображаться.
Далее я покажу, как добавить условные меню в WP как для классических тем, так и для блочных тем.
Создание новых навигационных меню WordPress с помощью классического редактора
Этот метод подходит для пользователей классических тем.
Чтобы создать новые навигационные меню, просто перейдите на страницу «Внешний вид» > «Меню» в дашборде WordPress.
Если у вас уже есть меню навигации, которое используете на своем веб-проекте для всех пользователей, то оно может стать меню по умолчанию.
Затем нужно будет нажать на ссылку «Создать новое меню», чтобы создать новый пункт меню.
Например, можете создать одно меню для отображения зарегистрированным пользователям, а другое — для показа на определенной странице или в нужной категории WP.
В левой части экрана вы увидите список страниц сайта. Просто установите флажок рядом со страницей, которую хотите добавить в меню, и нажмите кнопку «Добавить в меню».
Вы также можете перетаскивать пункты меню в правой части экрана, чтобы изменить их порядок.
Ниже на странице можете выбрать место для отображения меню. Но сейчас не нужно назначать место для этого меню. Я сделаю это на следующем шаге.
Не забудьте нажать кнопку «Сохранить меню», чтобы сохранить изменения.
Создание новых навигационных меню в WordPress с помощью FSE
Чтобы создать новые навигационные меню в блочной теме с помощью Full Site Editing (FSE), необходимо сначала перейти в раздел «Внешний вид» > «Редактор» в дашборде ВордПресс.
Откроется редактор сайта. В зависимости от темы, можете увидеть список опций меню слева. Просто нажмите «Навигация».
Если вам интересно, в этом руководстве я использую тему Twenty-Twenty Three.
Здесь можете увидеть все существующие меню.
Чтобы добавить новое, просто нажмите на значок плюса или кнопку «Редактировать», чтобы визуально управлять меню. Затем вы увидите всплывающее меню, в котором можно выбрать нужный вариант.
Отображение другого меню для зарегистрированных пользователей WordPress
Часто бывает полезно отображать разные меню навигации для пользователей в зависимости от того, вошли ли они на сайт или нет.
Например, можете включить ссылки для входа и регистрации для незарегистрированных пользователей и добавить линки для выхода из системы в меню для зарегистрированных людей.
Если управляете интернет-магазином WooCommerce, то можете включить в меню элементы для клиентов, которые скрыты от широкой публики.
Отображение другого меню для авторизованных пользователей с помощью классического редактора
Для начала необходимо установить и активировать плагин Conditional Menus.
Перейдите в раздел «Плагины» > «Добавить новый» в дашборде ВордПресс.
На следующей странице воспользуйтесь строкой поиска, чтобы найти плагин.
Когда он появится в результатах, нажмите «Установить сейчас», а после завершения установки нажмите «Активировать».
После активации перейдите в раздел «Внешний вид» > «Меню» и переключитесь на вкладку «Управление расположением».
На вкладке «Управление расположением» можете указать, какое меню должно отображаться в определенных областях сайта. Здесь увидите список доступных мест для меню вместе с теми, которые в настоящее время им назначены.
Эти места могут варьироваться в зависимости от используемой темы WP. Например, на моем демо-сайте в месте «Основное меню» в настоящее время отображается навигационное меню под названием «Главное меню».
Представьте себе «Место меню» как рамку для фотографии на стене, а «Меню» — как фотографию внутри нее. Плагин Conditional Menus позволяет автоматически менять ее в зависимости от того, кто на нее смотрит.
Чтобы отобразить другое меню при выполнении определенных условий, нажмите ссылку «+ Условное меню» и выберите другое из раскрывающегося списка. Для этого урока я беру «Меню для авторизованных пользователей».
Затем нужно нажать ссылку «+ Условия».
Откроется попап, в котором вы увидите несколько условий на выбор.
Просто установите флажок рядом с опцией «Пользователь вошел в систему», а затем нажмите кнопку «Сохранить».
Теперь можете посетить свой сайт, чтобы увидеть меню для вошедших в систему пользователей в действии. Вы можете выйти из системы, чтобы увидеть меню навигации, которое отображается для всех других пользователей.
Отображение другого меню для авторизованных пользователей с помощью FSE
Если вы используете блочную тему, понадобится плагин Conditional Blocks.
Итак, давайте сначала установим и активируем его. Для начала перейдите в «Плагины» > «Добавить новый».
Затем воспользуйтесь полем поиска, чтобы найти плагин.
Когда он появится в результатах, нажмите «Установить сейчас» и не забудьте нажать «Активировать» после завершения установки.
После активации перейдите в «Внешний вид» > «Редактор», чтобы открыть редактор сайта.
Нажмите «Шаблоны», а затем «Все части шаблона».
Теперь вы должны увидеть все части шаблона, которые могут включать футер, хедер и комментарии — в зависимости от активной темы.
Найдите часть шаблона «Хедер». Просто нажмите на значок меню с 3 точками и выберите «Редактировать».
Вы будете перенаправлены в редактор блоков.
Нажмите на блок навигационного меню, чтобы добавить условные операторы. После этого перейдите на вкладку «Блок» на правой панели, чтобы начать кастомизацию.
Если прокрутите вниз вкладку «Блок», то увидите раздел «Условные блоки». Просто щелкните по нему, чтобы открыть параметры кастомизации.
Затем нажмите кнопку «Изменить видимость».
Появится попап, в котором вы можете установить условия для выбранного меню навигации.
Здесь возможно открыть раскрывающийся список «Условие» и выбрать опцию «Пользователь вошел в систему».
Просто закройте окно, нажав кнопку «X» в правом верхнем углу.
После этого вы должны увидеть условие, добавленное в раздел «Условные блоки». Нажмите «Сохранить», чтобы обновить меню навигации.
Теперь, если посетите свой веб-проект, вот как он может выглядеть для пользователей, не вошедших в систему, и для пользователей, вошедших в систему:
Отображение разных меню WordPress в зависимости от роли пользователя
После того, как пользователь вошел в систему, можете отображать разные навигационные меню в зависимости от роли, которую ему назначили.
Например, возможно включить дополнительные пункты меню для администратора и более ограниченные пункты для автора. На сайте с членством можете предоставить разные уровни доступа для разных уровней.
Показ различного меню в зависимости от роли пользователя с помощью классического редактора
Как и в предыдущем разделе, понадобится плагин Conditional Menus.
Затем перейдите на страницу «Внешний вид» > «Меню» и переключитесь на вкладку «Управление расположением».
Вы должны добавить соответствующее условное меню для выбранной роли пользователя. Для этого урока я выберу меню «Администратор навигационного меню».
После этого можете нажать на ссылку «+ Условия», чтобы выбрать роль пользователя.
Вам нужно будет нажать на вкладку «Роли пользователей», чтобы увидеть флажки для каждой роли пользователя на сайте. Просто нажмите на роли пользователей, которые будут видеть это меню, а затем кликните «Сохранить», чтобы сохранить изменения.
Отображение меню в зависимости от роли пользователя с помощью FSE
Чтобы отображать другое меню в зависимости от ролей пользователей в FSE, вы будете использовать плагин Content Control.
Для этого перейдите в раздел «Плагины» > «Добавить новый» в дашборде ВордПресс.
Затем воспользуйтесь полем поиска, чтобы быстро найти расширение.
Как только он появится в результатах, нажмите «Установить сейчас» и не забудьте кликнуть «Активировать» после завершения установки.
После активации плагина перейдите в раздел «Внешний вид» > «Редактор» в дашборде WP.
Затем выберите «Шаблоны» и нажмите «Все части шаблона».
После этого отобразится список доступных частей шаблона, таких как хедер и футер, комментарии и т. д., в зависимости от активной темы блока.
Найдите шаблон «Хедер», нажмите на меню с 3 точками и выберите «Редактировать».
В редакторе можете выбрать меню навигации, к которому нужно добавить условные операторы.
Например, я скрою ссылку на страницу «Блог», чтобы ее видели в меню только подписчики.
Это только скрывает ссылку в меню. Чтобы полностью защитить содержимое страницы от несанкционированного доступа, вам следует использовать плагин членства.
Отсюда перейдем на правую панель и переключим тумблер «Включить элементы управления» в разделе «Элементы управления блоком».
Затем прокрутите вниз до раздела «Правила пользователя», чтобы настроить условия.
Сначала просто откройте попап «Кто может видеть этот контент». Выберите «Зарегистрированный пользователь».
Затем в раскрывающемся меню «Роль пользователя» вы можете выбрать «Соответствующий». А в «Выбранные роли» выберем «подписчик».
После этого нажмите кнопку «Сохранить».
Отображение разных меню для разных страниц в WordPress
В WordPress можно отображать разные меню для разных страниц.
Например, в разделе с политикой конфиденциальности можно показать дополнительные пункты меню, такие как ссылка на уведомление о файлах cookie.
Отображение разных меню для страниц с помощью классического редактора
Для этого понадобится плагин Conditional Menus.
После активации перейдите в раздел «Внешний вид» > «Меню», затем выберите «Управление расположением».
Выбрав соответствующее меню навигации, можете нажать на ссылку «+ Условия».
На этот раз нужно нажать на вкладку «Страницы». Вы увидите список всех страниц сайта.
Затем нужно поставить галочку рядом с каждой страницей, на которой хотите отобразить меню навигации. После этого нажмите на кнопку «Сохранить».
Отображение разных меню с помощью FSE
Если используете блочную тему, я рекомендую применять бесплатный плагин Block Visibility. Он позволяет точно контролировать, кто видит меню.
Для начала установите и активируйте расширение, перейдя в раздел «Плагины» > «Добавить новый» в дашборде ВордПресс.
Затем воспользуйтесь полем поиска, чтобы найти плагин.
Когда он появится в результатах, нажмите «Установить сейчас» и не забудьте кликнуть «Активировать» после завершения установки.
После активации плагина откройте «Внешний вид» > «Редактор» в дашборде WordPress.
Затем нажмите «Шаблоны», а далее «Все шаблоны».
Это отобразит все доступные части шаблона, включая хедеры и футеры, а также комментарии, в зависимости от активной темы.
Отсюда нажмите на хедер или область, где находится меню навигации, чтобы отредактировать его.
В редакторе перейдите в раздел «Видимость».
Затем найдите параметры «Расположение» или «URL-путь».
Затем можете добавить URL-путь страницы «Политика конфиденциальности» в область «URL-путь (Содержит)».
URL-путь — это часть веб-адреса, которая следует за основным названием сайта и указывает на конкретную страницу или элемент.
Например, в адресе https://example.com/about часть /about является URL-путем.
Если вы хотите нацелиться на свою домашнюю страницу, URL-путь — это просто слэш ( / ).
Если не знаете, каков URL-путь страницы «Политика конфиденциальности», перейдите в раздел «Страницы» > «Все страницы». Затем найдите раздел «Политика конфиденциальности» и наведите на него курсор.
Просто нажмите кнопку «Быстрое редактирование». Вы увидите раздел «Слаг». URL-путь должен состоять из символа «/», за которым следует слаг страницы.
Или просто перейдите на страницу, скопируйте текст после имени домена и вставьте его сюда. Обязательно включите косую слэш в начале.
Вот и все. Нажмите «Сохранить», чтобы сохранить изменения.
Скрытие меню навигации на лендингах в WordPress
На сайте могут быть страницы, на которых вы не хотите отображать меню навигации, например, лендинги.
Лендинг предназначен для увеличения продаж или привлечения потенциальных клиентов для бизнеса. На этих страницах вы захотите свести к минимуму отвлекающие факторы и предоставить пользователям всю информацию, необходимую для выполнения конкретного действия.
Скрытие меню на лендингах WordPress с помощью классического редактора
Вы можете сделать это с помощью плагина Conditional Menus, который я использовал в предыдущем разделе.
После активации плагина перейдите в раздел «Внешний вид» > «Меню». Выберите «Отключить меню» в раскрывающемся списке.
Далее нажмите на ссылку «+ Условия», чтобы выбрать, когда отображать меню.
Вы должны нажать на вкладку «Страницы» и поставить галочку рядом с пунктом «Мой лендинг».
Не забудьте нажать кнопку «Сохранить», чтобы сохранить и применить настройки.
Скрытие меню на лендингах WordPress с помощью FSE
Для блочных тем можете продолжить использовать плагин Block Visibility, о котором я упоминал ранее. Но на этот раз вы введете URL-адрес в поле «URL-адрес (Не содержит)».
После активации плагина перейдите в раздел «Внешний вид» > «Редактор» в админ-панели.
Оттуда выберите «Шаблоны», затем кликните «Все части шаблона».
Вы увидите список частей шаблона, таких как хедер, футер и комментарии, в зависимости от вашей текущей активной темы. Например, можете найти «Хедер», открыть меню с 3 точками и нажать «Редактировать».
В редакторе найдите раздел «Видимость».
Здесь вы можете выбрать «URL-путь» и ввести путь к лендингу в поле «URL-путь (Не содержит)».
После этого просто нажмите кнопку «Сохранить».
Бонус: плагин WPBar для улучшения меню с условной логикой
В статье я рассмотрел способы выводить разные типы стандартного меню WordPress, созданного при помощи темы, по заданным условиям. Но есть еще один интересный метод, которым я хотел бы поделиться — создание отдельных меню при помощи плагина WPBar с их настройкой под конкретные разделы проекта.
WPBar — это премиальный плагин, который позволяет создать плавающее меню с иконками, при этом задав для них различную функциональность.
Если при создании классического меню требуются знания программирования, чтобы вывести в нем интерактивные элементы (кнопки «Поделиться», корзина WordPress с отображением количества товаров в ней, оглавление конкретной страницы), то в WPBar подобное можно сделать в понятном интерфейсе за пару минут.
В самом плагине вебмастер создает так называемые «Панели». По сути, это меню для которых:
- Выбираются конкретные элементы из списка доступных.
- Устанавливаются настройки внешнего вида.
- Определяются правила показа.
- Задается условная логика вывода.
Остановлюсь на списке доступных элементов, поскольку именно из них складывается само меню:
- Переход на главную страницу. Мгновенный выход на главную.
- Любая внутренняя ссылка. Возможность добавить переход на выбранный раздел или страницу ресурса.
- Кнопка «Поделиться». Нажатие открывает встроенные инструменты браузера или копирует адрес в буфер обмена.
- Основное меню. Разворачивает стандартную навигационную панель WordPress.
- Блок с кастомным содержимым. Дает добавить произвольный HTML-код для создания уникальной панели с текстом, изображениями или формами.
- Форма поиска. Есть возможность задать отдельный поиск по постам WordPress, товарам WooCommerce или любым другим типам контента.
- JS-действие по клику. При нажатии выполняется указанный JavaScript-код — удобно использовать для динамических элементов или интеграций сторонних сервисов.
- Корзина магазина. Кнопка перехода в корзину WooCommerce. На ней можно отображать количество товаров.
- Профиль покупателя. Направляет авторизованного пользователя в раздел личного кабинета WooCommerce.
- Автооглавление. Автоматически генерирует структуру страницы на основе H1–H6 заголовков. Удобно использовать в блоге для объемных статей.
- Подъем наверх. Стандартная кнопка для скролла к началу страницы, что ускоряет навигацию по сайту.
- Пользовательский пункт. Можно создать уникальный элемент, например, прямо в меню вывести промокод.
Для каждого элемента указывается произвольное название, выбирается иконка, можно указать размер и присвоить дополнительный класс.
Добавленное меню располагается внизу или сверху экрана на мобильных устройствах и PC. Также настраивается его логика появления, например, чтобы панель отображалась только при прокрутке определенного количества пикселей от начала страницы.
Разработчики предусмотрели несколько вариантов дизайна панели, что позволяет ее органично встроить в любую тему. Плюс есть детальные настройки внешнего вида для каждого элемента.
Присутствуют широкие опции отображения меню. Вебмастер имеет возможность создать неограниченное количество панелей, а далее они привязываются к конкретным разделам, категориям, страницам. Тем самым, легко создать свое меню для раздела магазина, которое будет кардинально отличаться от бара для блога.
WPBar — самый простой способ улучшить меню на сайте. Для использования плагина не требуется знаний программирования. В нем присутствует виртуальный тур, который быстро знакомит с доступными опциями, после чего остается настроить меню в соответствии с требованиями сайта.
Скидка на WPBar
Устранение неполадок: почему меню не меняется
Если настроили условные правила, но меню не меняется при тестировании, причиной обычно является кэширование.
Многие плагины кэширования WordPress хранят статическую версию меню для улучшения производительности. В этом случае изменения не отображаются сразу.
Чтобы устранить эту проблему, попробуйте очистить кэш WP и проверить еще раз.
FAQ
Заключение
Навигационные меню — это мощные инструменты веб-дизайна. Они позволяют направлять пользователей в самые важные разделы блога или веб-сайта ВордПресс.
