×

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо войти под своим аккаунтом через форму на главной панели.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

  • Рубрики
  • Слайдер
  • Сайдбар
  • Подписка
  • Вниз
  • Вверх
×
  • Как сделать сайт с нуля своими руками (вводная часть)

    1. Причины создания пошаговой инструкции по разработке самописного сайта
    2. Тема создаваемого сайта
    3. В чем будет заключаться монетизация
    4. Функционал
    5. Этапы создания
    6. Текущее состояние создаваемого сайта

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

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

    Причем чтобы такой интернет-ресурс был создан не на каком-нибудь стандартном шаблоне бесплатной СMS (Content management system - система управления контентом) типа WordPress, Drupal, Joomla и т.п., а заточенный под себя, с возможностью обеспечить ему должную безопасность и реализовать все свои индивидуальные потребности.

    Часто такие сайты, созданные под конкретные задачи на основе языка разметки веб-страниц HTML, стилей CSS и других инструментов веб-программирования (PHP, JavaScript и т.п.), называют самописными.

    Этой статьей начинается отдельная рубрика "Как сделать сайт с нуля своими руками", где на реальном примере, с предоставлением исходных материалов (программные коды, файлы и т.п.), будет показано, как действительно можно самостоятельно сделать рабочий сайт.

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

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

Самописный сайт своими руками!

Текущее состояние создаваемого сайта

Здесь можно посмотреть текущее состояние тестового самописного сайта, который создается в рамках цикла статей Сделай сайт с нуля своими руками.

Где в дополнительных материалах можно бесплатно скачать исходные файлы сайта с таблицами MySQL.

Вы здесь: Главная → Сборник статей → Поиск → Размещаем результаты Яндекс.Поиск на сайте


Автор: / Дата:

Как разместить результаты Яндекс.Поиск на сайте

Размещаем результаты Яндекс.Поиск на сайте

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

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

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

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

скриншот 90

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

Содержание


  • Добавляем динамически формируемую страницу результатов поиска
  • Вставляем HTML-код результатов поиска
  • Оформляем страницу поиска под дизайн сайта с помощью CSS
  • Исходные файлы сайта

Добавляем динамически формируемую страницу результатов поиска


Для того, чтобы получить место, где мы будем размещать результаты поиска, создадим новую страницу.

Так как все страницы нашего сайта динамические, то сделать это будет довольно просто. Надо всего лишь добавить одну запись в таблицу базы данных под названием "url" и создать один файл, в котором будет находиться основное содержание страницы.

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

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

Что же касается работы с базой данных MySQL, размещенной на локальном веб-сервере и на хостинге, то о том как к ней подключиться и добавить новую запись в нужную таблицу, довольно подробно было рассмотрено в соответствующем разделе Работа с БД MySQL.

Ниже показан скриншот таблицы "url" в "phpMyAdmin" с созданной записью для новой страницы результатов поиска.

Для увеличения / уменьшения размера изображения кликните по картинке
Запись в таблице БД для создания новой страницы

Рис.1 Запись в таблице БД для создания новой страницы

Где в новой строке добавлены следующие данные:

  • в поле "page" - "poisk";
  • в "page-rus" - "Поиск";
  • в "title-page" - "Поиск по сайту";
  • в "description" - "Здесь отображаются результаты поиска по сайту".

Затем в папке "articles" создадим новый файл, в котором будет находиться будущей контент созданной страницы. И назовем его соответствующим именем "poisk.php" (то же самое имя, что и в поле "page" таблицы MySQL плюс расширение ".php").

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

И в этом новом файле для начала поместим шаблон, состоящий из типового контейнера <div> с классом article, в котором обычно у нас формируется контент страницы. Сюда же вставим заголовок, соответствующий полю "title-page" таблицы MySQL.

  1. <div class="article">

  2. <Η1>Поиск по сайту</Η1>

  3. <!--Содержимое страницы-->

  4. </div>

Рис.2 Шаблон для формирования страницы

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Загрузка файла на сервер

Рис.3 Загрузка файла на сервер

После этого убедимся, что новая страницу страница создана. Для этого в адресной строке браузера введем соответствующий ей адрес "avtobezugona.ru/poisk.html".

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

Для увеличения / уменьшения размера изображения кликните по картинке
Вновь созданная страница поиска по сайту

Рис.4 Вновь созданная страница поиска по сайту

Вот и все, новая страница создана. И теперь будем ее наполнять содержимом.

Вставляем HTML-код результатов поиска


Далее разместим в созданном файле полученный ранее с Яндекс.Поиск HTML-код с JS-скриптом (скачать файл "seach_result.html", в котором сохранены настройки результатов поиска, можно в статье "Устанавливаем Яндекс.Поиск на сайт" из раздела Исходные файлы сайта).

