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

Хотите легко создать пользовательскую форму поиска в WordPress без программирования?

Настраиваемая форма поиска позволяет посетителям легко искать и фильтровать содержимое вашего веб-сайта в несколько кликов.

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

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

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

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

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

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

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

• Помогает пользователям перемещаться по вашему контенту
• Экономит время, находя вещи быстрее
• Повышает конверсию и продажи
• Оптимизирует ваш сайт для мобильных пользователей
• Снижает показатель отказов

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

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

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

Хотя этот метод немного сложен. Это включает в себя кодирование и редактирование файлов, таких как functions.php, которые очень чувствительны. Один неверный шаг, и вы можете сломать свой сайт.

Вам нужно будет использовать функцию « get_search_form() », чтобы отобразить форму поиска на вашем сайте. В этом вам поможет файл searchform.php в вашей теме WordPress. Если его не удается найти, будет использоваться стандартный поиск WordPress по умолчанию.

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

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

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

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

Мы рекомендуем использовать SearchWP, поисковый плагин №1 для WordPress, который позволяет вам искать ВСЕ на вашем сайте. Вы также можете использовать Formidable Forms для создания пользовательской формы поиска. Ниже мы покажем вам, как создать пользовательскую форму поиска с помощью этих двух плагинов.

Создайте форму пользовательского поиска с помощью SearchWP

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

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

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

Вы получите доступ к функциям, включая:

• Индексация документов PDF и Office
• Автоматическая интеграция с Native WP Search, без программирования!
• Несколько поисковых систем
• Основа ключевого слова
• Расширенная поддержка настраиваемых полей
• Интеграция с WooCommerce
• Исключить или атрибутировать результаты
• Статистика поиска и аналитика
• Простая настройка алгоритма

Плагин также интегрируется с bbPress, WP Job Manager, Easy Digital Downloads и другими. Кроме того, вы получите доступ к гарантированной поддержке и подробной документации.

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

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

Шаг 1: Активация SearchWP

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

Затем перейдите в панель управления wp-admin и перейдите в «Плагины» «Добавить новый» «Загрузить плагин».

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

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

Получите лицензионный ключ из своей учетной записи SearchWP и вставьте его сюда, в поле «Лицензия».

Нажмите кнопку «Активировать», и вы готовы настроить поисковую систему.

Шаг 2. Настройка поисковой системы

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

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

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

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

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

Когда вы будете готовы, нажмите кнопку «Готово», чтобы сохранить изменения.

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

Все, что вам нужно сделать, это использовать ползунки для настройки «Релевантности атрибута».

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

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

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

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

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

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

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

Теперь вы успешно настроили поисковую систему WordPress. Он готов к добавлению на ваш сайт.

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

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

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

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

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

Все, что вам нужно сделать, это отредактировать сообщение в редакторе блоков и добавить новый блок под названием «Пользовательский 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>

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

В этом коде текст кнопки будет читаться как «Пользовательский поиск». Если вы хотите изменить текст кнопки поиска на что-то более креативное, вы можете внести изменения в первую строку button_text=“Custom Search” .

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

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

Затем опубликуйте или обновите его и запустите пользовательскую форму поиска. Если вам нужна помощь в этом, следуйте нашему простому руководству о том, как добавить шорткод в WordPress.

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

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

Шаг 4. Настройка дополнительных параметров

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

• Добавление Live Ajax Search : Это автоматически добавляет выпадающие результаты поиска, когда пользователь печатает. Это помогает пользователю быстрее найти свой запрос. Для этого SearchWP предлагает бесплатный плагин Live Ajax Lite Search в репозитории WordPress.
• Использование расширенных настроек для SearchWP : на вкладке « Настройки» SearchWP в меню WordPress есть вкладка «Дополнительно». На этой странице вы можете включить настройки, которые облегчат вашим пользователям поиск того, что они ищут.

Это дает вам полный контроль над работой вашей поисковой системы. Далее мы покажем вам, как настроить внешний вид вашей поисковой системы.

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

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

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

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

Если вы еще этого не сделали, рекомендуем сделать резервную копию вашего сайта. Важно иметь возможность восстановить свой сайт, если что-то пойдет не так, как планировалось. Затем вы можете использовать промежуточный сайт (клон вашего веб-сайта), чтобы сначала попробовать это.

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

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

 .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; }

Хотите узнать больше об этом? У WPBeginner есть лучшее руководство: Как легко добавить пользовательский CSS на ваш сайт WordPress.

Вот и все! Вы создали полностью настраиваемую форму поиска с помощью SearchWP.

