Найти тему
Журнал «Код»

Как добавить строку поиска на сайт

Оглавление

«Будем искать»

Что делаем: добавляем поиск Яндекса на свой сайт, чтобы посетители могли найти на сайте что-нибудь эдакое (например, такое же, но с перламутровыми пуговицами). Получится, что вся поисковая мощь Яндекса будет служить вашим личным целям.

Время: 5 минут.

Понадобится: аккаунт в Яндексе.

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

Регистрируемся в сервисе

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

-2

Заполняем данные о сайте

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

-3

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

Когда ввели все сайты — нажмите «Добавить»
Когда ввели все сайты — нажмите «Добавить»

Возле сайта появилась зелёная отметка, значит, всё в порядке
Возле сайта появилась зелёная отметка, значит, всё в порядке

Когда это будет сделано, переходим к следующему шагу.

Настраиваем внешний вид строки поиска

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

-6

Настраиваем внешний вид результатов поиска

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

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

-7

Проверка работы

На этом этапе Яндекс предлагает увидеть, как всё будет работать. Для проверки введём слово «фото» и посмотрим, что получится:

-8

-9

Фотокарусель найдена — значит, поиск работает. Возвращаемся назад и нажимаем на кнопку «Далее к шагу 5».

Копируем код для вставки

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

-10

Мы добавим его в самое начало нашей страницы mihailmaximov.ru, но вы можете добавить этот код куда угодно:

-11

Посмотреть на работу поиска на странице проекта.