Оптимальная форма поиска для сайта

Безусловно – форма поиска – на сайте необходима. И, продолжая с моими новыми читателями настраивать свой блог, сегодня станем говорить о форме и функциях поиска и его реализации у себя на сайте. Наверное обратили внимание, что сам «движок» вашего новенького сайта на Вордпресс имеет простенькую механику, если не сказать крепче.

 

Да и более того, частенько, при выборе темы себе на сайт, вы с удивлением обнаруживаете, что в понравившемся шаблоне, формы поиска вообще может и не быть. Но это и хорошо! Кому нужны стандарты!? Тем более настроить под себя свой собственный сайт, ни так уж и трудно. …чем мы и займёмся.

оптимизируем форму поиска WordPress

 

 

 

Для начала посмотрите как работает форма поиска у меня на сайте. Иногда в своём блоге я использую этот плагин (о нём я расскажу в финале статьи) и лишь незначительные правки в скриптах.

 

 

Меня этот вариант, с выпадающем меню устраивает. Но – продолжим тему…

…может что-то отыщите себе по вкусу.

 

 

 

 

 

Меняем файл search php и форму поиска WordPress

 

 

 

 

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

 

Итак, заходим в «Консоль», открываем документ search.php и …

…увидите ваш код поисковика. Теперь, скопируйте его и куда-то сохраните, на всякий мухоморный случай. А заместо него, для начала, можете прописать вот эту форму: (картинки,  /images/search.gif естественно, нужно загонять в папку images шаблона свои)

 

 

 

 

 

<?php $search_text = empty($_GET['s']) ? "Поиск" : get_search_query(); ?> 
<div id="search">
    <form method="get" id="searchform" action="<?php bloginfo('home'); ?>/"> 
        <input type="text" value="<?php echo $search_text; ?>" 
            name="s" id="s"  onblur="if (this.value == '')  {this.value = '<?php echo $search_text; ?>';}"  
            onfocus="if (this.value == '<?php echo $search_text; ?>') {this.value = '';}" />
        <input type="image" src="<?php bloginfo('template_url'); ?>/images/search.gif" style="border:0; vertical-align: top;" /> 
    </form>
</div>

 

 

Или вот эту:

 

 

 

 

<form id="searchform" method="get" action="<?php echo $PHP_SELF; ?>">
<input type="text" name="s" id="s" value="Что будем искать" onfocus="if(this.value=='Что будем искать')this.value='';"  onblur="if(this.value=='')this.value='Что будем искать';" />
 
<input type="image" src="<?php bloginfo('template_url'); ?>/images/search.gif" style="border:0; vertical-align: top;" /> 
</form>

 

 

 

Само собой, текст в форме поиска вы можете изменить на более вам симпатичный. А также выбранную форму (скрипт-код), при желании можете добавить в виджет.

И, если вы что-то выбрали, продолжим:

Добавим в скрипт «результаты поиска», например, такое предложение:

 

Найдено: «столько-то…»

 

Для этого открываем документ searchform.php и ищем в нём ПОХОЖИЙ на эту строчку пример.

 

<h2 class="pagetitle">Результаты поиска </h2>

 

…и просто удаляем его. А прописываем на его место этот:

 

 

<h3>Найдено: 
<?php /**  Search Count **/ 
$allsearch = &new  WP_Query("s=$s&showposts=-1"); 
$key = wp_specialchars($s, 1);  
$count = $allsearch->post_count; _e(''); _e('<span  class="search-terms">'); 
echo $key; _e('</span>'); _e('...» —  '); echo $count . ' '; _e('совпадений'); 
wp_reset_query(); ?></h3>

 

 

 

…и здесь, в логике скрипта, можете русский текст “совпадений” и т.п. заменить на СВОЙ.

 

 

Теперь дам варианты стилей CSS, в которых будете менять саму картинку кнопки и формы ввода искомого.

 

 

Заходим в файл: style.css и ищем в каскадной таблице раздел строк #search.

Здесь смею доложить: картинка «поиска» эстетически должна соответствовать стилистике темы вашего сайта. И коли придёт нужда всё подправить, то – это просто.

