Как сделать поиск по сайту

Здравствуйте уважаемый посетитель!

Сегодня, для того, чтобы иметь возможность использовать Яндекс.Поиск мы добавим размещенный в интернете тестовый сайт avtobezugona.ru в Яндекс.Вебмастер и подтвердим права на его управление.

Следует отметить, что сервис Яндекс.Вебмастер является важнейшим средством для ведения и продвижения своего интернет-ресурса. Который позволяет получать необходимую информацию о функциональном состоянии сайта, а также доступ к инструментам, предоставляющим возможность ускорить индексацию страниц, проверить правильность robots.txt, загрузку карты sitemap.xml и т.д.

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

Помимо Яндекс.Вебмастера существует и аналогичный инструмент поисковой системы Google. Поэтому для лучшего продвижения сайта желательно его добавить и в Google для веб-мастеров.

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

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

В предыдущей статье мы подтвердили права на управление сайтом и теперь можем перейти к вопросу установки Яндекс.Поиска на сайт. И сегодня сформируем HTML и CSS код поисковой формы и результатов ответов по заданным запросам, которые в дальнейшем будем размещать на сайте.

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

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

Здравствуйте уважаемый посетитель!

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

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

Следует отметить, что оформление формы Яндекс.Поиск под дизайн сайта, не совсем простое занятие.

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

Поэтому общее описание рассматриваемого материала получилось достаточно объемным с приведением значительного количества кода и поясняющих иллюстраций. В связи с этим материал разбит на две части.

В этой статье мы рассмотрим первую часть, оформив поисковую форму для исходного HTML-кода, полученного непосредственно с сервиса Яндекс.Поиск. А в следующей, посмотрим как можно откорректировать стили CSS для того, привести ее внешний вид в исходное состояние после ее динамического изменения, связанного с выполнением скрипта.

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

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

Здравствуйте уважаемый посетитель!

Ранее мы оформили внешний вид формы для варианта с исходным HTML и CSS кодом, непосредственно полученным с сервиса Яндекс.Поиск (рис.6 в предыдущей статье).

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

Необходимость проведения таких дополнительных преобразований связана с тем, что внешний вид формы с измененным кодом отличается от исходного. В этом состоянии искажается размер и расположение элементов, а также размер шрифта и цвет кнопки (рис.7 в предыдущей статье). И конечно же, это нужно исправить.

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

Следует отметить, что эти средства имеют довольно широкий набор инструментов для работы с сайтом и позволяет выполнять различные операции на стадии отладки, включая просмотр и изменение HTML, CSS, JavaScript кода, а также тестирование работы веб-ресурса с внесенными изменениями в режиме онлайн.

Но для сегодняшней задачи мы их будем использовать только для определения реального динамически измененного HTML и CSS кода веб-страницы после ее окончательной загрузки и выполнения всех имеющихся в ней скриптов.

Здравствуйте уважаемый посетитель!

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

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

Дело в том, что отображать результаты Яндекс.Поиска можно только на сайте, размещенном в интернете. Использования для этих целей ранее рассматриваемого варианта "newsite.local", установленного на локальном веб-сервере, невозможно.

Это связано с тем, что Яндекс.Поиск после каждого выполнения запроса свои результаты выводит на определенную страницу реального сайта. В нашем случае была определена страница тестового сайта с адресом "https://avtobezugona.ru/poisk.html".

Поэтому для этих целей будем работать на действующем ресурсе "avtobezugona.ru", полностью соответствующим создаваемому сайту "newsite.local", размещенному на локальном веб-сервере, с которым обычно мы проводимые различные мероприятия по его доработке.

А в связи с тем, что формирование внешнего вида страницы результатов поиска будет выполняться с помощью стилей CSS на реальном сайте, расположенных в отдельном файле "main.css", необходимо предусмотреть обновление кэша браузера (буфер памяти браузера с высокой скоростью обмена, используемый для временных файлов).

В противном случае, при отображении страниц возможно, что браузер не будет воспринимать изменения стилей CSS. В таких случаях при загрузке страниц будет использоваться последняя (до изменений) хранящаяся в его кэше версия файла "main.css".

И в этой статье мы рассмотрим один из возможных способов обновления буфера браузера в случае изменения содержимого кэшируемых статических файлов. В данном случае, нас интересует "main.css" с выделенной таблицей стилей CSS. Хотя аналогичные преобразования для упрощения обновлений сайта полезно сделать и для других ресурсов, например, содержащих скрипты "JavaScript".

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

Здесь же будет решаться лишь конкретный вопрос - обновление кэша браузера при изменении статического файла "main.css". Для того, чтобы в следующей статье мы смогли перейти к размещению результатов Яндекс.Поиск, оформив соответствующую страницу под дизайн сайта с помощью стилей CSS.

Здравствуйте уважаемый посетитель!

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

И теперь можем перейти к размещению на сайте результатов Яндекс.Поиск. Для чего сначала разместим код, полученный с сервиса Яндекс.Поиск, а затем оформим соответствующую страницу под дизайн сайта.

При этом, как отмечалось в предыдущей статье, рассмотрение данного вопроса будем проводить на тестовом сайте avtobezugona.ru. Это связано стем, что Яндекс.Поиск свои результаты может выводить только на реальные ресурсы. И невозможно для этих целей использовать сайт, размещенный на локальном веб-сервере.

И последнее, что необходимо отметить, это то, что работу с файлами тестового сайта "avtobezugona.ru" будем производить с помощью FTP клиента FileZilla, ранее рассматриваемого на стадии переноса сайта на хостинг. Хотя это не принципиально, можно использовать и другие способы загрузки файлов на хостинг, если для кого они окажутся более предпочтительней.