WordPress REST APIを用いてAstro構築
WordPress REST APIを用いてAstro構築
wordpress管理画面を残したまま表示速度を向上させたい場合、
WordPress REST APIを使用することで、WordPressの情報を残したままフロントのみAstro.jsにすることで実現することができます。今回Astro.jsの詳しい機能や簡単な構築は省きます。
Astro.jsとは
Astro.jsは、モダンなウェブ開発向けの静的サイトジェネレーターおよびフレームワーク
WordPress REST API
WP-CLIやURLベースでWordPress外部からウェブサイトのデータを取得できる仕組みです。これにより、外部アプリケーションやフロントエンドフレームワークと連携して、柔軟なウェブアプリケーションを構築できます。こちらを利用して今回フロントはAstro.jsで構築します。
なぜWordPress REST API
通常は、microCMSやNewtなどのヘッドレスCMSを使うことが主流と思います。
ただ今回これまでWordPressを使ってきたなどの理由から、管理画面はWordPressのままフロントのみ変更しようということからWordPress REST APIを利用することにしました。
WordPress REST APIで最新のブログ一覧を取得する方法
以下WordPressサイトでURL入力すると、JSON形式データが送られます。
ドメイン/wp-json/wp/v2/posts?_embed
こちらを今回Astro.js側でデータを取得して、ビルドする流れになります。
デフォルトでは画像やカスタムフィールドの情報は取得できないので、別途function.phpで追記することでデータを追加することができます。
独自のカスタムエンドポイントなど
カスタムでエンドポイントの作成・jsonデータに含ませるカラムを変更できます。
アイキャッチ画像の情報をAPIに追加したい
デフォルトではアイキャッチ画像は取得できず、編集する必要があります。
Astro.jsでデータフェッチ
先ほどのURL、Astro.js側でデータ取得するようにします。
下記、APIでデータ取得後、投稿表示する例です⇩
---
const res = await fetch("ドメイン/wp-json/wp/v2/posts?_embed")
const posts = await res.json()
---
{
posts.map((post) => (
<div class="item">
{post.title.rendered} // 投稿タイトル
</div>
))
}
まとめ
セキュリティの観点から行くと、ヘッドレスCMSを使った方が良いので、まずそちらを検討して、wordpress管理を変更できない場合など理由があり、表示速度を向上させたい場合、検討してみてください
Discussion