Приветствую всех читателей блога SEOBID.NET! Поиск, который по умолчанию встроен в эту CMS, устраивает далеко не всех. Он, конечно, выполняет свои функции, но бедненько как-то. И результаты неполные, и вывод результатов не очень красивый. Стандартный поиск для wordpress можно улучшить, переделать, подпилить напильником и получить весьма приятную штучку для сайта.   

Давайте начнем с технической, то есть – программной части. Предупреждаю – будет много php кода, но он не весь вам пригодится. Я предлагаю на выбор несколько хаков для улучшения результатов поиска, а вы уж сами выберете, какой из них устанавливать, а какой может подождать до лучших времен.

В виджет поиска wordpress эти коды вставлять не нужно – только в файл search.php. Вот перечень тех изменений, которые могут вам понравиться:

  1. — Функция подсчета результатов поиска.
  2. — Функция подсветки совпадений в результатах поискового запроса.
  3. — Функция исключения определенных рубрик из результатов поиска.
  4. — Улучшение внешнего вида страницы «не найденных запросов».

Выводим на страницу подсчет результатов поиска

Откройте файл поиск вордпресс – это файл search.php — он расположен в вашем шаблоне темы. Отрыть его можно из админки, во вкладке «Внешний вид» — «Редактор». В результатах должна быть примерно такая строка:

Выводим на страницу подсчет результатов поиска

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

<?php get_header(); ?>

А вот сам код:

   <h2 class="searpage">По Вашему запросу "<?php

   $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(' &mdash; ');

   if ($count == 1):

   echo $count . ' '; _e('результат');

   else:

   if ($count > 4):

   echo $count . ' '; _e('результатов');

   else:

   echo $count . ' '; _e('результата');

   endif;

   endif;

   wp_reset_query(); ?></h2>

Проверьте, каков результат. Я проверял – в коде ошибок нет. Теперь ваш wordpress поиск будет включать в себя такую информацию (к примеру):

По Вашему запросу «запрос» — 2 результата.

Теперь нужно добавить стили:


   span.search-terms {

   color:#cc0000;

   }

   h2.searpage{

   font:bold 14px arial;

   margin-left:30px;

   color:#383838;

   font-style:italic;

   }

А сам поисковый запрос, как и прежде, вам нужно вбивать в стандартный виджет поиска wordpress.

Функция подсветки при всех совпадениях из поискового запроса

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

Функция подсветки при всех совпадениях из поискового запроса

Главное, чтобы в ней имелся приблизительно такой код:


   <?php the_title(); ?>

Или похожий – для разных шаблонов решения будут разными, поэтому не говорите мне, что я даю неточные советы. Так вот, этот отрывок необходимо заменить на код:

 


<?php

   $title = get_the_title();

   $keys = explode(" ",$s);

   $title = preg_replace('/('.implode('|', $keys) .')/iu', '<strong class="search-excerpt">\0</strong>', $title);

   echo $title;

   ?>

Но это еще не все. Затем найдите один из двух вариантов кода:

 


<?php the_excerpt(); ?>

Или этот:

 


 <?php the_content(); ?>

И замените его на такой фрагмент кода:

 


<?php

   $excerpt = get_the_excerpt();

   $keys = explode(" ",$s);

   $excerpt = preg_replace('/('.implode('|', $keys) .')/iu', '<strong class="search-excerpt">\0</strong>', $excerpt);

   echo $excerpt;

   ?>

Теперь в свой файл стилей style.css добавьте оформление, чтобы результат совпадений подсвечивался тем цветом, который вам больше нравится:


   .search-excerpt {

   color:#ff0000;

   background:yellow;

   }

После этих изменений ваш wordpress поиск по сайту будет выдавать результаты с подсветкой красным цветом.

Как исключить определенные рубрики из результатов поиска

Как еще можно улучшить поиск wordpress? Бывает и такая потребность – вы не хотите, чтобы какие-то рубрики участвовали в поиске, например, те рубрики, которые используются для запароленных записей или для продажи ссылок. Как это сделать? Открывайте файл functions.php вашего шаблона темы, и в конце всех записей, перед знаком «?>», добавляйте следующий код:

 


<?php

   function SearchFilter($query) {

   if ($query->is_search) {

   $query->set('cat','1,12');

   }

   return $query;

   }

   add_filter('pre_get_posts','SearchFilter');

   ?>

Строка     $query->set(‘cat’,’1,2,3,4,5′); отвечает за маскировку ненужных рубрик, поэтому туда вписывайте ID тех рубрик, которые вы хотите исключить. Если рубрик несколько — прописываете через запятую. Как узнать ID рубрик, я писал в статье Как самому сделать слайдер для wordpress без плагина.

Делаем лучше страницу «не найденных результатов»

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

Мы можем активировать функцию, которая будет выводить все результаты, которые «причастны» к запросу, то есть, даже косвенные. Для этого снова отрывайте файл search.php, и ищите там стандартную строку, у меня она выглядит вот так:


 <h2 class="page-title"><?php _e( 'Nothing Found', '' ); ?></h2>

