Подсветка в результатах поиска
Опубликовано: 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
