Продолжение статьи, начало читайте ЗДЕСЬ.
Теперь переходим на сайт и приступаем к установке скопированного кода в заранее определенные места: например, в сайдбар и на специальную страницу для выдачи результатов.
1. Установка на сайт кода окна поиска
Здесь мы можем пойти двумя путями: установить код с помощью редактора или при помощи виджета. Рассмотрим каждый из вариантов.
Помещение кода окна запроса в код страницы.
Сразу оговорюсь, что таким образом Вы можете поместить окно поиска в любом месте сайта: в шапке (header.php), в статьях (single.php) или в любом другом месте, хоть в футере :-).
Мы будем устанавливать в сайдбаре. Для этого надо отредактировать файл sidebar.php. Сделать это можно или с помощью Вашего FTP –клиента(путь: папка public_html – папка wp-content – папка themes – папка с Вашим шаблоном – файл sidebar.php), или из админки блога (вкладка «внешний вид», далее жмете «редактор»). Я обычно вношу изменения с помощью редактора WordPress, но Вам покажу на скриншотах редактирование в блокноте NotePad++ (только потому, что там шрифт крупнее и Вам будет лучше видно).
Определяете место в сайдбаре, где будет установлено окно поиска, обычно это – верхняя часть сайдбара. Открываете файл для редактирования и вставляете скопированный код в нужное место:
Рис.1
Вот он код, на скриншоте занимает строчки с 29 по 38 (я выделил красной линией). Над кодом лучше что-то написать, иначе на сайте поиск плохо виден (по крайней мере, у меня). Сохраняем файл, обновляем его на сервере, открываем сайт и смотрим, что у нас получилось:
Рис.2
Я хоть и не большой эстет, но вынужден признать – похабненько, однако. Ширину окна надо увеличить, название кнопки поменять, вставить пустое место между окном и следующей рамкой.
Опять заходим в sidebar.php и вносим изменения:
- сначала пишем название кнопки, я написал «поиск по блогу». Для этого Вам нужно изменить текст: ищете в коде слово value, убираете непонятный текст в кавычках (но кавычки оставляете) и пишите что душе угодно;
- методом «научного тыка» определяетесь с шириной окна. Увеличиваете ширину потихоньку, пописксельно, до тех, пока кнопка не перескочит на вторую строчку. Метода простая: изменили размер – сохранили — изменили файл – открыли сайт (если надо – обновили его) – вынесли вердикт: еще увеличить. Просто, правда?
- Для того чтобы оторвать форму поиска от нижней рамки поставьте тэг <br>.
В итоге должно получиться так:
Рис.3
А на сайте это будет выглядеть так:
Рис.4
Уже лучше. Вот таким образом Вы и должны действовать исходя из реалий своего сайта.
2-й способ: с помощью виджета
Для того, чтобы установить код окна в сайдбар, можно воспользоваться виджетом «Текст». Заходите в админку блога, переходите в раздел «Внешний вид», выбираете «Виджеты». Находите виджет «Текст» и перетаскиваете его в сайдбар. Он раскроется и вы увидите 2 поля. У кого не раскроется сам, раскройте его принудительно – кликните по маленькому серому треугольничку в правой верхней части.
Рис.5
Пишите название виджета и вставляете код. Нажимаете «Сохранить» и смотрите на сайте, что получилось:
Рис.6
Преимущество вставки с помощью виджета: Вы получаете все в одном стиле, в стиле Вашего сайта. Конечно, ширину окна и надписи тоже надо редактировать, это так, но общий стиль будет сохранен.
2. Вставка кода на страницу вывода результатов поиска
Понятно, что Вам надо прежде всего определить эту страницу. Я выбрал у себя на блоге пустую страницу под названием «Ссылки». Когда-то я ее создал, а для чего – уже и не помню (для редиректа, что ли), теперь пригодилась. А Вам надо создать новую.
Потом открываете ее для редактирования, переходите во вкладку HTML и вставляете код:
Рис.7
После этого в строчке, определяющей ширину текстового поля Вашего шаблона меняете первоначальные «800» на нужную ширину. В моем случае это – 540 пикселей. Должно получиться так:
Рис.8
Обновляете страницу и переходите на сайт. Обновляете его, в строке поиска пишите какой-нибудь запрос и смотрите, как у Вас откроется страница с результатами поиска.
Встает вопрос: а можно эту страницу как-то скрыть, чтобы она не была видна в навигации. Можно. Использовать надо соответствующие плагины WordPress, например, Exclude Pages или Simply Exclude (именно он стоит у меня: у него функционал получше). Как установить и настроить – погуглите. Будет время, я напишу подробную статью на эту тему.
Все. Теперь можно радоваться.
Удачи! И на прощание — второй закон Вышковского: Все можно наладить, если вертеть в руках достаточно долго.
P.S. Кстати, есть еще один путь сделать поиск на сайте — просто заказать его разработчикам. Например, очень хорошей питерской компании LDI limited. Их специализация —
Похожие записи по этой теме:
- Устанавливаем на сайт поиск Google
- Предварительные итоги голосования и дальнейшие планы
- Как увеличить трафик с помощью комментариев Вконтакте. Установка комментариев Вконтакте на своем сайте
- Как сделать красивую страницу 404 ошибки?
- Как закачать WordPress на хостинг с помощью FileZilla
- Плагин AddQuicktag для удобной работы с шорткодами
- Делаем контент стильным: устанавливаем врезки в статью
- Как вставить видео на сайт без плагинов
- Как сделать опрос (голосование) на сайте с помощью Google Docs
- 3 плагина для создания раскрывающихся рубрик. Плагин Collapsing Categories