REST API в WordPress для создания React-приложений

WordPress REST API предоставляет мощные возможности для взаимодействия с вашим сайтом WordPress на уровне приложений. Это позволяет разработчикам создавать динамические и интерактивные приложения, используя данные из WordPress. В этой статье мы рассмотрим, как использовать WordPress REST API для создания динамических приложений с примерами кода.

Что такое REST API?

REST API (Representational State Transfer Application Programming Interface) — это интерфейс, который позволяет взаимодействовать с вашим сайтом WordPress через HTTP-запросы. Это открывает двери для интеграции с любыми технологиями, поддерживающими HTTP.

Начало работы с WordPress REST API

Чтобы использовать REST API, сначала убедитесь, что ваш WordPress сайт обновлен до версии 4.7 или выше, так как API встроен в ядро.

Доступ к данным через REST API

Для доступа к данным вашего сайта используйте следующие конечные точки:

• Посты: https://your-site.com/wp-json/wp/v2/posts
• Страницы: https://your-site.com/wp-json/wp/v2/pages
• Категории: https://your-site.com/wp-json/wp/v2/categories

Пример получения постов с помощью JavaScript

fetch('https://your-site.com/wp-json/wp/v2/posts')
    .then(response => response.json())
    .then(posts => {
        posts.forEach(post => {
            console.log(post.title.rendered);
        });
    })
    .catch(error => console.error('Error fetching posts:', error));

Создание динамического приложения с React

React идеально подходит для создания динамических приложений, взаимодействующих с WordPress REST API.

Установка и настройка React

Создайте новое приложение React с помощью Create React App:

npx create-react-app my-wordpress-app
cd my-wordpress-app

Установите Axios для выполнения HTTP-запросов:

npm install axios

Получение данных из WordPress API в React

Создайте компонент для отображения постов:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

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

    useEffect(() => {
        axios.get('https://your-site.com/wp-json/wp/v2/posts')
            .then(response => {
                setPosts(response.data);
            })
            .catch(error => console.error('Error fetching posts:', error));
    }, []);

    return (
        <div>
            {posts.map(post => (
                <div key={post.id}>
                    <h2>{post.title.rendered}</h2>
                    <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
                </div>
            ))}
        </div>
    );
};

export default Posts;

Отображение данных в приложении

Теперь интегрируйте компонент в ваше приложение:

import React from 'react';
import ReactDOM from 'react-dom';
import Posts from './Posts';

const App = () => (
    <div>
        <h1>My WordPress Posts</h1>
        <Posts />
    </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

Интеграция и сборка проекта WordPress и React

Настройка WordPress для поддержки вашего приложения

1. Убедитесь, что REST API включен: REST API включен по умолчанию в WordPress версии 4.7 и выше. Проверьте, что ваш сайт обновлен до последней версии.
2. Разрешите CORS (Cross-Origin Resource Sharing): Для доступа к вашему WordPress API с другого домена добавьте следующие заголовки в ваш файл .htaccess или серверную конфигурацию:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Деплой React-приложения

1. Сборка React-приложения: Выполните команду для сборки приложения

npm run build

Это создаст оптимизированную версию вашего приложения в папке build.

Загрузка сборки на сервер: Перенесите содержимое папки build в директорию вашего WordPress сайта. Это может быть в корневую директорию или в поддиректорию, например, wp-content/themes/your-theme/react-app.

Создание шаблона страницы в WordPress: Создайте шаблон страницы, который будет загружать ваше React-приложение. В папке вашей темы создайте файл page-react-app.php:

<?php
/* Template Name: React App */
get_header(); ?>

<div id="root"></div>

<script src="<?php echo get_template_directory_uri(); ?>/react-app/static/js/main.js"></script>

<?php get_footer(); ?>

Продвинутые возможности REST API

Аутентификация

Для создания, обновления или удаления данных вам потребуется аутентификация. Один из распространенных методов — использование JWT (JSON Web Tokens).

Установка JWT Authentication for WP REST API плагина

1. Установите и активируйте плагин JWT Authentication for WP REST API.

2. Добавьте следующие строки в ваш wp-config.php:

define('JWT_AUTH_SECRET_KEY', 'your-top-secret-key');
define('JWT_AUTH_CORS_ENABLE', true);

3. Получите токен аутентификации:

axios.post('https://your-site.com/wp-json/jwt-auth/v1/token', {
    username: 'your-username',
    password: 'your-password'
})
.then(response => {
    console.log(response.data.token);
})
.catch(error => console.error('Error obtaining token:', error));

Создание нового поста с помощью аутентифицированного запроса

const token = 'your-jwt-token';

axios.post('https://your-site.com/wp-json/wp/v2/posts', {
    title: 'New Post Title',
    content: 'Content of the new post',
    status: 'publish'
}, {
    headers: {
        'Authorization': `Bearer ${token}`
    }
})
.then(response => {
    console.log('Post created:', response.data);
})
.catch(error => console.error('Error creating post:', error));

Заключение

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