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

AstroフレームワークでWordPressのHeadlessブログ化を試みるシリーズです。

前回の記事はこちら。
「AstroでWordPressを爆速Headless化してみる」

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

やりたいこと

今回は、公開中の記事の中から、最新○件指定して、

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

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

完成イメージ。

開発環境

Astro 2.0
WordPress 6.1.1
Local
node 18.12.1
Mac OS 13.2(Ventura)
Visual Studio Code(Astroプラグイン入り）

事前準備

前回の記事のように、LocalでWordPressを構築し、「Arkhe」テーマを適用して、Localと同じフォルダにAstroをインストールしている前提となります。

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

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

WordPressで固定ページを作成する

まず、LocalのWordPressにアクセスし、「ホーム」という名前の固定ページを新規で作成します。

「ホーム」という固定ページを開き、ブロック追加でウィジェットの中にある「最新の投稿」を配置します。

デフォルトでは記事タイトルのみですが、設定をいじることで項目数を変更したり、投稿日やアイキャッチ画像、本文抜粋なども表示することができます。

カスタム後。

公開設定でパーマリンクをhomeにして公開します。

最後に、WordPressの設定>表示設定から、ホームページの表示を先ほど作成した「ホーム」という固定ページを指定しておきます。

これでWordPress上のトップページが「ホーム」になりました。プレビューして「最新の投稿」が表示され、各ページにリンクされていることを確認しましょう。

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

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

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

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

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

---
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上と同じレイアウトで新着記事一覧が表示されました。

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

このように、

WordPressで固定ページを作ってブロックを配置する
AstroでREST API経由で読み込んで流し込む

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

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

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

おしまい。