Edited at

[WP REST] vue.jsで投稿数、投稿の総ページ数を取得する

More than 1 year has passed since last update.

WordpressのREST APIを提供しているWP RESTで全投稿数や投稿の総ページ数を取得する方法です。

ページ送りなんかを作る際に必要ですね。

まず、そのままではWP RESTは投稿数を返してくれないので、

WordPressテーマのfunctions.phpに投稿数を返すように設定します。


functions.php


//add page count to headers
function my_customize_rest_cors() {
remove_filter( 'rest_pre_serve_request', 'rest_send_cors_headers' );
add_filter( 'rest_pre_serve_request', function( $value ) {

//投稿数、ページ数を返すように追加する
header( 'Access-Control-Expose-Headers: X-WP-Total, X-WP-TotalPages', false );

return $value;
});
}
add_action( 'rest_api_init', 'my_customize_rest_cors' );


これでresponseのheadersに投稿数を入れたものを返してくれます。

それをvus.jsではaxiosなどで以下のようにして取得できました。


axios.get('/wp-json/wp/v2/post/'), {
params: {
per_page: 10
}
}).then(function(response) {

//10件分の投稿内容
console.log(response.data)

//headers部分で投稿数が取得できる
console.log(response.headers['x-wp-total'])

//こちらはページ数。一度に取得する投稿数(per_page)の値により変わります。
console.log(response.headers['x-wp-totalpages'])

}).catch(function(error) {

console.log('[Error] : ' + error )

})