Создание кастомных тем и плагинов WordPress на базе React

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

Пример 1: Кастомная тема с React

Цель: Создать тему, использующую React-компоненты для отображения постов блога.

Настройка окружения:

• Установите тему WordPress (например, через wp-content/themes).
• Добавьте файл functions.php, чтобы подключить необходимые скрипты:

function enqueue_react_scripts() {
    wp_enqueue_script(
        'react-app',
        get_template_directory_uri() . '/build/index.js',
        ['wp-element'],
        filemtime(get_template_directory() . '/build/index.js'),
        true
    );
}
add_action('wp_enqueue_scripts', 'enqueue_react_scripts');

React-компоненты: Создайте приложение с помощью Create React App или Vite. Например:

// App.jsx
import React from 'react';

const PostList = ({ posts }) => (
    <div>
        {posts.map(post => (
            <div key={post.id}>
                <h2>{post.title.rendered}</h2>
                <p>{post.excerpt.rendered}</p>
            </div>
        ))}
    </div>
);

export default PostList;

Подключение к REST API WordPress: В React добавьте запросы к WordPress API:

import { useEffect, useState } from 'react';

const App = () => {
    const [posts, setPosts] = useState([]);

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

    return <PostList posts={posts} />;
};

export default App;

Пример 2: Кастомный плагин для формы обратной связи

Цель: Создать плагин с React-компонентом для формы отправки.

Структура плагина:

• Создайте папку плагина (например, react-contact-form).
• Добавьте файл react-contact-form.php:

<?php
/*
Plugin Name: React Contact Form
*/

function enqueue_contact_form_script() {
    wp_enqueue_script(
        'react-contact-form',
        plugin_dir_url(__FILE__) . 'build/index.js',
        ['wp-element'],
        filemtime(plugin_dir_path(__FILE__) . 'build/index.js'),
        true
    );
}

add_action('wp_enqueue_scripts', 'enqueue_contact_form_script');

React-компонент: Создайте форму с валидацией:

import React, { useState } from 'react';

const ContactForm = () => {
    const [formData, setFormData] = useState({ name: '', email: '', message: '' });

    const handleChange = (e) => {
        const { name, value } = e.target;
        setFormData({ ...formData, [name]: value });
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        fetch('/wp-json/contact-form/submit', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(formData),
        })
            .then(response => response.json())
            .then(data => alert('Message sent!'));
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" name="name" placeholder="Name" onChange={handleChange} />
            <input type="email" name="email" placeholder="Email" onChange={handleChange} />
            <textarea name="message" placeholder="Message" onChange={handleChange} />
            <button type="submit">Send</button>
        </form>
    );
};

export default ContactForm;

Добавление REST API обработчика: В react-contact-form.php добавьте REST API endpoint:

function handle_contact_form_submission(WP_REST_Request $request) {
    $data = $request->get_json_params();
    // Здесь можно добавить логику сохранения данных или отправки email.
    return new WP_REST_Response(['success' => true], 200);
}

add_action('rest_api_init', function() {
    register_rest_route('contact-form', '/submit', [
        'methods' => 'POST',
        'callback' => 'handle_contact_form_submission',
    ]);
});

Эти примеры можно модифицировать под конкретные задачи: создание лендингов, интернет-магазинов или порталов с динамическими интерфейсами. Напишите, если нужна помощь в реализации или детализировании функционала!