株式会社HAMWORKS
‼️

【WordPress】クエリーブロック内で投稿があるときだけ表示する「Query Has Results」ブロックを作りました

2025/02/13に公開

https://github.com/hamworks/query-has-results

クエリーブロック内で結果があるとき(記事が表示されているとき)だけ、入力した何かしらが表示されるブロックをつくりました。いわゆるコアの「No Query」ブロックの真逆のことをしているブロックです。

(プラグイン名、Has Queryにしてたはずなんだけどどっかで補完入っちゃったかなぁ)

使ったらどうなるの?

投稿なり固定ページなりで関連記事を表示させたいときを想定します。
まずはいつもの使い方。

こう入れておくと、フロントではこのような表示になります。

「まだ投稿がありません」が表示されてるので別におかしなところはないですが、「記事がないときは見出しも消したい」という要望があった時、選択としてはCSSかJSで消すしかありません。
.wp-block-heading:has(+ .wp-block-query-no-results) みたいに書けば見出しを非表示にするCSSは書けますが、管理画面では表示させないといけない(編集できなくなる)ので、フロントだけに適用させるように書かないといけないとか色々考えると「やりたくないなぁ…」となりがちです。

そんなときに使えるのが「Query Has Results」!

見出しブロックを「Has Query」の中に配置し、配置していた「No Query(結果なし)」ブロックを削除します。すると……

きえました!

内部的にはほぼ「No Query」ブロックと逆のことをしてるだけです。Cursorで初期環境作ってみたりとかもやってるんですがそれはまた別のブログで感想(?)書きたいと思います。

株式会社HAMWORKS
株式会社HAMWORKS

Discussion