Когда человек вводит в строке поиска слово или фразу, которую он хочет найти и нажимает на кнопку поиск, по умолчанию, перед ним открывается список записей и страниц, где эта фраза встречается. Я хочу предложить Вам небольшой скрипт, который при выводе результатов поиска, будет подсвечивать, выделять ту самую фразу или слово. Вы могли встречать такой функционал на других сайтах и если Вам это понравилось, то далее я покажу как это сделать на своем сайте 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;}
Теперь текст будет выделятся оранжевым фоном, а сам будет белого цвета. Конечно же можете изменить все стили под себя. Если все сделано правильно, Вы сразу же увидите готовый результат. Для этого введите часть названия любой статьи и тд., в общем любое слово или фразу, что встречается на Вашем сайте.
На этом все, спасибо за внимание. 🙂