Так же как и делали выше, скопируйте ваш код, если он у вас был, и куда-то сохраните. А вместо него пропишите этот, например, пример))

 

 

#search {
border: 1px solid #ACB0B0;
height: 28px;
padding: 0;
background: #E4E4E4;
text-align: right;
margin-top: 15px;
}

#search input {
border: 0;
background: none;
color: #787D7D;
}

#s {
width: 240px;
padding: 4px;
margin:2px 0 0 0;
background: none;
}

#topsearch #search {
margin: 15px 0 0 0;
padding-right: 4px;
}

#topsearch #s {
width: 246px;
}

 

 

 

Теперь останется только подогнать, если не подходит стилистика формы поиска к вашему сайту. Работайте с CSS.

 

 

 

 

…форма поиска внутри блога адаптивная

 

 

 

Вот ещё один пример, который возможно прописать в файл search.php (работу этого адаптивного чуда)))) сейчас можно посмотреть у меня на сайте…

 

 

<form role="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
	<label>
		<span class="screen-reader-text"></span>
		<input type="search" class="search-field" placeholder="Искать…" value="" name="s" title="Искать:" />
	</label>
	<input type="submit" class="search-submit" value="Поиск" />
</form>

 

 

…не знаю… минусом, пожалуй тольче можно назвать одно, что поясняющая надпись “Искать…” не пропадает после наведения курсора, а исчезает сразу же после ввода первого символа искомой фразы… (хотя это я рассматриваю как плюс))

 

 

 

А вот и стили CSS:

 

.search-form{
margin:3px 0 0 8px;
}
.search-submit {
max-width:180px;
padding:1px;
margin:2px 0 0 0;
display:table-cell;
}
.search-field{
max-width:100%;
background-color:transparent;
}

 

 

 

 

Формы поиска с плагинами Relevanssi и WP Search Suggest

 

 

 

 

 

Замечу: на мой взгляд, все навороченное количеством плагинов, в общем-то, не всегда оправдано. Если конечно у вас не интернет-магазин и вы не ярый) новичок, который стремится навешать всё что ни поподя (для красы) на тело блога – чем он лихо и промышляет (как некогда и я))

Но – решать вам!

 

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

 

 

 

Первый: Relevanssi. Этот имеет множество настроек. Обладает умением подсвечивать искомые слова, и многое другое… К некоторым важным пунктам настроек прилагаю скриншоты: заходите в «консоль» управления и…

 

Первое чудо:

 

 

 

 

Второе…

 

 

 

 

И третье…

 

 

 

 

Редакции  …нужно сохранять)

 

 

 

 

 

И, наконец, тот плагин, о котором я говорил в начале статьи: WP Search Suggest.

 

Плагин работает по технологии AJAX, – это обеспечивает мгновенный доступ к базе данных, без надобности перезагрузки страницы. Настроек не имеет, лёгок, ибо автоматически выполняет заданные ему функции программистом. Выводит в выпадающем списке варианты опубликованных записей, в соответствии с запросом пользователя.

 

 

 

 

 

 

Думаю, достаточно для его описания.

И – да, он может работать с выводом количества искомых запросов — многим другим это не удаётся. ! Советую вернуться СЮДА: Добавим в скрипт «результаты поиска» — совпадений ??

 

 

…Но…

…есть одно условие для работы плагина, а именно, чтобы ваша форма поиска, а точнее input имел id="s"

 

 

Ну и напоследок пример CSS для поиска такой можно прикинуть…

 

 

#search {
border: 1px solid #ACB0B0;
height: 28px;
padding: 0;
background: #E4E4E4;
text-align: right;
margin-top: 15px;
}

#search input {
border: 0;
background: none;
color: #787D7D;
}

#s {
width: 240px;
padding: 4px;
margin:2px 0 0 0;
background: none;
}

#topsearch #search {
margin: 15px 0 0 0;
padding-right: 4px;
}

#topsearch #s {
width: 246px;
}

 

 

 

Если недостаточно предложенных мною вариантов, то можете протестировать эти плагины:

Better Search

WP Search look

Live Search

Search Everything –

 

 

…просто вводите их «имена» в форму поиска плагинов в консоли управления (раздел «Плагины») устанавливайте и тестируйте.