WordPress: подсветка искомого запроса в результатах поиска

Узнал о забавной финтифлюшке, которую можно применить на сайте, работающем на движке WordPress.

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

Ниже рассказываю, каким образом это делается. Для осуществления задачи нам потребуется файл search.php.

Если у вас на сайте используется поиск, но в папке с шаблоном сайта нет файла search.php, то прошу вас самостоятельно изучить вопрос о том, какие необходимы изменения в шаблоне, чтобы они отобразились только на странице результатов поиска.

Интегрируем

1. Находим в шаблоне следующий код:

   1	<?php the_title(); ?>

   И заменяем его на такой код:

   1 2 3 4 5 6

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

2. Затем ищем код, похожий на этот:

   1	<?php the_excerpt(); ?>

   или похожий на этот:

   1	<?php the_content(); ?>

   И заменяем его на следующий код:

   1 2 3 4 5 6

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

   Если у вас в шаблоне использовалась функция the_content(), то, чтобы как и прежде выводился полный текст поста, необходимо в предыдущем куске кода заменить get_the_excerpt() на get_the_content(). Только учтите, что в этом случае возможны случаи некорректного отображения форматирования поста. Поэтому я рекомендую в результатах поиска выводить анонс поста (get_the_excerpt()).

   Чтобы подсвечивать слова только по их полному соответствию запросу, в вышеуказанных кодах замените:

   1	'/('.implode('|', $keys) .')/iu'

   на:

   1	'~/b('.implode('|', $keys) .')/b~iu'

3. Теперь лишь осталось с помощью CSS подсветить слова искомого запроса. Для этого в файле стилей своего шаблона добавляем вот такое правило:

   1	.search-excerpt { background: #FF9 }

4. Готово. Наслаждаемся результатом =)

Как HTML-тег, так и стиль к нему (<strong class=”search-excerpt”></strong>) вы можете заменить на какой-либо другой, если есть желание. В этом случае внесите соответствующие корректировки в вышеуказанный php-код. Можно, например, сделать так, чтобы в заголовке фон выделенных слов был одним цветом, а в тексте поста другим.

Пример

Ну и, конечно же, посмотрим, как это выглядит прямо на данном блоге. К примеру, запрос “предпросмотр комментария“.

Единственный минус, который я нахожу в данной технике - если в поисковом запросе будет присутствовать какое-то очень короткое слово, например, предлог “в”, то на странице результатов будет выделена каждая буква “в”, которая присутствует в посте в любом слове.