Удаляйте ее, и вместо нее вставляйте следующее:

 


<div class="pageser">

   <h2 class="sercen">К сожалению, Ваш запрос не дал никаких результатов. Возможно, список страниц и записей блога поможет найти то, за чем Вы пришли к нам:</h2>

   <br /><br />

   <h3>Все страницы:</h3>

   <ul>

   <?php wp_list_pages('title_li='); ?>

   </ul>

   <h3>Все статьи:</h3>

   <ul>

   <?php $archive_query = new WP_Query('showposts=1000');

   while ($archive_query->have_posts()) : $archive_query->the_post(); ?>

   <li><a href="<?php the_permalink() ?>" rel="bookmark" title="Постоянная ссылка на <?php the_title(); ?>"><?php the_title(); ?></a> <strong><?php comments_number('0', '1', '%'); ?></strong></li>

   <?php endwhile; ?>

   </ul>

   <h3>Архив блога по месяцам:</h3>

   <ul>

   <?php wp_get_archives('type=monthly'); ?>

   </ul>

   <h3>Рубрики:</h3>

   <ul>

   <?php wp_list_categories('title_li=0'); ?>

   </ul>

   </div>

Из кода понятно, что предлагается вся информация, которая на данный момент есть на вашем сайте. Для завершения оформим стили:


.pageser h2 {

   text-align:center;

   }

   .pageser h2,h3 {

   border-bottom:1px solid #CCCCCC;

   }

   .pageser li {

   list-style-image:url(images/imgul.png) ;

   margin-left:25px;

   }

Стили вы отредактируете под ваш дизайн блога, а строка (images/imgul.png) означает, что вам нужно добавить маленькое изображение, которое будет заменять маркеры ul. Если вы не хотите, чтобы маркеры отображались в виде картинки – просто уберите эту строчку.

Еще один способ подсветки результатов поиска

Нашел по ходу написания статьи еще один оригинальный способ подсветки поисковых результатов. Чтобы сделать вывод результатов более красивым, вам нужно будет совсем немного поковыряться в 2-х файлах — файл search.php и файл стилей style.css. В первом файле найдите строку thе_titlе (). Замените ее на еcho $titlе;. Перед этой строкой вставьте такой фрагмент кода:


<?php

$title = get_the_title();

$keys= explode(" ",$s);

$title = preg_replace('/('.implode('|', $keys) .')/iu','<strong class="search-excerpt">&#92;&#48;</strong>',$title);

?>

Сохраните файл search.php и переходите к файлу стилей style.css. В него нужно добавить такую строку:


strong.search-excerpt { background: red; }

Цвета могут быть любыми — red, white, yellow – какой захотите. Можете также прописывать цвета в формате #FF00AAA. Этот файл тоже не забудьте сохранить.

Теперь – о том, как сделать вашу форму поиска более красивой. Результаты поиска мы уже улучшили, но было бы неплохо улучшить и поисковую форму. Есть несколько довольно привлекательных способов.

Красивая форма поиска

Есть у меня в запасе несколько красивых форм поиска для сайта или блога — я их все проверял на своих поддоменах, поэтому рекомендую смело. Но вы должны понимать, что это просто форма поиска wordpress, без обработчика. Вы также должны представлять себе, что любая поисковая форма без обработчика не будет работать, то есть — не будет выдавать желаемый результат.

Обработчик – это та самая страница результатов поиска, о которой мы только что говорили выше, так что не пугайтесь, с обработчиком у нас уже все в порядке.

Простой поиск для блога

Это наипростейшая форма поиска, без наворотов и прибамбасов. Такая форма по умолчанию стоит в чистом Вордпресс.

Простой поиск для блога

Вставляете код, который видите ниже, в файлы header.php или footer.php, между тэгами <body> форма поиска </body>


<form method="get" action="">

<input class="search-text" type="text" name="s" id="s" value="Поиск..." onfocus="if (value == 'Поиск...') {value = ''}" onblur="if (value == '') {value = 'Поиск...'}" />

<input class="search-btn" type="submit" value="ok" />

</form>

Форма поиска с подсветкой поля

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

Форма поиска с подсветкой поля

Вставьте этот код на сайте между тег <body> форма поиска </body>


<form method="get" action="">

<input

 onblur="this.value=(this.value=='')?this.title:this.value;this.style.backgroundColor='#ccc';"

 onfocus="this.value=(this.value==this.title)?'':this.value;this.style.backgroundColor='#fff';"

 value="Поиск"

 title="Поиск"

 type="text"

style="text-align: center; background-color: #ccc;" />

<input class="search-btn" type="submit" value="ok" />

</form>

Красивая и простая форма поиска

В этой форме нужно использовать картинку. Вы можете вставить любое свое изображение, которое вам больше нравится.

Красивая и простая форма поиска

Код нужно опять же вставить между тэгами <body> форма поиска </body>.


<form method="get" action="">

<input name="nomer2" value="" size="20" type="text" style="

