ワードプレス、REST APIについて

WordPress REST API は、WordPress のデータを外部から取得・操作するための仕組みです。この記事では、REST API の基本概念から具体的な活用方法、セキュリティ対策まで幅広く解説します。

WordPress REST API の基礎

REST API とは？

REST API（Representational State Transfer API）とは、HTTP を通じてシステム間でデータをやり取りするための仕組みです。主要な HTTP メソッドには以下があります。

GET – データの取得
POST – データの作成
PUT – データの更新
DELETE – データの削除

WordPress では、これらのメソッドを使用して記事やユーザー情報を操作できます。

WordPress REST API の特徴

WordPress には標準で REST API が組み込まれており、以下のようなエンドポイントが提供されています。

投稿取得：https://example.com/wp-json/wp/v2/posts
ユーザー取得：https://example.com/wp-json/wp/v2/users

WordPress REST API の有効/無効の確認

REST API が有効かどうかを確認するには、以下の URL にアクセスしてください。

http://localhost/wp1/wordpress/wp-json/

エラーが表示される場合、wp-config.php で DISABLE_WP_REST_API が true になっていないか確認しましょう。

WordPress REST API の使い方

投稿データを取得する（GET）

WordPress の投稿データを取得するには、以下の URL にアクセスします。

http://localhost/wp1/wordpress/wp-json/wp/v2/posts

ブラウザや curl コマンドを使って JSON データを確認できます。

投稿データを作成・更新・削除（POST, PUT, DELETE）

REST API を使って投稿を作成・編集・削除するには、認証が必要です。認証方法としては以下があります。

Application Passwords（基本認証）
JWT Authentication（トークン認証）
OAuth（トークン認証）

例：POST リクエストで投稿を作成

curl -X POST -H "Content-Type: application/json" \
     -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
     -d '{"title": "新しい投稿", "content": "投稿内容", "status": "publish"}' \
     http://localhost/wp1/wordpress/wp-json/wp/v2/posts

curl -X POST -H "Content-Type: application/json" \
     -H "Authorization: Bearer YOUR_ACCESS_TOKEN" \
     -d '{"title": "新しい投稿", "content": "投稿内容", "status": "publish"}' \
     http://localhost/wp1/wordpress/wp-json/wp/v2/posts

Bash

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

独自の API を作成するには、functions.php に以下のコードを追加します。

add_action('rest_api_init', function() {
    register_rest_route('custom/v1', '/data/', array(
        'methods' => 'GET',
        'callback' => 'custom_api_callback',
    ));
});

function custom_api_callback() {
    return array('message' => 'Hello, REST API!');
}

add_action('rest_api_init', function() {
    register_rest_route('custom/v1', '/data/', array(
        'methods' => 'GET',
        'callback' => 'custom_api_callback',
    ));
});

function custom_api_callback() {
    return array('message' => 'Hello, REST API!');
}

PHP

WordPress REST API の活用例

JavaScript（Fetch API）を使ってデータを取得

基本的な Fetch API の使用例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        fetch("http://localhost/wp1/wordpress/wp-json/wp/v2/posts")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error fetching data:", error));
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        fetch("http://localhost/wp1/wordpress/wp-json/wp/v2/posts")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error("Error fetching data:", error));
    </script>
</body>
</html>

HTML

HTML に投稿一覧を表示する例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WordPress REST API Fetch</title>
</head>
<body>
    <h1>最新の投稿</h1>
    <ul id="posts"></ul>

    <script>
        async function fetchPosts() {
            try {
                let response = await fetch("http://localhost/wp1/wordpress/wp-json/wp/v2/posts");
                let posts = await response.json();
                
                let postList = document.getElementById("posts");
                posts.forEach(post => {
                    let li = document.createElement("li");
                    li.innerHTML = `<a href="${post.link}">${post.title.rendered}</a>`;
                    postList.appendChild(li);
                });
            } catch (error) {
                console.error("データの取得に失敗しました:", error);
            }
        }

        fetchPosts();
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WordPress REST API Fetch</title>
</head>
<body>
    <h1>最新の投稿</h1>
    <ul id="posts"></ul>

    <script>
        async function fetchPosts() {
            try {
                let response = await fetch("http://localhost/wp1/wordpress/wp-json/wp/v2/posts");
                let posts = await response.json();
                
                let postList = document.getElementById("posts");
                posts.forEach(post => {
                    let li = document.createElement("li");
                    li.innerHTML = `<a href="${post.link}">${post.title.rendered}</a>`;
                    postList.appendChild(li);
                });
            } catch (error) {
                console.error("データの取得に失敗しました:", error);
            }
        }

        fetchPosts();
    </script>
