WP REST APIのJavaScriptで他のWordPressの記事をJSONで出力

APIは、本当に便利です。

コードを色々書いたりする必要がなく、既存プログラムをそのまま利用できるので、空いた時間で他のことに時間を使えるので、重宝します。

そんなAPIですが、WordPressにもWP REST APIというAPIが標準で搭載されています。

この記事では、そんなWP REST APIについて、

WP REST APIとは？
WP REST APIの実装の方法と手順
カスタマイズのコード

の内容を解説しています。

簡単にサクッとWordPressのカスタマイズを行いたい方や、シングルページアプリケーションの運用に興味ある方は是非最後までご覧ください。

WP REST APIとは？
WP REST APIで出力したサンプル
WP REST API導入の方法と手順
WP REST APIのコピペ用コード一式
WP REST APIのカスタマイズ
- 追加できるパスやパラメータ
- WP REST APIで自分のサイトやブログの記事情報取得を無効にする
さいごに

WP REST APIとは？

WP REST APIとは、WordPressのデータベースの情報をJSON形式で取得できるAPIで、WordPress4.7から標準搭載されています。

WP REST APIを使うことで、記事の「公開日」「公開状態」「投稿者」「カテゴリ・タグ」「取得する件数」「ソート順」など、詳細の情報を取得することができます。

これを使えば、単一のページでコンテンツを切り替える「SPA（シングルページアプリケーション）」のように運用もできてしまいます。

かかかず

極端な話、WordPressの関数を使わなくても記事の取得・出力ができてしまいます。しかも簡単です。

WP REST APIで出力したサンプル

早速、WP REST APIで出力したサンプルです。

以下のサンプルは、https://dubdesign.net/domain/で当サイトとは別にインストールしてあるWordPressの記事から取得して表示しています。

WP REST API導入の方法と手順

WP REST API導入の方法と手順は、以下の5つのSTEPで完了します。

ブログの情報を受信できるかテスト

対象にしたいブログの情報を受信できるかテストします。

jQuery本体の導入

jQuery本体をHTMLファイルに書き込みましょう。

表示させたい場所にHTMLを設置

受信したデータを表示させたい場所にHTMLを設置します。

WP REST APIの記述

JavaScriptでWP REST APIの記述を行います。

CSSで出力内容の見た目を整える

出力された一覧のHTMLを、CSSで整えます。

かかかず

このような手順で出力できます。詳細について解説していきます。

テスト

まずは、対象のブログのデータを受信できるかどうかを確認してみましょう。

方法は簡単で、ブラウザのアドレスバーに下記を入力して、対象となるデータがJSON形式として返ってくるかを確認します。

アドレスバーに入力

WordPressのURL/wp-json/wp/v2/

ブラウザのアドレスバーに上記を入力すると、以下のような表示になります。

かかかず

このようにたくさんの文字列がブラウザに表示されたら成功です。

ブログの情報が取得できることができたらOKです。

次のSTEPに進み、ブログの情報をJavaScriptで解析し、記事の一覧をHTMLで出力する仕組みを作っていきます。

jQuery本体の導入

WP REST APIの利用には、jQuery本体の組み込みが必要です。

jQueryは既に<head>〜</head> の中で読み込まれていれば問題ありませんが、ない場合は以下の記事を参考にして、jQuery本体をHTMLファイルに書き込みましょう。

関連記事 jQueryのインストール方法

表示させたい場所にHTMLを設置

次に、WP REST APIを使って記事を表示させるページのHTMLファイルへ、id付きの<div>を追加しましょう。

HTML

<ul class="wp-apicard"></ul>

このHTMLを記述した場所に、WP REST APIで取得したデータが出力されます。

WP REST APIの記述

次にJSONで取得したデータをJavaScriptで展開する為、以下のコードをコピペします。コピペする時には、以下2点を好みに応じて変更して活用します。

https://xxxxxxxxxxxxxxxx.com/ には、取得したいURLに記述を変える。
取得する内容を変更するにはパスやパラメータを追記。

ちなみにデフォルトでは投稿データが返ってくるのは最新の記事10件です。

