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

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

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

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

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

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

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

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

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

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

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

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

Когда ввели все сайты — нажмите «Добавить»
Возле сайта появилась зелёная отметка, значит, всё в порядке

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

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

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

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

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

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

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

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

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

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

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

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

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

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Алина Грызлова

Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Вам может быть интересно
easy
[anycomment]
Exit mobile version