Как создать динамический маркетинговый список клиентов в WordPress с помощью AJAX

Автор: Георгий Панин | Опубликовано: 21.01.2026

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

Почему стоит использовать AJAX для маркетинговых списков в WordPress

Использование AJAX позволяет обновлять контент страницы без её полной перезагрузки. Это особенно важно для маркетинговых списков, где пользователи часто фильтруют и ищут клиентов по разным параметрам, например, по статусу подписки, дате регистрации или активности. AJAX обеспечивает плавный пользовательский опыт, снижает нагрузку на сервер и ускоряет получение нужных данных.

Кроме того, реализация через AJAX поможет интегрировать функционал с любыми плагинами, например, WPRemark для сбора отзывов или Expert Review для оценки клиентов.

Создание кастомного типа поста «Клиенты» для маркетингового списка

Первый шаг — зарегистрировать пользовательский тип записей «clients» для хранения данных о клиентах. Это позволит удобно управлять клиентами из админки и быстро выбирать их через WP_Query.

function wpmarketing_register_clients_cpt() {
    $labels = array(
        'name' => 'Клиенты',
        'singular_name' => 'Клиент',
        'menu_name' => 'Клиенты',
        'add_new' => 'Добавить клиента',
        'add_new_item' => 'Добавить нового клиента',
        'edit_item' => 'Редактировать клиента',
        'new_item' => 'Новый клиент',
        'view_item' => 'Просмотреть клиента',
        'search_items' => 'Поиск клиентов',
    );

    $args = array(
        'labels' => $labels,
        'public' => false,
        'show_ui' => true,
        'supports' => array('title', 'custom-fields'),
        'capability_type' => 'post',
        'has_archive' => false,
    );

    register_post_type('clients', $args);
}
add_action('init', 'wpmarketing_register_clients_cpt');

В этом коде мы создаём тип поста, который не будет публичным на сайте, но будет отображаться в админке. Для хранения дополнительных данных клиента используйте произвольные поля (custom fields).

Добавление AJAX-обработчика для динамического получения списка клиентов

Теперь создадим AJAX-функцию, которая по запросу будет возвращать список клиентов с фильтрацией. Для примера реализуем фильтр по метаполю client_status — статус клиента.

function wpmarketing_ajax_get_clients() {
    // Проверяем nonce для безопасности
    check_ajax_referer('wpmarketing_ajax_nonce', 'security');

    $status = isset($_POST['status']) ? sanitize_text_field($_POST['status']) : '';
    $args = array(
        'post_type' => 'clients',
        'posts_per_page' => 20,
    );

    if (!empty($status)) {
        $args['meta_query'] = array(
            array(
                'key' => 'client_status',
                'value' => $status,
                'compare' => '=',
            ),
        );
    }

    $query = new WP_Query($args);
    $clients = array();

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $clients[] = array(
                'id' => get_the_ID(),
                'name' => get_the_title(),
                'status' => get_post_meta(get_the_ID(), 'client_status', true),
            );
        }
        wp_reset_postdata();
    }

    wp_send_json_success($clients);
}
add_action('wp_ajax_wpmarketing_get_clients', 'wpmarketing_ajax_get_clients');
add_action('wp_ajax_nopriv_wpmarketing_get_clients', 'wpmarketing_ajax_get_clients');

Этот код обрабатывает AJAX-запросы, возвращая массив клиентов в формате JSON. Обратите внимание на проверку check_ajax_referer для безопасности.

Создание пользовательского интерфейса и скрипта AJAX на стороне клиента

Добавим на страницу маркетингового списка фильтр по статусу и место для вывода результатов. Затем напишем JavaScript, который будет отправлять AJAX-запрос и обновлять список без перезагрузки.

<div id="wpmarketing-client-filter">
    <select id="wpmarketing-status-filter">
        <option value="">Все статусы</option>
        <option value="active">Активные</option>
        <option value="inactive">Неактивные</option>
    </select>
</div>
<div id="wpmarketing-client-list">Загрузка списка клиентов...</div>

<script>
    (function($){
        function wpmarketingLoadClients() {
            var status = $('#wpmarketing-status-filter').val();
            $.ajax({
                url: wpmarketing_ajax_object.ajax_url,
                type: 'POST',
                data: {
                    action: 'wpmarketing_get_clients',
                    security: wpmarketing_ajax_object.nonce,
                    status: status
                },
                success: function(response) {
                    if(response.success) {
                        var clients = response.data;
                        var html = '';
                        if(clients.length) {
                            html += '<ul>';
                            clients.forEach(function(client) {
                                html += '<li>' + client.name + ' (' + client.status + ')</li>';
                            });
                            html += '</ul>';
                        } else {
                            html = 'Клиенты не найдены.';
                        }
                        $('#wpmarketing-client-list').html(html);
                    } else {
                        $('#wpmarketing-client-list').html('Ошибка загрузки.');
                    }
                },
                error: function() {
                    $('#wpmarketing-client-list').html('Ошибка запроса.');
                }
            });
        }

        $(document).ready(function(){
            wpmarketingLoadClients();
            $('#wpmarketing-status-filter').on('change', wpmarketingLoadClients);
        });
    })(jQuery);
</script>

Для работы скрипта необходимо локализовать переменные AJAX и nonce из PHP:

function wpmarketing_enqueue_scripts() {
    wp_enqueue_script('jquery');
    wp_localize_script('jquery', 'wpmarketing_ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpmarketing_ajax_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wpmarketing_enqueue_scripts');

Расширение функционала: добавление пагинации и поиска

Для удобства маркетологов можно добавить пагинацию и поиск по имени клиента. В AJAX-обработчик добавим параметры paged и search:

$paged = isset($_POST['paged']) ? intval($_POST['paged']) : 1;
$search = isset($_POST['search']) ? sanitize_text_field($_POST['search']) : '';

$args['paged'] = $paged;
if (!empty($search)) {
    $args['s'] = $search;
}

На клиентской стороне добавим поля для поиска и кнопки пагинации, а в JavaScript обновим логику для передачи этих параметров и обработки результата с общей страницей и количеством страниц.