Главная » Wordpress » Подсветка в результатах поиска

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

2012-10-30 / Вр:21:29 / просмотров: 5226

Не знаю почему, но вот этих четыре дня у меня вдохновение писать вам посты только про эффекты для ваших блогов и сайтов. Сегодня мне захотелось поделиться с вами таким эффектом, как подсветка искомого запроса при поиске в 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 - синий).

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

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