WP REST APIとは?使い方や実装に必須の知識について徹底解説(WordPress REST API)

投稿日:2024年07月18日(木) 更新日:2024年07月26日(金)
WP REST APIとは?使い方や実装に必須の知識について徹底解説(WordPress REST API)|UMENOKI|すぐに仕事で使えるIT技術情報メディア

みなさんこんにちは!エンジニアの高澤です!

今回は、WP REST APIとは?実務での使い方や基礎知識について徹底的に解説していきたいと思います。

WP REST API(場合によってはWordPress REST APIとも呼ばれています)とは、WordPressを基盤としたアプリケーションと他のサービスとの連携を可能にする強力なツールです。

これまでのWordPressは、主にCMS(コンテンツ管理システム)としての機能に特化していましたが、REST APIが標準搭載され、データのやり取りが簡単になり、より柔軟な開発が可能になりました。

このWP REST APIを使いこなせるようになれれば、WordPressを活用したさまざまなウェブサイトやアプリケーションを開発できるようになりますので、ぜひ当記事をご活用いただけましたら幸いです。

REST APIとは

REST API(レストエーピーアイ)とは、外部のアプリやサービスとデータを簡単にやりとりするためのルールのことです。

これを使うことで、さまざまなサービスやアプリケーションが簡単に連携できるようになります。特に、WordPressのようなブログやウェブサイトを作るときにとても役立ちます。

REST APIの知っておくべき概念

REST APIには基本的な概念がいくつかあります。
以下が基本的な概念になりまして、それぞれおさえておくことでよりREST APIの理解を助けてくれますのでここでしっかりおさえておきましょう。

  • リソース
  • ステートレス
  • HTTPメソッド
  • データの表現形式(JSON)

それぞれ解説いたします。

リソース

リソースとは、データのことです。例えば、ブログの記事やコメント、ユーザーの情報などがリソースになります。各リソースには、それを特定するための「住所」があります。これがURI(ユニフォームリソース識別子)です。

ステートレス

REST APIは「ステートレス」という特性があります。これは、サーバーがクライアント(アプリやウェブサイト)からのリクエストを受け取ったときに、そのリクエストの情報だけで処理を行い、前のリクエストのことを覚えていないという意味です。

HTTPメソッド

REST APIでは、データを操作するために「HTTPメソッド」と呼ばれる命令を使います。
主なメソッドは次の4つになります。

  • GET:データを取得する(例:記事一覧を表示する)
  • POST:新しいデータを作成する(例:新しい記事を投稿する)
  • PUT:既存のデータを更新する(例:記事を編集する)
  • DELETE:データを削除する(例:記事を削除する)

データの表現形式(JSON)

データのやり取りには、主にJSONという形式が使われます。JSONは、データを見やすく整理した形で、プログラム同士が理解しやすいフォーマットです。

具体的にJSONを見てみましょう。以下がJSONのソースコードになります。

{
  "title": "新しい記事のタイトル",
  "author": "高澤",
  "content": "この記事の内容です。",
  "tags": ["WordPress", "API", "JSON"],
  "published": true,
  "date": "2024-07-17"
}

上記のように、中括弧で何層かの入れ子になっており、非常にわかりやすい構造になっていることがよくわかるかと思います。

このJSONは、WordPressやPHPのみならず、Pythonやアプリ開発で使うSwiftなどでも利用されるので、ここで覚えておくと非常に有効です。

少しフライングになりますが、試しに以下のWP REST APIのサンプルURLを参考に、「https://example.com」のドメイン部分をご自身のWordPressサイトのドメインに置き換えてブラウザからアクセスしてみてください。

// WP REST APIのサンプル(記事取得のURL)
https://example.com/wp-json/wp/v2/posts

// 当サイトの場合
https://ume-noki.com/wp-json/wp/v2/posts

すると、以下のようにブラウザ画面にJSONコードが画面いっぱいに表示されることと思います。

これがREST APIによってサーバーからJSON形式でカスタム投稿タイプの記事データが取得できていることがわかります。

