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

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

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

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

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

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

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

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

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

При этом давайте посмотрим, как настроить форму поиска WordPress и страницу результатов. Мы рассмотрим два метода, которые вы можете выбрать по ссылкам ниже:

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

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

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

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

Затем введите лицензионный ключ в поле «Лицензия» и нажмите кнопку «Активировать». Вы можете найти эту информацию в своей учетной записи на веб-сайте SearchWP.

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

Как только вы это сделаете, вам нужно щелкнуть пункт меню «Двигатели». Оказавшись там, вы должны нажать кнопку «Добавить новый», чтобы создать новую поисковую систему.

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

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

Мы изменим название поисковой системы на Custom. Идите вперед и введите это в поле «Метка двигателя».

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

Не забудьте нажать кнопку «Готово», когда закончите.

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

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

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

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

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

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

Нажмите кнопку «Изменить правила» в разделе «Сообщения».

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

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

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

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

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

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

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

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

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

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

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

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

[searchwp_search_form engine="custom" var="searchvar" button_text="Custom Search"]
  
<div class="search-results-wrapper">
 [searchwp_search_results engine="custom" var="searchvar" posts_per_page=4]
  <h2>[searchwp_search_result_link direct="true"]</h2>
  [searchwp_search_result_excerpt]
 [/searchwp_search_results]
</div>
  
<div class="no-search-results-found">
 [searchwp_search_results_none]
 No results found, please search again.
 [/searchwp_search_results_none]
</div>
  
<div class="search-results-pagination">
 [searchwp_search_results_pagination direction="prev" link_text="Previous" var="searchvar" engine="custom"]
 [searchwp_search_results_pagination direction="next" link_text="Next" var="searchvar" engine="custom"]
</div>

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

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

Вы также можете изменить текст кнопки поиска на более описательный, отредактировав button_text=“Custom Search” . Остальной код может остаться прежним.

Убедитесь, что вы нажали «Опубликовать» или «Обновить», чтобы сохранить сообщение и опубликовать его.

Чтобы увидеть форму поиска в действии, просто просмотрите сообщение на своем веб-сайте WordPress. Вот как это выглядит на нашем демонстрационном сайте с темой Twenty Twenty-One.

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

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

Самый простой способ добавить поиск в реальном времени Ajax в WordPress — это бесплатный плагин SearchWP Live Ajax Lite Search, поскольку он автоматически включает поиск в реальном времени.

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

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

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

Отметьте любой из этих вариантов, который вы хотели бы:

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

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

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

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

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

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

.searchform {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#ffffff;
border:1px solid #61c3c0;
padding:10px;
height:90px;
width:600px;
}

.search-results {
font-family:arial;
font-size:16px;
background:#ace5e3;
color:#000000;
border:1px solid #61c3c0;
padding:10px;
width:600px;
}

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

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

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

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

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

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

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

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

Если вам понравилась эта статья, подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.