15. WordPress как Headless CMS

Headless CMS — это подход, при котором WordPress используется только для управления контентом (бэкенд), а за отображение отвечает отдельное приложение на современном фронтенд-фреймворке (Next.js, React, Vue).

Как это работает

WordPress предоставляет данные через REST API или GraphQL. Фронтенд делает запросы к этим эндпоинтам и отрисовывает страницы.

graph LR
    Editor[Редактор контента] --> WP[WordPress CMS]
    WP --> REST[REST API / GraphQL]
    REST --> Next[Next.js App]
    Next --> User[Конечный пользователь]

Работа с REST API

По умолчанию WordPress отдает данные в формате JSON. Основные эндпоинты:

• https://yoursite.com/wp-json/wp/v2/posts — список постов.
• https://yoursite.com/wp-json/wp/v2/pages — список страниц.
• https://yoursite.com/wp-json/wp/v2/users — пользователи.

Пример запроса на JavaScript (Next.js)

// fetch posts from WP
async function getPosts() {
  const res = await fetch('https://demo.wp-api.org/wp-json/wp/v2/posts');
  const posts = await res.json();
  return posts;
}

// Пример использования в компоненте
const PostsList = ({ posts }) => {
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id} dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
      ))}
    </ul>
  );
};

Преимущества Headless подхода

1. Производительность: Статическая генерация (SSG) в Next.js делает сайт невероятно быстрым.
2. Безопасность: Админка WordPress может быть скрыта от публичного доступа.
3. Developer Experience: Фронтенд-разработчики могут использовать любимые инструменты (React, Tailwind), не изучая PHP.
4. Омниканальность: Один бэкенд может питать сайт, мобильное приложение и умные часы.

Когда НЕ стоит использовать Headless

• Если вам нужны плагины, которые сильно завязаны на фронтенд (многие формы, конструкторы страниц типа Elementor).
• Если бюджет ограничен (разработка Headless обходится дороже).
• Если клиенту важен предварительный просмотр (Preview) “из коробки” без сложной настройки.

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

Интерактивный пример

WordPress REST API — headless подход: