Устанавливаем на сайт поиск Google, часть 2


Продолжение статьи, начало читайте ЗДЕСЬ.

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

1. Установка на сайт кода окна поиска

Здесь мы можем пойти двумя путями: установить код с помощью редактора или при помощи виджета. Рассмотрим каждый из вариантов.

Помещение кода окна запроса в код страницы.

Сразу оговорюсь, что таким образом Вы можете поместить окно поиска в любом месте сайта: в шапке (header.php), в статьях (single.php) или в любом другом месте, хоть в футере :-).

Мы будем устанавливать в сайдбаре. Для этого надо отредактировать файл sidebar.php. Сделать это можно или с помощью Вашего FTP –клиента(путь: папка public_html – папка wp-content – папка themes – папка с Вашим шаблоном – файл sidebar.php), или из админки блога (вкладка «внешний вид», далее жмете «редактор»). Я обычно вношу изменения с помощью редактора WordPress, но Вам покажу на скриншотах  редактирование в блокноте NotePad++ (только потому, что там шрифт крупнее и Вам будет лучше видно).

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

Установить на сайт поиск Google

Рис.1

Вот он код, на скриншоте занимает строчки с 29 по 38 (я выделил красной линией). Над кодом лучше что-то написать, иначе на сайте поиск плохо виден (по крайней мере, у меня). Сохраняем файл, обновляем его на сервере, открываем сайт и смотрим, что у нас получилось:

Установить на сайт поиск Google

Рис.2

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

Опять заходим в sidebar.php и вносим изменения:

  • сначала пишем название кнопки, я написал «поиск по блогу». Для этого Вам нужно изменить текст: ищете в коде слово value, убираете непонятный текст в кавычках (но кавычки оставляете) и пишите что душе угодно;
  • методом «научного тыка» определяетесь с шириной окна. Увеличиваете ширину потихоньку, пописксельно, до тех, пока кнопка не перескочит на вторую строчку. Метода простая: изменили размер – сохранили — изменили файл – открыли сайт (если надо – обновили его) – вынесли вердикт: еще увеличить. Просто, правда?
  • Для того чтобы оторвать форму поиска от нижней рамки поставьте тэг  <br>.

В итоге должно получиться так:

Установить на сайт поиск Google

Рис.3

А на сайте это будет выглядеть так:

Установить на сайт поиск Google

Рис.4

Уже лучше. Вот таким образом Вы и должны действовать исходя из реалий своего сайта.

2-й способ: с помощью виджета

Для того, чтобы установить код окна в сайдбар, можно воспользоваться виджетом «Текст». Заходите в админку блога, переходите в раздел «Внешний вид», выбираете «Виджеты». Находите виджет «Текст» и перетаскиваете его в сайдбар. Он раскроется и вы увидите 2 поля. У кого не раскроется сам, раскройте его принудительно – кликните по маленькому серому треугольничку в правой верхней части.

Установить на сайт поиск Google

Рис.5

Пишите название виджета и вставляете код. Нажимаете «Сохранить» и смотрите на сайте, что получилось:

Установить на сайт поиск Google

Рис.6

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

2.   Вставка кода на страницу вывода результатов поиска

Понятно, что Вам надо прежде всего определить эту страницу. Я выбрал у себя на блоге пустую страницу под названием «Ссылки». Когда-то я ее создал, а для чего – уже и не помню (для редиректа, что ли), теперь пригодилась. А Вам надо создать новую.

Потом открываете ее для редактирования, переходите во вкладку HTML и вставляете код:

Установить на сайт поиск Google

Рис.7

После этого в строчке, определяющей ширину текстового поля Вашего шаблона меняете первоначальные «800» на нужную ширину. В моем случае это – 540 пикселей. Должно получиться так:

Установить на сайт поиск Google

Рис.8

Обновляете страницу и переходите на сайт. Обновляете его, в строке поиска пишите какой-нибудь запрос и смотрите, как у Вас откроется страница с результатами поиска.

Встает вопрос: а можно эту страницу как-то скрыть, чтобы она не была видна в навигации. Можно. Использовать надо соответствующие плагины WordPress, например,  Exclude Pages  или Simply Exclude (именно он стоит у меня: у него функционал получше). Как установить и настроить – погуглите. Будет время, я напишу подробную статью на эту тему.

Все. Теперь можно радоваться.

Удачи! И на прощание — второй закон Вышковского: Все можно наладить, если вертеть в руках достаточно долго.

P.S. Кстати, есть еще один путь сделать поиск на сайте — просто заказать его разработчикам. Например, очень хорошей питерской компании LDI limited. Их специализация - создание сайтов в санкт петербурге и еще их (сайтов то есть) продвижение. К решению этих проблем они подходят со всей ответственностью. И сделать поиск на сайте — для них пустяк.

Похожие записи по этой теме:

One thought on “Устанавливаем на сайт поиск Google, часть 2

  1. admin Post author

    Саша, а почему Вы установили ширину 480? В Вашей теме должна быть ширина 460. Кстати, ширина поиска у Вас поменялась с 800 на 480. Проверьте: установите 800 и посмотрите как будет.

    Reply

Оставить комментарий

Your email address will not be published. Required fields are marked *