Headless WordPress и Astro

WordPress — это система управления контентом, которая включает собственный фронтенд, но также может использоваться как headless CMS для предоставления контента вашему проекту Astro.

Интеграция с Astro

WordPress поставляется со встроенным WordPress REST API для подключения данных WordPress к Astro. Вы также можете установить WPGraphQL или Gato GraphQL на свой сайт для использования GraphQL.

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

Для начала вам понадобится следующее:

Проект Astro — если у вас ещё нет проекта Astro, наше руководство по установке поможет вам быстро начать работу.
Сайт на WordPress — REST API вашего сайта находится по адресу [YOUR_SITE]/wp-json/wp/v2/ и доступен по умолчанию на любом сайте WordPress. Также можно установить WordPress в локальной среде.

Настройка учётных данных

Ваш WordPress REST API по умолчанию доступен для внешних запросов на получение данных без аутентификации. Это не позволяет пользователям изменять ваши данные или настройки сайта и позволяет использовать ваши данные в проекте Astro без каких-либо учётных данных.

При необходимости вы можете потребовать аутентификацию.

Получение данных

Получите данные WordPress через уникальный URL REST API вашего сайта и маршрут для вашего контента (для блога это обычно будет posts). Затем вы можете отобразить свойства данных, используя директиву Astro set:html={}.

Например, для отображения списка заголовков постов и их контента:

---
const res = await fetch("https://[YOUR-SITE]/wp-json/wp/v2/posts");
const posts = await res.json();
---
<h1>Astro + WordPress 🚀</h1>
{
  posts.map((post) => (
      <h2 set:html={post.title.rendered} />
      <p set:html={post.content.rendered} />
  ))
}

WordPress REST API включает глобальные параметры, такие как _fields и _embed.

Через этот API доступно большое количество данных, поэтому вы можете захотеть получать только определённые поля. Вы можете ограничить ответ, добавив параметр _fields к URL API, например: [YOUR-SITE]/wp/v2/posts?_fields=author,id,excerpt,title,link

API также может возвращать контент, связанный с вашим постом, например ссылку на родительский пост или комментарии к посту. Вы можете добавить параметр _embed к URL API (например, [YOUR-SITE]/wp/v2/posts?_embed), чтобы указать серверу, что ответ должен включать эти встроенные ресурсы.

Создание блога с WordPress и Astro

В этом примере данные получаются из публичного WordPress API https://norian.studio/dinosaurs/. Этот сайт на WordPress хранит информацию об отдельных динозаврах по маршруту dinos, точно так же, как блог хранит отдельные посты по маршруту posts.

В этом примере показано, как воспроизвести эту структуру сайта в Astro: страница индекса, которая перечисляет динозавров со ссылками на динамически генерируемые отдельные страницы динозавров.

Отображение списка постов WordPress

Страница src/pages/index.astro перечисляет каждого динозавра с описанием и ссылкой на его страницу.

Директорияsrc/
- Директорияpages/
  - index.astro
  - Директорияdinos/
    [slug].astro
astro.config.mjs
package.json

Получение через API возвращает объект, который включает свойства:

title.rendered — содержит HTML-рендеринг заголовка поста.
content.rendered — содержит HTML-рендеринг контента поста.
slug — содержит слаг поста (это даёт ссылку на динамически генерируемые отдельные страницы динозавров).

---
import Layout from "../layouts/Layout.astro";

let res = await fetch("https://norian.studio/wp-json/wp/v2/dinos");
let posts = await res.json();
---
<Layout title="Dinos!">
  <section>
    <h1>Список динозавров</h1>
    {
      posts.map((post) => (
        <article>
          <h2>
            <a href={`/dinos/${post.slug}/`} set:html={post.title.rendered} />
          </h2>
          <Fragment set:html={post.content.rendered} />
        </article>
      ))
    }
  </section>
</Layout>

Использование WordPress API для генерации страниц

Страница src/pages/dinos/[slug].astro динамически генерирует страницу (EN) для каждого динозавра.

---
import Layout from '../../layouts/Layout.astro';

const { slug } = Astro.params;

let res = await fetch(`https://norian.studio/wp-json/wp/v2/dinos?slug=${slug}`);
let [post] = await res.json();

// getStaticPaths() требуется для статических Astro-сайтов.
// При использовании SSR эта функция не нужна.
export async function getStaticPaths() {
  let data = await fetch("https://norian.studio/wp-json/wp/v2/dinos");
  let posts = await data.json();

  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post: post },
  }));
}
---
<Layout title={post.title.rendered}>
  <article>
    <h1 set:html={post.title.rendered} />
    <Fragment set:html={post.content.rendered} />
  </article>
</Layout>

Возврат встроенных ресурсов

Параметр запроса _embed указывает серверу возвращать связанные (встроенные) ресурсы.

---
const { slug } = Astro.params;

let res = await fetch(`https://norian.studio/wp-json/wp/v2/dinos?slug=${slug}&_embed`);
let [post] = await res.json();
---

Возвращается свойство _embedded['wp:featuredmedia']['0'].media_details.sizes.medium.source_url, которое можно использовать для отображения миниатюры на каждой странице динозавра (замените medium на нужный размер изображения):

<Layout title={post.title.rendered}>
  <article>
    <img src={post._embedded['wp:featuredmedia']['0'].media_details.sizes.medium.source_url} />
    <h1 set:html={post.title.rendered} />
    <Fragment set:html={post.content.rendered} />
  </article>
</Layout>