Как создать сайт на React и WordPress (Headless)

WordPress — одна из самых популярных систем управления контентом (CMS), используемая 810 миллионами пользователей, что составляет 41% всего интернета! Это идеальный выбор для тех, кто хочет быстро создать веб-сайт, потому что он простой, удобный, предлагает широкий спектр вариантов настройки, а также имеет мощную экосистему плагинов и других ресурсов. В этой статье рассмотрим как создать сайт на React и WordPress, и для этого будем применять концепцию Headless WordPress.

Headless WordPress, также известная как безголовая система, — это тип серверной CMS, которая используется исключительно для управления контентом. Это помогает интегрировать контент в любую систему или веб-сайт, просто вызывая API headless CMS.

Однако при этом интерфейс остается отдельным. На этом этапе на сцену выходит API.

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

Что такое headless-сайт на WordPress?

Веб-сайт headless WordPress — это тип сайта, который в основном использует WordPress в качестве CMS или системы управления контентом, а для интерфейса использует другие технологии, такие как React или Vue.

Для отображения содержимого сайта используются библиотеки и фреймворки JavaScript. Таким образом, headless WordPress имеет отдельный интерфейс и серверную часть, а для связи используется API.

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

Основная задача интерфейса, с другой стороны, заключается в отображении контента, и ему, в свою очередь, все равно, где хранится или управляется контент, главное, чтобы он мог к нему добраться.

Headless WordPress обладает лучшей производительностью, поскольку запросы интерфейса обрабатываются более быстрыми технологиями, такими как React, и только серверная часть управляется WordPress. Разделение интерфейса и серверной части позволяет независимо масштабировать компоненты.

Плюсы и минусы headless WordPress

Как и у всех вариантов разработки, headless WordPress имеет свои преимущества и недостатки. Важно понимать их, прежде чем принимать решение.

Плюсы headless WordPress

Некоторые из ключевых преимуществ внедрения headless WordPress включают:

• Безопасность: Разделяя интерфейс и серверную часть, headless WordPress может обеспечить дополнительный уровень безопасности, ограничивая доступ к базовой базе данных и коду WordPress.
• Гибкость: Headless WordPress позволяет разработчикам создавать пользовательские интерфейсы без ограничений традиционной системы тем WordPress. Это означает, что вы можете создавать уникальные пользовательские интерфейсы и возможности для конкретных нужд.
• Производительность: Разделение интерфейса и серверной части сайта WordPress может ускорить загрузку сайта и повысить его производительность, поскольку сервер только передает данные через API, а не отрисовывает HTML для каждого запроса.
• Современный метод: Концепция headless позволяет строить современные проекты с использованием трендовых технологий.

Минусы headless WordPress

Недостатки headless WordPress могут включать:

• Отсутствие тем: Поскольку headless WordPress не использует готовые темы, вам нужно будет создавать свои собственные. Это может быть трудоемким и может потребовать дополнительных ресурсов.
• Ограничения плагинов: Некоторые плагины WordPress могут не работать с headless WordPress, поскольку они полагаются на темы WordPress для правильной работы. Будут работать только те плагины, функционал которых нацелен на админку.
• Стоимость: Разработка сайта headless WordPress может быть дороже, чем традиционного сайта WordPress, поскольку для его настройки и обслуживания требуется больше технических знаний и ресурсов.

Что такое WordPress REST API?

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

API может поддерживать широкий спектр форматов данных, включая JSON, что облегчает взаимодействие с системой.

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

Что такое React и почему его стоит использовать?

React — это библиотека JavaScript для создания пользовательских интерфейсов. Это библиотека с открытым исходным кодом, основанная на компонентах, что позволяет разработчикам создавать компоненты пользовательского интерфейса (UI) с помощью декларативного синтаксиса.

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

Благодаря активному сообществу разработчиков React существует множество инструментов, библиотек и ресурсов, расширяющих возможности этой библиотеки. Многие организации и компании выбирают React в качестве технологии для создания сложных, динамичных и высокопроизводительных веб-приложений.

Преимущества использования React:

• Декларативный синтаксис: React использует декларативный подход к построению компонентов пользовательского интерфейса, что упрощает создание многократно используемых и высокоэффективных компонентов.
• Большое сообщество и экосистема: У React большое и активное сообщество разработчиков, что привело к созданию широкого спектра инструментов и библиотек для расширения его функциональности.
• Виртуальный DOM: React использует виртуальный DOM для обновления пользовательского интерфейса в режиме реального времени. Это означает, что при изменении состояния он обновляет только те компоненты, которые необходимо изменить, а не перерисовывает всю страницу.
• Многократное использование: React.js предлагает многократно используемые компоненты, которые можно применять в разных приложениях, что значительно сокращает время и усилия на разработку.

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

Создание сайта на WordPress и React: шаг за шагом

Теперь, когда разобрались с теоретической базой, давайте приступим к практике и научимся создавать и развертывать сайт на headless WordPress с React. Читайте дальше, чтобы погрузиться в детали. А так же рекомендую к просмотру видео лекцию на данную тему:

Предварительные требования:

• Понимание JavaScript & React
• Сайт на WordPress и знание WordPress Codex
• Node.js версии 18 или выше, установленный на вашем устройстве

