🧠 概要：
概要
この記事では、WordPressとAstro.jsを使用してヘッドレスCMSを構築する過程の6回目として、記事ページのメタ情報やアイキャッチ画像の設定、前後の記事リンクの実装について説明しています。特に、WordPressのAdvanced Custom Fields (ACF)を利用してメタ情報を追加し、REST API経由でアイキャッチ画像情報を取得してOpen Graph（OG）画像を設定する方法が詳述されています。
要約 (箇条書き)
- 記事ページの構築を続ける
- Meta情報の追加
- ACFを利用してWordPressにキーワードを追加
function.phpにコードを記述してREST APIにキーワードを表示させる
- 基本の実装例
- JSONからkeywordsを取得し、descriptionはexcerptから生成
- HTMLにmetaタグを追加
- アイキャッチ画像の情報取得
- WordPressでアイキャッチ画像を設定し、REST APIに
_embedを追加して画像情報を取得 - HTMLにOG画像メタタグを追加
- WordPressでアイキャッチ画像を設定し、REST APIに
- 前後の記事リンクの実装
getStaticPaths()を用いて全記事を取得し、前後の記事のデータをpropsとして渡す- 簡単なナビゲーションリンクをHTMLに追加
これにより、各記事ページにメタ情報、アイキャッチ画像、前後の記事へのリンクが実装された。
function add_acf_to_rest_api() { register_rest_field('post', 'keywords', [ 'get_callback' => function($post_arr) { return get_field('keywords', $post_arr['id']); }, 'schema' => null, ]);}add_action('rest_api_init', 'add_acf_to_rest_api');JSONにkeywordsが入っていれば、あとはそれを展開していくだけです！
基本の実装例（[slug].astro）
keywordsの値はそのままJSONから引っ張ってこれるので、description は content から一部抽出して使用します。
const plainText = post.excerpt?.rendered?.replace(/<[^>]+>/g, '').slice(0, 120);const keywordsText = post?.keywords;html は、
<meta name="description" content={plainText} /><meta name="keywords" content={keywordsText} /><meta property="og:title" content={post.title.rendered} /><meta property="og:description" content={plainText} /><meta property="og:type" content="article" /><meta property="og:url" content={`https:こんな感じになります！
そしてこの状態でビルドしてみると…
ばっちりですな！
REST APIでアイキャッチ画像の情報を取得してog画像を追加
wordpressの方でアイキャッチ画像とaltを入れているので、そちらを取得してog:image 、og:image:alt にしてみます！
fetchのアドレスに _embed というクエリを追加します。
const res = await fetch('http:_embed を付けると、_links に基づいて関連情報（画像・カテゴリなど）を一緒に返してくれて、この中に _embedded[‘wp:featuredmedia’] が含まれ、アイキャッチ画像の情報が取得できます！
JSONにもありました！
あとはこちらのデータを展開していくだけです😊
const featuredMedia = post._embedded?.['wp:featuredmedia']?.[0];const thumbnail = featuredMedia?.source_url;const alt = featuredMedia?.alt_text || '';htmlには
<meta property="og:image" content={thumbnail} /><meta property="og:image:alt" content={alt} />これで
ちゃんと反映されてました～！🦔
前後の記事へのリンクを付ける
続いては、各記事ページに「前の記事」「次の記事」みたいのを付けてみましょう！
めっちゃ簡単です😀
◆ getStaticPaths() で全記事を取得し、前後の記事情報を props に渡す
getStaticPaths() を拡張します！
export async function getStaticPaths() { const res = await fetch('http://headless.local/wp-json/wp/v2/posts?_embed&per_page=100'); const posts = await res.json(); return posts.map((post, index) => ({ params: { slug: post.slug }, props: { post, prevPost: posts[index - 1] || null, nextPost: posts[index + 1] || null }, }));} const { post, prevPost, nextPost } = Astro.props;投稿一覧を 配列で取得しておけば、index – 1, index + 1 で前後の記事を簡単に取り出せます！
投稿順は WordPressの投稿日順（新しい順） がデフォルトです。
そしてhtmlは
<nav class="post-nav"> {prevPost && ( <a href={`/blog/${prevPost.slug}/`}>← 前の記事: {prevPost.title.rendered}</a> )} {nextPost && ( <a href={`/blog/${nextPost.slug}/`}>次の記事: {nextPost.title.rendered} →</a> )}</nav>と記述するだけで、
サクッと出ましたね！
Views: 0
