главная/Поднимаем WordPress headless с React JS

01.04.2023

React JS

Поднимаем WordPress headless с React JS

Создание безголового (headless) WordPress сайта: шаг за шагом с примерами

Headless WordPress стал популярным выбором для разработчиков, которые хотят использовать преимущества WordPress в качестве системы управления контентом (CMS), но при этом предоставлять контент через современные JavaScript-фреймворки, такие как React, Vue или Angular. В этой статье мы рассмотрим, как создать безголовый WordPress-сайт с использованием REST API и примеров на каждом этапе.

Шаг 1: Установка WordPress

Скачайте последнюю версию WordPress с официального сайта (https://wordpress.org/download/).
Установите WordPress на вашем хостинге, следуя инструкциям по установке.

Шаг 2: Включение REST API

REST API уже включен по умолчанию в WordPress, начиная с версии 4.7. Проверьте, что ваша версия WordPress соответствует или превышает 4.7.

Шаг 3: Создание таксономий

Если вам нужны пользовательские типы записей и таксономии, добавьте их в functions.php вашей темы или в отдельный плагин.

Пример кода для создания пользовательского типа записи «Книги» и таксономии «Жанры»:

function create_custom_post_types() {
    register_post_type('book', [
        'labels' => [
            'name' => 'Книги',
            'singular_name' => 'Книга'
        ],
        'public' => true,
        'has_archive' => true,
        'show_in_rest' => true, // Важно для REST API
    ]);

    register_taxonomy('genre', 'book', [
        'labels' => [
            'name' => 'Жанры',
            'singular_name' => 'Жанр'
        ],
        'hierarchical' => true,
        'show_in_rest' => true, // Важно для REST API
    ]);
}
add_action('init', 'create_custom_post_types');

Шаг 4: Выбор JavaScript-фреймворка

Выберите JavaScript-фреймворк для создания пользовательского интерфейса вашего сайта. Наиболее популярными являются React, Vue и Angular.

В нашем случае это будет React JS

Шаг 5: Разработка фронтенда

После того, как вы успешно настроили WordPress с REST API, можно приступить к разработке фронтенда на React. В этом разделе мы рассмотрим, как создать простое приложение на React и использовать его для взаимодействия с вашим headless WordPress.

Структура файлов проекта

headless-wp-react/
│
├── node_modules/
│
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
│
├── src/
│   ├── components/
│   │   ├── Post.js
│   │   └── PostsList.js
│   │
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
│
├── .gitignore
├── package.json
└── README.md

Вот краткое объяснение важных файлов и папок:

public/: эта папка содержит статические файлы, которые будут предоставляться веб-сервером, такие как значок, основной HTML-файл (index.html) и изображения.
src/: эта папка содержит исходный код приложения React, включая компоненты, стили и другие JavaScript-файлы.
src/components/: эта папка содержит пользовательские компоненты React, созданные для этого руководства. У нас два компонента — Post.js (отображает полный контент поста) и PostsList.js (отображает список постов).
src/App.js: это основной компонент приложения, который настраивает маршрутизацию и включает меню навигации.
src/index.js: этот файл является точкой входа приложения React. Он отображает основной компонент App и монтирует его в DOM.
package.json: этот файл содержит метаданные о проекте, такие как имя, версия и зависимости. Он используется npm или yarn для управления зависимостями и скриптами.
README.md: этот файл содержит информацию о проекте, такую как описание и инструкции по запуску проекта локально.

Приступим к созданию проекта и его компонентов. Создайте новое React-приложение, используя Create React App:

npx create-react-app headless-wp-react
cd headless-wp-react

Установите Axios для отправки запросов к REST API:

npm install axios

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

Создайте компонент PostsList.js для отображения списка статей.

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

function PostsList() {
    const [posts, setPosts] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const response = await axios.get('https://your-wordpress-site.com/wp-json/wp/v2/posts');
            setPosts(response.data);
        };

        fetchData();
    }, []);

    return (
        <div>
            <h1>Список статей</h1>
            <ul>
                {posts.map(post => (
                    <li key={post.id}>{post.title.rendered}</li>
                ))}
            </ul>
        </div>
    );
}

export default PostsList;

Создание React JS компонента для отображения полного текста статьи

Создайте файл Post.js

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

function Post({ match }) {
    const [post, setPost] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            const response = await axios.get(`https://your-wordpress-site.com/wp-json/wp/v2/posts/${match.params.id}`);
            setPost(response.data);
        };

        fetchData();
    }, [match.params.id]);

    return (
        <div>
            {post && (
                <>
                    <h1>{post.title.rendered}</h1>
                    <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
                </>
            )}
        </div>
    );
}

export default Post;

Компонент для вывода пользовательских таксономий

В начале статьи мы приводили пример, о том создавать пользовательские таксономии. Давайте напишем компонент для их вывода.

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

function BookList() {
    const [books, setBooks] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const response = await axios.get('https://your-wordpress-site.com/wp-json/wp/v2/book');
            setBooks(response.data);
        };

        fetchData();
    }, []);

    return (
        <div>
            <h1>Список книг</h1>
            <ul>
                {books.map(book => (
                    <li key={book.id}>{book.title.rendered}</li>
                ))}
            </ul>
        </div>
    );
}

export default BookList;

Настройка маршрутизации

Установите React Router для настройки маршрутизации между компонентами:

npm install react-router-dom

В файле src/App.js импортируйте необходимые компоненты и настройте маршрутизацию:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import PostsList from './PostsList';
import Post from './Post';

function App() {
    return (
        <Router>
            <div className="App">
                <Switch>
                    <Route path="/" exact component={PostsList} />
                    <Route path="/post/:id" component={Post} />
                </Switch>
            </div>
        </Router>
    );
}

export default App;

Теперь у вас есть приложение на React с маршрутизацией между списком статей и полным текстом статьи.

Добавление навигации

Добавьте простую навигацию, чтобы пользователи могли переходить между страницами. В src/App.js добавьте компонент Link из react-router-dom:

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

import PostsList from './PostsList';
import Post from './Post';


function App() {
    return (
        <Router>
            <div className="App">
                <nav>
                    <ul>
                        <li>
                            <Link to="/">Главная</Link>
                        </li>
                    </ul>
                </nav>
                <Switch>
                    <Route path="/" exact component={PostsList} />
                    <Route path="/post/:id" component={Post} />
                </Switch>
            </div>
        </Router>
    );
}

export default App;

CORS заголовки

Возможно, для работы фронтенда вам потребуется разрешить кросс-доменные запросы. В случае если React приложение находиться на другом домене.

Добавьте следующий код в файл functions.php вашей темы:

function add_cors_http_header(){
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: *");
}
add_action('init','add_cors_http_header');

Обратите внимание, что этот пример разрешает CORS для всех доменов. В зависимости от ваших требований, вы можете настроить это для разрешения только определенных доменов.

Авторизация

Настройте авторизацию (при необходимости): если вашему приложению требуется доступ к защищенным данным или возможности управления контентом, вам потребуется настроить авторизацию через REST API.

Вы можете использовать плагины, такие как JWT Authentication for WP REST API или WP OAuth Server, для добавления поддержки авторизации.

wordpress

zalki-lab блог веб разработчика