Разбираемся с API на WordPress: REST API JSON, WP AJAX

WordPress давно перестал быть просто блоговой платформой — сегодня это полноценный фреймворк для веб-приложений. Но вместе с этим у разработчиков возникает вопрос: какой способ лучше использовать для динамического обмена данными — старый WP AJAX или современный REST API?

Давайте разберёмся.

Делаем гипер быстрые сайты с использованием HTMX, WordPress & WooCommerce

Варианты применения REST API

Техника полезная и применяется для множества современных задач и кейсов:

• создание code driven бэкенда и REST API с хорошей документацией (аналог Supabase, Strapi, Appwrite …)
• работа с JAM stack в режиме Headless CMS
• разработка SinglePageApplication (SPA) или виджетов на реактивном JavaScript аля React / Vue.js / SvelteJS
• бэкенд для мобильных приложений iOS & Android, которым нужно получать данные по REST API и обеспечивать взаимодействие
• интеграция систем — например листинг данных о товарах в Интернет-магазин на базе WordPress & WooCommerce
• AJAX — асинхронные запросы на сайте (забегая вперед, это современная замена admin ajax, который давно устарел и потерял актуальность)

Вводные и примеры работы с REST API

Большинство программистов в WordPress превратно понимают суть и работу AJAX. Все из-за залипания в словах. Есть у WordPress механизм admin-ajax, который хорошо документирован и 99% программистов уверены что AJAX надо делать через него.

«Эксперты» пишут статьи о том как это применять и почти ни у кого не возникает сомнений в адекватности такого решения.

А засада и ошибка заключается в том что admin-ajax был придуман для работы в админке. Там срабатывает тег is_admin. Тянется куча лишних файлов, кода и функционала. Для большинства маленьких сайтов ничего страшного, но если у вас более менее сложный сайт, на который приходит много функционала и трафика, то таким образом можно получить тормоза. А тормоза часто могут прибить сайт или испортить впечатление Клиентов о работе с вами.

Команда WooCommerce об этом знали, и еще до внедрения REST API — использовали правильный механизм работы с AJAX с фронта. См как работает класс WC_AJAX.

С приходом REST API у всех появилась возможность делать AJAX в WordPress правильно.

Простой пример

Представим задачу сделать плагин «my-rest-api-example», в котором будет 2 файла, которые в свою очередь обеспечат новый эндпоинт в REST API и JS + AJAX для получения и вывода данных.

my-rest-api-example.php

<?php
/*
 * Plugin Name: my-rest-api-example
 * Description: Simple example for REST API JSON WordPress
 * Version: 1.0
 */
class My_REST_API_Example{
  static public function init(){
    add_action( 'wp_enqueue_scripts', [__CLASS__, 'assets']);
    add_action( 'rest_api_init', function () {
      register_rest_route( 'my/v1', '/main-email', array(
        'methods' => 'GET',
        'callback' => [__CLASS__, 'rest_get_main_email'],
            ));
        });
  }


  /**
   * Frontend assets - scripts and styles
   */
  public static function assets(){
    wp_enqueue_script( 'wp-api' );
    wp_enqueue_script(
        $id = 'my-rest-api-example',
        $url = plugins_url( 'js-my-rest-api-example.js', __FILE__ ),
        $dep = array(
          'wp-api',
          'jquery',
        ),
        $ver = filemtime( plugin_dir_path( __FILE__ ) . 'js-my-rest-api-example.js' )
    );
  }

  /**
  * Готовим и отправляем данные через REST API
  */
  static public function rest_get_main_email(){

        $main_email = get_option('admin_email');
        if(empty($main_email )){
            wp_send_json_error();
        } else {
            wp_send_json_success($main_email);
        }

    }
}

My_REST_API_Example::init();

js-my-rest-api-example.js

window.addEventListener('DOMContentLoaded', function() {
  var endpoint = 'my/v1/main-email/';
  var request_url = wpApiSettings.root + endpoint;

  jQuery.ajax({
    url: request_url,
    type: 'GET',
    success: function(result) {

      if (result.success === false) {
        console.log('error');
        return;
      }

      if(result.data){
        console.log(result.data);
      }

    },
 
  });

});

Авторизация через App Passwords

Раньше приходилось использовать только схемы с OAuth или Basic Auth. Но начиная с WordPress 5.6 появилась удобная и безопасная альтернатива — App Passwords.

Как это работает?

• В профиле пользователя в админке (Пользователи → Ваш профиль) можно сгенерировать отдельный пароль для приложения.
• Этот пароль используется только для REST-запросов и его можно отозвать в любой момент.
• Таким образом, нет необходимости использовать основной пароль администратора.

Пример запроса с App Passwords

Допустим, мы хотим создать новую запись в WordPress через REST API.

const username = "admin";
const appPassword = "abcd efgh ijkl mnop qrst uvwx"; // сгенерированный пароль
const token = btoa(`${username}:${appPassword}`);

fetch("https://example.com/wp-json/wp/v2/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": `Basic ${token}`
  },
  body: JSON.stringify({
    title: "Новый пост через REST API",
    status: "publish",
    content: "Этот пост был создан с использованием App Passwords."
  })
})
.then(res => res.json())
.then(data => console.log(data));

