Как добавить AJAX в WordPress: пошаговые ajax wordpress примеры и готовый код

Что такое AJAX в WordPress и зачем он нужен

AJAX (Asynchronous JavaScript and XML) позволяет обмениваться данными с сервером без полной перезагрузки страницы. В WordPress это значит, что вы можете обновлять части шаблона, отправлять формы или подгружать посты «на лету», не теряя контекста пользователя.

Для разработчиков AJAX открывает три основных пути:

• встроенный admin-ajax.php – классический способ, поддерживаемый с первых версий WP;
• обработчики admin-post.php – удобны для форм, где нужен POST без JavaScript‑библиотек;
• REST API – современный, гибкий и полностью совместимый с любой SPA.

Ниже разберём каждый из подходов с готовыми ajax wordpress примеры и покажем, как интегрировать их в тему или плагин.

Работа через admin-ajax.php: базовый пример

Регистрация обработчика в functions.php

add_action( 'wp_enqueue_scripts', function() {
    wp_enqueue_script( 'my-ajax', get_template_directory_uri() . '/js/my-ajax.js', array('jquery'), null, true );
    wp_localize_script( 'my-ajax', 'myAjax', array(
        'url'  => admin_url( 'admin-ajax.php' ),
        'nonce'=> wp_create_nonce('my_ajax_nonce')
    ));
});

// Обработчик для авторизованных пользователей
add_action( 'wp_ajax_my_get_time', 'my_get_time' );
// Обработчик для гостей
add_action( 'wp_ajax_nopriv_my_get_time', 'my_get_time' );

function my_get_time() {
    check_ajax_referer( 'my_ajax_nonce', 'security' );
    wp_send_json_success( array( 'time' => current_time('mysql') ) );
}

JavaScript‑часть (js/my-ajax.js)

jQuery(document).ready(function($){
    $('#show-time').on('click', function(){
        $.post(myAjax.url, {
            action: 'my_get_time',
            security: myAjax.nonce
        }, function(response){
            if(response.success){
                $('#time-output').text('Текущее время: '+response.data.time);
            }
        });
    });
});

Блок разметки:

<button id="show-time">Показать время</button>
<div id="time-output"></div>

Готово – при нажатии кнопку пользователь получит актуальное время без перезагрузки.

Обработка POST‑запросов через admin-post.php

Кратко о различиях

В отличие от admin-ajax.php, admin-post.php не требует передачи параметра action в запросе. Это удобно, когда форма уже отправляется методом POST и вам не нужен jQuery‑обёртка.

Регистрация обработчика

add_action( 'admin_post_nopriv_save_feedback', 'save_feedback' );
add_action( 'admin_post_save_feedback', 'save_feedback' );

function save_feedback(){
    if ( ! wp_verify_nonce( $_POST['feedback_nonce'], 'save_feedback' ) ) {
        wp_die('Security check failed');
    }
    $message = sanitize_text_field( $_POST['message'] );
    // Здесь можно сохранить в БД, отправить email и т.д.
    wp_redirect( home_url('/thanks/') );
    exit;
}

HTML‑форма

<form action="" method="post">
    <input type="hidden" name="action" value="save_feedback">
    <input type="hidden" name="feedback_nonce" value="">
    <textarea name="message" required></textarea>
    <button type="submit">Отправить</button>
</form>

После отправки пользователь будет перенаправлен на страницу /thanks/ без AJAX‑перехода, но вы всё равно можете добавить клиентский скрипт для «мягкой» отправки.

Использование REST API для AJAX‑операций

Регистрация собственного эндпоинта

add_action( 'rest_api_init', function(){
    register_rest_route( 'my/v1', '/last-posts', array(
        'methods'  => WP_REST_Server::READABLE,
        'callback' => 'my_get_last_posts',
        'permission_callback' => '__return_true', // публичный доступ
    ) );
});

function my_get_last_posts( $request ) {
    $posts = get_posts( array(
        'numberposts' => 5,
        'post_status' => 'publish',
    ) );
    $data = [];
    foreach ( $posts as $post ) {
        $data[] = [
            'id'    => $post->ID,
            'title' => get_the_title( $post ),
            'link'  => get_permalink( $post ),
        ];
    }
    return rest_ensure_response( $data );
}

