Как сделать поиск по сайту, созданному на движке WordPress. Поиск по сайту wordpress
Как установить Яндекс Поиск на wordpress сайт?
В этой статьи или даже правильнее сказать в обучающем уроке мы с Вами разберемся, как же можно установить Яндекс Поиск на свой сайт, реализованный на WordPress. Урок будет подробно рассмотрен и к каждому пункту я дам объяснения, так что справится сможет даже любой новичок. Если Вас что-то не понятно – посмотрите видео в конце статьи, а так же задавайте вопросы в комментариях.
Регистрация поиск в Яндексе
Для начала переходим на сайт Яндекса и нажимает по большой желтой кнопке “Установить поиск”. Перед нами появляется поля для заполнения, давайте подробнее с ними разберемся.
- Название поиска для стандарта Opensearch. Вот тут уже стоит ввести правильное название, так как его будут видеть пользователи в браузерах, которые поддерживают формат Opensearch. Я обычно ставлю “Поиск по сайту site.ru”, где site.ru – имя сайта, на котором я устанавливаю поиск.
- Семейный фильтр. Тут идет защита от взрослого контента, но так как мой сайт посвящен только статьям про WordPress и ничего тут больше не планируется – то я ставлю фильтр без ограничений. Если Вы ищите сразу на нескольких адресах, то советую подумать, какой именно фильтр подходит для Вас.
- Область поиска. В области поиска мы добавляем только один сайт и никаких исключений. В моем случае я устанавливаю в области сайты адрес wordpressguru.ru, так как поиск будет осуществляться только по этому сайту. Если у Вас много поддоменов – мы можете включить их в область поиска.
- Адрес электронной почты. Думаю это поле не нуждается в объяснении, просто введите сюда свой адрес email. Единственное, что хочу заметить – адрес Вашей электронной почты должен быть подтвержден в аккаунте Яндекса. Если у Вас почта непосредственно в сервисе Яндекса – то подтверждать ничего не нужно.
После заполнения всех полей нажимаем на кнопку “Далее к шагу 2″. Во втором шаге мы будем настраивать дизайн нашей поисковой формы. Второй шаг у Вас должен выглядеть следующем образом:
Тут все достаточно просто и объяснить какой цвет выбрать – я просто не в состоянии. Я обычно тип поисковой формы выбирают третий, а дизайн первый. А все цвета и дополнительные настройки оставляю по умолчанию. Вы в свою очередь можете экспериментировать и выбрать другие цвета, типы и дизайн. После этих действий переходим к шагу номер три.
Теперь будем разбираться, как должен отображаться и выглядеть поиск на Вашем сайте. Для начала настроим то, где мы будем выводить результаты поиска.
Все результаты поиска я буду выводить на отдельную страницу, которую я создам позже. Но я знаю, что страница будет под названием search.html, так что я сразу указываю это. Так же для удобства я поставил галочку на открытие результатов поиска на новой странице. Рекомендую ставить такие же настройки, только вместо моего адреса страницы поиска Вам необходимо поставить свою.
В основных свойствах страницы я ставлю фон белым цветов (#ffffff), так как фон на моем сайте белый. Поставьте тот код цвета, которым у Вас выводится фон, чтобы поиск максимально подстроился под дизайн Вашего сайта. Так как я выбрал показывать результаты на моей странице, а не в Яндексе, настройки заголовка и логотипа у меня не доступны и будут автоматически добавлены стандартные.
Вывод дизайна результатов поиска я оставил стандартный, так как он не плохо подходит к моему шаблону, но и так же пользователи Яндекса к нему привыкли и соотвественно он их не отпугнет. Но, как я люблю повторять, на вкус и цвет товарищей нет, так что можете экспериментировать, пробовать свои варианты и я думаю у Вас получится отличный вариант. Единственное, оставьте десять результатов поиска на страницу – больше будет уже много, а меньше мало, так что десять самый оптимальный вариант.
В полях сортировка результатов и ссылки и навигация я оставил все стандартно и тоже рекомендую это сделать Вам. После ввода всех этих настроек внизу страницы мы может посмотреть, как поиск будет выглядеть на сайте. Если Вас все устраивает – переходим к четвертому шагу нажимая одноименную кнопку.
В четвертом шаге показывается, как ищет Ваш поиск. Хочу заметить, если Ваш сайт еще не проиндексирован поисковой системой Яндекс – то поиск ничего не найдет. Не переживайте по этому поводу, как только сайт будет проиндексирован – сразу все будет найдено. Теперь остается только интегрировать поиск на Ваш сайт, а об этом подробнее читайте ниже.
Установка поиска на сайт
Для начала нам нужно создать отдельный шаблон страницы wordpress, просто переходите по ссылке и читайте, как это можно просто реализовать. Я подробно рассмотрел, как это сделать и добавил уже готовый код, так что Вам остается только копировать его и вставить на свой сайт. Если Вы все сделали, то вместо вывода контента, нам нужно будет добавить код, который предлагает нам яндекс в пятом шаге.
Вместо цикла вывода контента (the_content) мы вставляем код поиска, которые предлагает нам Яндекс. Сохраняем файл на сервере, выбираем его при создании новой страницы и опубликовываем его. Теперь поиск уже работает, но нам осталось вывести поисковую форму, в которой пользователи будут вводить своим запросы.
Для этого переходим во вкладку в административную панель и во вкладке “Внешний вид” выбираем пункт “Виджеты”. В активную область виджетов мы переносим “Текстовый виджет” в тело которого мы вставляем код, который предлагает нам Яндекс. После всех этих действий нам остается только сохранить изменения и перейти на страницу Вашего сайта. Если Вы все сделали правильно, то у Вас в сайдбаре появится такая форма:
wordpressguru.ru
Как сделать поиск по сайту
Июн-10-2011 Автор: VeryOldMan
Для того, чтобы WordPress сайт стал привлекательнее и удобнее для посетителей Вашего сайта, существует довольно много различных фишек, которые Вам в этом могут помочь. Особенно часто, на сайтах в Интернете, можно увидеть такую опцию, как поиск по сайту. Вещь, конечно, в хозяйстве нужная, особенно если сайт разрастается и состоит не из десятка страничек, а из ста и более. Вот тут–то вопрос как сделать поиск по сайту встает, как говориться, во весь рост и требует своего решения. Как это сделать проще всего, мы сейчас и разберемся.
Как Вы знаете, а если нет, то знайте что шаблоны WordPress сайтов создаются на языке php. Поэтому сделать поиск по сайту проще всего на этом языке и использовать при этом средства самой системы управления, то есть движка WordPress. В этом случае, скрипт поиска выполнит поиск по записям, которые хранятся в базе данных, и покажет их в определенном виде на определенной странице сайта. Кстати, такую функцию может выполнять не только движок WordPress, но и практически все популярные движки.
Если Вы знаете язык php, то написать скрипт поиска по сайту самостоятельно, для Вас особого труда не составит. А если нет? Тогда рассмотрим вариант для этого случая. Итак, у Вас есть сайт, созданный на движке WordPress, в котором Вы использовали определенный шаблон. Код формы поиска по сайту будет иметь вот такой вид:
<form id=»search» method=»get» action=»<?php echo $_SERVER[‘PHP_SELF’]; ?>»><input type=»text» name=»web» id=»web» value=»Поиск по сайту» onblur=»if (this.value==») {this.value=’Поиск по сайту’;}» onfocus=»if (this.value==’Поиск по сайту’) {this.value=»;}» /></form>
Сразу хочу заметить, что здесь нет кнопки Найти. Почему? Уж очень сложно выставить эту кнопку относительно поля ввода поисковой фразы или слова. Тем более так, чтобы было одинаково во всех браузерах. Тем более, что мы все люди грамотные и знаем, что для того, чтобы выполнить поиск в любом сайте достаточно ввести поисковую фразу и нажать Enter. Ну а если Вам хочется повозиться, то вот код с кнопкой:
<form id=»search» method=»get» action=»<?php echo $_SERVER[‘PHP_SELF’]; ?>»><input type=»text» name=»web» id=»web» value=»Поиск по сайту» onblur=»if (this.value==») {this.value=’Поиск по сайту’;}» onfocus=»if (this.value==’Поиск по сайту’) {this.value=»;}» /><input type=»submit» value=»Найти!» /> </form>
Что делать с кодом поиска по сайту. Скопировать и вставить в шаблон WordPress сайта. Хотя бы в верхнюю часть сайдбара. Для этого откройте файл sidebar.php в любом редакторе, хотя бы и вDreamweaver и вставьте код сразу за <div class=»sidebar»>:
<div class=»sidebar»><form id=»search» method=»get» action=»<?php echo $_SERVER[‘PHP_SELF’]; ?>»><input type=»text» name=»web» id=»web» value=»Поиск по сайту» onblur=»if (this.value==») {this.value=’Поиск по сайту’;}» onfocus=»if (this.value==’Поиск по сайту’) {this.value=»;}» /></form><br>
Тег <br> — по необходимости, если форма буде «наезжать» на нижерасположенные элементы шаблона.
Ну и конечно внесем изменения в таблицу стилей. Для этого откройте файл style.css ВашегоWordPress шаблона в редакторе и просто в конце таблицы вставьте такой код:
#search {overflow: hidden;}
#web {width: 130px;height: 20px;font-size: 1em;padding: 2px 5px;margin: 10px 0 0 15px;background-color: #fee4e5;}
Первое правило нужно для того, чтобы поисковая фраза, если она длинная, не выходила за пределы блока, а «уходила» за левый край окна.
Селектор #web задает размер окна формы поиска по сайту, размер шрифта, отступы и цвет фона, который Вы запросто можете изменить в соответствии с общим дизайном Вашего сайта.
А результат будет вот такой:
Вот и все. Теперь Вы знаете, как сделать поиск по сайту. Как видите, ничего сложного. Можете попробовать. Успехов!
stroimsajt.ru
Шаг №35.Как добавить форму поиска в любое место на сайте?
Друзья, всех приветствую на своем сайте,в этом уроке я хочу показать Вам как добавить форму поиска WordPress в любое место на сайте. Действительно, ознакомившись с этим уроком Вы сможете добавить форму поиска для wordpress в записи или страницы используя короткий код, который как правило берется в квадратные кавычки[].
Выводим стандартную форму поиска
Все что понадобится сделать, так это открыть файл functions.php Вашего шаблона и вставить код:
| add_shortcode('wpbsearch', 'get_search_form'); |
Вот так просто, теперь для того чтобы вывести форму поиска в wordpress в статьях или записях, Вам следует воспользоваться кодом [wpbsearch];
Этот код, выведет стандартную форму поиска на сайте;
Модернизированная форма поиска
Если Вы хотите модернизировать форму поиска то тогда Вы можете воспользоваться вот этим кодом(его также нужно вставлять в файл functions.php):
| function wpbsearchform( $form ) { $form = '<form role="search" method="get" action="' . home_url( '/' ) . '" > <div><label for="s">' . __('Search for:') . '</label> <input type="text" value="' . get_search_query() . '" name="s" /> <input type="submit" value="'. esc_attr__('Search') .'" /> </div> </form>'; return $form; } add_shortcode('wpbsearch', 'wpbsearchform'); |
Для того что бы использовать модернизированную форму на страницах блога на wordpress,либо в записях, укажите код [wpbsearch]
В дальнейшем настроить внешний вид формы поиска можно при помощи CSS. Об этом мы поговорим в следующих уроках,подписывайтесь на обновления, что бы ни в коем случае не упустить интересные уроки по wordpress.
Вот такой,немного сумбурный урок получился, но вещь бывает действительно нужной, надеюсь Вам урок оказался полезным.
Голосование:
Помогла ли Вам данная статья установить форму поиска на сайт?
wpcreate.ru
