Добавляем панель поиска в меню WordPress

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

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

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

Почему вы должны добавить поиск на свой WordPress сайт?

Давайте сначала обсудим пользу панели поиска и зачем ее, вообще, нужно использовать на сайте. Ведь может она не так и важна? 🤔

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

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

Как добавить панель поиска в блок навигации WordPress?

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

К счастью, есть много различных поисковых плагинов WordPress, которые позволяют добавлять панель поиска в разные места сайта. И одним из таких плагинов могу порекомендовать Ivory Search. С которым мы и будем сегодня работать.

Итак, устанавливаем и активируем плагин, после чего в меню админский части движка увидим дополнительную кнопку для настройки плагина.

Плагин Ivory Search

При первом заходе в данный раздел вам будет предложено подписаться на оповещения от разработчика. Я откажусь от этого нажав «Продолжить».

предложение подписки на оповещения от Ivory Search

Дальше попадаю уже непосредственно в сами настройки плагина поиска. Где можно создать новую форму поиска. Нажав кнопку «Add New».

Создания новой панели поиска

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

Вкладка настроек допусков поиска

Post — поиск по заметкам.

Page — поиск по страницам.

Attachment — поиск по различным прикреплениям.

И ниже можно более подробно настроить эти пункты.

Дополнительные пункты настроек поиска

Далеко не все настройки доступны в бесплатной версии плагина.

После настроек на этой вкладке не забываем сохранить их нажав «Save Form».

На вкладке «Excludes» мы можем уже исключить контент из поиска, по этим же доступным параметрам.

Настройка пунктов запрета поиска

Также после настроек не забываем сохранять их.

Разделы «Customize» и «Ajax» доступные только в премиальной версии плагина. Поэтому мы их в данном уроке рассматривать не будем.

И в разделе «Options» полезным будет настройка вывода количества постов в поиске. Я оставлю значение 10.

Настройка количества вывода поиска

Дальше переходим в раздел «Settings» и тут настраиваем уже сам вывод поиска в определенных местах, мобильный вывод, написать свой кастовый CSS стиль, ввести слова запрещённые для поиска и так дальше.

Дополнительные настройки вывода поиска

И в пункте «Menu Search» мы можем настроить вид и анимацию меню. Я выбираю вот такие настройки.

Настройка анимации поиска

Вот и все. Переходим на наш сайт и смотрим результат.

До:

До установки плагина

После (обновляем страницу и тестируем поиск):

Результат работы плагина Ivory Search

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

Главный редактор
Опубликовал статей: 102
Просмотров: 58 0