WordPress как на ладони
wordpress jino

Подсветка результатов поиска, без использования плагинов

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

Задача: сделать подсветку результатов поиска, без использования плагинов. Решается ниже представленным способом, а точнее функцией, которая по сути аналогична, пожалуй, самому простому плагину для подсветки результатов поиска в WordPress — Search Hilite  (подсвечиваются слова и больше никаких действий).

Поместите код в файл шаблона functions.php.

## Функция для подсветки слов поиска в WordPress
add_filter('the_content', 'kama_search_backlight');
add_filter('the_excerpt', 'kama_search_backlight');
add_filter('the_title', 'kama_search_backlight');
function kama_search_backlight( $text ){
	// ------------ Настройки -----------
	$st1 = 'color: #000; background: #99ff66;';
	$st2 = 'color: #000; background: #ffcc66;';
	$st3 = 'color: #000; background: #99ccff;';
	$st4 = 'color: #000; background: #ff9999;';
	$st5 = 'color: #000; background: #FF7EFF;';

	// только для страниц поиска...
	if ( ! is_search() ) return $text;

	$query_terms = get_query_var('search_terms');
	if( empty($query_terms) ) $query_terms = array(get_query_var('s'));
	if( empty($query_terms) ) return $text;

	$n = 0;
	foreach( $query_terms as $term ){
		$n++;
		if ($n==1)    $style = $st1;
		elseif($n==2) $style = $st2;
		elseif($n==3) $style = $st3;
		elseif($n==4) $style = $st4;
		elseif($n==5) $style = $st5;

		$term = preg_quote( $term, '/' );
		$text = preg_replace("@(?<!<|</)($term)@iu","<span style='{$style}'>$1</span>",$text);
	}

	return $text;
}

Функция будет работать, если в файле search.php у вас для вывода результатов поиска используется функция the_excerpt() или the_content(). Если вывод осуществляется нестандартно, читайте ниже.

В самом начале кода можно настроить стили найденных слов: $st1 - первое слово, $st2 - второе и т.д.

По умолчанию цвета такие: Подсвечиваем результаты поиска, без плагинов.

Подсветка чего угодно

Если для вывода поиска используются функции отличные от the_excerpt() или the_content(), то чтобы подсветка работала, нужно «прогнать» выводимый текст через эту функцию.

Допустим, вы используете для вывода результатов поиска функцию get_my_excerpt(), тогда, чтобы подсветка работала вывод нужно будет записать подобным образом:

$search_result = get_my_excerpt();
echo kama_search_backlight($search_result);

Обновления

29.04.2010
Спасибо Ю.Б. за подсказку (в комментариях) использовать модификатор u для регулярного выражения - код значительно сократился.

21.04.2010

  1. Были непонятные баги с подсветкой - не все слова подсвечивались. Как выяснилось проблема была в регулярном выражении я ее упростил, теперь подсвечивается все.

  2. Теперь подсветка регистронезависима для кириллицы, т.е. если в поиске задано например, слово "поиск", то подставятся слова: "Поиск", "поиск" или "ПОИСК". Эта проблема существует и в плагине Search Hilite. Давно хотел поправить этот баг - пришлось попотеть, пока понял где собака зарыта.
Подсветка результатов поиска, без использования плагинов 29 комментариев
  • Роман cайт: jblog-project.ru

    Спасибо за статью! Очень понравилось то что можно использовать функцию для подсветки искомых слов в результатах поиска. Давно искал что то подобное, а лишний плагин не хотелось для этого подключать, использовал вашу функцию у себя на сайте dance

    Ответить2.7 года назад #
  • smspivak

    такая подсветка работает НА ВСЕЙ СТРАНИЦЕ, то есть, в сайдбаре, например, или в футере, тоже будет выделение

  • Михаил cайт: trapeznaya.ucoz.ru @

    Такой интересный баг - если строка поиска пустая, то подсвечивается всё! drinks

    Ответить2 месяца назад #
    • Михаил cайт: trapeznaya.ucoz.ru @

      Добрый день! Нашел еще баг! Если набрать английскую букву, которая есть в названии шорткода, то в результатах пойска вылезет шорткод. А без Вашего кода все ок! secret Тоже самое и с картинками, то есть вместо картинок вылазит альт.

      Ответитьмесяц назад #
      • Kama4639

        Эта подсветка для сниппетов подойдет, для полного текста, там нужна обработка посерьезней, с учетом тегов и прочего...

        Ответитьмесяц назад #
    • Kama4639

      Там вон строка есть:

      if( empty($query_terms) ) return $text;

      Так не должно быть, как это пустая?

      Ответитьмесяц назад #
      • Михаил cайт: trapeznaya.ucoz.ru @

        Если в поле ввода ничего не указать и нажать пойск.

        Эта подсветка для сниппетов подойдет, для полного текста, там нужна обработка посерьезней, с учетом тегов и прочего...

        Да, возможно, т.к. у меня полный.

        Ответитьмесяц назад #

Здравствуйте, !

Ваш комментарий