WordPressの記事をREST APIでJSON取得して表示する方法

WordPressにはREST APIが標準搭載されていて、記事データをJSONで取得できます。PHPが使えない環境や、フロントをJavaScriptで構築したい場合に便利です。

基本的な使い方

APIのエンドポイント

https://example.com/wp-json/wp/v2/posts    # 投稿一覧
https://example.com/wp-json/wp/v2/posts/123 # 投稿ID指定
https://example.com/wp-json/wp/v2/pages/456 # 固定ページID指定

リソース	エンドポイント
投稿	/wp-json/wp/v2/posts
固定ページ	/wp-json/wp/v2/pages
カテゴリー	/wp-json/wp/v2/categories
メディア	/wp-json/wp/v2/media

fetch APIでの取得（現在の推奨）

async function getPost(siteUrl, postId) {
  const response = await fetch(`${siteUrl}/wp-json/wp/v2/posts/${postId}`);
  const post = await response.json();

  document.getElementById('page_content').innerHTML = post.content.rendered;
}

getPost('https://example.com', 123);

jQueryでの取得

$.ajax({
    type: 'GET',
    url: 'https://example.com/wp-json/wp/v2/pages/456',
    dataType: 'json'
}).done(function(json) {
    var content = json.content.rendered;
    $('#page_content').append(content);
}).fail(function() {
    console.error('記事取得に失敗しました。');
});

取得できるデータ

APIレスポンスには様々なフィールドが含まれます。

フィールド	内容
title.rendered	タイトル
content.rendered	本文HTML
excerpt.rendered	抜粋
date	投稿日
slug	スラッグ
featured_media	アイキャッチ画像ID

console.log(json)で中身を確認しながら、必要なフィールドを選択するのがおすすめです。

パラメータでの絞り込み

# カテゴリーID:5の記事を3件取得
/wp-json/wp/v2/posts?categories=5&per_page=3

# 検索
/wp-json/wp/v2/posts?search=キーワード

# 並び順変更
/wp-json/wp/v2/posts?orderby=date&order=asc

注意点

• REST APIはデフォルトで有効。無効化している場合は取得できない
• 下書き記事は認証なしでは取得不可
• CORS制限がある場合、別ドメインからのアクセスにはサーバー側の設定が必要
• 大量の記事取得はパフォーマンスに影響するのでper_pageで制限する

ヘッドレスCMSとしてのWordPress

この方法を発展させると、WordPressをヘッドレスCMSとして使い、フロントをAstroやNext.jsで構築する、といったアーキテクチャも実現できます。WordPressの管理画面の使いやすさはそのままに、フロントの自由度を上げられるのが利点です。