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

Никита Калашников
Интеграция React с WordPress позволяет создавать кастомные темы и плагины с динамичным интерфейсом, что особенно актуально для современных приложений. Рассмотрим примеры, которые можно адаптировать под различные задачи.
Пример 1: Кастомная тема с React
Цель: Создать тему, использующую React-компоненты для отображения постов блога.
Настройка окружения:
- Установите тему WordPress (например, через
wp-content/themes
). - Добавьте файл
functions.php
, чтобы подключить необходимые скрипты:
1function enqueue_react_scripts() {
2 wp_enqueue_script(
3 'react-app',
4 get_template_directory_uri() . '/build/index.js',
5 ['wp-element'],
6 filemtime(get_template_directory() . '/build/index.js'),
7 true
8 );
9}
10add_action('wp_enqueue_scripts', 'enqueue_react_scripts');
React-компоненты: Создайте приложение с помощью Create React App или Vite. Например:
1// App.jsx
2import React from 'react';
3
4const PostList = ({ posts }) => (
5 <div>
6 {posts.map(post => (
7 <div key={post.id}>
8 <h2>{post.title.rendered}</h2>
9 <p>{post.excerpt.rendered}</p>
10 </div>
11 ))}
12 </div>
13);
14
15export default PostList;
Подключение к REST API WordPress: В React добавьте запросы к WordPress API:
1import { useEffect, useState } from 'react';
2
3const App = () => {
4 const [posts, setPosts] = useState([]);
5
6 useEffect(() => {
7 fetch('/wp-json/wp/v2/posts')
8 .then(response => response.json())
9 .then(data => setPosts(data));
10 }, []);
11
12 return <PostList posts={posts} />;
13};
14
15export default App;
Пример 2: Кастомный плагин для формы обратной связи
Цель: Создать плагин с React-компонентом для формы отправки.
Структура плагина:
- Создайте папку плагина (например,
react-contact-form
). - Добавьте файл
react-contact-form.php
:
1<?php
2/*
3Plugin Name: React Contact Form
4*/
5
6function enqueue_contact_form_script() {
7 wp_enqueue_script(
8 'react-contact-form',
9 plugin_dir_url(__FILE__) . 'build/index.js',
10 ['wp-element'],
11 filemtime(plugin_dir_path(__FILE__) . 'build/index.js'),
12 true
13 );
14}
15
16add_action('wp_enqueue_scripts', 'enqueue_contact_form_script');
React-компонент: Создайте форму с валидацией:
1import React, { useState } from 'react';
2
3const ContactForm = () => {
4 const [formData, setFormData] = useState({ name: '', email: '', message: '' });
5
6 const handleChange = (e) => {
7 const { name, value } = e.target;
8 setFormData({ ...formData, [name]: value });
9 };
10
11 const handleSubmit = (e) => {
12 e.preventDefault();
13 fetch('/wp-json/contact-form/submit', {
14 method: 'POST',
15 headers: { 'Content-Type': 'application/json' },
16 body: JSON.stringify(formData),
17 })
18 .then(response => response.json())
19 .then(data => alert('Message sent!'));
20 };
21
22 return (
23 <form onSubmit={handleSubmit}>
24 <input type="text" name="name" placeholder="Name" onChange={handleChange} />
25 <input type="email" name="email" placeholder="Email" onChange={handleChange} />
26 <textarea name="message" placeholder="Message" onChange={handleChange} />
27 <button type="submit">Send</button>
28 </form>
29 );
30};
31
32export default ContactForm;
Добавление REST API обработчика: В react-contact-form.php
добавьте REST API endpoint:
1function handle_contact_form_submission(WP_REST_Request $request) {
2 $data = $request->get_json_params();
3 // Здесь можно добавить логику сохранения данных или отправки email.
4 return new WP_REST_Response(['success' => true], 200);
5}
6
7add_action('rest_api_init', function() {
8 register_rest_route('contact-form', '/submit', [
9 'methods' => 'POST',
10 'callback' => 'handle_contact_form_submission',
11 ]);
12});
Эти примеры можно модифицировать под конкретные задачи: создание лендингов, интернет-магазинов или порталов с динамическими интерфейсами. Напишите, если нужна помощь в реализации или детализировании функционала!