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

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 )
    
})