• Home
• Карта сайта

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

При помощи специального кода php и css, который вставляется в шаблон - на странице реализуется выделение слов, совпадаемых с поисковым запросом.

Чтобы осуществить данную задачу нам потребуется файл search.php

Интеграция кода:

1. Найти в шаблоне код:

<?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;
?>

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

<?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;
?>

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

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

‘/(’.implode(’|', $keys) .’)/iu’

на

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

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

.search-excerpt { background: #FF9 }

4. Готово.

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.