先ほど紹介したURLをエンドポイントといいます。

// 当サイトの場合
https://ume-noki.com/wp-json/wp/v2/posts

このエンドポイントにアクセスすることで、WordPressの投稿データを取得することができます。エンドポイントは、APIを通じて特定のリソースにアクセスするための「住所」のようなものです。

エンドポイントによって、アクセスすることによってデータが取得できましたが、実際にREST APIを使って何かアプリやサイトを実装する際は、このURL(エンドポイント)をPHPやJavaScriptなどのソースコードに記述して関数などの引数に入れてデータを取得し、ループ処理などでデータを出力するという流れで利用されます。

REST APIの特徴

次は、REST APIの特徴について解説いたします。

特徴としては以下が考えられます。

  • シンプルに利用可能
  • 拡張性が高い
  • キャッシュ可能
  • クロスプラットフォームに対応可能

それぞれの説明を表示いたしましたので、以下をご確認ください。

シンプルに利用可能REST APIは、HTTPの標準的なメソッドを利用するため、非常にシンプルで使いやすいです。開発者は直感的に操作を理解しやすく、学習コストも低いです。
拡張性が高いREST APIは、ステートレスな設計のため、サーバーの負荷が軽減され、スケーラビリティが向上します。複数のサーバーで負荷分散を行いやすくなります。
キャッシュ可能RESTfulなサービスは、リソースの取得結果をキャッシュできるため、パフォーマンスの向上が期待できます。クライアントは、キャッシュされたデータを利用することで、無駄なリクエストを減らせます。
クロスプラットフォームに対応可能REST APIは、HTTPをベースにしているため、異なるプラットフォームやプログラミング言語から簡単にアクセスできます。これにより、さまざまなアプリケーションとの連携が可能です。

このように、REST APIはHTTPメソッドを利用するためシンプルで直感的に使いやすいです。ステートレスな設計によりサーバー負荷が軽減され、スケーラビリティが向上します。

また、リソースをキャッシュできるため、パフォーマンスも向上し、無駄なリクエストを減らせます。さらに、HTTPベースなので異なるプラットフォームやプログラミング言語からアクセス可能で、さまざまなアプリケーションとの連携が容易です。

上記からもわかるように、サイトやアプリ開発で非常に重宝されている技術だということはお分かりいただけたかと思います。

WP REST APIとは

WP REST APIとは、WordPressに標準搭載されたREST APIであり、WordPressサイトと外部アプリケーションやサイトとのデータのやり取りを簡単にするための仕組みです。

https://ja.wp-api.org/

このAPIを利用することで外部のサイトなどにWordPressサイトの記事データを表示できることはもちろん、データを取得したり、投稿やページを作成・更新したりすることができます。

WP REST APIを使うことによって、WordPressサイトのデータ(投稿、ページ、ユーザー、コメントなど)を外部アプリケーションから簡単に取得・操作できるようにします。

これにより、モバイルアプリやフロントエンドフレームワーク(例: React, Vue.js)やiOSスマホアプリ開発のSwiftなどとの統合が簡単になります。

つまり、このWP REST APIをマスターすることで、さまざまな開発にWordPressを組み込んだり活かすことができます。

また注目なのが、WP REST APIを活用することで、最近流行りのヘッドレスCMSとしてWordPressを活用することが実現できるので、WordPressがいかに多くの用途に使用できるかがわかるかと思います。

WP REST APIの基本構造

WP REST APIは、標準的なエンドポイントを提供しており、以下のようなリソースにアクセスできます。

リソースエンドポイント内容
投稿/wp-json/wp/v2/posts投稿の一覧を取得
固定ページ/wp-json/wp/v2/pages固定ページの一覧を取得
カテゴリー/wp-json/wp/v2/categoriesカテゴリーの一覧を取得
タグ/wp-json/wp/v2/tagsタグの一覧を取得
ユーザー/wp-json/wp/v2/usersユーザーの一覧を取得
メディア/wp-json/wp/v2/mediaメディア(画像など)の一覧を取得
コメント/wp-json/wp/v2/commentsコメントの一覧を取得
タクソノミー/wp-json/wp/v2/taxonomiesタクソノミーの一覧を取得
設定/wp-json/wp/v2/settingsサイトの設定情報を取得
カスタム投稿タイプ/wp-json/wp/v2/{custom_post_type}カスタム投稿タイプのデータを取得
メニュー/wp-json/wp/v2/menusナビゲーションメニューの一覧を取得