color: rgb(255, 255, 255);

border: 2px solid rgb(100, 117, 134);

padding: 5px 2px 5px 30px;

background: url(1.png) no-repeat scroll 5% 50% rgb(68, 85, 102);

">

</form>

background: url(1.png) no-repeat scroll 5% 50% rgb(68, 85, 102); — я выделил красным картинку, которую вы можете смело поменять.

Резиновая форма поиска

Резиновая она потому, что при нажатии на нее поле ввода поискового запроса растягивается по ширине на такую ширину, которую вы укажете в коде.

Вот форма до нажатия:

Резиновая форма поиска
Вот форма после нажатия:

Резиновая форма поиска


<html>

<head>

<style>

.form-search {

 display: inline-block;

 background: -moz-linear-gradient(#D3D3D3, #CACACA 50%, #A9A9A9 50%, #9B9B9B);

 background: -ms-linear-gradient(#D3D3D3, #CACACA 50%, #A9A9A9 50%, #9B9B9B);

 background: -o-linear-gradient(#D3D3D3, #CACACA 50%, #A9A9A9 50%, #9B9B9B);

 background: -webkit-linear-gradient(#D3D3D3, #CACACA 50%, #A9A9A9 50%, #9B9B9B);

 border-radius: 5px;

 padding: 4px;

}

.form-search input {

 width: 75px;

 height: 32px;

 line-height: 32px;

 font: 13px Helvetica, Arial, sans-serif;

 color:#6E7074;

 text-shadow: 0 1px 0 #FFF;

 -moz-transition: all .2s ease-out;

 -webkit-transition: all .2s ease-out;

 -o-transition: all .2s ease-out;

 transition: all .2s ease-out;

 padding: 0 30px 0 6px;

 background-image: url("search.png"), -moz-linear-gradient(#BCBCBC, #EBEBEB);

 background-image: url("search.png"), -ms-linear-gradient(#BCBCBC, #EBEBEB);

 background-image: url("search.png"), -o-linear-gradient(#BCBCBC, #EBEBEB);

 background-image: url("search.png"), -webkit-linear-gradient(#BCBCBC, #EBEBEB);

 background-repeat: no-repeat;

 background-position: 100% 50%, 100% 100%;

 border: 1px solid #747474;

 border-radius: 3px;

 box-shadow: inset 0 1px 1px #575555, 0 1px 0 #FFF;

}

.form-search input:focus {

 width: 160px;

 box-shadow: inset 0 1px 1px #46575b, 0 1px 0 #FFF;

 color: #25464D;

 background-image: url("search.png"), -moz-linear-gradient(#9CC2CA, #DFECEF);

 background-image: url("search.png"), -ms-linear-gradient(#9CC2CA, #DFECEF);

 background-image: url("search.png"), -o-linear-gradient(#9CC2CA, #DFECEF);

 background-image: url("search.png"), -webkit-linear-gradient(#9CC2CA, #DFECEF);

}

</style>

</head>

<body>

<form class="form-search" method="get" action="/search" target="_blank">

<input type="text" name="q" placeholder="поиск" value=""/>

</form>

</body>

</html>

  1. search.png — это картинка, вы можете поменять на свою.
  2. .form-search input — параметры в CSS до нажатия,
  3. width: 75px; — ширина поля,
  4. height: 32px; — высота поля,
  5. .form-search input:focus — параметры в CSS после нажатия,
  6. width: 160px; — ширина поля после нажатия.

Еще одна красивая форма поиска

В этой форме изображение не используется – все решается при помощи  CSS.

Еще одна красивая форма поиска


<html>

<head>

<style>

.searchform {

display: inline-block;

zoom: 1;

*display: inline;

border: solid 1px #d2d2d2;

padding: 3px 5px;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;

-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);

-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);

box-shadow: 0 1px 0px rgba(0,0,0,.1);

background: #f1f1f1;

background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));

background: -moz-linear-gradient(top, #fff, #ededed);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */

}

.searchform input {

font: normal 12px/100% Arial, Helvetica, sans-serif;

}

.searchform .searchfield {

background: #fff;

padding: 6px 6px 6px 8px;

width: 202px;

border: solid 1px #bcbbbb;

outline: none;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;

-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

}

.searchform .searchbutton {

color: #fff;

border: solid 1px #494949;

font-size: 11px;

height: 27px;

width: 27px;

text-shadow: 0 1px 1px rgba(0,0,0,.6);

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;

background: #5f5f5f;

background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));

background: -moz-linear-gradient(top, #9e9e9e, #454545);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */

}

</style>

</head>

<body>

<form class="searchform">

<input class="searchfield" type="text" value="Поиск..." onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" />

<input class="searchbutton" type="button" value="Да" />

</form>

</body>

</html>

Все эти формы поиска вы можете вставить в файл или просто в текстовый виджет, и у вас получится новый виджет поиска wordpress. Пожалуй, на этом пора заканчивать – примеров достаточно, и вам есть, над чем работать. Успехов вам, и до следующей встречи!