【STORK SE】プラグインで絞り込み検索機能を付けてみた

初心者

STORK SEに複数条件で検索できる機能を付けたい
おすすめのプラグインは？

そんな悩みを解決します。
ポータルサイトなどで見かける複数条件での絞り込み検索機能をSTORK SEに付けてみました。

本記事ではSTORK SEで絞り込み検索プラグインを導入したデモサイトを紹介します。

不動産サイトやアフィリエイトブログへの絞り込み検索を導入したい人はぜひチェックしてみてください。

対象のテーマはSTORKではなく、STORK SEです。

公式　STORK SEをダウンロードする

この記事を書いた人

• IT業界24年のベテラン エンジニア
• WordPressで企業サイトの構築しています
• 取り扱いWordPressテーマは300個オーバー

SWELLマニアの かんた です

絞り込み検索を設置したSTORK SEのデモサイト

STORK SEに絞り込み検索を実装したデモサイトを紹介します。

→デモサイトを開く

デモサイト化粧水を紹介する専門ブログをイメージしています。価格や、レビュー評価、メーカーなどから商品を絞り込み検索できるフォームを設置しました↓

絞り込み検索フォームは、国産プラグインのVK Filter Search Proを使いました。有料だけあって使いやすく高機能なプラグインです。

かんた

他のテーマ用に購入済みだったので、試しにSTORK SEで使えるか試してみました。

VK Filter Search Proの概要

公式　VK Filter Search Proをダウンロード

STORKで絞り込みフォームを設置する方法

VK Filter Search Proプラグインを有効化すると、ブロックエディター上で絞り込み検索フォームを作ることができます。

↓次の動画は公式のものです。直観的な方法でフォームを作れるので、ノーコードで絞り込み検索フォームが作れます。

カテゴリーやタグ、キーワードなどを組み合わせた絞り込み検索フォームを作れます。

Custom Post Type UIプラグインでカスタムタクソノミーを追加した場合やAdvanced Custom Fieldsプラグインで登録したカスタムフィールドを絞り込み検索対象にすることも可能。

かんた

かなり自由度が高いフォームを作成できます。

作成したフォームの設置方法は？

エディター上で作成したフォームは次のよう方法で設置できます。

設置方法

【設置方法①】固定ページ上に表示

固定ページの任意の場所に絞り込みフォームを設置できます。

エディター上でフォームの呼び出しブロック（Call Filter Search Form ）を挿入し、ブロックオプションから作成済みのフォームを選択するという流れでフォームを固定ページに設置可能です。

管理画面上で絞り込み検索フォームは複数作成できます。サイトによってはカスタム投稿ごとに絞り込み検索フォームを使い分けるといったこともできます。

【設置方法②】ウィジェットに表示

作成したフォームはウィジェットエリアに表示できます。

STORK SEには「マイパターン」とう呼ばれる機能があります。

作成したフォームをマイパターンに呼び出したものをいったん保存。その後、マイパターンの呼び出し用ショートコードをコピーしカスタムHTMLウィジェットに貼り付けるという流れです。

ハンバーガーメニューをクリックした時に表示されるモーダルに表示するには、ウィジェットのハンバーガーメニューー内に呼び出し用ショートコードを設置すればフォームが表示されるようになります。

絞り込み検索向け独自カスタマイズ

デモサイトで実装している、絞り込み検索機能と合わせて導入したいおすすめ独自カスタマイズを紹介します。

情報の概要を表示する

不動産サイトなどで定番のやつです。デモサイトでは価格など情報の概要を表示しています。

ネットショッピングなんかだと、購入する前にレビュー評価ってチェックしませんか？

ボクは購入前のリサーチで必ず口コミなんかを確認したい派です。そんなユーザー向け、レビューを
星印で表示しています。

この概要部分は各商品ページで設定したカスタムフィールドの値を表示しています。カスタムフィールドは無料プラグインのAdvanced Custom Fieldsで設定しています。

商品のレビュー記事編集画面に各入力項目を設定。運用者が必要事項を入力すると一覧ページや検索結果ページに概要として表示される仕組みです。

検索結果の数を表示する

絞り込み結果ページのカスタマイズです。デモサイトでは条件にマッチした投稿の件数を表示させています。

わりと定番だと思いますが、STORK SEの検索ページには検索結果数は表示されません。検索結果の数を表示させるには独自カスタマイズが必要です。

条件に合う投稿がない場合の表示と合わせて、検索結果の数を表示させるために次のコードを追加しています。

 $kanta_number = $wp_query->found_posts;

    if ($kanta_number > 0) {
        echo '<div class="kanta-result"><span>' . $kanta_number . '</span>件見つかりました。</div>';
    } else {
        echo '<div class="kanta-result">条件に合う投稿は見つかりませんでした。</div>';
    }

一覧表示の並び替えボタン

デモサイト上の検索結果ページには、並び替えボタンを設置しています。絞り込み検索後、ユーザーが投稿一覧を並び替えする機能です。

例えば検索結果が10個ぐらい表示された場合に、価格の安い順で並び変えるといったことができます。並び替えはカスタムフィールドの値を参照する仕様です。

価格や発売日、レビューの3個ボタンを付けていますが、重量、レビュー記事投稿日など、さらにボタンを設置することも可能です。

FAQ

STORK SEと絞り込み検索カスタマイズについて関連情報をFAQ形式で紹介します。

まとめ

WordPressテーマSTORK SEに絞り込み検索機能を付ける方法についてでした。

デモサイトでは有料プラグインのVK Filter Search Proを使い絞り込み検索フォームを設置しました。あまりコードを書くのが苦手だ..という人におススメです。

かんた

ぜひチャレンジしてみてください！

VK Filter Search Proの概要

本記事で紹介したデモサイトは次のバージョンで構築しています。

バージョンアップで仕様が変更される場合がありますので、最新情報は各公式サイトをご確認ください。

あわせて読みたい

【レビュー】WPテーマSTORK SE(ストークSE)の感想 STORK SEが気になる…利用者のレビューを読みたい.. そんな疑問に答えます。 STORK SEを買ってみたので、使ってみた感想をシェアします。 STORKではなく、STORK SEです…