WordPress: Поиск по Сайту (без плагинов)

Сегодня разберёмся, как в WordPress реализовать AJAX поиск по сайту (так называемый «Живой поиск») без использования плагинов. Настроим его должным образом. Рассмотрим, как реализовать поиск по записям, страницам или произвольным типам записей. А также исключим определённые страницы/записи из поиска.

Код поиска WordPress

Код поиска находится в файле searchform.php. Именно данный файл вам нужно выводить в том месте, где это необходимо. Чтобы вывести форму поиска WordPress, воспользуйтесь следующим кодом.

<?php get_search_form(); ?>

Ваш шаблон поиска searchform.php может выглядеть примерно так.

<form
    class="search-form"
    role="search"
    method="get"
    id="searchform"
    action="<?php echo home_url('/') ?>"
>
    <input
        class="search-form__input"
        type="text"
        value="<?php echo get_search_query() ?>"
        name="s" id="s"
        placeholder="Поиск на сайте WordPress"
        autocomplete="off"
    />
    <button type="submit" id="searchsubmit">
        <svg xmlns="https://www.w3.org/2000/svg" width="19.856" height="20.848" viewBox="0 0 19.856 20.848">
            <path d="M91.119,310.567l-4.713-4.713a8.8,8.8,0,0,0,2.51-6.147,8.708,8.708,0,1,0-8.708,8.708,8.983,8.983,0,0,0,5.02-1.588l4.815,4.815a.877.877,0,0,0,1.127,0A.792.792,0,0,0,91.119,310.567ZM73.037,299.708a7.171,7.171,0,1,1,7.171,7.171A7.192,7.192,0,0,1,73.037,299.708Z" transform="translate(-71.5 -291)" fill="#414544" />
        </svg>
    </button>
    <ul class="ajax-search"></ul>
</form>

Стили для выпадающего списка результатов поиска.

/* ajax search */

.search-form {
    position: relative;
}

.ajax-search {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    right: 0;
    background: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    margin-top: 5px;
    max-height: 230px;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 100;
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #424348;
    scrollbar-color: dark;
    scrollbar-width: thin;
    overscroll-behavior: contain;
}

.ajax-search::-webkit-scrollbar {
    width: 6px;
    background-color: #eff2f3;
}

.ajax-search::-webkit-scrollbar-thumb {
    background-color: #dddddd;
    border-radius: 4em;
}

.ajax-search__item {
    position: relative;
    border-top: 1px solid rgba(224, 229, 231, 0.5);
    padding: 10px 15px;
    cursor: pointer;
    list-style-type: none;
}

.ajax-search__link {
    color: var(--accent);
    line-height: 130%;
    margin-bottom: 10px;
    font-size: 13px;
    display: block;
}

.ajax-search__excerpt {
    cursor: default;
    font-size: 11px;
    line-height: 140%;
}

.ajax-search__not-found {
    font-size: 12px;
}

Для реализации живого поиска мы будем использовать технологию AJAX. Таким образом, поиск по сайту WordPress будет осуществляться без перезагрузки страницы.

При вводе текста мы будем отправлять AJAX запрос в php-обработчик (создадим его в следующем пункте данной статьи). При нахождении или не нахождении данных мы будем выводить пользователю результаты поиска в виде списка <ul class=»ajax-search»></ul>, который мы подготовили в предыдущем пункте статьи.

Создайте файл ajax-search.js или просто добавьте следующий JavaScript код в ваш главный javascript файл.

jQuery(document).ready(function ($) {
    const search_input = $('.search-form__input');
    const search_results = $('.ajax-search');

    search_input.keyup(function () {
        let search_value = $(this).val();

        if (search_value.length > 2) { // кол-во символов 
            $.ajax({
                url: '/wp-admin/admin-ajax.php',
                type: 'POST',
                data: {
                    'action': 'ajax_search', // functions.php 
                    'term': search_value
                },
                success: function (results) {
                    search_results.fadeIn(200).html(results);
                }
            });
        } else {
            search_results.fadeOut(200);
        }
    });

    // Закрытие поиска при клике вне его 
    $(document).mouseup(function (e) {
        if (
            (search_input.has(e.target).length === 0) &&
            (search_results.has(e.target).length === 0)
        ) {
            search_results.fadeOut(200);
        };
    });
});

Если javascript файл вы создали отдельно, не забудьте подключить его в functions.php .

wp_enqueue_script(
    '{название_темы}-ajax-search',
    get_theme_file_uri('assets/js/ajax-search.js'), array(), '', true
);

Сам код в functions.php.

<?php

// ajax поиск по сайту 
add_action('wp_ajax_nopriv_ajax_search', 'ajax_search');
add_action('wp_ajax_ajax_search', 'ajax_search');
function ajax_search()
{
    $args = array(
        'post_type'      => 'any', // Тип записи: post, page, кастомный тип записи 
        'post_status'    => 'publish',
        'order'          => 'DESC',
        'orderby'        => 'date',
        's'              => $_POST['term'],
        'posts_per_page' => -1
    );
    $query = new WP_Query($args);
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post(); ?>
            <li class="ajax-search__item">
                <a href="<?php the_permalink(); ?>" class="ajax-search__link"><?php the_title(); ?></a>
                <div class="ajax-search__excerpt"><?php the_excerpt(); ?></div>
            </li>
        <?php }
    } else { ?>
        <li class="ajax-search__item">
            <div class="ajax-search__not-found">Ничего не найдено</div>
        </li>
<?php }
    exit;
}

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

# Подсветка результатов поиска 
add_filter('the_content', 'search_results_hightlight');
add_filter('the_excerpt', 'search_results_hightlight');
add_filter('the_title', 'search_results_hightlight');
function search_results_hightlight($text)
{
    // цвета 
    $styles = [
        '',
        'color: #000; background: #98fd65;',
        'color: #000; background: #ffcc56;',
        'color: #000; background: #98cefa;',
        'color: #000; background: #fd9897;',
        'color: #000; background: #df7dca;',
    ];

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

    $query_terms = get_query_var('search_terms');

    if (empty($query_terms))
        $query_terms = array_filter([get_query_var('s')]);

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

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

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

    return $text;
}