Как запустить WordPress без PHP: практическое руководство по Headless CMS

WordPress традиционно работает на PHP и MySQL, но современные требования к скорости и гибкости заставляют искать альтернативы. Одним из таких решений является Headless WordPress — отделение фронтенда от бэкенда и отказ от PHP на стороне рендера сайта. В этой статье разберём, как запустить WordPress без PHP, используя REST API и JavaScript, а также рассмотрим полезные плагины и примеры кода для реализации.

Что такое Headless WordPress и зачем запускать без PHP

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

• Ускорить загрузку страниц, сделав фронтенд максимально лёгким и оптимизированным.
• Использовать современные JS-фреймворки с их преимуществами (SPA, SSR, SSG).
• Обеспечить гибкость дизайна и взаимодействия с пользователем.
• Снизить нагрузку на сервер, так как рендеринг фронтенда происходит на стороне клиента или через Node.js.

Отказ от PHP на фронтенде особенно актуален для сайтов с высокой посещаемостью и требованием к высокой производительности.

Как работать с REST API WordPress вместо PHP

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

Пример запроса к REST API WordPress

Чтобы получить список постов, используйте следующий URL:

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

Это стандартный эндпоинт, который возвращает посты в JSON.

Пример функции с приставкой wpkey для получения постов через PHP (если надо сделать промежуточный слой)

function wpkey_get_posts_rest() {
    $response = wp_remote_get('https://example.com/wp-json/wp/v2/posts');
    if (is_wp_error($response)) {
        return [];
    }
    $body = wp_remote_retrieve_body($response);
    return json_decode($body, true);
}

Однако в Headless архитектуре чаще обращаются напрямую из фронтенда.

Полезные плагины для Headless WordPress

Для удобной работы и настройки Headless CMS рекомендуем следующие плагины:

• Clearfy Pro — оптимизация API и отключение лишних функций WordPress для повышения производительности.
• Expert Review — добавление отзывов и рейтингов с API для фронтенда без PHP.
• WPRemark — продвинутые комментарии с REST API.

Эти плагины помогут адаптировать WordPress под Headless, улучшая безопасность и производительность.

Пример простого фронтенда на JavaScript с использованием REST API

Создадим минимальный пример загрузки и отображения постов WordPress с помощью fetch API:

document.addEventListener('DOMContentLoaded', function() {
    fetch('https://example.com/wp-json/wp/v2/posts')
        .then(response => response.json())
        .then(posts => {
            const container = document.getElementById('posts');
            posts.forEach(post => {
                const el = document.createElement('article');
                el.innerHTML = `<h2>${post.title.rendered}</h2><div>${post.excerpt.rendered}</div>`;
                container.appendChild(el);
            });
        })
        .catch(error => console.error('Ошибка загрузки постов:', error));
});

В HTML разместите <div id="posts"></div> для вывода.

Как избавиться от PHP на стороне фронтенда и использовать Next.js с WordPress

Next.js позволяет рендерить страницы на сервере и клиенте на базе React. Подключение к WordPress через REST API или GraphQL (плагин WPGraphQL) даёт мощный Headless инструмент.

Основные шаги:

1. Установите и настройте WPGraphQL (Clearfy Pro помогает оптимизировать запросы).
2. Создайте Next.js проект, используя getStaticProps или getServerSideProps для получения данных из WordPress.
3. Рендерьте страницы без PHP, только на Node.js и React.

Пример кода запроса в Next.js:

export async function getStaticProps() {
  const res = await fetch('https://example.com/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      query: `{
        posts {
          nodes {
            id
            title
            excerpt
          }
        }
      }`
    })
  });
  const json = await res.json();
  return { props: { posts: json.data.posts.nodes } };
}

Советы по безопасности при использовании Headless WordPress

Отделение фронтенда не освобождает от вопросов безопасности. Необходимо:

• Ограничить доступ к административной панели и REST API для неавторизованных пользователей, например, с помощью плагинов или настроек Clearfy Pro.
• Использовать HTTPS для всех запросов.
• Внедрить механизмы аутентификации для защищённых данных, если фронтенд требует авторизации.
• Регулярно обновлять WordPress и плагины, чтобы избежать уязвимостей.

Выводы и рекомендации

Запуск WordPress без PHP на фронтенде — реальная и востребованная практика, которую реализуют с помощью Headless CMS. Используйте REST API, современные JS-фреймворки и плагины из сайта WPShop.ru для оптимизации и безопасности. Это позволит создавать быстрые, масштабируемые и удобные для пользователя сайты на базе WordPress без традиционных ограничений PHP.