Как создать пользовательскую форму поиска WordPress (шаг за шагом)

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

Нужно ли вам создать пользовательскую форму поиска для вашего сайта WordPress?

Поиск — это то, как большинство пользователей будут находить контент на вашем сайте. Если они не могут легко найти то, что ищут, то могут перейти на другой сайт.

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

Зачем создавать пользовательскую форму поиска для WordPress?

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

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

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

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

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

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

Как настроить форму и результаты поиска WordPress

Самый простой способ создать пользовательскую форму поиска WordPress — использовать SearchWP.

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

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

После активации вам необходимо посетить страницу Настройки » SearchWP страницу, а затем нажмите на пункт меню ‘Лицензия’.

Введите лицензионный ключ SearchWP

Затем введите свой лицензионный ключ в поле ‘Лицензия’ и нажмите кнопку ‘Активировать’. Вы можете найти лицензионный ключ, войдя в свой аккаунт SearchWP.

Настройка поисковой системы

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

После этого нажмите на кнопку «Добавить новый».

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

В результате будет создана новая поисковая система под названием ‘supplemental’.

Чтобы изменить название по умолчанию, просто нажмите кнопку «Источники и настройки».

Дополнительная поисковая система SearchWP

В поле ‘Engine Label’ введите название, которое вы хотите использовать для поисковой системы.

Мы будем использовать «Custom», но вы можете называть поисковую систему как угодно.

Метка двигателя SearchWP

В этом всплывающем окне вы также можете выбрать, включать ли в результаты поиска посты, страницы, медиафайлы, комментарии и пользователей. Мы оставим настройки по умолчанию такими, какие они есть.

Вы также заметите, что ‘Keyword Stems’ выбрано по умолчанию. Это помогает вам показывать релевантные результаты, включая слова, которые не имеют одинакового окончания. Например, если вы ищете слово «бег», то выделение ключевых слов гарантирует, что слова «бег», «бег» и «бегуны» будут включены в результаты поиска.

Когда вы будете довольны информацией, которую ввели во всплывающее окно, нажмите «Готово».’

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

В каждом разделе вы можете установить приоритет для различных атрибутов с помощью ползунков ‘Applicable Attribute Relevance’.

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

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

Слайдеры релевантности атрибутов SearchWP

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

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

Чтобы создать свое первое правило, нажмите кнопку «Редактировать правила» в разделе «Посты».

Редактирование правил SearchWP

Вы увидите всплывающее окно, сообщающее вам, что в настоящее время поисковая система не имеет никаких правил.

Чтобы создать первое правило, нажмите на кнопку «Добавить правило».

Добавление правила поиска в SearchWP

Вы заметите, что можете создавать правила для категорий, тегов, формата, даты публикации и ID поста.

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

Правила редактирования SearchWP

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

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

Когда вы будете довольны тем, как настроено ваше правило, нажмите на кнопку «Добавить правило».’

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

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

Нажмите кнопку Сохранить движки

Если вы увидите сообщение с предложением перестроить индекс, нажмите на кнопку ‘Rebuild Index’.

Добавление формы поиска с помощью шорткода

Расширение SearchWP Shortcodes позволяет легко добавить новую пользовательскую форму поиска постов в ваш блог или сайт WordPress.

Просто посетите сайт SearchWP Shortcodes Extension и нажмите кнопку «Загрузить при наличии активной лицензии».

Скачать SearchWP Shortcodes Extension

После этого вам нужно установить и активировать расширение точно так же, как вы устанавливали плагин SearchWP.

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

Просто отредактируйте сообщение и поместите курсор в то место, где вы хотите добавить форму поиска. После этого нажмите на плюс ‘+‘ Иконка «Добавить блок», чтобы вызвать меню блоков.

Добавление пользовательского HTML-блока

Далее введите в поисковую строку слово ‘html’ и нажмите на блок ‘Custom HTML’, чтобы добавить его в пост.

После добавления нового блока вставьте в него следующие шорткоды и HTML.

 
[searchwp_search_form engine="custom" var="searchvar" button_text="Custom Search"] 
[searchwp_search_result_link direct="true"] [searchwp_search_result_excerpt][/searchwp_search_results]

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

Если вы дали своей поисковой системе другое имя, то вам нужно будет изменить четыре раза, когда код говорит engine="custom", чтобы вместо него использовалось имя вашей системы.

По умолчанию код создает кнопку поиска, которая отображает ярлык 'Custom Search'. Если вы хотите использовать другой ярлык, просто измените текст в button_text="Custom Search" .

Наконец, нажмите кнопку "Опубликовать" или "Обновить", чтобы сохранить сообщение и сделать его реальным.

Нажмите кнопку Опубликовать или Обновить, чтобы сохранить сообщение

Чтобы увидеть форму поиска в действии, просто посетите этот пост на вашем сайте WordPress.

Вот как это выглядит на нашем демонстрационном сайте под управлением темы Twenty Twenty-One.

Предварительный просмотр формы пользовательского поиска SearchWP

Добавление живого Ajax-поиска

Живой поиск Ajax улучшает вашу форму поиска, автоматически показывая результаты поиска по мере того, как пользователь вводит свой запрос.

Это похоже на то, как работают поисковые системы, такие как Google.

Пример страницы живого поиска

Самый простой способ добавить живой поиск Ajax в WordPress - это использовать бесплатный плагин SearchWP Live Ajax Lite Search.

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

Использование расширенных настроек для SearchWP

Далее стоит включить некоторые настройки, которые облегчат пользователям поиск того, что они ищут.

Чтобы сделать это, перейдите по адресу Настройки " SearchWP и нажмите на вкладку "Дополнительно.'

Расширенные настройки SearchWP

Теперь вы можете щелкнуть, чтобы отметить любой из вариантов, который вы хотели бы использовать на своем сайте:

  • Частичные совпадения отображают результаты, которые не совсем соответствуют термину, который ищет посетитель.
  • Автоматическое "Вы имели в виду?" исправления предложат немного другой поисковый запрос, который будет соответствовать большему количеству постов на вашем сайте.
  • Поддержка "поиска по цитатам/фразам" позволит вашим пользователям использовать кавычки при поиске точных фраз.
  • Выделение терминов в результатах поиска облегчит вашим посетителям поиск того, что они ищут в результатах поиска.

Стилизация формы поиска и страницы результатов

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

Вы можете переопределить правила стиля вашей темы, добавив пользовательский CSS.

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

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

.форма поиска < font-family:arial; font-size:16px; background:#ace5e3; color:#ffffff; border:1px solid #61c3c0; padding:10px; height:90px; width:600px; >.search-results

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

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

Предварительный просмотр пользовательского CSS SearchWP

Измерение результатов поиска и улучшение конверсии

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

SearchWP поставляется с расширением метрики поиска, которое покажет вам, как именно работает поиск на вашем сайте.

Метрики SearchWP

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

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

Пример всплывающего окна OptinMonster spin to win

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

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

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