Как добавить пользовательские элементы в определенные меню WordPress

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

Вы хотите добавить пользовательские элементы в определенные меню WordPress?

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

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

Зачем добавлять пользовательские элементы в меню WordPress

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

пример навигационного меню

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

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

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

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

Добавление пользовательских элементов в конкретные навигационные меню в WordPress

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

Мы покажем вам некоторые из наиболее распространенных примеров. Для некоторых из них вам потребуется использовать плагины, а для других — добавить код.

Если вы хотите перейти к определенному разделу, вы можете использовать это оглавление:

  • Добавление всплывающего окна поиска в меню WordPress
  • Добавить иконки или изображения в меню
  • Добавьте ссылки входа/выхода в меню
  • Добавление пользовательского текста в меню WordPress
  • Добавить текущую дату в меню
  • Отображать имена пользователей в меню
  • Показывать разные меню на разных страницах

Давайте начнем.

1. Добавление всплывающего окна поиска в меню WordPress

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

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

Для этого вам необходимо установить и активировать плагин SearchWP Modal Search Form. Для более подробной информации смотрите наше пошаговое руководство по установке плагина WordPress.

Этот плагин является аддоном для SearchWP, который является лучшим поисковым плагином WordPress на рынке.

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

После установки аддона просто перейдите на страницу Внешний вид » Меню страница. В колонке «Добавить пункты меню» нажмите на вкладку «Модальные формы поиска SearchWP», чтобы развернуть ее.

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

Выберите поисковую систему, а затем нажмите на кнопку Добавить в меню.

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

Изменение ярлыка поиска

Не забудьте нажать на кнопку Сохранить меню, чтобы сохранить изменения.

Теперь вы можете посетить свой сайт и увидеть, что Поиск добавлен в ваше навигационное меню. При нажатии на него откроется форма поиска во всплывающем окне лайтбокса.

Для более подробной информации смотрите наше руководство о том, как добавить кнопку поиска в меню WordPress.

2. Добавление иконок и пользовательских изображений в конкретные меню

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

Для этого вам нужно установить и активировать плагин Menu Image Icon. Для более подробной информации смотрите наше пошаговое руководство по установке плагина WordPress.

После активации перейдите в раздел Внешний вид » Меню страницу и наведите курсор мыши на пункт меню, где вы хотите отобразить иконку или изображение.

Кнопка с изображением меню

Нажмите на синюю кнопку Menu Image, чтобы продолжить.

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

Выберите изображение или иконку

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

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

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

Иконки меню

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

3. Добавление ссылок входа / выхода в конкретное меню WordPress

Если вы используете плагин членства WordPress или управляете интернет-магазином, то вы можете захотеть позволить пользователям легко входить в свои аккаунты.

По умолчанию WordPress не имеет простого способа отображения ссылок входа и выхода в меню навигации.

Мы покажем вам, как добавить их с помощью плагина или с помощью сниппета кода.

1. Добавление ссылок входа / выхода в меню с помощью плагина

Этот метод проще и рекомендуется для всех пользователей.

Сначала вам нужно установить и активировать плагин Login or Logout Menu Item. После этого вам нужно посетить раздел Внешний вид » Меню страницу и нажмите на вкладку Вход/выход, чтобы развернуть ее.

Отсюда вам нужно выбрать пункт ‘Log in|Log Out’ и нажать на кнопку Add to Menu (Добавить в меню).

Не забудьте нажать на кнопку Сохранить меню, чтобы сохранить изменения. Теперь вы можете посетить свой сайт, чтобы увидеть пользовательскую ссылку входа-выхода в действии.

Ссылка будет динамически меняться на вход или выход в зависимости от статуса входа пользователя.

2. Добавление ссылок входа / выхода из системы с помощью пользовательского кода

Этот метод требует добавления кода на ваш сайт WordPress. Если вы не делали этого раньше, то посмотрите наше руководство о том, как добавить пользовательский код в WordPress.

Сначала вам нужно узнать название, которое ваша тема WordPress использует для конкретного расположения навигационного меню.

Самый простой способ найти это — зайти на Внешний вид » Меню и подвести курсор мыши к области расположения меню.

Найдите название местоположения меню

Щелкните правой кнопкой мыши, чтобы выбрать инструмент Inspect, и тогда вы увидите имя местоположения в исходном коде ниже. Например, наша демо-тема использует основное, нижнее и top-bar-меню.

Обратите внимание на название, используемое для целевого места, где вы хотите отобразить ссылку входа/выхода из системы.

Далее необходимо добавить следующий код в функции вашей темы.php файл или плагин для конкретного сайта.