これらのエンドポイントを使うことで、さらに多様なデータを操作することができます。

WP REST APIの使用例

WP REST APIの使用例について解説していき、ここでしっかり実装の実務のイメージをつかんでおきましょう。

経験ベースで以下の内容が使用例になります。

  • ECCUBE4で実装したECサイトのトップページにWordPressの記事一覧を表示
  • スマホアプリ開発でWordPressの記事一覧を表示してメディアアプリを開発
  • ヘッドレスCMSとして活用し、React.jsやNext.jsなどでSPAでのサイト開発

また、ここで実際にさまざまなプログラミング言語での活用コード例をご紹介し、具体的なイメージをつけていただこうと思います。

JavaScriptの非同期での投稿データの取得コード

JavaScriptの非同期で投稿データの取得する方法としては、例えば以下のコードのように取得できます。

fetch('https://example.com/wp-json/wp/v2/posts')
  .then(response => response.json())
  .then(data => console.log(data));

ソースコードについて行ごとにそれぞれ解説させていただきます。

fetchの使用

最初の部分は、fetch関数を使って指定したURLからデータを取得しています。fetchは、指定されたエンドポイントにHTTPリクエストを送信し、レスポンスを返します。この場合、URLはWordPressの投稿一覧を取得するためのエンドポイントです。具体的には、https://example.com/wp-json/wp/v2/postsという形式で、実際のサイトのURLに合わせて変更する必要があります。

レスポンスの処理

fetchはPromiseを返すため、次に.then()メソッドを使ってレスポンスを処理します。ここでのresponseは、APIからのレスポンス全体を含むオブジェクトです。レスポンスからJSON形式のデータを取得するために、response.json()を呼び出します。これにより、レスポンスのボディ部分がJSON形式に変換され、次の.then()に渡されます。

データの表示

最後の部分では、取得したデータをコンソールに表示しています。dataには、WordPressから取得した投稿の情報が含まれており、通常は配列形式で投稿データが格納されています。console.log(data)を使用することで、ブラウザの開発者ツールのコンソールにデータが出力され、デバッグや確認が可能になります。

React.jsでの投稿一覧表示アプリのコード

React.jsでの投稿一覧表示アプリのコードを解説いたします。

以下のコードは、Reactを用いてWordPressから投稿データを取得し、表示するためのサンプルコードを示します。

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

const App = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch('https://example.com/wp-json/wp/v2/posts')
      .then(response => response.json())
      .then(data => setPosts(data));
  }, []);

  return (
    <div>
      <h1>投稿一覧</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title.rendered}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

Reactのインポート

最初の行でReactと必要なフック(useEffectuseState)をインポートしています。useStateは状態管理に、useEffectは副作用処理に使用します。

コンポーネントの定義

Appという関数コンポーネントを定義しています。このコンポーネントがアプリケーションのメイン部分となります。

状態の初期化

const [posts, setPosts] = useState([]);で、postsという状態を初期化しています。ここでは、空の配列で初期化しており、後にWordPressから取得した投稿データを格納します。

データの取得

useEffectフックを使って、コンポーネントがマウントされたときにデータを取得します。この中でfetchを使用し、指定したURLから投稿データを取得しています。取得したデータはJSON形式に変換し、setPostsを呼び出して状態を更新します。

ここでWordPressのエンドポイントを使用してJSON形式の記事データを取得しております。

投稿の表示

returnの部分では、取得した投稿を一覧表示しています。<ul>タグ内でposts.map(post => ...)を使い、各投稿のタイトルをリスト項目として表示しています。key={post.id}は、Reactがリストを効率的に管理するために必要なユニークなキーです。

