特定のクエリーループブロックでのみ抽出条件を変更する方法

公開日:2024(令和6)年3月12日/最終更新日:

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



WordPressのクエリーループブロック、簡単に投稿リストが作成できて便利ではあるものの、基本的には以下の項目しか抽出条件にできないのが少々難点ですね。

  • 投稿タイプの指定(選択できるのは1つだけ)
  • 並び順(公開日のみ)
  • 先頭固定表示の投稿を含めるかどうか
  • タクソノミー(標準のカテゴリー、または標準のタグ)による絞り込み、ただし、親子関係は無視される
  • 作者
  • キーワード(経験上ではうまく動作するのかが不明な感じ..)

例えば複数の投稿タイプをまとめて、とか、最終更新日で並び替えたい、とか、カスタムタクソノミーで絞り込むなどといったことはできません。

本ページでは、複数のカスタム投稿タイプを抽出対象とするという要件を例に、特定のクエリーループブロックだけに条件変更を加える方法をメモを兼ね紹介します。

なお、内容は有効化しているテーマのfunctions.phpへコードを追加して適用させるものですので、コード編集に自信のない方は以下のプラグインで同じようなことができますから、そちらを使うとよいかも知れません。

本ページで掲載しているコードは、以下に了承した上で使用ください

  • コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
  • コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
  • コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
  • コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
  • 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
  • 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)

特定のクエリーループにだけ抽出条件の変更を適用させる方法

偉そうに解説などと言っていますが、ヒントはWordPress Developer Resourcesの以下のページにありました。

参考:https://developer.wordpress.org/reference/hooks/query_loop_block_query_vars/

そこには以下のコードが例として掲載されています。

function wpdocs_randomize_query( $query, $block ) {

	$block = $block->parsed_block;

	if (
		isset( $block['attrs']['className'] )
		&& false !== strpos( $block['attrs']['className'], 'randomize-content' )
	) {
		$query['orderby'] = 'rand';
	}

	return $query;
}

add_filter( 'query_loop_block_query_vars', 'wpdocs_randomize_query', 10, 2 );

コードは追加CSSクラスに「randomeze-content」を追加すると、そのクエリーループでは、並び順がランダムになるというもの。でも、クエリーループに「randomeze-content」という追加CSSクラスを付加しても何も変化はなく、うーーんとなっていました。

試しにCSSクラスの条件を省くと、サイト内すべてのクエリーループが同じ条件での抽出となるので、ブロックを特定する条件に問題が?と考え、結構な時間を費やしました。

でも、このコードに誤りはありませんでした!ポイントは、追加CSSクラスを付加するブロックでした。

クエリーループ(ブロック)自体でクエリー(抽出)を行っているわけではないので、「クエリーループ」自体ではなく、その中にある「投稿テンプレート」ブロックに追加CSSクラスを指定することでした。

「Example of modifying the query based on the class name set on the Post Template block:(Post Templateブロックに設定されたクラス名に基づいてクエリを変更する例:)」と、Post Templateブロック(=投稿テンプレートブロック)書いてあるのにそれを見落としていただけでした。

改めて「投稿テンプレート」ブロックに「randomeze-content」と指定すれば、そのクエリーループだけ並び順がランダムになりました。

条件自体は、クラシックテーマなどを触ったことがある方ならご存じのWP_Queryクラスに準拠するので、例えば複数の投稿タイプを混ぜて..という条件なら以下のようにコードを追加し、「投稿テンプレート」ブロックの追加CSSクラスへ「multi-posttype」と指定すれば、一覧に「投稿」と「固定ページ」を混ぜて表示できます。

function pwcn_qloop_posttype( $query, $block ) {
	$block = $block->parsed_block;

	if (
		isset( $block['attrs']['className'] )
		&& false !== strpos( $block['attrs']['className'], 'multi-posttype' )
	) {
		$query['post_type'] = array('page','post');
	}

	return $query;
}

add_filter( 'query_loop_block_query_vars', 'pwcn_qloop_posttype', 10, 2 );

コード中の以下の行を追加して、他の要素を追加していけば、より詳細な絞り込みができますね。

$query['post_type'] = array('page','post');

また、以下のようにすることで1つのユーザー定義関数とフィルターフックで、「投稿テンプレート」ブロックの追加CSSクラスが「multi-posttype」だった場合と「array-post-type」だった場合を一括指定することもできます。

function pwcn_qloop_posttype( $query, $block ) {
	$block = $block->parsed_block;

    //「投稿テンプレート」ブロックの追加CSSクラスが「multi-posttype」だった場合
	if (
		isset( $block['attrs']['className'] )
		&& false !== strpos( $block['attrs']['className'], 'multi-posttype' )
	) {
		$query['post_type'] = array('page','post');
	}

    //「投稿テンプレート」ブロックの追加CSSクラスが「array-post-type」だった場合
	if (
		isset( $block['attrs']['className'] )
		&& false !== strpos( $block['attrs']['className'], 'array-post-type' )
	) {
		$query['post_type'] = array('post','カスタム投稿タイプスラグ');
	}

	return $query;
}

add_filter( 'query_loop_block_query_vars', 'pwcn_qloop_posttype', 10, 2 );

クエリーで指定できる項目については前述したWP_Queryクラスのページに詳しく書かれていますので、必要に応じて設定してみてくださいね。



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPress Customize Ideas | Personal WP Customization Notes (PWCN)
複数条件での分岐を行う際に起こりがちな不具合と対処方法(メモ)