Astro × WordPressで新着記事一覧を作る（初級編）

[Astroフレームワーク](https://docs.astro.build/ja/getting-started/)でWordPressのHeadlessブログ化を試みるシリーズです。

前回の記事はこちら。
「[AstroでWordPressを爆速Headless化してみる](https://qiita.com/kenji_clown5/items/fa5b6de29bf056ea3d86)」

前回は、LocalでWordPress環境を作り、そこにAstroをインストールして、WordPress REST APIを使って記事ページを構築するところまでを行いました。

## やりたいこと
今回は、公開中の記事の中から、最新○件指定して、

- 記事タイトル
- 公開日
- 本文抜粋
- アイキャッチ画像（あれば）

を表示してそれぞれの記事ページにリンクさせる、いわゆる新着記事一覧を作ってみようと思います。

完成イメージ。
![新着記事一覧の見本](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151789/bd104a02-4564-6f3f-9bc3-b0524ef0753b.png)

## 開発環境
- [Astro 2.0](https://docs.astro.build/ja/getting-started/)
- [WordPress 6.1.1](https://ja.wordpress.org/)
- [Local](https://localwp.com/)
- node 18.12.1
- Mac OS 13.2(Ventura)
- Visual Studio Code([Astroプラグイン](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode)入り）

## 事前準備
[前回の記事](https://qiita.com/kenji_clown5/items/fa5b6de29bf056ea3d86)のように、LocalでWordPressを構築し、「[Arkhe](https://arkhe-theme.com/ja/)」テーマを適用して、Localと同じフォルダにAstroをインストールしている前提となります。

直下に作成した`.envファイル`には、LocalのWordPress Rest APIのURLを入れておいてください。
（前回の記事公開後に少し修正しましたのでご注意ください）

```
PUBLIC_API_URL = http://astro-blog.local/wp-json/wp/v2/
```

## WordPressで固定ページを作成する
まず、LocalのWordPressにアクセスし、「ホーム」という名前の固定ページを新規で作成します。
![固定ページを作成する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151789/d1c0f832-d1e2-04e8-6a0c-9579d58fc9c7.png)

「ホーム」という固定ページを開き、ブロック追加でウィジェットの中にある「最新の投稿」を配置します。
![「最新の投稿」ウィジェットを配置する](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151789/251b6dc0-9d8b-575c-50de-dc0fea1c9bd2.png)

デフォルトでは記事タイトルのみですが、設定をいじることで項目数を変更したり、投稿日やアイキャッチ画像、本文抜粋なども表示することができます。
![「最新の投稿」のデフォルト状態](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151789/cf12656a-5cd9-1285-bfd3-d1765694cbd2.png)

カスタム後。
![「最新の投稿」のカスタム後](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151789/678b639e-d61d-c14e-3b6e-de62c16d036c.png)

公開設定でパーマリンクを`home`にして公開します。
![home-url.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151789/d890328a-a3d9-e034-7d46-b112d228b848.png)

最後に、WordPressの設定>表示設定から、ホームページの表示を先ほど作成した「ホーム」という固定ページを指定しておきます。
![WordPressの設定>表示設定](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151789/6c8d0814-0790-46b1-25fa-a964a21e7033.png)

これでWordPress上のトップページが「ホーム」になりました。プレビューして「最新の投稿」が表示され、各ページにリンクされていることを確認しましょう。
![WordPressのトップページ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151789/fb64efca-7ddd-c9e5-11fd-c2109a65a407.png)

続いて、Astroでの構築に移ります。

## Astroでブログトップページを作る

ブログのトップページとして、`src/pages/blog/[slug].astro`を複製して、index.astroファイルとして配置します。

```
src/
├─ pages
│   ├── blog
│   │ 　 　 ├─ [slug].astro
│   │ 　 　 └─ index.astro（[slug].astroを複製したもの）
```

`blog/index.astro`を開き、少しだけ修正を行います。

```diff
---
import Layout from '../../layouts/Layout.astro'
import '../../../app/public/wp-includes/css/dist/block-library/style.min.css'
import '../../../app/public/wp-content/themes/arkhe/dist/css/main.css'

const { slug } = Astro.params;
-const res = await fetch(`${import.meta.env.PUBLIC_API_URL}posts?_embed&slug=${slug}`)
+const res = await fetch(`${import.meta.env.PUBLIC_API_URL}pages?_embed&slug=home`)
const [post] = await res.json();
const renderedContent = post.content.rendered.replace(/http:\/\/astro-blog.local/g, '');
---
<Layout title={post.title.rendered}>
  <div class="l-content__body l-container">
    <main class="l-main">
      <article class="l-main__body">
        <h1 class="c-pageTitle__main">Astro Blog</h1>
        <div class="c-postContent">
          <Fragment set:html={renderedContent} />
        </div>
      </article>
    </main>
  </div>
</Layout>
```
変更内容は、前回は投稿記事の中からslug（パーマリンク名）でデータを取得していたのを、「home」という名前の固定ページを取得する、という変更になります。
すなわち、単純に「home」という固定ページの中身を丸々挿入する、ということになります。

## 確認する
```
npm run dev
```

を実行して、`http://localhost:3000/blog`にアクセスすると、WordPress上と同じレイアウトで新着記事一覧が表示されました。
![Astro Blog](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/151789/9a958c31-6210-3211-fef1-65ef1a11ad27.png)

WordPressとAstroのサイト階層構造が同じなので、リンクもそのまま機能しています。
ちなみにWordPress上の「ホーム」固定ページを開いて、「最新の投稿」の見た目をカスタムすると、その変更がAstroのページにもそのまま適用されます。

このように、
1. WordPressで固定ページを作ってブロックを配置する
1. AstroでREST API経由で読み込んで流し込む

とすると、お手軽に機能的なブロックを作成することができます。

しかし、WordPressテーマのHTML構造に引っ張られるため、自由なレイアウトができなかったり、アップデートに影響を受けることもあるため、メリット・デメリットを理解した上で利用してみると良いかと思います。

次回は、REST API経由で各項目を取得して、自由にレイアウトする方法の予定です。

おしまい。