Help us understand the problem. What is going on with this article?

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

})


dskymd
JavaScript, Vue.js, Nuxt.js書いてます。
https://dskymd.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away