クエリ－ループブロックのフィルターフックを使ってみた

Query Loop Block（クエリーループブロック）は、投稿の表示を柔軟にカスタマイズできる便利なブロックですが、標準機能だけでは限界があります。

そんなときに役立つのが query_loop_block_query_vars フィルターフックです。

このフックを利用して Query Loop Block の機能を拡張する方法を紹介します。

クエリ（Query）についても学べるという嬉しい「おまけ」も付いてきます！

相談内容

相談内容は「投稿をイベントの開催日順に並べたい」というものでした。

解決方法

この要望に応えるための解決方法を考えていきましょう。

投稿を並び変えるための「キー」を追加する

エクセルで作成したテーブルのデータを並び変える際には、「キー」を選択します。同様に、WordPressの投稿を並び変える際も、基準となるキーが必要です。今回の場合、そのキーは「イベント開催日」です。

各投稿にイベント開催日を追加し、これを基に投稿を並び替えます。

WordPressでは、このようなカスタム情報を追加するための「カスタムフィールド」機能が提供されています。この機能を使うと、投稿ごとに独自の情報を追加できます。また、これらのカスタムフィールドを管理するためのプラグインもあります。その中でも有名なのが Advanced Custom Fields です。

カスタムフィールドを使用する際に、注意して欲しいことがあります。それは、イベント開催日が正しく入力されているかどうかを確認することです。日付の形式が統一されていないと、望んでいた結果を得られない可能性があります。

日付の形式はさまざまで、「2024年3月18日」「2024-03-18」「18/3/2024」「2024.03.18」などがあります。Advanced Custom Fields は、フィールドタイプに「日付選択ツール」という選択肢があり、「表示形式」と「戻り値の形式」を設定できるようになっています。

フィルターを適用するブロックを識別する

サイト内で複数の Query Loop Block を使用している場合、フィルターを適用するブロックを識別する必要があります。

識別する方法の一つに「投稿テンプレート」ブロックに CSS を追加するというものがあります。

追加されたクラス名は、フィルターフックのパラメーターとして $block に渡されます。 $block が保持しているデータを確認したいときは、var_dump() という PHP 関数が使えます。

Query Loop Block のクエリを書き換える

クエリは、フィルターフックのパラメーターとして $query に渡されます。この値を変更したいので、WordPress クエリクラスを参照します。このドキュメントを「custom field」または「meta」というキーワードで検索すると、「Custom Field (post meta) Parameters」セクションが見つかります。そこには、「クエリのカスタムフィールドの部分は WP_Meta_Query によって解析されるので、最新の情報を得るために、WP_Meta_Query のドキュメントも確認してください」と書かれています。

この２つのドキュメントを解読していきましょう。

Custom Field Key を設定する

Custom Field Key（カスタムフィールドキー）は、フィールドの識別子です。たとえば、投稿に「event_date」というフィールドを追加し、これを基にして投稿をフィルタリングしたい場合、Custom Field Key を event_date に設定します。

つまり、$query[‘meta_key’] に event_date を指定します。

Custom Field Typeを設定する

Custom Field Type（カスタムフィールドタイプ）の可能な値は、「NUMERIC」「BINARY」「CHAR」「DATE」「DATETIME」「DECIMAL」「SIGNED」「TIME」「UNSIGNED」です。デフォルト値は「CHAR」です。

イベント開催日は日付なので、$query[‘meta_type’] に DATE を指定します。

終了したイベントの投稿を表示しない

終了したイベントの投稿を表示したくない場合は、$query[‘meta_value’] を設定してテストします。

テストするための演算子は、$query[‘meta_compare’] で指定します。可能な値は「=」「!=」「>」「>=」「<」「<=」「LIKE」「NOT LIKE」「IN」「NOT IN」「BETWEEN」「NOT BETWEEN」「EXISTS」(WP >= 3.5)「NOT EXISTS」(WP >= 3.5)「REGEXP」「NOT REGEXP」「RLIKE」です。デフォルト値は「=」です。

// meta_valueで指定した日付以上の値を持つ投稿を取得する
// つまり、終了したイベントの投稿は取得しないようにする
$query['meta_value'] = date( 'Y-m-d' );  // 現在の日付を設定する
$query['meta_compare'] = '>=';           // meta_valueをテストするための演算子を設定する

投稿の並び替え

並び替えは英語で「sort」と言います。このキーワードでドキュメントを検索すると、「Order & Orderby Parameters」セクションが見つかります。

取得した投稿をイベントの開催日順に並べ替えるには、$query[‘orderby’] に meta_value を指定します。そして、$query[‘order’] に並び順を指定します。

昇順は「ASC」、降順は「DESC」です。デフォルト値は「DESC」です。

解決案

必要最低限の機能を持つコードを共有します。

投稿テンプレートブロックに「event-list」というCSSを、投稿に「event_date」というカスタムフィールドを追加しています。

add_filter( 'query_loop_block_query_vars', function( $query, $block ) {
	
	$block = $block->parsed_block;
	if ( empty( $block['attrs'] ) ) {
		return;
	} else {
		$class = $block['attrs']['className'];
	}

	if ( isset( $class ) && false !== strpos( $class, 'event-list' ) ) {
    	$query['meta_key'] = 'event_date';
	    $query['meta_type'] = 'DATE';
	    $query['orderby'] = 'meta_value';
    	$query['order'] = 'ASC';
	}
	
    return $query;

}, 10, 2 );

このフックは、フロントエンドでレンダリングされるクエリにのみ影響します。エディターのプレビューはこのフィルターの影響を受けないということに注意してください。

query_loop_block_query_vars フィルターフックの記事内に「User Contributed Notes」があります。そこに投稿されているコードを参考にして書きました。

こちらの記事も参考になります。

まとめ

悲しいことに、query_loop_block_query_vars フィルターフックを「クエリ－ループブロックを使い倒そう」で紹介したことをすっかり忘れていました。手を動かしてインプットすることの大事さを痛感します。この記事を最後まで読んでくださり、ありがとうございます。今すぐWordPressにログインして実践してくださいね！

クエリ－ループブロックのフィルターフックを使ってみた

相談内容