X
  • Дизайн и разработка сайта
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2022-06-30
  • 4391 переглядів

    4 коментар

  • Дизайн и разработка сайта

Доброго времени суток. 🙂

Эта статья будет посвящена одному из улучшений по 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;}  

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

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

Якщо Вам була корисна моя праця, можете фінансово підтримати сайт або відключити блокувальник реклами, що займе 2 хвилини :)

Хочу підтримати фінансово Хочу відключити блокувальник

Оцініть статтю
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 3, в среднем: 5 из 5
Читайте також
Опубликовано 4 комментария

Добавить комментарий

Чтобы оставить комментарий - заполните поля ниже. Ваш e-mail не будет опубликован. Все поля обязательны

Натисніть, щоб додати код в коментар. Далі додайте свій код всередину тегів <code> тут код </code>
Я ознайомлений(а) з політикою конфіденційності і даю згоду на обробку персональних даних*

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.