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とは、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のコピペ用コード一式

    上記で出てきたコピペ用コードHTMLjQueryCSSの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 );

    さいごに

    今回の記事では、jQueryでWP REST APIを使いましたが、ネイティブなJavaScriptでも利用可能です。ネイティブな方なら、別途ライブラリやプラグインも不要なので、こちらもあわせてチェックしてみてください。

    参考サイト

    参考HTTP REST API で WordPress を自由自在!WP REST API
    カテゴリーのイラスト

    同じカテゴリの記事一覧

    ボタンの影