кнопка наверх

Как сделать поиск по сайту на 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.

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

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-сайте и как она работает:

форма поиска на 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-код для своего блога, либо установить форму поиска от Яндекса.

Удачи!


1 звезда2 звезды3 звезды4 звезды5 звезд (4 оценок, среднее: 4,00 из 5)
Загрузка...
like
Понравилось?
Подпишитесь на блог и получайте новые статьи!
Добавляйтесь в соц. сетях:
  1. Роман:

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

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

    Ответить
    • Роман:

      хах... а как код вставить...?

      Ответить
      • Анна:

        Чтобы вставить код используйте теги <code> </code>

        Ответить
    • Анна:

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

      Ответить
      • Роман:

        Спасибо за совет! Правда я попробовал input text засунуть в div и также input submit в div, что-то как то у меня не очень получилось((

        Ответить
  2. Андрей:

    Здравствуйте!Подскажите(или,где почитать),а как,реализовать на своем сайте (сайт на wordpress).точно такую же форму поиска,как Яндекс.Недвижимость?У меня уже в теме (WP Residence) есть встроенный поиск,но не устраивает функционал.Просто тупо повторить форму поиска как у Яндекс.Недвижимость. Если добавлять плагины поиска,то боюсь будут конфликтовать с уже встроенным,да и нужно ли?

    Ответить
    • Анна:

      С таким не сталкивалась. Попробуйте спросить у техподдержки самого Яндекса:) думаю, нужно копать в сторону API яндекса tech.yandex.ru

      Ответить
  3. Юрец:

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

    Ответить
    • Анна:

      Пришлите адрес вашего сайта.

      Ответить
      • Юрец:

        виртуальная-жд на главной странице

        Ответить
  4. Алина:

    здравствуйте, а у меня с темой media center шел уже поиск, который устраивает ,но есть одно но. внутри написано «поиск» на английском. обыскала всё ,перевести не могу. не подскажите как быть?

    Ответить
    • Анна:

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

      Ответить
      • Алина:

        спасибо, уже всё нашла. воспользовалась локализатором.

        Ответить
  5. Алина:

    ещё хотела спросить, как делать так, чтобы при активном курсоре эта надпись вообще исчезала.

    спасибо.

    Ответить
  6. Yurez:

    Здравствуйте. Скажите, как сделать поиск по одной странице? Объясню, есть страница, на ней список банков. Вот нужно сделать поиск по этим банкам.

    Ответить
  7. AlexZ:

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

    Ответить
  8. Мария:

    Здравствуйте, как можно ограничить количество слов в выдаче на странице результатов поиска, например, на странице 5 результатов и под заголовками небольшой ананос из 250 знаков, а надо например чтобы всего из 130 знаков, можно это как-то сделтаь?

    Ответить
  9. Николай:

    Где взять __YASEARCHID__ и прочее

    Ответить
  10. Дарья:

    Здравствуйте! Мне надо установить поиск регионов на сайте. Наgример: Выберете свой город из выпадающего списка. Как это сделать, пожалуйста, подскажите? Спасибо.

    polyakovadarya@yandex.ru

    Ответить
  11. Елена:

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

    Ответить
Ваш комментарий: