WP REST APIで投稿数、ページ数を取得する

2019.04.02

WP REST APIをでページネーションを作る際に、投稿数、ページ数が必要ですが取ってきたJSONには含まれていません。

ではどこにあるかというと、HTTPヘッダに含まれています。

ターミナルでコマンドを叩くとHTTPヘッダを確認することができます。

curl -s -D - https://cms.codecodeweb.com/wp-json/wp/v2/posts?page=1&per_page=10

HTTP/1.1 200 OK
Date: Mon, 01 Apr 2019 14:44:56 GMT
Server: Apache/2.4.18 (Ubuntu)
X-Robots-Tag: noindex
Link: <https://cms.codecodeweb.com/wp-json/wp/v2/posts?page=1>; rel="next"
X-Content-Type-Options: nosniff
Access-Control-Expose-Headers: X-WP-Total, X-WP-TotalPages
Access-Control-Allow-Headers: Authorization, Content-Type
X-WP-Total: 32
X-WP-TotalPages: 4
Allow: GET
Connection: close
Transfer-Encoding: chunked
Content-Type: application/json; charset=UTF-8

~ 以下略 ~

この中にX-WP-TotalとX-WP-TotalPagesが含まれています。

X-WP-Total: 32
X-WP-TotalPages: 4

X-WP-Totalは、総記事数 X-WP-TotalPagesは、総ページ数です。

Fetch APIで投稿数、ページ数を取得する

Reactで作っていますが、基本的にはどのライブラリでやっても同じだと思います。

const rest_url = "https://cms.codecodeweb.com/wp-json/wp/v2/posts?page=1&per_page=10"

fetch(rest_url)
.then((response) => {
    //総ページ数をコンソールに出力
    console.log(response.headers.get('x-wp-totalpages'))
    return response.json()
})
.then((responseData) => {
    this.setState({
        data: responseData
    })
})

同じ要領で

response.headers.get('X-WP-Total')

とすることで、投稿数を取得できます。

今回はconsole.logしていますが、setStateでstateに入れておくこともできます。