Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
9
Help us understand the problem. What is going on with this article?
@webiscuit

WordPressのREST APIで全記事を取得したい

More than 1 year has passed since last update.

ポートフォリオを引き続きアップデートしており
今はWordPressのREST APIを使用してブログ機能を追加しています。

TL;DR

WordPressのREST APIだと最大でも100件までしか記事が取得できなかったから
functions.phpに全記事を書き出すJSONを追加してみた。

WordPressのREST APIの取得について

まずドキュメントへのリンクを。

WordPressの公開URL末尾に「/wp-json/wp/v2/」することで取得可能で
ここにパラメーターなどを渡して、カテゴリー一覧などを取得します。

公式サイトのURLだとこんなイメージ

https://wordpress.org/wp-json/wp/v2/

デフォルトで最大件数で取得する場合のパラメーターでよくあるのはこれみたいです(検索調べ)

/wp-json/wp/v2/posts?per_page=100&page=1

デフォルトで10件、パラメーターを渡して最大で100件までの取得です。
Ajax表示や各ページングで随時呼び出す想定なのでしょうね。

なぜ全記事を読み込もうと思ったのか

今回はNuxt.jsを使用していて、generateで静的での書き出し&Netlifyでホスティングを想定しています。
Nuxtで動的なページを生成する際は
nuxt.config.jsに以下のようなものを記述して、生成するページを設定する必要があります。
REST APIのデフォルトに従うと、最大で100件までしか生成できません。。

ドキュメントより抜粋

nuxt.config.js
export default {
  generate: {
    routes: [
      '/users/1',
      '/users/2',
      '/users/3'
    ]
  }
}

WordPressのfunctions.phpに書いたもの

こちらの投稿を大いに参考にさせていただきました
(※元記事は複数の投稿タイプを一緒に書き出したいというもの)

これにより、以下のようなパスで全記事読み込みが可能になりました:raised_hands:

/wp-json/custom/v1/allposts

吐き出しを行う項目も関数内で細かく設定出来るので、環境に合わせてこれから少し調整しようと思います。

functions.php
function custom_api_get_all_posts() {
    register_rest_route( 'custom/v1', '/allposts', array(
        'methods' => 'GET',
        'callback' => 'custom_api_get_all_posts_callback'
    ));
}
add_action( 'rest_api_init', 'custom_api_get_all_posts' );   

function custom_api_get_all_posts_callback( $request ) {
    $posts_data = array();
    $posts = get_posts( array(
            'posts_per_page' => -1
        )
    ); 
    foreach( $posts as $post ) {
        $id = $post->ID;
        $posts_data[] = (object) array( 
            'id' => $id, 
            'slug' => $post->post_name,
            'title' => $post->post_title,
            'content' => $post->post_content,
        );
    }                  
    return $posts_data;                   
} 

雑記

記事一覧、ページ一覧、カテゴリー一覧などなど、作成するページが多いですが
ある程度コンポーネント化出来ていれば、ファイルごとコピーで流用可能なので、今後が楽しみです◎

かなり数多くのサイトがWordPressで構築されていること、ユーザー側が管理画面に慣れていることから
案件ベースでの静的CMS(Headless CMS)は
しばらくはWordPress REST APIの可能性が一番高いのでは…と個人的には思っています。

クライアントさえ同意してくれれば、すぐに導入していけるチャンスが多そうです。
どういった形でクライアントに提案していくかが、当面の課題です:sweat_smile:

9
Help us understand the problem. What is going on with this article?
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
webiscuit
Freelance Front End Developer / フリーランスフロントエンドエンジニア。2002年からコーディングしています。最近はNuxtが好きです。TOEIC920/FCE保持

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
9
Help us understand the problem. What is going on with this article?