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

9分

SHARE

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

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

    さいごに

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

    参考サイト

    参考HTTP REST API で WordPress を自由自在！WP REST API

    前の記事

    プラグイン無しで検索結果にハイライト表示をさせるスニペット

    次の記事

    jQueryライブラリslickの要素の高さを揃えて表示させる…

    関連記事

    カテゴリーのイラスト

    同じカテゴリの記事一覧

    ボタンの影

    まとめ記事

    Article

    About

    Summary

    OTHER

    DUB DESiGNはデザインをテーマにしたメディアです。Webデザインに関するHow-toや、WordPressのスニペットなど、デザインの話を中心に、仕事を楽しむすべての方を対象に記事を配信しています。

    ＞＞ 詳しくはこちら