Логотип

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

Маленький енот в песочнице
21

Интеграция 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});

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