Далее мы покажем вам еще один способ создания пользовательской формы поиска WordPress.

Создайте форму пользовательского поиска с помощью Formidable Forms

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

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

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

Тем не менее, давайте начнем учебник.

Шаг 1: Установите и активируйте плагин Formidable Forms

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

После регистрации перейдите в панель администратора WordPress и откройте вкладку « Плагины» — «Добавить новый ». Найдите плагин Formidable Forms и нажмите там кнопку « Установить ».

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

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

Если вы еще не вошли в свою учетную запись Formidable Forms, вам потребуется войти снова.

Затем вам необходимо установить на свой сайт надстройку Formidable Forms Pro и Visual Views .

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

Теперь вы готовы создать пользовательскую форму поиска в WordPress с помощью Formidable Forms.

Шаг 2. Добавьте данные для формы поиска

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

Чтобы создать новую форму, перейдите к Formidable »Forms и нажмите кнопку + Добавить новую .

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

Затем вам нужно добавить имя и описание для вашей формы.

Как только вы закончите называть свою форму, нажмите кнопку « Создать », чтобы запустить конструктор форм перетаскивания.

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

Чтобы вставить любые поля формы, вы можете просто перетащить их из меню полей в область предварительного просмотра формы.

Здесь мы добавляем эти поля: Имя, Фамилия, Электронная почта и Страна. Вы можете добавить любое из полей в соответствии с вашими требованиями.

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

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

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

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

Или вы также можете импортировать файл данных со своего компьютера. Для этого откройте вкладку « Записи » в верхней части конструктора и нажмите кнопку « Импорт ».

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

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

Шаг 3: Создайте свою форму пользовательского поиска

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

Перейдите в раздел Formidable » Forms » Add New и выберите пустой шаблон. Затем дайте пользовательской форме поиска имя и описание.

В этой форме мы собираемся добавить 3 поля формы, чтобы пользователи могли искать данные на вашем сайте. Поля: Имя, Фамилия и Страна.

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

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

Для этого добавьте этот шорткод в параметр « Значение по умолчанию » в настройках поля:

[получить параметр=fname]

Здесь «fname» — это текст, который мы используем для поля имени для связи с представлением.

В настройках поля « Фамилия » добавим такой же шорткод:

[получить параметр=lname]

Здесь «lname» — это текст, который мы используем для поля фамилии, чтобы соединиться с представлением.

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

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

[получить параметр = страна]

Здесь «страна» — это текст, который мы используем для поля страны, чтобы связать его с представлением.

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

Чтобы они отображались в одной горизонтальной строке, перейдите к параметру CSS Layout Classes для каждого поля и выберите параметр 1/4.

Если вы хотите настроить кнопку, перейдите на вкладку « Настройки» » «Стили и кнопки » и перейдите к настройкам кнопки.

Здесь вы можете изменить текст кнопки отправки на Search и выбрать выравнивание кнопки на Inline . В этом случае кнопка поиска появится в той же строке, что и поля формы.

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

Шаг 4. Создайте представление результатов поиска

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

Чтобы создать новое представление, откройте страницу Formidable » Views и нажмите кнопку + Add New .

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

В этом уроке мы собираемся выбрать представление сетки для результатов формы поиска.

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

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

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

Нажмите на значок « + », чтобы добавить свое объявление в список просмотров. Откроется редактор содержимого списков.

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

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

Когда вы закончите, нажмите кнопку « Обновить вид ». Теперь вы можете увидеть все записи на странице просмотров.

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

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

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

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

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

Шаг 5: Опубликуйте представление результатов поиска

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

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

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

Шаг 6. Подключите форму пользовательского поиска к представлению

Чтобы подключить форму поиска, перейдите в раздел Formidable » Forms и откройте параметр «Настройки» формы поиска.

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

Для этого скопируйте URL-адрес страницы и добавьте эту часть: «?fname[21]&lname=[19]&country=[22]».

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

http://yoursitename/user-directory/?fname[21]&lname=[19]&country=[22]

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

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

Для этого откройте созданное ранее представление и нажмите на опцию фильтров в верхней части страницы.

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

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

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

Протестируйте свою форму пользовательского поиска

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

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

Мы надеемся, что эта статья помогла вам легко создать пользовательскую форму поиска в WordPress с помощью плагина Formidable Forms.

Для ваших следующих шагов вы можете проверить эти ресурсы:

• Как добавить пользовательскую форму бронирования на ваш сайт WordPress
• Сравнение лучших конструкторов форм (бесплатных и платных)
• Как создать регистрационную форму с платежами PayPal в WordPress

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