Сегодня в веб-разработке разделение интерфейсных и серверных систем приобрело значительную популярность, что привело к появлению автономных веб-сайтов.
Традиционно системы управления контентом (CMS) всегда были связаны друг с другом, но это имело множество ограничений, таких как ограниченная гибкость и масштабируемость. Однако современная безголовая CMS позволяет разработчикам отделить интерфейс, созданный на любой платформе, от серверной части с помощью безголовой CMS.
Что такое безголовая CMS?
Headless CMS — это специализированная система управления контентом, которая управляет исключительно серверной частью вашего сайта. В отличие от традиционных CMS, она не определяет, как контент будет отображаться во внешнем интерфейсе. Вместо этого он предоставляет разработчикам интерфейс прикладного программирования (API) для получения и доставки контента на любое устройство или платформу.
Сегодня существует множество платформ безголовых CMS. Однако перенос вашего контента с WordPress, с которым вы уже знакомы, может показаться ненужным. К счастью, есть альтернатива — безголовый WordPress.
Безголовый WordPress
WordPress в своей традиционной форме по своей сути не является безголовой CMS. WordPress — популярная и мощная CMS, известная своей простотой использования и гибкостью в создании и управлении контентом. Однако он традиционно объединяет управление контентом и его представлением в единой системе.
В настоящее время разработчики создали автономные реализации WordPress, используя его REST API. В таких случаях WordPress по-прежнему функционирует как CMS, где вы создаете, управляете и храните контент. Однако вместо рендеринга внешнего интерфейса или веб-сайта непосредственно с помощью шаблонов и тем WordPress презентация внешнего интерфейса отделяется от серверной части.
Это позволяет разработчикам создавать приложения с использованием различных технологий и платформ, сохраняя при этом знакомые возможности управления контентом WordPress. Это способ сделать работу WordPress более автономной, даже если это не конфигурация по умолчанию.
В этой статье рассматриваются два подхода к извлечению данных из вашей автономной CMS WordPress в вашу интерфейсную среду с упором на два основных метода: WPGraphQL и REST API.
Понимание REST API для Headless WordPress
REST API — это основополагающий принцип разработки WordPress, который облегчает извлечение данных в формате JSON. Начиная с версии WordPress 4.7, он встроен в WordPress и для работы не требует каких-либо плагинов.
Он обеспечивает доступ к данным к содержимому вашего сайта и реализует те же ограничения аутентификации: общедоступный контент на вашем сайте обычно общедоступен через REST API, а частный контент, контент, защищенный паролем, внутренние пользователи, настраиваемые типы сообщений и метаданные доступны только при аутентификации или если вы специально настроили ее.
Чтобы получить данные WordPress в формате JSON, добавьте /wp-json на URL-адрес вашего сайта WordPress:
http://yoursite.com/wp-jsonЕсли JSON API не включен при посещении http://yoursite.com/wp-json по умолчанию вы можете включить его, открыв свой Постоянные ссылки под Настройки WordPress и выбор Название сообщения или любой другой по вашему выбору, кроме Простой:
Это работает для локальных и общедоступных сайтов WordPress, предлагая конечные точки для публикаций, страниц, комментариев, мультимедиа и т. д.
http://yoursite.com/wp-json/wp/v2/posts
http://yoursite.com/wp-json/wp/v2/comments
http://yoursite.com/wp-json/wp/v2/mediaС помощью REST API вы можете сделать больше. Прочтите наше полное руководство, чтобы узнать больше.
Изучение WPGraphQL для Headless WordPress
В 2012 году Facebook представил GraphQL — революционный подход к получению данных через API. Его декларативный характер и выборочная выборка данных обеспечили надежную альтернативу традиционным REST API.
В 2015 году Джейсон Бахл осознал потребность в решении, которое сочетает в себе гибкость GraphQL с контентными возможностями WordPress, а затем выпустил WPGraphQL, который изменит правила игры для разработчиков WordPress.
WPGraphQL — это плагин на основе GraphQL, который предлагает более эффективный и индивидуальный подход к запросу данных. Он представляет собой единую конечную точку, обеспечивая точный поиск данных и уменьшая проблемы с чрезмерной выборкой, распространенные в REST API.
Как использовать WPGraphQL
Чтобы использовать WPGraphQL, выполните следующие действия:
- Установите плагин WPGraphQL: Начните с установки плагина WPGraphQL на свой сайт WordPress. Вы можете сделать это через панель управления WordPress или загрузив его из официального репозитория плагинов WordPress.
Плагин WpGraphQL на торговой площадке WP. - Изучите игровую площадку GraphQL: После установки WPGraphQL предоставляет встроенную игровую площадку GraphQL. Чтобы получить к нему доступ, перейдите к ГрафQL вкладка на панели управления WordPress:
Изучение GraphQL IDE в WordPress. Игровая площадка позволяет вам исследовать схему, выполнять запросы и тестировать мутации в интерактивном режиме.
- Создавайте свои запросы: Используйте возможности GraphQL, создавая запросы с учетом ваших конкретных требований к данным. Используйте самодокументируемую схему для понимания доступных данных и связей.
Получите данные публикаций WordPress с помощью WPGraphQL.
Теперь вы можете интегрировать WPGraphQL в свое внешнее приложение, независимо от того, создано оно на React, Vue или любой другой платформе, используя одну конечную точку GraphQL для эффективного получения данных и динамического обновления пользовательского интерфейса.
Ключевые особенности WPGraphQL
WPGraphQL имеет ключевые функции для упрощенного и целевого извлечения данных, как показано ниже.
Единая конечная точка для точного получения данных
WPGraphQL предоставляет унифицированную конечную точку, обычно /graphql, что позволяет эффективно извлекать определенные данные. Это контрастирует с REST API, где для сбора одной и той же информации требуется несколько конечных точек.
Предположим, что для REST API вы хотите получить сведения о конкретной публикации и комментариях к ней. Вам необходимо сделать несколько запросов к разным конечным точкам, например:
Чтобы получить информацию о публикации:
http://yoursite.com/wp-json/wp/v2/posts/123Чтобы получить комментарии, связанные с публикацией:
http://yoursite.com/wp-json/wp/v2/comments?post=123С другой стороны, с помощью WPGraphQL вы можете добиться того же результата с помощью одного целенаправленного запроса:
{
post(id: "123") {
title
content
comments {
edges {
node {
content
}
}
}
}
}В этом примере запрос GraphQL отправляется в одну конечную точку. Запрос указывает, что нам нужна информация о публикации с идентификатором «123», включая ее заголовок, содержание и связанные комментарии. WPGraphQL обрабатывает этот запрос и возвращает ответ, содержащий именно те данные, которые мы запрашивали, и все это за один раз.
Целевые запросы для эффективного поиска
С помощью GraphQL вы можете создавать конкретные запросы, соответствующие вашим потребностям. Это позволяет запрашивать только необходимые данные, сводя к минимуму чрезмерную выборку.
Предположим, вы хотите получить некоторые сведения (название, автор и дату) обо всех сообщениях. REST API не может этого сделать. Чтобы получить эти данные, вам нужно будет использовать такую конечную точку:
http://yoursite.com/wp-json/wp/v2/postsЭта конечная точка получает весь набор данных для всех публикаций, включая контент, категории и связанные данные. С помощью WPGraphQL вы можете создать целевой запрос для получения только тех конкретных данных, которые вам нужны:
{
posts {
title
date
author {
name
}
}
}В этом примере запрос GraphQL предназначен для получения подробной информации о сообщениях. Однако мы запрашиваем только название, дату и имя автора. WPGraphQL позволяет вам запрашивать только те поля, которые вас интересуют, что приводит к более эффективному и легкому ответу.
Несколько корневых ресурсов
В WPGraphQL вы можете запрашивать несколько корневых ресурсов одним запросом, что делает его гибким и эффективным:
{
posts {
edges {
node {
title
content
}
}
}
pages {
edges {
node {
title
content
}
}
}
}Выбор идеальной головы для безголового WordPress
Отправляясь в путь установки WordPress без головы, одним из важнейших решений, с которыми вы сталкиваетесь, является выбор идеальной головы — технологии внешнего интерфейса, которая будет обеспечивать работу вашего пользовательского интерфейса и определять взаимодействие с пользователем.
Это решение имеет огромное значение, поскольку оно напрямую влияет на производительность, масштабируемость и удобство обслуживания вашего веб-приложения. С Headless WordPress совместимы несколько интерфейсных фреймворков и технологий, каждая из которых имеет свои сильные стороны и особенности.
Например, вы можете выбрать генератор статических сайтов (SSG) и бесплатно развернуть его на хостинге статических сайтов Kinsta, так что вам придется беспокоиться только о хостинге WordPress (бэкэнд) и наслаждаться бесплатным хостингом для головы (интерфейс).
Аналогичным образом вы также можете использовать более надежный подход, например, используя библиотеку JavaScript, такую как React, чтобы активировать ваш интерфейс и продолжать обработку серверной части WordPress.
Краткое содержание
И WPGraphQL, и REST API предлагают мощные способы получения данных из автономной CMS WordPress и беспрепятственной их интеграции во внешние приложения. Выбор между ними зависит от конкретных потребностей вашего проекта и предпочитаемого вами подхода к получению данных.
Если вы выберете REST API, вы получите доступ к встроенному решению WordPress, упрощающему получение данных в формате JSON. С другой стороны, WPGraphQL предлагает более современный и эффективный подход, использующий возможности GraphQL.
Поскольку тенденция к безголовому управлению продолжает развиваться, разработчики могут выбрать инструмент, который лучше всего соответствует их рабочему процессу и целям проекта, обеспечивая плавную и эффективную интеграцию между WordPress и выбранной ими внешней средой.
В Kinsta создание и управление вашим WordPress (бэкэндом) очень просто благодаря нашему специализированному хостингу WordPress. Он имеет ценные функции, включая пограничное кэширование, резервное копирование сайтов, бесплатные SSL-сертификаты Cloudflare, Kinsta CDN и многое другое.
Кроме того, вы можете развернуть свой интерфейс, используя наш хостинг приложений или статический хостинг сайтов для SSG. Такой унифицированный подход позволяет легко размещать как внешний, так и внутренний интерфейс и получать к ним доступ через единую панель управления.
