WP REST APIで独自エンドポイントのカスタマイズで投稿記事を全件取得できるようにする
今回も引き続きWP REST APIに関する内容になっています。過去記事「WP REST APIでクエリパラメーターを操作してWordPressの投稿データをリストで取得する」では件数を指定した記事データの取得を行いましたが、デフォルトでは最大100件までとなっており記事数が多い場合は計算した上で複数回のリクエストが必要になってしまいます。そこで独自のエンドポイントを作成し、一発で全件取得できるようにしてみたいと思います。
まず、全件記事を取得する仕組みですが、デフォルトのエンドポイントからのパラメーターではそのような機能は用意されていない為、独自でエンドポイントを作成する必要があります。そしてエンドポイントを作成したら、get_posts()で全ての記事データをデータベースから持ってきます。そのデータを配列に整理して返してあげるようにして、コールバックで呼び出すことができれば、レスポンスボディとしてクライアント側に持ってくることができます。これらの処理をWordPressのアクションフックで実行させる形となります。
今回はサンプルとして投稿タイプ「blog」の公開済み記事を全件取得する例で見ていきます。まずは独自のエンドポイントを作成していきます。「register_rest_route()」関数でエンドポイントを定義できます。第一、第二引数がそのままエンドポイントのURLパスを構成し、第三引数でオプションを指定します。ここでは「GETメソッド」と「全件記事の配列を返すコールバック関数」を指定しています。
そしてコールバック関数の中身を見ていきます。ここではWordPressのテーマ制作ではおなじみのWP_queryで使う引数のプロパティで検索条件を指定します。重要なのは「posts_per_page」を「-1」に設定することで全件記事を対象にするということです。あとは投稿タイプなどを指定しておきます。
【functions.php】
当メディアサイトでも、投稿タイプによっては300件を超えるものもあるのですが、実際にロード時間を計測しても0.数秒とったところでした。ただ数千件となるとパフォーマンス的に検討する必要が出てくるかもしれませんね。
ちなみにですが、全投稿件数と総ページ数に関しては、デフォルトのエンドポイントにリクエストを送った際に、帰ってくるレスポンスヘッダーに「x-wp-total」と「x-wp-totalpages」の項目があるので、全投稿件数はx-wp-totalの値を、総ページ数はx-wp-totalpagesの値を取得することで確認できます。
これでフロントエンド側で自由にWordPressの記事を扱えるようになりますね。フロントエンド側でフレームワークなども使って完全にヘッドレスCMSとしての運用ができるのではないでしょうか。WordPressで運用中の方はぜひ試してみてくださいね。 (参考にさせて頂いたサイト) WordPress『WP REST API』#2でオリジナルのエンドポイントを作成する
function add_rest_endpoint_all_posts_from_blog() { register_rest_route( 'wp/api', '/blog', array( 'methods' => 'GET', 'callback' => 'get_all_posts_from_blog' ) ); } function get_all_posts_from_blog() { $args = array( 'posts_per_page' => -1, 'post_type' => 'blog', 'post_status' => 'publish' ); $all_posts = get_posts($args); $result = array(); foreach($all_posts as $post) { $data = array( 'ID' => $post->ID, 'thumbnail' => get_the_post_thumbnail_url($post->ID, 'full'), 'slug' => $post->post_name, 'date' => $post->post_date, 'modified' => $post->post_modified, 'title' => $post->post_title, 'excerpt' => $post->post_excerpt, 'content' => $post->post_content ); array_push($result, $data); }; return $result; } add_action('rest_api_init', 'add_rest_endpoint_all_posts_from_blog');コールバック関数内では、先ほど指定した引数を条件に「get_posts()」で記事データを取得します。そのまま取得した記事データを使うこともできますが、データ内に不要なものがあったり、サムネイル画像の情報が含まれていなかったりとカスタマイズしないと使いにくいものとなっています。そこで一旦foreachで配列を分解して、必要なデータのみ取り出して、新たにサムネイル画像の情報を追加します。それらを新たな配列として格納し直していきます。最終的にはこの新しい記事データの配列を返すようにします。 最後に「add_action」で「rest_api_init」のアクションフックで独自のエンドポイントに関する処理を実行する形に設定すればOKです。下記のように設定したエンドポイントにリクエストしてみます。
https://example.com/wp-json/wp/api/blogそうすると100件以上となる全ての投稿記事データが取得できます。もちろん必要なデータが整理され、サムネイル画像の情報も参照できるようになっています。


これでフロントエンド側で自由にWordPressの記事を扱えるようになりますね。フロントエンド側でフレームワークなども使って完全にヘッドレスCMSとしての運用ができるのではないでしょうか。WordPressで運用中の方はぜひ試してみてくださいね。 (参考にさせて頂いたサイト) WordPress『WP REST API』#2でオリジナルのエンドポイントを作成する
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories