Поиск по квизам в WordPress с использованием AJAX

Если на вашем сайте с квизами, например, на wpquiz.ru, накопилось много тестов, пользователям становится неудобно искать нужный квиз вручную. В этой статье мы подробно разберём, как реализовать эффективный поиск по квизам в WordPress с помощью AJAX, чтобы улучить юзабилити и ускорить работу сайта.

Почему нужен AJAX-поиск по квизам

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

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

Подготовка: тип записи и таксономии для квизов

Для начала убедимся, что ваши квизы созданы как отдельный пользовательский тип записи (custom post type), например, wpquiz_quiz. Если у вас их ещё нет, создадим:

function wpquiz_register_quiz_cpt() {
    $labels = array(
        'name' => 'Квизы',
        'singular_name' => 'Квиз',
        'add_new' => 'Добавить квиз',
        'add_new_item' => 'Добавить новый квиз',
        'edit_item' => 'Редактировать квиз',
        'new_item' => 'Новый квиз',
        'view_item' => 'Просмотреть квиз',
        'search_items' => 'Поиск квизов',
        'not_found' => 'Квизы не найдены',
    );
    $args = array(
        'labels' => $labels,
        'public' => true,
        'has_archive' => true,
        'rewrite' => array('slug' => 'quiz'),
        'supports' => array('title', 'editor', 'thumbnail'),
    );
    register_post_type('wpquiz_quiz', $args);
}
add_action('init', 'wpquiz_register_quiz_cpt');

Также полезно добавить таксономии для категорий квизов:

function wpquiz_register_taxonomy() {
    register_taxonomy(
        'wpquiz_category',
        'wpquiz_quiz',
        array(
            'label' => 'Категории квизов',
            'hierarchical' => true,
            'rewrite' => array('slug' => 'quiz-category'),
        )
    );
}
add_action('init', 'wpquiz_register_taxonomy');

Реализация AJAX-поиска: шаг за шагом

1. Подключение скрипта для AJAX-запросов

Создайте JavaScript-файл, например, wpquiz-ajax-search.js, который будет отправлять запросы на сервер при вводе текста в поле поиска и обрабатывать результаты.

jQuery(document).ready(function($) {
    $('#wpquiz-search-input').on('input', function() {
        var query = $(this).val();
        if (query.length < 3) {
            $('#wpquiz-search-results').empty();
            return;
        }
        $.ajax({
            url: wpquiz_ajax_obj.ajax_url,
            type: 'POST',
            data: {
                action: 'wpquiz_ajax_search',
                nonce: wpquiz_ajax_obj.nonce,
                query: query
            },
            success: function(response) {
                $('#wpquiz-search-results').html(response.data);
            }
        });
    });
});

Подключим этот скрипт и передадим параметры из PHP:

function wpquiz_enqueue_ajax_search_script() {
    wp_enqueue_script('wpquiz-ajax-search', get_template_directory_uri() . '/js/wpquiz-ajax-search.js', array('jquery'), null, true);
    wp_localize_script('wpquiz-ajax-search', 'wpquiz_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpquiz_search_nonce'),
    ));
}
add_action('wp_enqueue_scripts', 'wpquiz_enqueue_ajax_search_script');

2. Обработка AJAX-запроса на сервере

Создадим функцию, которая примет поисковый запрос, выполнит WP_Query по постам типа wpquiz_quiz и вернёт результаты в виде HTML:

function wpquiz_ajax_search_callback() {
    check_ajax_referer('wpquiz_search_nonce', 'nonce');

    $search_term = sanitize_text_field($_POST['query']);

    $args = array(
        'post_type' => 'wpquiz_quiz',
        's' => $search_term,
        'posts_per_page' => 10,
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        $output = '<ul class="wpquiz-search-results-list">';
        while ($query->have_posts()) {
            $query->the_post();
            $output .= '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
        }
        $output .= '</ul>';
    } else {
        $output = '<p>Квизы не найдены.</p>';
    }

    wp_reset_postdata();

    wp_send_json_success($output);
}
add_action('wp_ajax_wpquiz_ajax_search', 'wpquiz_ajax_search_callback');
add_action('wp_ajax_nopriv_wpquiz_ajax_search', 'wpquiz_ajax_search_callback');

Дополнительные возможности поиска по квизам

Фильтрация по категориям и тегам

Чтобы сделать поиск более точным, полезно добавить возможность фильтрации по категориям квизов. Для этого расширим AJAX-запрос и WP_Query параметрами таксономий.

В JavaScript добавьте передачу выбранной категории, а в PHP добавьте параметр tax_query. Это позволит пользователям искать квизы внутри определённой категории.

Пагинация результатов через AJAX

Если квизов много, стоит реализовать постраничный вывод с подгрузкой новых результатов через AJAX. Это улучшит производительность и UX. Для этого понадобится расширить обработчик запросов, передавая номер страницы и корректно формируя WP_Query.

Использование плагина WPQuiz для интеграции поиска

Если вы используете на сайте плагин WPQuiz, то он может иметь встроенные возможности для фильтрации и поиска по квизам. Рекомендуется ознакомиться с документацией плагина и интегрировать AJAX-поиск с его функционалом для максимального удобства.

Заключение: преимущества поиска по квизам с AJAX

Реализация AJAX-поиска по квизам на WordPress значительно улучшает удобство пользователей, позволяет быстро находить нужные тесты без перезагрузки страниц и снижает нагрузку на сервер. Использование кастомного типа записи и таксономий обеспечивает гибкость и расширяемость решения.

Настроив поиск с фильтрацией и пагинацией, вы получите современный и отзывчивый интерфейс, который повысит вовлечённость посетителей и улучшит поведенческие факторы сайта.