Запрос из JavaScript

fetch( wpApiSettings.root + 'my/v1/last-posts', {
    method: 'GET',
    headers: { 'X-WP-Nonce': wpApiSettings.nonce }
})
.then(r => r.json())
.then(posts => {
    const list = document.getElementById('post-list');
    posts.forEach(p => {
        const li = document.createElement('li');
        li.innerHTML = `${p.title}`;
        list.appendChild(li);
    });
});

Не забудьте вывести wp_localize_script с wpApiSettings (WordPress уже делает это для большинства тем):

wp_enqueue_script( 'my-rest', get_template_directory_uri() . '/js/my-rest.js', array(), null, true );

REST‑подход идеально подходит для «голового» фронтенда, а также для мобильных приложений, где нужен JSON‑ответ.

Практический пример: динамическая подгрузка постов

Сценарий

Нужна кнопка «Показать ещё», которая подгружает порцию записей без перезагрузки. Мы используем admin-ajax.php, так как это самый простой способ в традиционных темах.

PHP‑часть

add_action( 'wp_ajax_load_more_posts', 'load_more_posts' );
add_action( 'wp_ajax_nopriv_load_more_posts', 'load_more_posts' );

function load_more_posts(){
    check_ajax_referer('load_more_nonce','security');
    $paged = intval( $_POST['page'] );
    $query = new WP_Query( array(
        'post_type'      => 'post',
        'posts_per_page' => 5,
        'paged'          => $paged,
    ) );
    if( $query->have_posts() ) {
        while( $query->have_posts() ) { $query->the_post();
            get_template_part('template-parts/content', 'excerpt');
        }
    }
    wp_die();
}

JavaScript‑часть

let page = 2; // первая загрузка уже на странице 1
$('#load-more').on('click', function(){
    $.post(myAjax.url, {
        action: 'load_more_posts',
        security: myAjax.nonce,
        page: page
    }, function(response){
        $('#post-container').append(response);
        page++;
    });
});

Разметка

<div id="post-container">
    5) );
        while($q->have_posts()){ $q->the_post();
            get_template_part('template-parts/content','excerpt');
        }
    ?>
</div>
<button id="load-more">Показать ещё</button>

Благодаря AJAX пользователь видит новые записи мгновенно, а сервер обрабатывает лишь запросы с нужными параметрами.

Оптимизация и безопасность AJAX‑запросов

С учётом того, что AJAX открывает «точку входа» в ваш код, следует соблюдать несколько правил:

• Всегда проверяйте nonce – check_ajax_referer() или wp_verify_nonce().
• Санитизируйте входные данные: sanitize_text_field(), absint() и т.д.
• Ограничьте доступ правами: current_user_can() для админ‑запросов.
• Кешируйте тяжёлые запросы (например, через transient API), чтобы не перегружать БД.

Для ускорения загрузки скриптов стоит разместить их после критических стилей. Если вам важна производительность, посмотрите Bunny Fonts WordPress – замена Google Fonts сокращает количество запросов, а значит, ускоряет работу и AJAX‑скриптов.

Также полезно мониторить время отклика сервера. Сервис Uptime мониторинг WordPress поможет вовремя увидеть падения, связанные с некорректными AJAX‑эндпоинтами.

Если вы планируете защиту от DDoS‑атак, взгляните на сравнение плагинов безопасности WordPress 2026 – многие из них умеют ограничивать количество запросов к admin-ajax.php.

Итоги

Мы рассмотрели три способа реализации AJAX в WordPress и предоставили готовый набор ajax wordpress примеры для большинства задач: от простого получения времени до подгрузки списка записей. Выбор подхода зависит от проекта – классический admin-ajax.php прост в настройке, admin-post.php удобен для форм, а REST API – лучший вариант для современных SPA и мобильных приложений.

Применяйте рекомендации по безопасности, следите за производительностью, и ваш сайт будет отзывчивым и защищённым.