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

Как сделать поиск по сайту, созданному на движке WordPress

Июн-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 задает размер окна формы поиска по сайту, размер шрифта, отступы и цвет фона, который Вы запросто можете изменить в соответствии с общим дизайном Вашего сайта.

А результат будет вот такой:

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

Вот и все. Теперь Вы знаете, как сделать поиск по сайту. Как видите, ничего сложного. Можете попробовать. Успехов!






Комментариев (1)
  1. Ванюха Пишет,

    Спасибо, попал случайно, но пригодится 🙂

Добавить комментарий