VK Filter Search を縦グリッド表示にする

WordPress のプラグイン VK Filter Searchは、サイト内検索機能を大幅に強化します。

標準の検索機能では実現できない高度な絞り込み検索を可能にし、ユーザーエクスペリエンスを向上させます。

カテゴリー、タグ、カスタムタクソノミー、カスタム投稿タイプなど、複数の条件を組み合わせた検索が可能で、ユーザーは必要な情報に素早くアクセスできます。チェックボックス、ラジオボタン、セレクトボックス、テキスト入力など、様々な入力形式に対応しており、検索フォームのデザインも自由にカスタマイズできます。

Ajax対応により、ページ全体を再読み込みすることなく検索結果を更新できるため、ユーザーはストレスなく検索を続けられます。特に大量のコンテンツを扱うサイトでは効果的です。

スマートフォンやタブレットなど様々なデバイスに最適化されたレスポンシブデザインに対応し、検索結果の表示方法、表示件数、並び順なども細かく設定可能です。グリッド表示やリスト表示など、コンテンツの種類に合わせた最適な表示形式を選べます。ユーザーが求める情報へのアクセスを容易にすることで、サイト内の回遊率向上やユーザー滞在時間の延長につながり、SEO評価の向上に貢献します。導入も比較的簡単で、WordPressの管理画面からプラグインをインストールして有効化するだけで基本機能が使えるようになります。

VK Filter Search を縦グリッド表示にするCSS

以下をコピペしてください。ooooの部分は投稿タイプ事に変更してほしい

.vk_posts.vk_posts-postType-oooo {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 最小幅300pxで自動的に列数を調整 / gap: 20px; / アイテム間のギャップ */
}

.vk_posts.vk_posts-postType-oooo .vk_post {
display: flex;
flex-direction: column;
border: 1px solid #ccc; /* 枠線 */
padding: 15px;
}

.vk_posts.vk_posts-postType-oooo .vk_post_imgOuter {
width: 100%;
height: 200px; /* 画像の高さを固定 */
background-size: cover;
background-position: center;
}

.vk_posts.vk_posts-postType-oooo .vk_post_body {
flex-grow: 1; /* 本文を伸ばして高さを揃える */
}

.vk_posts.vk_posts-postType-oooo .vk_post_btnOuter {
margin-top: 15px; /* ボタンと本文の間に余白を追加 */
}