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

# Подсветка результатов поиска без использования плагинов

В WordPress существует много плагинов для улучшения поиска. Некоторые из них меняют алгоритм поиска, а другие делают поиск более удобным. В этой статье мы сосредоточимся на вторых и немного улучшим стандартный поиск WordPress: добавим подсветку искомых слов.

![Подсветка результатов поиска](https://example.com/clipboard-image-905122.png)

## Задача: Подсветить результаты поиска без использования плагинов

Это можно сделать с помощью следующего метода, который представляет собой функцию, аналогичную простейшему плагину для подсветки результатов поиска — **Search Hilite** (слова подсвечиваются без дополнительных действий).

### Как добавить код

1. Откройте файл вашей темы functions.php.
2. Вставьте следующий код:

 
add_filter( 'the_content', 'kama_search_highlight' );
add_filter( 'get_the_excerpt', 'kama_search_highlight' );
add_filter( 'the_title', 'kama_search_highlight' );

/**
 * Подсветка искомых слов в указанном тексте.
 *
 * @param string $text Текст, в котором нужно подсветить слова.
 *
 * @return string
 *
 * @version 0.1
 */
function kama_search_highlight( $text ){

    // настройки
    $styles = ['',
        'color: #000; background: #99ff66;',
        'color: #000; background: #ffcc66;',
        'color: #000; background: #99ccff;',
        'color: #000; background: #ff9999;',
        'color: #000; background: #FF7EFF;',
    ];

    // только для страниц поиска и основного цикла.
    if( ! is_search() || ! in_the_loop() )
        return $text;

    $query_terms = get_query_var( 'search_terms' );

    if( empty( $query_terms ) )
        $query_terms = array_filter( (array) get_search_query() );

    if( empty( $query_terms ) )
        return $text;

    $n = 0;
    foreach( $query_terms as $term ){
        $n++;

        $term = preg_quote( $term, '/' );
        $text = preg_replace_callback( "/$term/iu", static function( $match ) use ( $styles, $n ){
            return '<span style="'. $styles&#91; $n &#93; .'">'. $match[0] .'</span>';
        }, $text );
    }

    return $text;
}

## Как работает функция
Эта функция будет работать, если файл search.php использует функции the_excerpt() или the_content() для отображения результатов поиска. Если вывод происходит иначе, вам нужно будет передать текст через эту функцию для подсветки.
### Пример использования
Допустим, вы используете функцию get_my_excerpt() для отображения результатов поиска. Тогда для того, чтобы подсветка сработала, запишите вывод следующим образом:
$search_result = get_my_excerpt();
echo kama_search_highlight( $search_result );

## Настройка стилей
В начале кода вы можете настроить стили подсвечиваемых слов:

- $styles[1] — для первого слова,

- $styles[2] — для второго и так далее.
По умолчанию цвета следующие: 
- Зелёный

- Оранжевый

- Голубой

- Розовый

- Фиолетовый
### Важно!
Лучше добавить код прямо в файл поиска, перед контентом. Если вы добавите его в functions.php, то из-за хука:
add_filter( 'the_title', 'kama_search_highlight' );

слова также будут подсвечиваться в меню сайта, которое выводится через wp_nav_menu().
## Заключение
Теперь вы знаете, как добавить подсветку результатов поиска в WordPress без использования дополнительных плагинов. Это простой способ улучшить пользовательский опыт вашего сайта. Применяйте данный метод и наблюдайте, как ваши посетители легче находят нужную информацию!