WordPressの標準ブロックであるクエリーループを使って、特定のクエリーループでは以下のような条件で情報を抽出して表示する方法を紹介します。
- その投稿で指定されているカテゴリー（複数含む）と同一のカテゴリーに紐づく投稿を抽出する
- 抽出した投稿をランダムに並び替えて表示する
- 件数やスタイル等はクエリーループブロックの仕様や設定に従う
これはプラグインやテーマの機能で俗にいう「関連記事」「関連投稿」と呼ばれるもので、そうした専用機能を使わなくてもWordPress標準のクエリーループだけを使って作れるのが魅力でしょう。
本ページのカスタマイズは、テーマのfunctions.phpへのコード追記、クエリーループブロックの設定にある程度慣れている方が対象となります
クエリーループを使った関連投稿の表示サンプル
百聞は一見に如かずということで、以下がこのページの方法でこのページのカテゴリーに紐づく関連投稿実際に表示させたものです。
WordPress標準のクエリーループでこれができたら、専用プラグインやその機能を持つことをウリにしているテーマは必要ないでしょうし、標準の仕組みですから特にブロックテーマとの親和性は高いです。
上下で関連投稿として表示されているものが違うのは、ランダム抽出しているからです（これについては後述します）。
アイキャッチ画像付きで関連投稿を表示させた例
アイキャッチ画像付きで投稿コンテンツを抽出後、いろいろとブロックエディター上で調整はしていますが、調整部分は本ページでは詳しく解説していません
単純なリスト形式で関連投稿を表示させた例
アイキャッチ画像付きで投稿コンテンツを抽出後、いろいろとブロックエディター上で調整はしていますが、調整部分は本ページでは詳しく解説していません
これをサイトエディターの投稿テンプレートの本文下などに入れれば自動で関連投稿を表示できますし、同期パターンに入れて本文の任意の場所に表示させるなんてこともできますね。
クエリーループを使って関連投稿を作るコード
恐らく「え？できるの？早くやり方教えて！」と言われそうなので、早速。
以下が抽出用のコードです。有効化しているテーマのfunctions.phpへ貼り付けてください。
function pwcn_qloop_related_posts( $query, $block ) {
$block = $block->parsed_block;
// 現在の投稿に関連付けられたカテゴリーを取得
$categories = get_the_category();
$category_ids = array();
if ($categories) {
foreach ($categories as $category) {
$category_ids[] = $category->cat_ID;
}
}
if (
isset( $block['attrs']['className'] )
&& false !== strpos( $block['attrs']['className'], 'related-posts' )
) {
$query['post_type'] = array('post');
$query['cat'] = $category_ids;
$query['orderby'] = 'rand';
}
return $query;
}
add_filter( 'query_loop_block_query_vars', 'pwcn_qloop_related_posts', 10, 2 );関連投稿にしたいクエリーループをどこか（サイトエディターの投稿テンプレートやテスト的に作成した投稿などでも可）に挿入します。
クエリーループは、以下のような階層構造になっているので、「投稿コンテンツ」の「高度な設定」→「追加CSSクラス」へ「related-posts」というクラスを追加します。
- クエリーループ
- 投稿コンテンツ
- タイトル
- カテゴリー
- アイキャッチ画像
- 日付
- その他．．．
- ページ送り
- 結果なし
- 投稿コンテンツ
テンプレートの保存する、またはテスト的に作成した投稿であれば適当なカテゴリーを割り当てた状態で下書き保存し、表示またはプレビューしてみてください。
カテゴリーに紐づいた投稿がクエリーループで指定した件数分ランダムに表示されるはずです。
あとはスタイルなどを調整してください（上のサンプルも特別なスタイルコードは書いておらず、すべてブロックのオプションで指定しています）。
コードの内容としては、このページの主旨の通り、その投稿に紐づくカテゴリーを抽出し、特定のCSSクラスを持つ投稿コンテンツにそのカテゴリーに紐づく投稿をランダムに抽出して！と指示しています（詳細は割愛します）。
個人的にクエリーループって指定できる条件少ないなぁなんて思っていましたが、こういう使い方を覚えれば利便性を深く感じますし、また一つサイト作りの幅が広がりますね。
ちなみに以下のページでクエリーループの条件変更について詳しく書いていますので参考にどうぞ。