SwiftUIでのWP REST API活用例コード

SwiftUIは、Appleが提供する新しいUIフレームワークで、簡潔なコードで美しいインターフェースを構築できます。ここでは、WordPressのREST APIを使用して投稿データを取得し、表示する基本的なiOSアプリの例を紹介します。

以下がWordPressの投稿一覧を表示するシンプルなSwiftUIのコードになります。

import SwiftUI

struct Post: Identifiable, Codable {
    let id: Int
    let title: RenderedTitle

    struct RenderedTitle: Codable {
        let rendered: String
    }
}

struct ContentView: View {
    @State private var posts: [Post] = []

    var body: some View {
        NavigationView {
            List(posts) { post in
                Text(post.title.rendered)
            }
            .navigationTitle("投稿一覧")
            .onAppear(perform: fetchPosts)
        }
    }

    func fetchPosts() {
        guard let url = URL(string: "https://example.com/wp-json/wp/v2/posts") else { return }
        
        URLSession.shared.dataTask(with: url) { data, response, error in
            if let data = data {
                if let decodedPosts = try? JSONDecoder().decode([Post].self, from: data) {
                    DispatchQueue.main.async {
                        self.posts = decodedPosts
                    }
                }
            }
        }.resume()
    }
}

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

Swift UIについてはスマホアプリ開発の領域になりますのであまり多くを解説しませんが、このようにエンドポイントからデータを取得する部分に関してはReact.jsなどと変わらないことが確認できたかと思います。

このようにWP REST APIでは、WordPressサイトのデータを外部アプリケーションと簡単に連携させるための強力なツールといっても過言ではありません。

これを利用することで、さまざまなアプリケーションやサービスとのインタラクションが可能になり、開発の幅が広がります。

WP REST APIの公式ドキュメントは以下になりますので、よろしければご確認ください。
https://ja.wp-api.org

WP REST APIの使い方

それでは早速、WP REST APIの使い方について解説したいと思います。

当記事ではもっともよく使用する「投稿データを取得して記事一覧を表示」のやり方について解説したいと思います。

この方法がわかれば、他の外部サイトやスマホアプリなどにWordPressに投稿した記事データを一覧で表示することができます。

ぜひここでマスターしておきましょう。

投稿データを取得して記事一覧を表示

以下のコードは、WordPressの投稿をREST APIを使用して取得し、ウェブページに表示するためのものです。

まずは確認として以下のコードを一旦functions.phpにコピー&ペーストしてください。

ペースト後、fetch()関数のURLのドメインをご自身のWordPressサイトのドメインに変更してください。

<?php
function display_posts_with_rest_api() {
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
  fetch('https://example.com/wp-json/wp/v2/posts?_embed')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(posts => {
      const postsContainer = document.createElement('div');
      postsContainer.id = 'posts-container';

      posts.forEach(post => {
        const postElement = document.createElement('div');
        postElement.className = 'post';

        const title = `<h2><a href="${post.link}">${post.title.rendered}</a></h2>`;
        const excerpt = `<div>${post.excerpt.rendered}</div>`;
        
        let thumbnail = 'https://example.com/image/no-image.jpg'; // No Image URL
        if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail) {
          thumbnail = post._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url;
        }
        const image = `<img src="${thumbnail}" alt="${post.title.rendered}" />`;

        postElement.innerHTML = `
          ${title}
          ${image}
          ${excerpt}
        `;
        postsContainer.appendChild(postElement);
      });

      document.body.appendChild(postsContainer);
    })
    .catch(error => {
      console.error('Error:', error);
    });
});
</script>
<?php
}
add_action('wp_footer', 'display_posts_with_rest_api');
?>

上記のコードは、WordPressのREST APIを使用して投稿データを取得し、記事一覧としてウェブページに表示するためのコードです。

PHPの独自の関数display_posts_with_rest_api関数内にJavaScriptコードを生成し、ページのフッターに追加することで、ページが読み込まれたときに実行されます。

