WordPressのREST APIを使って、記事のもっと見るを実装

この記事でできること

WordPressのREST APIを使って、記事の一覧を取得できる
通常のページャーではなく、もっと見るをクリックすると次の記事一覧が読み込まれる

手順

カスタム投稿タイプの追加

今回は、カスタム投稿タイプを使用するサンプルです。
register_post_typeでカスタム投稿タイプを設定するときに、show_in_restの値をtrueで作成してください。
私は今回newsという名前でカスタム投稿タイプを作成しました。

記事一覧取得します

なにはともあれ記事一覧を取得してみよう。

$.ajax({
    url: baseUrl + 'wp-json/wp/v2/news',
    type: 'GET',
    data: {
        'page': nowPage,
        'per_page': perPage,
    }
})
.done(function(data, status, xhr) {
    console.log(data)
})

Consoleを確認して、記事一覧が取得できていればOK

html側に表示してみる

本来であれば、Vue.jsとか使った方がスマートに書けますが、このページでしか出番なさそうだったので、jQueryで押し通します。
わざわざ読み込むのもね。。書き方も古くてごめんね。

<div id="arrow-img-url" data-arrow-img-url="<?= get_theme_file_uri() ?>/images/news_arrow.png"></div>
<ul id="news-list" class="news-list">
    <!-- この中に記事の内容が描画されます -->
</ul>

<button class="view-more normal-button">もっと見る</button>

jQuery(function ($) {
    var baseUrl = $('#base-url').data('baseUrl')
    var arrowImgUrl = $('#arrow-img-url').data('arrowImgUrl')

    //全部で何件あるか
    var totalCount = 0

    //何件ずつ表示するか
    var perPage = 5

    //現在のページ
    var nowPage = 1

    //投稿を取得する
    getPost()

    //もっと見るボタンをクリックしたとき
    $('.view-more').on('click', function() {
        nowPage++
        getPost()
    })

    function getPost() {
        $.ajax({
            url: baseUrl + 'wp-json/wp/v2/news',
            type: 'GET',
            data: {
                'page': nowPage,
                'per_page': perPage,
            }
        })
        .done(function(data, status, xhr) {
            //トータルの記事数を取得する
            totalCount = xhr.getResponseHeader('X-WP-Total')
 
            for(var i = 0; i < data.length; i++) {
                var target = data[i]
    
                //日付をformatする
                var date = new Date(target.date)
                var year = date.getFullYear()
                var month = date.getMonth() + 1
    
                if(String(month).length === 1) {
                    month = '0' + String(month)
                }
    
                var day = date.getDate()
                if(String(day).length === 1) {
                    day = '0' + String(day)
                }
    
                var dateString = year + '.' + month + '.' + day
    
                var html = '<li>'
                html += '<a href="' + target.link + '">'
                html += '<p class="date">' + dateString + '</p>'
                html += '<h2>' + target.title.rendered + '</h2>'
                html += '<img class="news-arrow" src="' + arrowImgUrl + '">'
                html += '</a></li>'
    
                $('#news-list').append(html)
            }

            //すべて表示している場合は「もっと見るボタン」は表示しない
            if(totalCount < perPage * nowPage) {
                $('.view-more').hide()
            }
        })
        .fail(function(data) {
            console.log(data)
        })
    }
})

解説

記事一覧を取得する処理をgetPostという関数にまとめました。
ページの初回読み込みと、「もっと見る」ボタンをクリックしたときに読み込むようにしてあります。

「もっと見る」ボタンは、合計の記事数を超えたら表示しないようにしてあります。

今回のミソ（記事の合計数）

今まで、WordPressのREST APIで記事の合計数の取り方が分からなかったんですよ。
ここに書いてありました。
レスポンスのヘッダーにX-WP-Totalがあるので、それが使えます！！！

思うこと

jsの日付formatはphpの感じでもっと楽にできんかな。。でも一箇所しかないし、わざわざライブラリ入れるのもね。。

WP REST APIのドキュメント読みにくくない？
誰か日本語で分かりやすくまとめてくれてないかな...実用例も含めて。。

ちなみに、WordPressのREST APIは、自分でAPIを作っちゃったり、カスタムフィールドの値も取れたりします。
けど、毎回やり方忘れて、いろんなサイトを調べまくってます。

独自APIはこの記事にお世話になってます！！
WP REST API　を使って独自エンドポイントを設定する。