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

Когда человек вводит в строке поиска слово или фразу, которую он хочет найти и нажимает на кнопку поиск, по умолчанию, перед ним открывается список записей и страниц, где эта фраза встречается. Я хочу предложить Вам небольшой скрипт, который при выводе результатов поиска, будет подсвечивать, выделять ту самую фразу или слово. Вы могли встречать такой функционал на других сайтах и если Вам это понравилось, то далее я покажу как это сделать на своем сайте WordPress.

Установка подсветки текста результатов поиска, начинается с того, что нужно найти в папке с темой и открыть для редактирования файл, который отвечает за вывод результатов поиска - search.php.

В этом файле нужно заменить два вызова функций. Первая замена, это замена вызова заголовка - the_title();, так что меняем:

Это

<?php the_title(); ?>

На это

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

Теперь подсветка будет осуществляться в заголовке. Далее сделаем подсветку в тексте, который под заголовком. Для этого нужно найти функцию вызова тизера - the_excerpt(); и заменить ее.

Это

<?php the_excerpt(); ?>

На это

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

Если у Вас не используется тизер the_excerpt();, значит у вас вызывается функция вывода контента the_content() и для ограничения вывода текста, используется тег - more. Тогда, Вам нужно найти the_content и заменить на скрипт приведенный выше, тот же, что и с тизером, только вам нужно в скрипте выше заменить get_the_excerpt на the_content Тогда нужно заменить:

Это

<?php the_content(); ?>

На это

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

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

Открываем style.css и дописываем в него следующий код:

.search_expt{background:#f30;color:#fff;}  

Теперь текст будет выделятся оранжевым фоном, а сам будет белого цвета. Конечно же можете изменить все стили под себя. Если все сделано правильно, Вы сразу же увидите готовый результат. Для этого введите часть названия любой статьи и тд., в общем любое слово или фразу, что встречается на Вашем сайте.

На этом все, спасибо за внимание. 🙂