JavaScript部分では、まずfetch関数を使って指定したREST APIエンドポイントから投稿データを取得します。レスポンスが正常であることを確認した後、JSON形式でデータを取得し、各投稿ごとにHTML要素を動的に作成します。

作成するHTML要素には、投稿のタイトル、リンク、抜粋、およびサムネイル画像が含まれます。サムネイル画像が存在しない場合は、デフォルトの「No Image」画像を使用します。

各投稿要素をまとめたコンテナを作成し、それをページのボディに追加することで、投稿リストが表示されます。エラーが発生した場合は、コンソールにエラーメッセージが表示されます。

このコードをWordPressのテーマファイル(例えば、footer.php)に追加することで、サイトに訪れるユーザーが投稿リストを閲覧できるようになります。特に、add_action('wp_footer', 'display_posts_with_rest_api')部分により、ページのフッターにJavaScriptコードが自動的に挿入され、ページロード時に投稿データが表示されるようになります。

この段階ではCSSで見た目を調整していないので崩れたような表示になってしまいますが、下図のように表示されるかと思います。

この方法は、WordPressとJavaScriptを組み合わせて動的なコンテンツ表示を実現する一例になります。

あとはご自身でCSSでお好きなようにレイアウトを整えていただければOKです。WP REST APIでの外部連携が可能であることが確認できました。

上記コードはWordPressのfunctions.phpにペーストしてwp_footerフックでフッターに出力するようにしているだけですので、以下のコード部分をECCUBE4やMovableTypeなど他のCMSやHTMLに組み込んでいただくと柔軟に使えますので、ぜひお試しください。

<script>
document.addEventListener('DOMContentLoaded', function() {
  fetch('https://example.com/wp-json/wp/v2/posts?_embed')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .then(posts => {
      const postsContainer = document.createElement('div');
      postsContainer.id = 'posts-container';

      posts.forEach(post => {
        const postElement = document.createElement('div');
        postElement.className = 'post';

        const title = `<h2><a href="${post.link}">${post.title.rendered}</a></h2>`;
        const excerpt = `<div>${post.excerpt.rendered}</div>`;
        
        let thumbnail = 'https://example.com/image/no-image.jpg'; // No Image URL
        if (post._embedded && post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail) {
          thumbnail = post._embedded['wp:featuredmedia'][0].media_details.sizes.thumbnail.source_url;
        }
        const image = `<img src="${thumbnail}" alt="${post.title.rendered}" />`;

        postElement.innerHTML = `
          ${title}
          ${image}
          ${excerpt}
        `;
        postsContainer.appendChild(postElement);
      });

      document.body.appendChild(postsContainer);
    })
    .catch(error => {
      console.error('Error:', error);
    });
});
</script>

これでWP REST APIで記事一覧を取得し表示することができるようになりました。

お疲れ様でした!

独自のWP REST APIのエンドポイントを実装する方法

WordPressはデフォルトで強力なREST APIの機能を提供しておりますが、開発者は独自のエンドポイントを追加してカスタムデータや機能を提供することができます。

ここでは独自のWP REST APIのエンドポイントを実装する方法について解説いたします。

以下は独自のWP REST APIエンドポイントを開発する流れになります。

  • カスタムエンドポイントを登録する
  • エンドポイントのコールバック関数を実装する
  • エンドポイントのテスト

それぞれ解説いたします。

カスタムエンドポイントを登録する

まずはカスタムエンドポイントを登録します。
以下のコードをfunctions.phpにコピー&ペーストしてください。

<?php
// testwprestapi エンドポイントを登録する関数
function register_testwprestapi_rest_route(){
    // register_rest_route関数でカスタムREST APIエンドポイントを登録
    register_rest_route(
        'custom/v2', // エンドポイントの名前空間とバージョン
        '/testwprestapi', // エンドポイントのパス
        array(
            'methods' => 'GET', // HTTPメソッドを指定
            'callback' => 'get_testwprestapi', // リクエストを処理するコールバック関数
        )
    );
}
// rest_api_initアクションフックにカスタムエンドポイントを登録する関数をフック
add_action( 'rest_api_init', 'register_testwprestapi_rest_route' ); 