</body>
</html>

HTML

このコードを index.html として保存し、ブラウザで開くと、WordPress の投稿一覧が表示されます。

Vue.js で動的なコンテンツを表示

Vue.js を使う場合、fetch() または axios を利用してデータを取得できます。

Vue.js（Composition API）の例

<template>
  <div>
    <h1>最新の投稿</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <a :href="post.link">{{ post.title.rendered }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";

export default {
  setup() {
    const posts = ref([]);

    const fetchPosts = async () => {
      try {
        const response = await fetch("http://localhost/wp1/wordpress/wp-json/wp/v2/posts");
        posts.value = await response.json();
      } catch (error) {
        console.error("データの取得に失敗しました:", error);
      }
    };

    onMounted(fetchPosts);

    return { posts };
  }
};
</script>

<template>
  <div>
    <h1>最新の投稿</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <a :href="post.link">{{ post.title.rendered }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";

export default {
  setup() {
    const posts = ref([]);

    const fetchPosts = async () => {
      try {
        const response = await fetch("http://localhost/wp1/wordpress/wp-json/wp/v2/posts");
        posts.value = await response.json();
      } catch (error) {
        console.error("データの取得に失敗しました:", error);
      }
    };

    onMounted(fetchPosts);

    return { posts };
  }
};
</script>

Vue

JavaScript（Fetch API） を使うと簡単に REST API からデータを取得できる。
Vue.js では ref() を使って状態管理し、onMounted() でデータを取得する。

ヘッドレス CMS としての活用

WordPress をデータベースとして利用し、Next.jsでフロントエンドを構築

Next.js プロジェクトのセットアップ

まず、Next.js のプロジェクトを作成します。

npx create-next-app@latest wordpress-headless
cd wordpress-headless
npm install

npx create-next-app@latest wordpress-headless
cd wordpress-headless
npm install

Bash

WordPress REST API から投稿を取得

Next.js の pages/index.js を編集し、WordPress の REST API から投稿データを取得して表示します。

// pages/index.js
import { useEffect, useState } from "react";

export default function Home() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    async function fetchPosts() {
      try {
        const res = await fetch("http://localhost/wp1/wordpress/wp-json/wp/v2/posts");
        const data = await res.json();
        setPosts(data);
      } catch (error) {
        console.error("データの取得に失敗しました:", error);
      }
    }

    fetchPosts();
  }, []);

  return (
    <div>
      <h1>WordPress ヘッドレス CMS</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <a href={`/post/${post.id}`}>{post.title.rendered}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

// pages/index.js
import { useEffect, useState } from "react";

export default function Home() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    async function fetchPosts() {
      try {
        const res = await fetch("http://localhost/wp1/wordpress/wp-json/wp/v2/posts");
        const data = await res.json();
        setPosts(data);
      } catch (error) {
        console.error("データの取得に失敗しました:", error);
      }
    }

    fetchPosts();
  }, []);

  return (
    <div>
      <h1>WordPress ヘッドレス CMS</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <a href={`/post/${post.id}`}>{post.title.rendered}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

JavaScript

投稿ページを作成

動的ルートを使って個別投稿ページを作成します。

// pages/post/[id].js
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

export default function Post() {
  const router = useRouter();
  const { id } = router.query;
  const [post, setPost] = useState(null);

  useEffect(() => {
    if (id) {
      fetch(`http://localhost/wp1/wordpress/wp-json/wp/v2/posts/${id}`)
        .then((res) => res.json())
        .then((data) => setPost(data))
        .catch((error) => console.error("データの取得に失敗しました:", error));
    }
  }, [id]);

  if (!post) return <p>Loading...</p>;

  return (
    <div>
      <h1>{post.title.rendered}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
    </div>
  );
}

// pages/post/[id].js
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

export default function Post() {
  const router = useRouter();
  const { id } = router.query;
  const [post, setPost] = useState(null);

  useEffect(() => {
    if (id) {
      fetch(`http://localhost/wp1/wordpress/wp-json/wp/v2/posts/${id}`)
        .then((res) => res.json())
        .then((data) => setPost(data))
        .catch((error) => console.error("データの取得に失敗しました:", error));
    }
  }, [id]);

  if (!post) return <p>Loading...</p>;

  return (
    <div>
      <h1>{post.title.rendered}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
    </div>
  );
}

JavaScript

Next.js アプリを起動

npm run dev

npm run dev

Bash

この構成のメリット

WordPress をバックエンド API として活用し、Next.js をフロントエンドにできる
SSR（サーバーサイドレンダリング）対応で高速表示
静的サイト生成（SSG） にも対応可能

REST API の制限・無効化方法

デフォルトでは、WordPress REST API はすべてのユーザーがアクセスできるため、以下のような制限を加えることが可能です。

ログインユーザーのみ API アクセスを許可

未ログインのユーザーが REST API にアクセスできないようにする方法です。functions.php に以下のコードを追加します。

add_filter('rest_authentication_errors', function($result) {
    if (!is_user_logged_in()) {
        return new WP_Error('rest_forbidden', __('ログインが必要です。'), array('status' => 401));
    }
    return $result;
});

add_filter('rest_authentication_errors', function($result) {
    if (!is_user_logged_in()) {
        return new WP_Error('rest_forbidden', __('ログインが必要です。'), array('status' => 401));
    }
    return $result;
});

functions.php

特定のユーザーのみ API を利用できるようにする

特定のユーザー（例えば管理者のみ）が REST API を使えるようにする場合は、以下のコードを functions.php に追加します。

add_filter('rest_authentication_errors', function($result) {
    if (!is_user_logged_in() || !current_user_can('manage_options')) {
        return new WP_Error('rest_forbidden', __('このAPIエンドポイントへのアクセス権がありません。'), array('status' => 403));
    }
    return $result;
});

add_filter('rest_authentication_errors', function($result) {
    if (!is_user_logged_in() || !current_user_can('manage_options')) {
        return new WP_Error('rest_forbidden', __('このAPIエンドポイントへのアクセス権がありません。'), array('status' => 403));
    }
    return $result;
});

functions.php

管理者 (manage_options 権限を持つユーザー) のみ API アクセス可能
その他のユーザーは 403 Forbidden エラーを受け取る

特定のエンドポイントのみ制限

例えば、ユーザー情報 (/wp-json/wp/v2/users/) の取得を制限したい場合は、以下のコードを functions.php に追加します。

add_filter('rest_authentication_errors', function($result) {
    if (!is_user_logged_in() || !current_user_can('manage_options')) {
        return new WP_Error('rest_forbidden', __('このAPIエンドポイントへのアクセス権がありません。'), array('status' => 403));
    }
    return $result;
});

add_filter('rest_authentication_errors', function($result) {
    if (!is_user_logged_in() || !current_user_can('manage_options')) {
        return new WP_Error('rest_forbidden', __('このAPIエンドポイントへのアクセス権がありません。'), array('status' => 403));
    }
    return $result;
});

functions.php

/wp-json/wp/v2/users/ へのアクセスをブロック
他のエンドポイントはそのまま利用可能

REST API を IP アドレスで制限

特定の IP アドレスのみに REST API へのアクセスを許可するには、.htaccess で制限を設定できます。.htaccess に以下のコードを追加します（Apache 環境の場合）。

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_URI} ^(.*)?wp-json(.*)?$ [NC]
    RewriteCond %{REMOTE_ADDR} !^123\.456\.78\.90$
    RewriteRule ^(.*)$ - [F,L]
</IfModule>

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_URI} ^(.*)?wp-json(.*)?$ [NC]
    RewriteCond %{REMOTE_ADDR} !^123\.456\.78\.90$
    RewriteRule ^(.*)$ - [F,L]
</IfModule>

Apache

123.456.78.90 以外の IP からの API アクセスをブロック
指定した IP からのみ REST API にアクセス可能

REST API を完全に無効化

wp-config.php に以下を追加

define('DISABLE_WP_REST_API', true);

define('DISABLE_WP_REST_API', true);

PHP

またはfunctions.phpにコードを追加して、すべてのリクエストをブロックできます。

add_filter('rest_enabled', '__return_false');
add_filter('rest_jsonp_enabled', '__return_false');

add_filter('rest_enabled', '__return_false');
add_filter('rest_jsonp_enabled', '__return_false');

functions.php

まとめ

WordPress REST API を活用することで、外部アプリとの連携やカスタム開発が可能になります。セキュリティ対策を考慮しながら、安全に利用しましょう。