jQuery

    $.getJSON("https://XXXXXXXXXXXXXXXX.com/wp-json/wp/v2/posts?_embed", function (results) {
      $.each(results, function (i, item) {
        var date_data = new Date(item.date);
        var year = date_data.getFullYear();
        var month = date_data.getMonth() + 1;
        var day = date_data.getDate();
        var title = item.title.rendered;
        var link = item.link;
        var date = year + '年' + month + '月' + day + '日';
        var thum = item._embedded["wp:featuredmedia"][0].media_details.sizes.large.source_url
        $('.wp-apicard').append("<li><a href='" + link + "'><img src='" + thum + "'><p>" + date + "</p><p>" + title + "</p></a></li>");
      });
    });

WordPressに投稿したブログの記事が該当のページに埋め込まれて表示されます。

かかかず

これを使えば、簡単に単一のページでコンテンツを切り替える「SPA」のように運用もできちゃいます。

CSSで出力内容の見た目を整える

最後に見た目を整えて完成で、CSSを追記すればOKです。

以下は、当サイトでも利用しているWordPressテーマSANGOに合いそうなデザインのCSSです。CSSはサイトやブログに合わせてカスタマイズして整えましょう。

CSS

ul.wp-apicard {
    list-style: none;
    border: none;
    margin: 40px 0 20px;
    padding: 0;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
ul.wp-apicard li {
    width: 46%;
    margin-bottom: 30px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 12%), 0 2px 3px 0 rgb(0 0 0 / 22%);
    cursor: pointer;
    transition: 0.2s ease-in-out;
    padding: 0;
}
ul.wp-apicard li:hover {
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
    transform: translateY(-4px);
}
ul.wp-apicard li a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
}
ul.wp-apicard li a time.pubdate.entry-time.dfont {
    display: block;
    margin: 13px 13px 8px;
    color: #b5b5b5;
    font-size: 13px;
    font-weight: bold;
}
ul.wp-apicard li a p {
    padding: 0px 13px 0;
    font-size: 18px;
    line-height: 1.56;
    color: #555;
    font-weight: 600;
    margin-bottom: 1.2rem;
}

@media screen and (max-width: 767px) {
ul.wp-apicard li {
    width: 100%;
}
}

かかかず

これで完成です。

WP REST APIのコピペ用コード一式

上記で出てきたコピペ用コードHTML・jQuery・CSSの3つです。

コードを表示する

HTML

<ul class="wp-apicard"></ul>

jQuery

    $.getJSON("https://XXXXXXXXXXXXXXXX.com/wp-json/wp/v2/posts?_embed", function (results) {
      $.each(results, function (i, item) {
        var date_data = new Date(item.date);
        var year = date_data.getFullYear();
        var month = date_data.getMonth() + 1;
        var day = date_data.getDate();
        var title = item.title.rendered;
        var link = item.link;
        var date = year + '年' + month + '月' + day + '日';
        var thum = item._embedded["wp:featuredmedia"][0].media_details.sizes.large.source_url
        $('.wp-apicard').append("<li><a href='" + link + "'><img src='" + thum + "'><p>" + date + "</p><p>" + title + "</p></a></li>");
      });
    });

CSS

ul.wp-apicard {
    list-style: none;
    border: none;
    margin: 40px 0 20px;
    padding: 0;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
ul.wp-apicard li {
    width: 46%;
    margin-bottom: 30px;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 0 3px 0 rgb(0 0 0 / 12%), 0 2px 3px 0 rgb(0 0 0 / 22%);
    cursor: pointer;
    transition: 0.2s ease-in-out;
    padding: 0;
}
ul.wp-apicard li:hover {
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
    transform: translateY(-4px);
}
ul.wp-apicard li a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
}
ul.wp-apicard li a time.pubdate.entry-time.dfont {
    display: block;
    margin: 13px 13px 8px;
    color: #b5b5b5;
    font-size: 13px;
    font-weight: bold;
}
ul.wp-apicard li a p {
    padding: 0px 13px 0;
    font-size: 18px;
    line-height: 1.56;
    color: #555;
    font-weight: 600;
    margin-bottom: 1.2rem;
}

