Как сделать поиск по сайту на WordPress? Три основных метода

Привет!
Сегодня расскажу, как сделать форму поиска для сайта. В статье будут описаны три варианта установки поиска: с помощью кода (без плагина), с плагином и форма поиска Яндекса. Это будет еще одна статья из серии, как добавить на сайт элемент и визуализировать его в стиле своего сайта. Читайте, например, об оформлении формы обратной связи для WordPress.

Содержание статьи:

• Код поисковой формы
• WordPress плагин поиска по сайту
• Как установить поиск яндекса на сайт

Стандартный WordPress поиск в виджете

Самый простой способ создания поиска по сайту — через виджеты. Делается он за 2 минуты, добавляется в сайдбар. Заходим «Внешний вид» -> «Виджеты». Ищем в списке поиск и даем ему название «Поиск по сайту».

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

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

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

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

Вот образец кода, который будет отображать на сайте форму поиска с кнопкой «Найти»

1
2
3
4

<form role="search" method="get" id="searchform" class="searchform" action="Адрес вашего сайта">
<input type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="Поиск">
</form>

Русские фразы в этом коде мы можете заменить на свои. Не забудьте прописать адрес своего сайта в action.

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

<div class="sidebar">. Если в шапке, то открывайте файл header.php. Можете почитать подробнее о редактировании файлов шаблона WordPress.

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

Чтобы получить такой вид формы:

Нужно добавить в style.css такой код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#s {
border: 1px solid #02909d; /* толщина и цвет рамки */
color: #000; /* черный шрифт */
height: 23px; /* высота поля */
width: 155px; /* ширина поля*/
padding: 0 0 0 5px;
}
#searchsubmit {
border: 0 none;
cursor: pointer;
height: 25px; /* высота кнопки */
margin: 0 0 0 -10px; /* чтобы кнопка наехала на поле */
width: 68px;
background: #02909d; /* цвет фона кнопки */
color: #fff; /* белый шрифт */
border-radius: 3px;
}

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

В данном примере описана самая простая, стандартная форма поиска для сайта WordPress.

Плагин поиска для WordPress: какой выбрать?

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

Вот далеко не полный перечень плагинов поиска для WordPress:

• Relevanssi
• Better Search
• WP Search look
• Live Search
• Search Everything

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

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

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

А теперь перейдем к установке поиска Яндекс.

Как установить поиск Яндекса на сайт?

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

Если вы уже размещаете контекстную рекламу от Яндекс Директ, то вам следует установить Яндекс поиск на сайт. Тогда и на странице поиска по сайту будут появляться рекламные блоки 🙂

Есть лишь одно предостережение по поиску от Яндекса: если ваш сайт медленно индексируется в данной ПС, новые посты будут отсутствовать в поиске.

Для того чтоб установить поиск, переходите по ссылке — https://site.yandex.ru/ и нажмите «Установить поиск».

Если вы не зарегистрированы в сервисах Яндекса, нужно создать аккаунт.

Для начала нужно установить область поиска

Здесь главное указать url сайта.

Следующий шаг – это дизайн поисковой формы:

Далее нужно настроить то, каким образом будут показаны результаты поиска:

В примере на картинке выбран вариант «Показывать результаты на моей странице». Тут вам нужно указать страницу, на которой мы разместим впоследствии код от Яндекс. К примеру, ее название будет search. Также на этой странице вы можете выбрать цвет фона, шрифт, кол-во результатов на страницу, сортировку результатов (по дате или по релевантности).

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

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

Перед тем, как копировать код, создайте страницу для поиска, в моем случае, это — pro-wordpress.ru/search. WordPress -> Страницы -> Добавить новую

Соответственно размещаем на ней второй код «Код результатов поиска» в html-режиме и публикуем новую страницу.

Первый код «Код формы поиска» вставляем в sidebar.php или header.php, как это было описано в первом разделе статьи.

Красивое оформление поисковой формы

Форму от Яндекса мы таже можем вписать в дизайн своего сайта, как это сделано на моем блоге:

Для этого используйте следующий css-код:

1
2
3
4
5
6
7
8
9
10
11
12

#ya-site-form0 .ya-site-form__submit {
border: 0 !important; /* остутствие рамки */
background: none !important; /* прозрачный фон */
cursor:pointer; /* курсор в виде руки */
}
#ya-site-form0 .ya-site-form__input-text {
border: 0 !important;
font: 12px verdana, arial; /* размер, шрифт поля формы */
}
#ya-site-form0 .ya-site-form__search-input {
padding: 6px 6px 6px 10px !important; /* отступы внутри поля */
}

Таким образом я просто убираю всевозможные фоны и рамки, поиск получается прозрачным. И под него подкладывается Фоновая картинка, она у меня едининая для всей шапки. Главное здесь, после каждого оператора добавлять «!important;», который поставит более высокий приоритет для ваших стилей по сравнению со стилями Яндекса.

Теперь можно проверить, как работает установленная форма поиска.

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

Удачи!