Скучный блог вебмастера

Архив за Ноябрь 2010


Красивый поиск

17.11.2010


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

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

Встроенный поиск на вордпрессе выглядит так:

<form method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">

<input type="text" value="<?php echo wp_specialchars ($s, 1); ?>" name="s" id="s" size="10" />

<br/>

<input type="submit"  value="Найти" /> — это выводится кнопка

</form>

Достаточно в поле input вставить следующий скрипт:

onfocus="if (this.value=='поиск...') this.value='';" onblur="if (!this.value) this.value='поиск...'"

и тогда в поле ввода будет постоянно стоять слово «поиск...», а при постановке туда курсора, это слово будет убираться.

Также можно добавить дополнительный ID, например id="search_field" и в CSS задать полю и тексту в нем стиль.

При этом кнопку можно вообще не использовать, отправление запроса поиска будет производиться по нажатию клавиши «Ввод».

Так я и поступил на сайте www.animetank.ru, что позволило мне минимизировать размеры поиска, и перенести его из низа левого сайдбара в шапку в правый верхний угол, на более видное место. Буковкам задал стиль общий с оформлением сайта, поле оставил белым, потому что подхоидт.

Теперь смотрю на это дело и восхищаюсь :-)


Метки:, ,
Рубрики: Webмастеринг, Вордпресс | Комментариев нет »

Тагильский аниме клуб T.An.K. | Аниме форум |