Шаг 1. Настройка сайта WordPress

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

Далее, чтобы включить JSON API, вам нужно обновить постоянные ссылки вашего сайта (Permalinks Settings).

• В панели администратора WordPress перейдите в «Настройки» > «Постоянные ссылки».
• Выберите опцию «Название записи» и нажмите «Сохранить изменения».

В некоторых случая сторонние плагины, например плагины защиты и безопасности сайта, могут специально отключать API, будьте внимательны.

Шаг 2. Настройка React-приложения

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

Для начала запустите следующую команду в терминале, чтобы создать React-приложение:

npm create vite@latest my-app

После запустите эти команды чтобы перейти в новый каталог с приложением и установить зависимости:

cd my-app 
npm install

Нам также нужно установить Axios, JavaScript-библиотеку для HTTP-запросов

npm install axios

Запустите сервер разработки командой:

npm run dev

Он должен запустить ваше приложение по адресу http://127.0.0.1:5173

Вы можете удалить демо данные реакт-приложения, например каталог assets и не нужные css файлы.

Шаг 3: Получение записей из WordPress

Теперь пора получить записи с нашего сайта WordPress.

В файле App.jsx добавьте следующее состояние и импортируйте useState из React:

import React, { useEffect, useState } from 'react'
import axios from "axios";
import Blog from "./components/blog";

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

  const fetchPosts = () => {
    axios
      .get("https://alethemes.com/alesushi/wp-json/wp/v2/posts")
      .then((res) => {
        setPosts(res.data);
      });
  }

  useEffect(() => {
    fetchPosts()
  }, [])

  return (
    <div className="grid">
      {posts.map((item) => (
        <Blog post={item} />
      ))}
    </div>
  )
}

export default App

Этот код запускает функцию fetchPosts() при загрузке страницы. Внутри функции fetchPosts() мы отправляем GET-запрос к API WordPress с помощью Axios для получения записей, а затем сохраняем их в состоянии, объявленном ранее.

useState — это встроенный хук в React, который используется для добавления состояний в компонент. Состояние представляет собой данные или свойство. posts используется для получения данных из состояния, а setPosts — для добавления новых данных в список записей. По умолчанию мы передаем пустой массив в состояние.

Шаг 4: Создание компонента блога

В корневом каталоге создайте новую папку с названием components. Внутри нее создайте два новых файла: blog.jsx и blog.css.

Сначала добавьте следующий код в blog.jsx:

import axios from "axios";
import React, {useEffect, useState} from "react";
import "./blog.css";

export default function Blog({post}){

  const [featuredImage, setFeaturedImage] = useState();
  const [postDate, setPostDate] = useState(null);

  const getImage = async () => {
    try {
      const response = await axios.get(post?._links["wp:featuredmedia"][0]?.href);

      if(response.data && response.data.source_url) {
        setFeaturedImage(response.data.source_url);
      }

      if(post.date){
        const dateObj = new Date(post.date);
        const formatedDate = dateObj.toLocaleDateString("en-US",{
          year: "numeric",
          month: "long",
          day: "numeric"
        });
        setPostDate(formatedDate);
      }
    } catch(error) {
      console.log("Error - ", error );
    }
  };

  useEffect(() => {
    getImage();
  }, [post]);

  return(
    <div className="item">
      {featuredImage && <img src={featuredImage} alt={post.title.rendered} />}
      <h2>{post.title.rendered}</h2>
      <div>{postDate}</div>
      <div className="excerpt" dangerouslySetInnerHTML={{ __html: post.excerpt.rendered}} />
    </div>
  )
}

В этом коде мы создали компонент карточки, который принимает свойство posts, содержащее информацию о записи блога из API WordPress.

В функции getImage мы используем Axios для получения URL-адреса главного изображения, а затем сохраняем эту информацию в состоянии.

Затем мы добавили хук useEffect, чтобы вызвать функцию getImage после монтирования компонента. Мы также добавили оператор return, в котором отображаются данные записи, заголовок, отрывок и изображение.

Далее добавьте следующие стили в файл blog.css:

.grid {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
} 
.grid .item {
  width: calc(33.3% - 40px);
  padding: 40px;
  background: #f5f5f5;
  box-sizing: border-box;
}
.grid .item img {
  max-width: 100%;
  height: auto;
}

Как создать сайт на React и WordPress? Он уже создан. Теперь наше простенькое react-приложение готово и если вы откроете его в браузере то должны увидеть сетку с блог постами получаемых с сайта.

Заключение

В статье мы разобрались, как headless WordPress, будучи отделенной от фронтенда CMS, позволяет создавать гибкие и высокопроизводительные сайты. Мы узнали как создать сайт на React и WordPress

Используя headless WordPress, вы:

• Не ограничены темами: создавайте уникальные интерфейсы.
• Повышаете скорость загрузки: серверная часть работает только с API.
• Усиливаете безопасность: интерфейс отделен от серверной части.

В статье мы также рассмотрели пример создания простого React-приложения, которое получает записи из WordPress API.

Headless WordPress + React – это мощный тандем для создания современных веб-сайтов.