上記のコードでは、register_rest_route関数を使用してカスタムエンドポイントを登録しています。

「custom/v2」は名前空間とバージョンを指定し、「/testwprestapis」はエンドポイントのパスを指定します。
「methods」はHTTPメソッド(ここではGET)を指定し、「callback」はリクエストを処理するコールバック関数(ここではget_testwprestapis)を指定します。

これで、独自のカスタムエンドポイントが登録されました。

エンドポイントのコールバック関数を実装する

次は、エンドポイントがリクエストを受け取った際に実行されるコールバック関数を実装します。

以下のコードをfunctions.phpにコピー&ペーストしてください。

<?php
// testwprestapiデータを取得するコールバック関数
function get_testwprestapi() {
    $testwprestapi = array(); // 空の配列を初期化
    $args = array(
        'post_type' => 'post', // 投稿タイプを指定(ここでは標準の投稿を使用)
        'nopaging' => true, // 全ての投稿を取得
    );
    $query = new WP_Query( $args ); // WP_Queryオブジェクトを作成してクエリを実行
    if ( $query->have_posts() ) { // 投稿が存在する場合
        while ( $query->have_posts() ) { // すべての投稿をループ
            $query->the_post(); // 投稿データを設定
            $testwprestapi_data = array(
                'title' => get_the_title(), // 投稿のタイトルを取得
                'content' => get_the_content(), // 投稿のコンテンツを取得
                // 必要に応じて他のフィールドを追加
            );
            $testwprestapi[] = $testwprestapi_data; // 配列に取得したデータを追加
        }
        wp_reset_postdata(); // グローバルな投稿データをリセット
    }
    // 取得したデータをREST APIのレスポンスとして返す
    return rest_ensure_response( $testwprestapi );
}

get_testwprestapis関数は、カスタムエンドポイントからデータを取得するためのコールバック関数です。独自に定義した関数の流れは以下の通りです。

まず、空の配列$testwprestapisを定義して初期化します。
次に、WP_Queryクラスを使用して、すべての投稿(post投稿タイプ)を取得するクエリを作成します。

クエリが投稿を持っている場合、ループ内で各投稿のタイトルとコンテンツを取得し、配列に追加します。
ループが完了した後、wp_reset_postdata関数でグローバルな投稿データをリセットします。

最後に、取得したデータをREST APIのレスポンスとして返すためにrest_ensure_response関数を使用します。これにより、取得した投稿データが正しくREST APIのクライアントに返されます。

これで、独自のWP REST APIのエンドポイントの実装は完了です。

エンドポイントのテスト

独自のWP REST APIのエンドポイントの実装は完了したら、最後に確認として投稿データを取得するための以下のURLにブラウザからアクセスしてエンドポイントが正常に動作しているか確認していきます。

https://【ご自身のドメイン】/wp-json/custom/v2/testwprestapi

すると、下図のようにJSON形式で投稿データが取得できていることが確認できたかと思います。

これで独自のエンドポイントでの投稿データ取得の確認までできました。お疲れ様でした!

ここまでの実装コードのまとめ

最後に、ここまでのすべてのコードをおまとめしたものを示させていただきます。

もしうまく動作しなかったら以下のコードをfunctions.phpに丸ごとコピー&ペーストしていただけますと、うまくいくかと思います。

<?php
// testwprestapi エンドポイントを登録する関数
function register_testwprestapi_rest_route(){
    // register_rest_route関数でカスタムREST APIエンドポイントを登録
    register_rest_route(
        'custom/v2', // エンドポイントの名前空間とバージョン
        '/testwprestapi', // エンドポイントのパス
        array(
            'methods' => 'GET', // HTTPメソッドを指定
            'callback' => 'get_testwprestapi', // リクエストを処理するコールバック関数
        )
    );
}
// rest_api_initアクションフックにカスタムエンドポイントを登録する関数をフック
add_action( 'rest_api_init', 'register_testwprestapi_rest_route' ); 

