Как добавить панель поиска в WordPress (4 способа)

Хотите добавить панель поиска на свой сайт WordPress?

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

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

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

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

• Добавьте панель поиска в качестве виджета
• Добавить панель поиска вручную
• Добавьте панель поиска, поддерживаемую вашей темой
• Как добавить панель поиска в меню WordPress

Давайте погрузимся в это!

Зачем добавлять панель поиска на свой сайт?

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

Вот лишь несколько примеров того, зачем вам нужна панель поиска на вашем сайте:

• Повысьте коэффициент конверсии: чем проще людям найти нужный им товар на вашем сайте, тем выше шансы, что они купят у вас.
• Повышение доступности контента: создание качественного контента требует тяжелой работы и много времени. Строка поиска позволяет максимально увеличить ваши усилия и повысить вовлеченность посетителей.
• Улучшите пользовательский опыт: если посетители прекрасно провели время, изучая ваш сайт, они будут возвращаться снова и снова. Лояльная аудитория бесценна, поскольку она хочет потреблять как можно больше вашего контента.
• Skyrocket SEO: будьте уверены, все вышеперечисленное не ускользнет от внимания Google. Эти вещи снижают показатель отказов, один из важнейших факторов ранжирования. Вы хотите, чтобы он был как можно ниже, чтобы улучшить рейтинг и привлечь больше посетителей из поисковых систем.

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

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

Есть несколько способов добавить панель поиска на сайт WordPress.

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

Добавьте панель поиска в качестве виджета

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

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

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

Имейте это в виду, и давайте посмотрим, как добавить виджет поиска на веб-сайт WordPress.

1. Перейдите на вкладку Виджеты

Самый первый шаг — открыть панель управления WordPress и перейти на вкладку « Виджеты » в разделе « Внешний вид ».

Затем вам нужно решить, в какую область виджетов вы хотите добавить свой виджет. Например, в бесплатной официальной теме WordPress Twenty Twenty доступны только 2 области.

2. Добавьте новый виджет

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

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

Вот как это должно выглядеть:

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

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

3. Проверьте новую панель поиска на своем сайте.

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

Как видите, поисковая строка работает отлично.

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

Добавить панель поиска вручную

Следующий способ, который мы собираемся рассмотреть, — это как добавить панель поиска вручную, отредактировав код темы WordPress.

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

Но это не так сложно, как кажется, и ниже мы покажем вам, как это сделать шаг за шагом.

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

• Следующий процесс полностью зависит от конкретной темы, которую вы используете: хотя каждая тема имеет свой уникальный набор файлов, большинство из них содержат такие типичные файлы, как header, footer и sidebar.php.
• Избегайте внесения изменений в родительскую тему: дело в том, что вы потеряете все изменения после ее обновления. Гораздо лучше создать дочернюю тему и внести в нее изменения. Вы можете узнать о том, как создать дочернюю тему WordPress здесь.

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

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

Например, давайте добавим панель поиска рядом с панелью навигации, так как это наиболее распространенное место.

1. Заходим в редактор темы

Первый шаг — перейти в редактор тем в разделе « Внешний вид ».

На правой панели вы можете найти полный список редактируемых файлов темы.

Мы собираемся добавить панель поиска в заголовок, поэтому щелкните файл header.php .

2. Добавьте код формы поиска

Найдите строку кода:

<?php get_template_part( 'template-parts/header/site-header' ); ?>

И поместите следующий код сразу после него:

<?php get_search_form(); ?>

Вот как это должно выглядеть:

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

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

3. Проверьте свою недавно добавленную панель поиска

Как видите, рядом с панелью навигации теперь появляется панель поиска:

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

Некоторые темы WordPress поддерживают включение или отключение панели поиска.

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

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

Давайте посмотрим, как добавить панель поиска, поддерживаемую темой, на примере GeneratePress.

1. Перейдите на вкладку «Настроить».

Первый шаг — перейти на вкладку « Настройка ».

Затем перейдите в «Макет» «Основная навигация» .

Включите навигационный поиск.

После этого не забудьте нажать кнопку « Опубликовать » вверху.

2. Проверьте свою новую строку поиска

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

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

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

Как добавить панель поиска в меню WordPress

Самый простой способ добавить панель поиска в меню навигации WordPress — установить плагин SearchWP Modal Search Form.

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

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

Как лучший поисковый плагин для WordPress, SearchWP используется более чем 30 000 веб-сайтов по всему миру. Некоторые из его особенностей включают в себя:

• Поиск с автозаполнением: хотите ли вы, чтобы ваша панель поиска начинала угадывать поисковые запросы посетителей, как это делает Google? SearchWP позволяет вам сделать это за несколько кликов.
• Живые результаты поиска: WordPress показывает результаты поиска, открывая новую отдельную страницу по умолчанию. Это требует времени и может запутать некоторых посетителей. Используя SearchWP, вы можете предоставлять своим посетителям результаты поиска в реальном времени.
• Усовершенствованная поисковая система: собственная поисковая система WordPress не учитывает настраиваемые поля, содержимое документов, шорткоды и многое другое. SearchWP решает эту проблему, предоставляя вашему посетителю исчерпывающие результаты поиска.
• Информация о поисковой активности на сайте: с помощью SearchWP вы можете посмотреть, что искали посетители вашего сайта. Он открывает широкий спектр возможностей и позволяет получать новые идеи контента.
• Интеграция с WooCommerce: SearchWP поддерживает индексацию настраиваемых полей, что делает атрибуты, теги и обзоры продуктов WooCommerce доступными для поиска.

Вы можете получить премиум-версию SearchWP здесь.

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

Шаг 1: Установите и активируйте плагин модальной формы поиска SearchWP

Во-первых, вам нужно перейти на вкладку « Плагины » в панели инструментов WordPress и нажать « Добавить новый ».

Затем найдите форму модального поиска SearchWP.

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

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

Шаг 2: Добавьте панель поиска в меню

После того, как вы установили и активировали модальную форму поиска SearchWP, на панели инструментов WordPress щелкните вкладку « Внешний вид » и перейдите в « Меню ».

Как только вы окажетесь там, нажмите SearchWP Modal Search Forms .

Установите флажок « По умолчанию » и нажмите « Добавить в меню ».

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

После этого нажмите кнопку « Сохранить меню » в правом нижнем углу.

Шаг 3: протестируйте новую панель поиска

Теперь давайте взглянем на новую строку поиска. Нажмите кнопку « Посетить сайт » под названием вашего сайта.

Проверьте область меню навигации. Теперь у вас есть новый пункт меню под названием «Поиск».

Как только вы нажмете на нее, вы увидите модальную форму поиска, например:

Вот и все. Вы только что добавили панель поиска в меню навигации вашего сайта WordPress.

В этой статье вы узнали, как добавить панель поиска в WordPress несколькими способами.

Если вы готовы расширить возможности поиска в WordPress, вы можете скачать свою копию Search WP здесь.

Вас также может заинтересовать, как настроить виджет поиска в WordPress, если вы хотите настроить его алгоритм поиска.

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