В итоге код страницы примет следующий вид.

  1. <div class="article">

  2. <Η1>Поиск по сайту</Η1>

  3. <div id="ya-site-results" onclick="return {'tld': 'ru','language': 'ru','encoding': '','htmlcss': '1.x','updatehash': true}"></div>

  4. <script>

  5. (function(w,d,c){var s=d.createElement('script'),h=d.getElementsByTagName('script')[0]; s.type='text/javascript'; s.async=true;s.charset='utf-8'; s.src=(d.location.protocol==='https: '?'https:':'http: ')+'//site.yandex.net/v2.0/js/all.js'; h.parentNode.insertBefore(s,h); (w[c]||(w[c]=[])).push(function() {Ya.Site.Results.init();})})(window,document,'yandex_site_callbacks');

  6. </script>

  7. </div>

Рис.5 Код страницы результатов поиска

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Полученные результаты поиска

Рис.6 Полученные результаты поиска

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

Однако, в таком состоянии можно отметить и некоторые недостатки в отношении внешнего вида отображаемого результата, а именно:

  • фон отображаемой области (белый) отличается от фона страницы (светло-серый);
  • не соответствует размер шрифта (более мелкий);
  • ширина отображаемых результатов поиска меньше ширины области контента;
  • не пропорциональны отступы пунктов ответа.

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

Оформляем страницу поиска под дизайн сайта с помощью CSS


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

  1. #ya-site-results{

  2. color: #000000;

  3. background: #FFFFFF;

  4. }

  5. #ya-site-results .b-pager__current,#ya-site-results .b-serp-item__number{

  6. color: #000000 !important;

  7. }

  8. #ya-site-results{

  9. font-family: Arial !important;

  10. }

  11. #ya-site-results :visited,#ya-site-results .b-pager :visited,#ya-site-results .b-foot__link:visited,#ya-site-results .b-copyright__link:visited{

  12. color: #800080;

  13. }

  14. #ya-site-results a:link,#ya-site-results a:active,#ya-site-results .b-pseudo-link,#ya-site-results .b-head-tabs__link,#ya-site-results .b-head-tabs__link:link,#ya-site-results .b-head-tabs__link:visited,#ya-site-results .b-dropdown__list .b-pseudo-link,#ya-site-results .b-dropdowna__switcher .b-pseudo-link,.b-popupa .b-popupa__content .b-menu__item,#ya-site-results .b-foot__link:link,#ya-site-results .b-copyright__link:link,#ya-site-results .b-serp-item__mime,#ya-site-results .b-pager :link{

  15. color: #0033FF;

  16. }

  17. #ya-site-results :link:hover,#ya-site-results :visited:hover,#ya-site-results .b-pseudo-link:hover{

  18. color: #FF0000 !important;

  19. }

  20. #ya-site-results .l-page,#ya-site-results .b-bottom-wizard{

  21. font-size: 13px;

  22. }

  23. #ya-site-results .b-pager{

  24. font-size: 1.25em;

  25. }

  26. #ya-site-results .b-serp-item__text,#ya-site-results .ad{

  27. font-style: normal;

  28. font-weight: normal;

  29. }

  30. #ya-site-results .b-serp-item__title-link,#ya-site-results .ad .ad-link{

  31. font-style: normal;

  32. font-weight: normal;

  33. }

  34. #ya-site-results .ad .ad-link a{

  35. font-weight: bold;

  36. }

  37. #ya-site-results .b-serp-item__title,#ya-site-results .ad .ad-link{

  38. font-size: 16px;

  39. }

  40. #ya-site-results .b-serp-item__title-link:link,#ya-site-results .b-serp-item__title-link{

  41. font-size: 1em;

  42. }

  43. #ya-site-results .b-serp-item__number{

  44. font-size: 13px;

  45. }

  46. #ya-site-results .ad .ad-link a{

  47. font-size: 0.88em;

  48. }

  49. #ya-site-results .b-serp-url,#ya-site-results .b-direct .url,#ya-site-results .b-direct .url a:link,#ya-site-results .b-direct .url a:visited{

  50. font-size: 13px;

  51. font-style: normal;

  52. font-weight: normal;

  53. color: #329932;

  54. }

  55. #ya-site-results .b-serp-item__links-link{

  56. font-size: 13px;

  57. font-style: normal;

  58. font-weight: normal;

  59. color: #000000 !important;

  60. }

  61. #ya-site-results .b-pager__inactive,#ya-site-results .b-serp-item__from,#ya-site-results .b-direct__head-link,#ya-site-results .b-image__title,#ya-site-results .b-video__title{

  62. color: #000000 !important;

  63. }

  64. #ya-site-results .b-pager__current,#ya-site-results .b-pager__select{

  65. background: #E0E0E0;

  66. }

  67. #ya-site-results .b-foot,#ya-site-results .b-line{

  68. border-top-color: #E0E0E0;

  69. }

  70. #ya-site-results .b-dropdown__popup .b-dropdown__list, .b-popupa .b-popupa__content{

  71. background-color: #FFFFFF;

  72. }

  73. .b-popupa .b-popupa__tail{

  74. border-color: #E0E0E0 transparent;

  75. }

  76. .b-popupa .b-popupa__tail-i{

  77. border-color: #FFFFFF transparent;

  78. }

  79. .b-popupa_direction_left .b-popupa_theme_ffffff .b-popupa__tail-i, .b-popupa_direction_right .b-popupa_theme_ffffff .b-popupa__tail-i{

  80. border-color: transparent #FFFFFF;

  81. }

  82. #ya-site-results .b-dropdowna__popup .b-menu_preset_vmenu .b-menu__separator{

  83. border-color: #E0E0E0;

  84. }

  85. .b-specification-list,.b-specification-list .b-pseudo-link,.b-specification-item__content label,.b-specification-item__content .b-link,.b-specification-list .b-specification-list__reset .b-link{

  86. color: #000000 !important;

  87. font-family: Arial;

  88. font-size: 13px;

  89. font-style: normal;

  90. font-weight: normal;

  91. }

  92. .b-specification-item__content .b-calendar__title{

  93. color: #000000 !important;

  94. font-family: Arial;

  95. font-size: 13px;

  96. font-style: normal;

  97. font-weight: normal;

  98. }

  99. .b-specification-item__content .b-calendar-month__day_now_yes{

  100. color: #E0E0E0;

  101. }

  102. .b-specification-item__content .b-calendar .b-pseudo-link{

  103. color: #000000;

  104. }

  105. .b-specification-item__content{

  106. font-family: Arial !important;

  107. font-size: 13px;

  108. }

  109. .b-specification-item__content :visited{

  110. color: #800080;

  111. }

  112. .b-specification-item__content .b-pseudo-link:hover,.b-specification-item__content :visited:hover{

  113. color: #FF0000 !important;

  114. }

  115. #ya-site-results .b-popupa .b-popupa__tail-i{

  116. background: #FFFFFF;

  117. border-color: #E0E0E0 !important;

  118. }