// testwprestapiデータを取得するコールバック関数
function get_testwprestapi() {
    $testwprestapi = array(); // 空の配列を初期化
    $args = array(
        'post_type' => 'post', // 投稿タイプを指定(ここでは標準の投稿を使用)
        'nopaging' => true, // 全ての投稿を取得
    );
    $query = new WP_Query( $args ); // WP_Queryオブジェクトを作成してクエリを実行
    if ( $query->have_posts() ) { // 投稿が存在する場合
        while ( $query->have_posts() ) { // すべての投稿をループ
            $query->the_post(); // 投稿データを設定
            $testwprestapi_data = array(
                'title' => get_the_title(), // 投稿のタイトルを取得
                'content' => get_the_content(), // 投稿のコンテンツを取得
                // 必要に応じて他のフィールドを追加
            );
            $testwprestapi[] = $testwprestapi_data; // 配列に取得したデータを追加
        }
        wp_reset_postdata(); // グローバルな投稿データをリセット
    }
    // 取得したデータをREST APIのレスポンスとして返す
    return rest_ensure_response( $testwprestapi );
}

// 以下のURLで投稿データを取得できます
// https://【ご自身のドメイン】/wp-json/custom/v2/testwprestapi

これで、独自のWordPress REST APIエンドポイントを作成し、必要なデータや機能を提供することができるようになります。

カスタムエンドポイントを使用することで、さまざまなアプリケーションやサービスとWordPressを連携させることが容易になります。
さらに、高度な機能やパラメータを追加することで、より柔軟でパワフルなAPIを構築することが可能です。

ターミナルのコマンドを使って投稿データを追加する

次は、WP REST APIを使ってコマンドから投稿データを追加する方法について解説したいと思います。

コマンドから投稿データやカテゴリー、タグなどを扱えるようになると、場合によっては作業効率が上がったりするため、知っておいて損はないかと思います。

まずは認証して準備する

WP REST APIを使用する際、特にデータの作成や更新、削除を行う場合には認証が必要です。一般的な認証方法には以下のものがあります。

主に以下の認証方法があります。

Application PasswordsWordPress 5.6以降、アプリケーションパスワードを使用することができます。ユーザーの設定から生成し、リクエスト時に使用します。
OAuthOAuthプラグインを使用して、より安全な認証を実現することも可能です。
JWT AuthenticationJWT(JSON Web Token)を使った認証も可能で、より複雑なアプリケーションに向いています。

当記事では、Application Passwordsの方法を使用して認証をおこなっていきたいと思います。

下図のように、WordPress管理画面左メニューの「ユーザー」→「ご自身の任意のユーザー」の順番で進んでいただき、ユーザー管理画面を開いてください。

「新しいアプリケーションパスワード名」という入力欄があるので、そこに「wpmpassword」などのように、任意のお好きなパスワード名を入力してください。

入力が完了したら、「新しいアプリケーションパスワードを追加」ボタンをクリックしてください。

クリックしていただくと、上図のようにパスワードが生成されますので、コピーをしておき控えておいてください。

このパスワードは一度しか確認できないので、必ずこの生成したタイミングでパスワードを控えておいてください。

パスワードを生成したら、次はパスワードを生成したユーザー名(例:sample_user)と今生成したパスワードを以下のコードの「${wpログインユーザー名}:${メモしたパスワード}」の部分に対応させて調整しましょう。

// 以下コマンドをターミナルにてペーストして実行してください。

curl --user "${wpログインユーザー名}:${メモしたパスワード}" \
  -X POST \
  'https://sample.com/wp-json/wp/v2/posts' \
  -H "Content-Type: application/json" \
  -d '{"title": "新しい投稿のタイトル", "content": "投稿の内容", "status": "publish"}' | jq .

対応させたら、ターミナルを開いていただき、コピー&ペーストして実行していただけますと、下図のように新規で記事が追加されているのが確認できるかと思います。

このようにWP REST APIを使えば、コマンドで簡単に記事を追加することができたりするので、ぜひご自身で色々と試して作業効率を高めてみてください。