Почему это удобно?

• Безопаснее, чем хранить основной пароль.
• Можно выдать разные пароли для разных приложений.
• Легко отзывать доступ без изменения основной учётки.

wpApiSettings для JavaScript

wpApiSettings — крайне важный объект для работы с REST API в WordPress. Там есть 2 переменные:

• wpApiSettings.root — тут содержится ссылка до корня REST API
• wpApiSettings.nonce — это nonce строка для авторизации пользователей

Чтобы проверить как это работает, надо написать в консоли браузера console.log(wpApiSettings);

Если у вас не подключена эта переменная, то получите ошибку: Uncaught ReferenceError: wpApiSettings is not defined

Чтобы эта переменная появилась, нужно на стороне php добавить загрузку JS клиента: wp_enqueue_script( 'wp-api' ) через хук wp_enqueue_scripts

Если клиент есть, то получите свой root и nonce. Которые можно подставлять в AJAX запросы у других скриптов.

Указываем путь до AJAX запроса без хардкода

Вы можете написать путь для AJAX запроса как то так: https://wpcraft.ru/wp-json/wc/v3/products — но при смене домена все это сломается. Птм лучше использовать wpApiSettings.root — которая всегда содержит актуальный путь до корня API и вам остается только подставлять окончание запроса (endpoint).

X-WP-Nonce и работа с пользователями

Если для работы вашего кода не нужно знать user_id, то вам не надо знать что такое X-WP-Nonce. Функция get_current_user_id() просто ничего не вернет.

Но если это требуется, то нужно использовать строку nonce, которая лежит там же в переменной wpApiSettings.nonce. Ее нужно подставить в заголовок запроса.

$.ajax( {
    url: wpApiSettings.root + 'wp/v2/posts/1',
    method: 'POST',
    beforeSend: function ( xhr ) {
        xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce );
    },
    data:{
        'title' : 'Hello Moon'
    }
} ).done( function ( response ) {
    console.log( response );
} );

Сушим и ускоряем REST API

Если у вас большой нагруженный сайт с кучей функционала, то ваш REST API также может начать тормозить. В основном такая проблема случается если стоит много низкокачественных плагинов, от которых сложно отказаться. Сам WordPress не знает какие из этих плагинов нужны для REST API, а какие нет. И те что не нужны — можно легко отключить из нагрузки REST API. Тем самым сильно ускорить запросы, TTFB и отдачу контента в разы.

add_filter('option_active_plugins', function ($plugins) {
    // Проверяем, является ли запрос REST API
    if (defined('REST_REQUEST') && REST_REQUEST) {
        // Список плагинов, которые нужно отключить для REST API
        $plugins_to_disable = [
            'plugin-folder/plugin-file.php', // Замените на путь к плагину
            'another-plugin/another-plugin.php',
        ];

        // Удаляем ненужные плагины из списка активных
        $plugins = array_diff($plugins, $plugins_to_disable);
    }

    return $plugins;
});

Этот сниппет адаптируется с учетом деталей реализации конкретного сайта.

Конечно никто не мешает нам ускорить REST API еще сильнее через вынос роута в serverless функции и интеграцию через очереди или напрямую в БД. Вариантов решений всегда много, они зависят от ситуации на месте.

Заметки про устаревший WP AJAX

WP AJAX — это механизм обработки асинхронных запросов в WordPress, появившийся задолго до REST API.
Он работает через admin-ajax.php, специальный файл ядра, который:

• принимает запросы с клиента,
• прогоняет их через admin_init, init и прочие хуки,
• вызывает функцию-обработчик.

Пример старого кода:

// JS-запрос
jQuery.post(ajaxurl, { action: 'my_action', data: 'Hello' }, function(response) {
    console.log(response);
});

// PHP-обработчик
add_action('wp_ajax_my_action', 'my_action_callback');
add_action('wp_ajax_nopriv_my_action', 'my_action_callback');

function my_action_callback() {
    echo "Ответ от WP AJAX";
    wp_die();
}

Вроде всё просто, но у WP AJAX есть ряд проблем.

Минусы WP AJAX:

1. Низкая производительность. Все запросы проходят через admin-ajax.php и хук admin_init, который грузит половину WordPress ядра. Тащит за собой 80% логики и кода, которая вам не нужна. Это замедляет отклик и увеличивает нагрузку на сервер. Мало возможностей для маневра в оптимизацию.
2. Плохая интеграция с внешними сервисами. WP AJAX рассчитан на внутреннюю работу WordPress. Попробуйте, например, подключить мобильное приложение — придётся городить костыли.
3. Устаревший подход. Хотя WP AJAX до сих пор работает, он уже давно считается «legacy». Даже в официальной документации акцент смещён на REST API.

Заключение

REST API в WordPress — это мощный и современный инструмент, который открывает широкие возможности для создания динамичных веб-приложений, интеграции с внешними сервисами и разработки headless CMS. В сравнении с устаревшим WP AJAX, REST API предлагает более гибкий, производительный и масштабируемый подход к обработке асинхронных запросов. Использование таких функций, как App Passwords и wpApiSettings, упрощает авторизацию и работу с API, а оптимизация через отключение ненужных плагинов или serverless-функции позволяет значительно ускорить отклик.

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