@media screen and (max-width: 767px) {
ul.wp-apicard li {
    width: 100%;
}
}

WP REST APIのカスタマイズ

WP REST APIでできるカスタマイズについて、一部紹介します。

特に「追加できるパスやパラメータ」は、取得する変更できるので自分の好みに応じて記述しましょう。

追加できるパスやパラメータ

$.getJSON("URL" にパスやパラメータを追加することで、様々な条件でデータを取得することができます。

例えばこんな感じです。

URLの記述場所

https://XXXXXXXXXXXXXXXX.com/wp-json/wp/v2/posts?_embed&per_page=6

上記は「画像を出力」「6件」の取得するパラメータで、追加するところに「&」を付ければOKです。

追加できるパスやパラメータと、効果は以下の通りです。

効果	パスやパラメータ
通常の投稿記事	https://sapmle.com/wp-json/wp/v2/posts
〃　　で画像も出力	https://sapmle.com/wp-json/wp/v2/posts?_embed
〃　　で6件出力	https://sapmle.com/wp-json/wp/v2/posts?per_page=6
〃　　で画像付きで20件	https://sapmle.com/wp-json/wp/v2/posts?_embed&per_page=20
固定ページ	https://sapmle.com/wp-json/wp/v2/pages
カスタム投稿記事	https://sapmle.com/wp-json/wp/v2/POST_TYPE
タクソノミーの一覧	https://sapmle.com/wp-json/wp/v2/taxonomies
特定のタクソノミーのタームの一覧	https://sapmle.com/wp-json/wp/v2/TAXONOMY_NAME
メディアの一覧	https://sapmle.com/wp-json/wp/v2/media
コメントの一覧	https://sapmle.com/wp-json/wp/v2/comments
IDで指定した投稿記事	https://sapmle.com/wp-json/wp/v2/POST_TYPE/POST_ID
検索ワード指定	https://sapmle.com/wp-json/wp/v2/POST_TYPE?search=KEYWORD
昇順・降順の指定	https://sapmle.com/wp-json/wp/v2/POST_TYPE?order=asc or desc
並び順の指定	https://sapmle.com/wp-json/wp/v2/POST_TYPE?orderby=date or author or title
投稿IDの指定	https://sapmle.com/wp-json/wp/v2/POST_TYPE?include=POST_ID,POST_ID
投稿IDの除外	https://sapmle.com/wp-json/wp/v2/POST_TYPE?exclude=POST_ID,POST_ID

参考：REST API Developer Endpoint Reference より

上記は一部で、パラメータは掛け合わせて使うこともできます。これによって色々な形でデータを取得することができ、使い方によってはかなり幅が広がります。

かかかず

表示件数の標準は10件で、最大100件まで出力できるみたいです。それ以上取得したい場合は、100件ごとに取得して他のオプションと合わせて、レスポンスがなくなるまで何度も取得する方法になるみたいです。

WP REST APIで自分のサイトやブログの記事情報取得を無効にする

WP REST APIを使えば、他のWordPressの投稿を取得することができますが、言い換えると自分のサイトの情報も取得されます。

これはWordPress標準の機能で有効になっているので、もしもこの機能を無効にしたい場合、以下のコードをfunctions.php にコピペしましょう。

これで、自分のサイトやブログの記事情報取得を無効にできます。

コードを表示する

functions.php

/* WP RESTAPIの投稿無効　*/
function kaiza_filter_rest_endpoints( $endpoints ) {
    if ( isset( $endpoints['/wp/v2/posts'] ) ) {
        unset( $endpoints['/wp/v2/posts'] );
    }
    if ( isset( $endpoints['/wp/v2/posts/(?P<id>[d]+)'] ) ) {
        unset( $endpoints['/wp/v2/posts/(?P<id>[d]+)'] );
    }
    return $endpoints;
}
add_filter( 'rest_endpoints', 'kaiza_filter_rest_endpoints', 10, 1 );