THE THOR ザ・トール 絞り込み検索を設置する

THE THOR で評価の高い絞り込み検索を設置しました。

通常の検索はページ上部のキーワード検索を使ってもらい、より詳しく検索をしたいという人向けに固定ページに絞り込み検索を設置。

 

普通に設置した状態はこんな感じ↓

※固定ページで表示

 

カタログ的なサイトを作ったりする場合にはとてもユーザービリティが高く、重宝する機能だと思います。

雑記の当サイトでの有効度は不明ですが、せっかくある機能なのでひっそりと設置しました。

 

絞り込み検索の設置状況

 

THE THOR では検索が2種類あります。複数条件検索(default)とキーワード検索です。

この記事であつかう絞り込み検索とは複数条件検索のことです。

 

当サイトでは固定ページで絞り込み検索用のページを作り設置しました。

 

固定ページにした理由は、キーワード検索に比べ絞り込み検索は読み込みに負担が掛かかるのでページ上部の共通部分で読み込ませるのは得策ではないと判断しました。詳しく検索したいと思う人は検索ページを利用してくれるだろうし、それ以外の場合は、常時表示されているキーワード検索で対応できるかと思います。

 

複数条件検索はキーワード/カテゴリー/タグの項目が表示されます。

タグはどうしても大量になってしまうので、見やすくなるよう見た目をカスタマイズしました。

具体的には、タグの均等配置と検索ボタンの常駐化です。

ちょっと詰めが甘い仕上がりですが、デフォルトの状態よりは使いやすいかと思います。

今回設置した絞り込み検索はこんな感じ↓

 

THE THOR 絞り込み検索を固定ページに設置

 

固定ページにウィジェットを挿入するプラグインをインストール

ページ上部以外に検索機能を設置するにはウィジェットを使います。

しかしウィジェットだけではページを作ることができないので、ページにウイジェットを配置するプラグインを使用します。

今回使用したプラグインはPage Builder by SiteOriginというプラグイン。固定ページでサイトトップなどを作るのにも便利そうなプラグインです。

プラグインメニューから新規追加「Page Builder by SiteOrigin」で検索インストールできます。インストールしたら有効化。特に設定はせずそのまま使用しました。

 

これ以外にも、Widget in Contentというプラグインが記事内にウィジェットを自由に配置できて便利そうでした。こちらは広告の配置に良さそうです。

 

固定ページを作成

プラグインを有効化したら新規固定ページを作成。

エディタ右上のタブに「ページビルダー」という項目が追加されています。

固定ページは以上で完成です。

これで記事冒頭にある状態↓までできました。次からは見やすくカスタマイズします。

 

追加CSSで絞り込み検索ページをカスタマイズ

 

見た目を追加CSSで修正します。

タグの並びがガタガタなので修正しつつ見やすいように簡単な背景色をつけます。

検索のボタンが押しやすいようにスマホのみ画面右下に固定表示しています。

 

 

追加するCSSは以下のとおり。

/*絞り込み検索のカスタマイズ*/

.widgetSearch__checkLabel {
    width: 30%;
    background-color: #dfdfdf;
}

.btn__link-search {
    background-color: #333333;
    border-radius: 3px;
    width: 100%;
    border-bottom: initial;
}
/*絞り込み検索レスポンシブル*/
@media screen and (max-width : 767px){
    .widgetSearch__checkLabel {
        width: 46%;
    }
    .btn__link-search {
        width: 150px;
    }
    .content .btn__link {
        position: fixed;
        bottom: 25%;
        right: 16px;
        opacity: 0.75
    }
}

※カスタマイズは自己責任でお願いします。
※表示にずれなどがある場合はご連絡いただけると助かります。

以上です。

 

あとは固定ページの入り口をどこかに表示すればOK

実際のページはこちらで確認できます。

・ページ内の絞り込み検索

 

基本的な絞り込み検索の設定方法（参考）

 

こちらはページ上部の共通部分にサーチパネルを設置する通常の設定方法です。

わざわざ固定ページ作る必要なく設置だけしたいという人はこちらをご参考ください。

 

選択項目は2つ。

• サーチパネルを表示するの「表示(default)」「非表示」
• サーチパネル内の検索機能を選択「複数条件検索(default)」「キーワード検索」

以上の設定でページ上部右側に虫眼鏡が表示され、クリックすると設定した検索方法での検索窓が表示されます。

 

・THE THOR メニューアイコンとサーチアイコンの色を変える（ハンバーガーメニュー＆虫眼鏡）

 

あとがき

 

簡単にできると思って始めたら、予想外に時間がかかりました。

標準では読み込み時間が・・・とか言ってる割にプラグインを使ってしまうあたりはご愛敬です。

THE THORの絞り込み検索は良い機能だと思うので設置しましたが、当サイトで活用されることはほぼなさそうなので、毎度のことながら自己満足なカスタマイズです。

こういった小さな作り込みが良いサイトを生み出すと信じて自己満足していきます。

 

THE THOR 記事一覧