応用編: REST API活用 - WordPressオリジナルテーマ作成

WordPress REST APIとは？

REST APIは、WordPressのコンテンツをJSON形式で取得・操作できる仕組みです。JavaScriptフレームワークやモバイルアプリと連携できます。

💡 REST APIでできること

投稿・固定ページのデータ取得
カスタムポストタイプの操作
ユーザー情報の管理
コメントの投稿・取得
メディアファイルのアップロード
React/Vue.jsアプリとの統合

基本的なエンドポイント

WordPressに標準で用意されている主なAPIエンドポイントです。

投稿関連

GET /wp-json/wp/v2/posts - 投稿一覧を取得

GET /wp-json/wp/v2/posts/123 - 特定の投稿を取得

POST /wp-json/wp/v2/posts - 新規投稿を作成

ページ関連

GET /wp-json/wp/v2/pages - ページ一覧を取得

カテゴリー・タグ

GET /wp-json/wp/v2/categories - カテゴリー一覧

GET /wp-json/wp/v2/tags - タグ一覧

JavaScriptで投稿を取得する

fetch APIを使った基本例

JavaScript// 最新の投稿5件を取得
fetch('https://example.com/wp-json/wp/v2/posts?per_page=5')
    .then(response => response.json())
    .then(posts => {
        posts.forEach(post => {
            console.log(post.title.rendered);
            console.log(post.excerpt.rendered);
        });
    })
    .catch(error => console.error('エラー:', error));

テンプレートに統合

HTML + JavaScript<div id="posts-container"></div>

<script>
async function loadPosts() {
    try {
        const response = await fetch('/wp-json/wp/v2/posts?per_page=10');
        const posts = await response.json();
        
        const container = document.getElementById('posts-container');
        
        posts.forEach(post => {
            const article = document.createElement('article');
            article.innerHTML = `
                <h2>${post.title.rendered}</h2>
                <div>${post.excerpt.rendered}</div>
                <a href="${post.link}">続きを読む</a>
            `;
            container.appendChild(article);
        });
    } catch (error) {
        console.error('読み込みエラー:', error);
    }
}

loadPosts();
</script>

カスタムエンドポイントの作成

独自のAPIエンドポイントを追加できます。

シンプルなカスタムエンドポイント

functions.phpfunction mytheme_register_api_routes() {
    register_rest_route('mytheme/v1', '/hello', array(
        'methods'  => 'GET',
        'callback' => 'mytheme_hello_callback',
        'permission_callback' => '__return_true',
    ));
}
add_action('rest_api_init', 'mytheme_register_api_routes');

function mytheme_hello_callback() {
    return array(
        'message' => 'Hello, World!',
        'timestamp' => current_time('mysql'),
    );
}

// アクセス: /wp-json/mytheme/v1/hello

パラメータを受け取る

functions.phpfunction mytheme_register_api_routes() {
    register_rest_route('mytheme/v1', '/search', array(
        'methods'  => 'GET',
        'callback' => 'mytheme_search_callback',
        'permission_callback' => '__return_true',
        'args' => array(
            'keyword' => array(
                'required' => true,
                'validate_callback' => function($param) {
                    return is_string($param);
                }
            ),
        ),
    ));
}

function mytheme_search_callback($request) {
    $keyword = $request->get_param('keyword');
    
    $args = array(
        'post_type' => 'post',
        's' => $keyword,
        'posts_per_page' => 10,
    );
    
    $query = new WP_Query($args);
    $posts = array();
    
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $posts[] = array(
                'id' => get_the_ID(),
                'title' => get_the_title(),
                'link' => get_permalink(),
            );
        }
    }
    wp_reset_postdata();
    
    return $posts;
}

// アクセス: /wp-json/mytheme/v1/search?keyword=WordPress

カスタムフィールドをAPIに追加

functions.phpfunction mytheme_register_custom_fields() {
    // 価格フィールドをAPIに追加
    register_rest_field('product', 'price', array(
        'get_callback' => function($object) {
            return get_post_meta($object['id'], 'price', true);
        },
        'update_callback' => function($value, $object) {
            return update_post_meta($object->ID, 'price', $value);
        },
        'schema' => array(
            'type' => 'string',
            'description' => '商品価格',
        ),
    ));
}
add_action('rest_api_init', 'mytheme_register_custom_fields');

取得例

JavaScriptfetch('/wp-json/wp/v2/product/123')
    .then(response => response.json())
    .then(product => {
        console.log('商品名:', product.title.rendered);
        console.log('価格:', product.price);
    });

認証とセキュリティ

Application Passwordsを使った認証

JavaScriptconst username = 'your-username';
const appPassword = 'xxxx xxxx xxxx xxxx xxxx xxxx';

fetch('/wp-json/wp/v2/posts', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Basic ' + btoa(username + ':' + appPassword)
    },
    body: JSON.stringify({
        title: '新しい投稿',
        content: '投稿内容',
        status: 'publish'
    })
})
.then(response => response.json())
.then(data => console.log('投稿作成:', data));

⚠️ セキュリティ対策

Application Passwordsは管理画面で生成
本番環境ではHTTPS必須
nonceを使ったCSRF対策
permission_callbackで権限チェック

→ セキュリティ対策の詳細を学ぶ

React/Vueとの統合例

Reactコンポーネント例

Reactimport React, { useState, useEffect } from 'react';

function PostsList() {
    const [posts, setPosts] = useState([]);
    const [loading, setLoading] = useState(true);
    
    useEffect(() => {
        fetch('/wp-json/wp/v2/posts?per_page=10')
            .then(response => response.json())
            .then(data => {
                setPosts(data);
                setLoading(false);
            })
            .catch(error => {
                console.error('エラー:', error);
                setLoading(false);
            });
    }, []);
    
    if (loading) return <div>読み込み中...</div>;
    
    return (
        <div>
            {posts.map(post => (
                <article key={post.id}>
                    <h2 dangerouslySetInnerHTML={{__html: post.title.rendered}} />
                    <div dangerouslySetInnerHTML={{__html: post.excerpt.rendered}} />
                </article>
            ))}
        </div>
    );
}

export default PostsList;

ヘッドレスWordPressの構築

WordPressをCMSとして使い、フロントエンドは別のフレームワークで構築する方法です。

💡 ヘッドレスCMSのメリット

フロントエンドの自由度が高い
パフォーマンスの最適化
React/Vue/Nextなど最新技術の活用
マルチプラットフォーム対応

基本的な構成

WordPress (バックエンド)
    ↓ REST API
Next.js / Gatsby (フロントエンド)
    ↓
静的サイト生成 / SSR

よくあるクエリパラメータ

ページネーション

?page=2 - ページ番号

?per_page=20 - 1ページあたりの件数

並び替え

?orderby=date - 日付順

?order=asc - 昇順（desc: 降順）

絞り込み

?categories=5 - カテゴリーID指定

?tags=10,20 - タグID指定（複数可）

?search=キーワード - 検索

エラーハンドリング

JavaScriptasync function fetchPosts() {
    try {
        const response = await fetch('/wp-json/wp/v2/posts');
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        const data = await response.json();
        return data;
        
    } catch (error) {
        console.error('データ取得エラー:', error);
        return null;
    }
}

まとめ

REST APIを活用すると、以下のことが可能になります：

✅ モダンなJavaScriptフレームワークとの統合
✅ モバイルアプリ開発
✅ マイクロサービス連携
✅ ヘッドレスCMSとしての活用

🚀 次のステップ

REST APIをマスターしたら、パフォーマンス最適化を学んで、高速なサイトを構築しましょう。

🔌 REST API活用