Сышышь ты, выходи сюда,
поговорим !

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

Опубликовано: 01.09.2018

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

Так, что-то я разговорился, пора уже приступить к делу :).

Чтобы сделать  подсветку в поиске, откройте в вашей теме файл  search.php ( найдите в админ панеле  Внешний вид > Редактор > search.php ).

1) В файле search.php  найдите функцию <?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) Далее в этом же файле search.php ищем функцию

<?php the_excerpt(); ?> или <?php the_content(); ?> и меняем ее на вот это:

<?php $excerpt = get_the_excerpt(); $keys = explode(" ",$s); $excerpt = preg_replace('~/b('.implode('|', $keys) .')/b~iu', '<strong class="search-podsvetka">\0</strong>', $excerpt); echo $excerpt; ?>

Сохраняем файл.

Теперь откроем файл  style.css  ( найдите в админ панеле  Внешний вид > Редактор > style.css ).

3) Добавьте  в файл style.css одну строчку:

.search-podsvetka {background: yellow;}

yellow - с анг. означает желтый цвет, можно здесь писать и обычным кодом #FFFF00 , это будет тот же желтый цвет, или воспользуйтесь другими ( #cc0000 - красный, #00FF00 - зеленый, #0000FF - синий).

Сохраните файл.

Вот и все, проверяйте и наслаждайтесь вашим новым эффектом. Теперь и на вашем блоге будет подсветка в результатах поиска.

Если данный способ вам не понравился, вы можете использовать разные плагины  Search Hilite или  Search Unleashed.

С уважением Webmasterok2009

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

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

Метки: wordpress

rss