После этого вы можете посетить свой сайт, и вы увидите ссылку для входа и выхода из системы в навигационном меню.

Ссылка на вход добавляется с помощью пользовательского кода

Эта динамическая ссылка будет автоматически переключаться на вход или выход в зависимости от статуса пользователя.

4. Добавление пользовательского текста в меню навигации WordPress

Что если вы хотите добавить в навигационное меню только текст, а не ссылку??

Вы можете сделать это двумя способами.

1. Добавление пользовательского текста в определенное меню (простой способ)

Просто перейдите в меню Внешний вид » Меню и добавить пользовательскую ссылку со знаком # в качестве URL, и текст, который вы хотите отобразить в качестве текста ссылки.

Добавьте пользовательский текст с фиктивной ссылкой

Нажмите на кнопку Добавить в меню, чтобы продолжить.

WordPress добавит ваш пользовательский текст в качестве пункта меню в левой колонке. Теперь нажмите, чтобы развернуть ее и удалить знак #.

Удалить ссылку

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

Это все еще ссылка, но нажатие на нее ничего не дает пользователю.

пользовательский текст в навигационном меню

2. Добавление пользовательского текста в меню навигации с помощью кода

Для этого метода вы добавите сниппет кода на свой сайт. Во-первых, вам нужно узнать название местоположения вашей темы, как описано выше в разделе «Ссылка для входа/выхода».

После этого вам нужно добавить следующий код в функции темы.php файл или плагин для конкретного сайта.

Просто замените место, где написано «Пользовательский текст», на свой собственный текст.

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

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

5. Добавить текущую дату в меню WordPress

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

Просто добавьте следующий код в функции вашей темы.php файл или специфический для сайта плагин.

Не забудьте заменить ‘primary’ на местоположение вашего меню.

Теперь вы можете зайти на свой сайт и увидеть текущую дату в меню WordPress.

Текущая дата в меню WordPress

Вы также можете изменить формат даты по своему усмотрению. Посмотрите наш учебник о том, как изменить формат даты и времени в WordPress.

6. Отображение имени пользователя в меню WordPress

Хотите добавить немного больше персонализации в ваше навигационное меню? Вы можете приветствовать вошедших в систему пользователей по имени в навигационном меню.

Во-первых, вам нужно добавить следующий код в функции вашей темы.php файл или специфический для сайта плагин.

add_filter( 'wp_nav_menu_objects', 'username_in_menu_items' ); function username_in_menu_items( $menu_items ) < foreach ( $menu_items as $menu_item ) < if ( strpos($menu_item->title, '#profile_name#') !== false) < if ( is_user_logged_in() ) < $current_user = wp_get_current_user(); $user_public_name = $current_user->display_name; $menu_item->title = str_replace("#profile_name#", " Привет, ". $user_public_name, $menu_item->title . "!"); > else < $menu_item->title = str_replace("#имя_профиля#", " Добро пожаловать!", $menu_item->title . "!"); > > > return $menu_items; >

Этот код сначала проверяет, добавили ли вы пункт меню с #profile_name# в качестве текста ссылки. После этого пункт меню будет заменен именем вошедшего пользователя или общим приветствием для незарегистрированных пользователей.

Далее, вам нужно перейти на страницу Внешний вид » Меню и добавить новую пользовательскую ссылку с #profile_name# в качестве текста Ссылки.

Добавьте специальный тег к пункту меню

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

Имя пользователя в навигационном меню WordPress

7. Динамическое отображение условных меню в WordPress

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

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

Этот метод позволяет создать несколько меню и отображать их только при выполнении определенных условий.

Сначала вам нужно установить и активировать плагин Conditional Menus. Для более подробной информации смотрите наше пошаговое руководство о том, как установить плагин WordPress.

После активации вам необходимо перейти Внешний вид » Меню страница. Отсюда вам нужно создать новое меню, которое вы хотите отобразить. Например, в этом примере мы создали новое меню только для вошедших в систему пользователей.

Создайте новое меню

После того как вы создали меню, перейдите на вкладку Manage Locations (Управление местоположениями).

Отсюда вам нужно нажать на ссылку Условное меню рядом с расположением меню.

Добавьте условное меню

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

Затем нажмите на кнопку ‘+ Условия’, чтобы продолжить.

Выберите меню, которое вы хотите отобразить

Это приведет к появлению всплывающего окна.

Здесь вы можете выбрать условия, которые должны быть выполнены для отображения этого меню.

Выберите условия

Плагин предлагает несколько условий на выбор. Например, вы можете отображать меню на основе определенной страницы, категории, типа поста, таксономии и т.д.

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

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

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий