Как отказаться от PHP в WordPress в пользу JavaScript: практическое руководство

WordPress исторически построен на PHP, но в последние годы тенденция развивается в сторону использования JavaScript, особенно с появлением REST API и блокового редактора Gutenberg. В этой статье мы подробно разберём, как минимизировать использование PHP в WordPress и использовать JavaScript для динамичных и интерактивных решений.

Почему стоит использовать JavaScript в WordPress вместо PHP?

PHP — это серверный язык, который генерирует HTML на сервере. JavaScript же позволяет создавать интерактивные интерфейсы прямо в браузере пользователя, что улучшает UX и снижает нагрузку на сервер.

Преимущества использования JavaScript:

• Асинхронная загрузка данных без перезагрузки страницы (AJAX, Fetch API)
• Улучшенный UX с реактивными компонентами (React, Vue, Svelte)
• Использование современных UI-библиотек и фреймворков
• Облегчение масштабирования сложных интерфейсов

С появлением REST API WordPress стал гораздо удобнее интегрировать фронтенд на JavaScript с бэкендом.

Как организовать отказ от PHP: базовые шаги

Хотя полностью отказаться от PHP в WordPress невозможно (ядро работает на нём), вы можете свести к минимуму написание PHP-кода в своих темах и плагинах.

Основные шаги:

1. Использовать REST API для получения и отправки данных
2. Создавать фронтенд полностью на JavaScript (React, Vue и т.п.)
3. Зарегистрировать скрипты и стили через wp_enqueue_script и wp_enqueue_style
4. Использовать кастомные REST Endpoint для специфичных задач

Пример регистрации JavaScript в теме

function wpbono_register_scripts() {
    wp_enqueue_script(
        'wpbono-frontend',
        get_template_directory_uri() . '/js/frontend.js',
        ['wp-element'],
        '1.0',
        true
    );
}
add_action('wp_enqueue_scripts', 'wpbono_register_scripts');

Здесь мы подключаем JS-файл, который будет работать на стороне клиента, используя библиотеку React (wp-element – обёртка React от WordPress).

Работа с REST API: получение и отправка данных

REST API позволяет обращаться к записям, пользователям, таксономиям и создавать кастомные эндпоинты. Это избавляет от необходимости писать PHP-шаблоны для вывода данных.

Пример получения списка постов через Fetch API

fetch('/wp-json/wp/v2/posts')
  .then(response => response.json())
  .then(data => {
    console.log(data); // обработка массива постов
  });

Таким образом, вся логика вывода контента переносится в JavaScript.

Создание кастомного REST Endpoint

Если нужно добавить свою логику, можно регистрировать кастомные REST Endpoint в PHP, а дальше работать с ними на фронтенде.

function wpbono_register_custom_endpoint() {
    register_rest_route('wpbono/v1', '/custom-data', [
        'methods' => 'GET',
        'callback' => 'wpbono_custom_data_callback',
    ]);
}
add_action('rest_api_init', 'wpbono_register_custom_endpoint');

function wpbono_custom_data_callback() {
    return [
        'message' => 'Данные с сервера для JS',
        'time' => current_time('mysql'),
    ];
}

На клиенте можно обратиться к /wp-json/wpbono/v1/custom-data и получить данные.

Использование React и Gutenberg для создания динамичных интерфейсов

WordPress использует React в редакторе Gutenberg. Вы можете создавать собственные блоки на React и переносить туда логику, которая ранее была в PHP.

Для этого:

• Используйте @wordpress/scripts для сборки JS
• Создайте блок с помощью registerBlockType
• Обрабатывайте данные через REST API

Пример простого блока на React

import { registerBlockType } from '@wordpress/blocks';
import { useState, useEffect } from '@wordpress/element';

registerBlockType('wpbono/simple-block', {
  title: 'Простой блок',
  icon: 'smiley',
  category: 'common',
  edit: () => {
    const [posts, setPosts] = useState([]);

    useEffect(() => {
      fetch('/wp-json/wp/v2/posts')
        .then(res => res.json())
        .then(data => setPosts(data));
    }, []);

    return (
      <div>
        <h3>Список постов</h3>
        <ul>
          {posts.map(post => (
            <li key={post.id}>{post.title.rendered}</li>
          ))}
        </ul>
      </div>
    );
  },
  save: () => null,
});

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

Плагины для поддержки JavaScript-ориентированной архитектуры

Некоторые плагины помогают интегрировать JavaScript и REST API в WordPress:

• Clearfy Pro — оптимизация и настройка REST API и скриптов
• WPCommunity — создание социальной сети с использованием современных JS-технологий

Эти инструменты помогают сделать сайт быстрее и удобнее с минимальным PHP.

Практические советы по переходу

Начинайте с мелких частей

Переходите на JavaScript постепенно: сначала отдельные интерактивные элементы, потом — целые страницы и блоки.

Кэширование и безопасность

При работе с REST API учитывайте кэширование, чтобы не нагружать сервер лишними запросами. Используйте nonce и проверку прав доступа для защиты эндпоинтов.

Оптимизация загрузки скриптов

Подключайте скрипты асинхронно и только там, где они нужны, чтобы не замедлять сайт. Для этого используйте wp_enqueue_script с параметром $in_footer=true.

Заключение

Отказ от PHP в пользу JavaScript в WordPress — это современный тренд, который позволяет создавать быстрые и интерактивные сайты. Используйте REST API, React и современные инструменты для достижения лучших результатов. На сайте WPSHOP вы найдете полезные плагины и темы, которые помогут в этой задаче.