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

11 02 2009

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

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

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

Если у вас на сайте используется поиск, но в папке с шаблоном сайта нет файла 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. Готово. Наслаждаемся результатом =)

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


Actions

Информация

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

19 05 2010
Alexey (21:14:21) :

Здраствуйте! Нашел почти то, что мне нужно. Если знаете, подскажите как сделать надпись: Вы искали «Запрос», ниже представлены результаты.

Я имею ввиду как вывести сам запрос на странице выдачи результатов? Уж остальной текст-то я напишу 🙂

4 06 2010
Саша (15:49:55) :

<?php printf( __( ‘Результаты поиска’, ‘twentyten’ ), » . get_search_query() . » ); ?>
Не это случаем?

17 06 2010
Infinity (19:22:37) :

Александр абсолютно прав, ещё как вариант:
< ?php echo 'результаты поиска:'; get_search_query(); ?>

Только вот точно не знаю, как объявить get_search_query(), возможен вариант, как переменную $get_search_query();

6 06 2017
Ivan (17:22:48) :

А заказать шлифовку паркеты вы можете на сайте euro-parket.by

Оставить комментарий

Вы можите использовать теги : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Реклама от партнеров: Срочные визы в Англию и Великобританию. Все виды срочных виз в Англию Великобританию. | Ищете новую диету - диеты. Похудеть без ущерба для здоровья. | Смотрите новости астрономии и космонавтики на этой странице http://www.Hypernova.ru/zvezd/news | http://radio23.ru/scaners/rtl2832u_r820t2 | Стеновые панели Петропавловск-Камчатский atda.ru/katalog/vnutrennyaya-otdelka/stenivie-paneli/.