WP REST APIの注意点

WP REST APIを使用する際の注意点はいくつかあります。

以下が主な注意点となります。

  • セキュリティ
  • 認証
  • パフォーマンス
  • データのキャッシュ
  • データのフォーマット
  • APIのバージョン管理
  • エラーハンドリング

それぞれ解説いたします。

セキュリティ

WP REST APIを使用する際は、セキュリティが最も重要です。APIエンドポイントは公開されているため、適切な認証と権限管理が必要です。特に、POST、PUT、DELETEリクエストには、認証を求めることで不正アクセスを防ぐことが重要です。

認証

APIの認証方法には、Cookie認証、OAuth、アプリケーションパスワード、Basic認証などがあります。各認証方法にはそれぞれ利点と欠点があり、利用するシナリオに応じて適切な方法を選択することが重要です。たとえば、アプリケーションパスワードは簡単にセットアップできますが、公開されることのないように注意が必要です。

パフォーマンス

大量のデータを一度に取得するとサーバーの負荷が高まるため、パフォーマンスの観点から適切なページネーション(ページ分割)を実装することが推奨されます。また、必要なデータだけを取得するためにクエリパラメータを活用し、サーバーへの負荷を最小限に抑えることが重要です。

データのキャッシュ

データのキャッシュを適切に設定することで、APIのパフォーマンスを向上させることができます。キャッシュを利用することで、同じデータを繰り返し取得する際のリクエスト数を減らし、サーバーの負荷を軽減します。

データのフォーマット

REST APIは通常JSON形式でデータを返しますが、返されるデータの形式や内容を事前に確認し、必要に応じてデータの加工を行うことが必要です。特に、複雑なデータ構造を持つ場合は、データの整形やフィルタリングを行うことで効率的なデータ処理が可能となります。

APIのバージョン管理

WP REST APIはバージョン管理がされており、エンドポイントURLにバージョン番号を含めることで、特定のバージョンのAPIを利用することができます。これにより、将来的なAPIの変更や更新による影響を最小限に抑えることができます。

エラーハンドリング

APIのリクエストが失敗した場合に適切なエラーハンドリングを行うことが重要です。HTTPステータスコードやエラーメッセージをチェックし、ユーザーに適切なフィードバックを提供することで、ユーザーエクスペリエンスを向上させることができます。

これらの注意点を踏まえてWP REST APIを活用することで、安全かつ効率的にデータのやり取りができるようになります。

まとめ

今回は、WP REST APIとは?実務での使い方や基礎知識について徹底的に解説いたしました。

WP REST API(WP REST API)は、WordPressを基盤としたアプリケーションと他のサービスとの連携を可能にする強力なツールといっても過言ではありません。

このWP REST APIを使いこなせるようになれば、ヘッドレスCMSとしてWordPressを活用し、React.jsやNext.jsなどのSPAでのウェブサイト・ウェブアプリケーション開発できたり、スマホアプリなど、WordPressを活用したさまざまなサイトやアプリケーションを開発できるようになりますので、ぜひ当記事をご活用いただけましたら幸いです。

執筆者

UMENOKI編集部 高澤 翔汰

歴5年目(2024年8月以降から5年目です)のエンジニアです!
CMSでのサイト構築とWebデザイン制作を兼任して5年目になります。
自作のiOSアプリ(iPhoneアプリ)やWordPressプラグインを開発することもあり、まだまだ現在進行形で勉強中です!

お気軽に皆さんのご要望をお聞かせください!

どんなに些細なことでも構いません!よろしければ記事や当サイトへの「こんな記事があったら仕事とかで役に立つな〜」や「こうだったらもっと役に立つのに!」といったようなご要望等をお気軽にお聞かせください!今後のサービス改善にお役立てさせていただきます!

例1)Reactの技術記事を書いてほしい!
例2)WordPressの使い方とかを初心者向けに解説してほしい!...など

送信と同時にプライバシーポリシーに同意したものとします。
サンタさん