該当が0件のときの Search Result Count ブロックのメッセージの改変

VK Filter Search 2.12.0 で Search Result Count ブロックが追加されました。
このブロックを使うと、ノーコードで以下のように検索結果に該当件数を表示することができます。

Search Result Count ブロックを使ってみると、すごくかんたんに件数表示ができることに感動するのですが、ひとつ気になった点がありました。

それは、条件に該当する投稿がないとき、以下のように「0件あります」と表示されることです。

できれば、以下のように「条件に合う投稿が見つかりませんでした」と表示したいところです。

該当が0件のときのメッセージを指定できる機能は VK Filter Search にはまだありません。（そのうち、ユーザーの誰かが要望するかもしれませんね）

この部分を改変するためのフィルターフックも用意されていません（たぶん...調べた限りでは）。

プラグインのファイルを書き換えるなんて、絶対できません。
　理由 1. アップデートで動作がおかしくなるリスク
　理由 2. 私のスキルがそこまでじゃない😓

この八方ふさがりと思える状況でなんとかカスタマイズしようとがんばってみたところ、うまくいきました🙌

そのカスタマイズのやり方を紹介します。

手順① VK Filter Search の構成

該当が0件のときのメッセージを段落ブロック（どのブロックでもいいんですけど）で作り、以下のように 追加 CSS クラス を入力します。

段落ブロック	blog-count-zero
Search Result Count ブロック	blog-count

手順② CSS

子テーマの style.css などに以下の CSS を追加します。

.main-section:has(.main-section-no-posts) .blog-count {
    display: none;
}

body .blog-count-zero {
    display: none;
}

body .main-section:has(.main-section-no-posts) .blog-count-zero {
    display: block;
}

このサイトのブログ検索 に上記の実装を行いましたので、実際の動きをご確認いただけます。

手順② CSS のもうひとつの案

視野を広げたら、スマートなやり方が見つかりました。body タグにクラス名が付与されていました。

body.search-no-results .blog-count {
    display: none;
}
body .blog-count-zero {
    display: none;
}
body.search-no-results .blog-count-zero {
    display: block;
}

投稿者プロフィール

対馬 俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。

遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら

最新の投稿

• WordPress2025年5月25日重要なお知らせを先頭に表示して新着記事一覧から除外したカスタマイズ
• WordPress2025年4月10日グループブロックの背景画像を CSS で左右反転するやり方
• Lightning2025年3月16日カテゴリーをページヘッダーに表示するプラグインを作りました
• Lightning2025年2月16日ブログカード全体をリンクエリアにしたカスタマイズ例