クエリ―ループブロックでは、ループで表示する投稿が無い場合に「結果なし」ブロックの内容が表示されます。
しかし場合によってはブロックごと非表示にしたいときがあります。
ブロック自体にマージン、パディング、ボーダーをつけているとか、ブロック内に見出しなどのブロックを追加しているときです。
クエリ―ループブロックで表示する投稿が無い場合にブロックごと非表示にするには、そのページに適用されるCSSに下記を入れます。
.wp-block-query:has(>.wp-block-query-no-results) {
display: none;
}.wp-block-query はクエリ―ループブロックのCSSクラスで、.wp-block-query-no-results は結果なしブロックに付与されるCSSクラスです。
つまり上記のCSSのセレクタは、結果なしブロックを直下の要素に持っているクエリ―ループブロックを指定しています。
クエリ―ループブロックを内包しているグループブロックごと非表示にしたい場合は、上記の応用で出来ると思います。
この記事を書いた人
-
FAシステムメーカー、国内最大手印刷会社製版部、印刷・ウェブ制作会社を経て、家庭の事情で実家に帰省して独立
現在はフリーランスと制作会社シニアディレクターのマルチワーク
ウェブ制作のほぼ全般を見渡せるディレクター業務が主だが、デザイン・コーディングも好き
1997年ブログ開設
WordPressコミュニティには2011年から参加
WordCamp Kansai 2016 セッションスピーカー
WordCamp Tokyo 2023 パネルディスカッションパネラー
WordBench京都、WordBench神戸、WordPress Meetup八王子など登壇多数
最新の投稿
ご質問・ご相談などありましたら
お気軽にお問い合わせください
資料請求・お問い合わせにはメールアドレスが必要です
コメントを残す