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

13 июня 2024 г.

Автор

Никита Калашников

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

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

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

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

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

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

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

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

1npm install axios

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

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

1import React, { useState, useEffect } from 'react';
2import axios from 'axios';
3
4const Posts = () => {
5    const [posts, setPosts] = useState([]);
6
7    useEffect(() => {
8        axios.get('https://your-site.com/wp-json/wp/v2/posts')
9            .then(response => {
10                setPosts(response.data);
11            })
12            .catch(error => console.error('Error fetching posts:', error));
13    }, []);
14
15    return (
16        <div>
17            {posts.map(post => (
18                <div key={post.id}>
19                    <h2>{post.title.rendered}</h2>
20                    <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
21                </div>
22            ))}
23        </div>
24    );
25};
26
27export default Posts;

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

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

1import React from 'react';
2import ReactDOM from 'react-dom';
3import Posts from './Posts';
4
5const App = () => (
6    <div>
7        <h1>My WordPress Posts</h1>
8        <Posts />
9    </div>
10);
11
12ReactDOM.render(<App />, document.getElementById('root'));

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

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

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

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

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

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

1npm run build

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

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

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

1<?php
2/* Template Name: React App */
3get_header(); ?>
4
5<div id="root"></div>
6
7<script src="<?php echo get_template_directory_uri(); ?>/react-app/static/js/main.js"></script>
8
9<?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:

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

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

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

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

1const token = 'your-jwt-token';
2
3axios.post('https://your-site.com/wp-json/wp/v2/posts', {
4    title: 'New Post Title',
5    content: 'Content of the new post',
6    status: 'publish'
7}, {
8    headers: {
9        'Authorization': `Bearer ${token}`
10    }
11})
12.then(response => {
13    console.log('Post created:', response.data);
14})
15.catch(error => console.error('Error creating post:', error));

Заключение

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