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

WordPress — самая популярная в мире система управления контентом (CMS). Помимо того, что это мощный и сверхгибкий инструмент, он также чрезвычайно прост в использовании. Люди без опыта веб-дизайна или кодирования могут использовать WordPress для запуска своего веб-сайта за считанные минуты.

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

Так не пойдет!

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

• Что такое пользовательская форма поиска WordPress?
• # 1 Применение плагина
• # 2 Изменить код
• # 3 Используйте пользовательский CSS для оформления формы поиска и страницы результатов

Что такое пользовательская форма поиска WordPress?

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

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

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

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

И последнее, но не менее важное: инструмент пользовательского поиска можно стилизовать, чтобы он отражал эстетику или бренд вашего веб-сайта!

Что такое функция get_search_form?

get_search_form относится к функции, которая отображает форму поиска на вашем сайте. Вы можете найти его на вкладке « Внешний вид » > « Виджеты » в панели администратора WordPress.

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

Как настроить форму поиска в WordPress

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

# 1 Применение плагина

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

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

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

# 2 Изменить код

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

С функцией

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

 функция custom_search_form($form) {
$form = '<form role="search" method="get" class="searchform" action="' .home_url( '/' ). '" >
<div class="custom-form"><label class="screen-reader-text" for="s">' . __( 'Поиск:' ) . '</метка>
<input type="text" value="' .get_search_query() . '" name="s" />
<input type="submit" value="'.esc_attr__('Поиск') .'" />
</div>
</форма>';
вернуть $ форму;
}

add_filter('get_search_form', 'custom_search_form', 40);

Что делает этот код, так это сохраняет вашу пользовательскую форму в переменной $form , которая заменит инструмент поиска WordPress по умолчанию благодаря хуку add_filter .

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

С шаблоном

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

Для этого откройте выбранную вами IDE и создайте новый файл. Назовите его «searchform.php» . Вставьте следующий код в редактор:

 <?php
/* Пользовательская форма поиска */
?>
<form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>" class="input-group mb-3">
<div class="группа ввода">
<input type="search" class="form-control border-0" placeholder="Search" aria-label="search nico" name="s" value="<?php echo esc_attr(get_search_query()); ? >">
<div class="input-group-append">
<span class="input-group-append p-0">
<i class="fas fa-search text-muted"></i>
</span>
</div>
</div>
</форма>

Измените приведенный выше код по своему усмотрению!

# 3 Используйте пользовательский CSS для оформления формы поиска и страницы результатов

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

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

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

 .форма поиска {
семейство шрифтов: arial;
размер шрифта: 16 пикселей;
фон:#ace5e3;
цвет:#ffffff;
граница: 1px сплошная #61c3c0;
отступ: 10 пикселей;
высота: 90 пикселей;
ширина: 600 пикселей;
}

.результаты поиска {
семейство шрифтов: arial;
размер шрифта: 16 пикселей;
фон:#ace5e3;
цвет:#000000;
граница: 1px сплошная #61c3c0;
отступ: 10 пикселей;
ширина: 600 пикселей;
}

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

Например, если вы не хотите менять семейство шрифтов в форме поиска, просто удалите «font-family:arial;» линия.

Создайте свою собственную форму поиска WordPress сегодня!

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

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

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

Мы надеемся, что это руководство было полезным, и что к моменту прочтения вы уже настроили и запустили свою пользовательскую форму поиска!