WordPress как Headless CMS 🧠 | практично с REST API

WordPress годами был непревзойденным «монолитом»: он отвечал и за удобную админ-панель, и за хранение данных, и за их отображение на сайте через темы и шаблоны. Но веб не стоит на месте. С появлением мощных JS-фреймворков (React, Vue, Svelte) и мобильных приложений возникла необходимость «отвязать» фронт-енд от бэк-енда.

Этот подход называется Headless CMS (или «обезглавленная» CMS). Идея состоит в том, что WordPress используется только как удобный интерфейс для управления контентом, а сам контент он отдает не в виде HTML-страниц, а в виде «чистых» данных в формате JSON. А уже другое, абсолютно независимое приложение (фронт-енд), эти данные забирает и отображает.

Зачем это вообще нужно? Преимущества Headless-подхода

Зачем усложнять, спросите вы? По своему опыту могу сказать, что для многих проектов преимущества просто колоссальны:

• 🚀 Невероятная скорость: Фронт-енд можно построить как статический сайт (SSG) или SPA. Такие сайты загружаются мгновенно, так как не требуют генерации страниц на стороне сервера при каждом запросе.
• 🔧 Технологическая гибкость: Вы не привязаны к PHP и экосистеме тем WordPress. Хотите фронт-енд на React/Next.js, Vue/NuxtJS, или Svelte? Пожалуйста.
• 📱 Омниканальность: Вы управляете контентом в одном месте (админка WP), а отдаете его одновременно на веб-сайт, в мобильное приложение (iOS/Android) и на умные часы.
• 🔒 Повышенная безопасность: Ваш фронт-енд может быть просто набором статических файлов, которые почти невозможно взломать. Админка WP при этом может быть спрятана на отдельном поддомене и закрыта от посторонних.
• 🧑‍💻 Комфорт для разработчиков: Современные JS-разработчики обожают свои инструменты, и Headless-подход позволяет им работать в привычной среде, не погружаясь в тонкости WP Theme Development.

Ключ ко всему: встроенный WordPress REST API

С версии 4.7 WordPress имеет встроенный REST API. Это и есть тот самый «черный ход», который позволяет нам получать данные. Просто добавьте /wp-json/wp/v2/ к адресу вашего сайта, и вы увидите его в действии.

Например, чтобы получить список ваших последних постов в формате JSON, просто перейдите по адресу:

https://example.com/wp-json/wp/v2/posts

Чтобы получить конкретный пост с ID 123:

https://example.com/wp-json/wp/v2/posts/123

А чтобы получить страницы:

https://example.com/wp-json/wp/v2/pages

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

Практический шаг: извлекаем кастомные поля (ACF)

Стандартные поля (заголовок, контент) — это хорошо, но настоящая магия WP как CMS — это кастомные поля, например, созданные с помощью плагина Advanced Custom Fields (ACF). Проблема в том, что по умолчанию ACF не показывает свои данные в REST API.

Это очень легко исправить. Есть два пути:

1. Установить плагин «ACF to REST API».
2. (Мой любимый способ) Добавить несколько строк кода в файл functions.php вашей темы. Это дает больше контроля.

Например, чтобы добавить все поля ACF в REST API для постов:

function add_acf_to_posts_api( $data, $post, $request ) {
    $data->data['acf'] = get_fields( $post->ID );
    return $data;
}
add_filter( 'rest_prepare_post', 'add_acf_to_posts_api', 10, 3 );

Этот простой хук говорит: «Когда готовишь пост для API, добавь к нему поле acf, в которое положи все значения из get_fields()«.

Пример на стороне фронт-енда (React/Next.js)

Теперь на стороне вашего фронт-енд приложения (например, написанного на Next.js) вы можете легко получить эти данные:

// Пример кода на JavaScript для получения постов
import fetch from 'isomorphic-unfetch';
export async function getStaticProps() {
  // Делаем запрос к нашему WP REST API
  const res = await fetch('https://your-wp-site.com/wp-json/wp/v2/posts');
  const posts = await res.json();
  // Возвращаем посты как props для нашей страницы
  return {
    props: {
      posts,
    },
  };
}
// Компонент страницы, который отображает посты
function Blog({ posts }) {
  return (
    <div>
      <h1>Мой блог</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <h2>{post.title.rendered}</h2>
            {/* А вот и наши кастомные поля ACF! */}
            <p>{post.acf.short_description}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}
export default Blog;

Этот код сгенерирует статическую HTML-страницу с вашими постами, которая будет загружаться мгновенно.

Вывод: это не замена, а расширение возможностей