Рис.7 CSS-код результатов поиска

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Открытие файла, размещенного на хостинге

Рис.8 Открытие файла, размещенного на хостинге

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

Для увеличения / уменьшения размера изображения кликните по картинке
Сохранение измененного файла на хостинге

Рис.9 Сохранение измененного файла на хостинге

После того, как мы посмотрели, как открывать и сохранять файлы, находящиеся на хостинге, перейдем теперь к настройке стилей CSS.

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

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

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

Для увеличения / уменьшения размера изображения кликните по картинке
Определение параметров выделенного элемента

Рис.10 Определение параметров выделенного элемента

Как видно, наличие у элемента нумерованного списка <ol> с классом "b-serp-list" свойства "max-width" со значением "800px", ограничивает ширину отображаемой области. От чего ее ширина по факту получается меньше ширины области контента.

Этот недостаток можно устранить, если данное свойство переназначить значением 100%.

  1. .b-serp-list{

  2. max-width:100% !important;

  3. }

Рис.11 CSS-код для устранения ограничения ширины результатов поиска

Следует отметить необходимость применение здесь правила "!important" для повышения приоритета данного стиля.

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

Для увеличения / уменьшения размера изображения кликните по картинке
Отображение результатов поиска на всю ширину области контента

Рис.12 Отображение результатов поиска на всю ширину области контента

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

Ниже показан окончательный вариант CSS-кода со всеми дополнениями и изменениями (выделено красным цветом).

Следует обратить внимание на то, что здесь в строках 144÷213 применены медиазапросы, регулирующие размер шрифта в зависимости от ширины экрана.

Такая необходимость вызвана тем, что для элементов, для которых применено правило "!important", унаследование свойств "font-size" не работает. И требуется размер шрифта в зависимости от ширины экрана подстраивать с помощью медиазапросов.

После выполненных изменений в CSS-коде посмотрим на конечный результат. Ниже показан окончательный вариант оформленной страницы результатов поиска.

Для увеличения / уменьшения размера изображения кликните по картинке
Оформленная страница результатов поиска

Рис.14 Оформленная страница результатов поиска

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

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

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

Исходные файлы сайта


Знак папкиИсходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:

  • Файлы каталога www
  • Таблицы базы данных MySQL

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

Для скачивания исходных файлов необходимо войти под своим аккаунтом через форму на главной панели.

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

С уважением, Николай Гришин


Комментарии


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

Буду Вам за это очень признателен!

comments powered by HyperComments