【Elementor　✕　検索フォーム】

Elementor に検索機能を導入したいけど作り方が分からない…

そんな方に、無料のプラグインを使用して、Elementor に検索フォームを導入する方法を紹介します！

検索フォームを導入する方法は様々ですが、今回は無料で使用できるWordPressのプラグイン「Search & Filter」の使い方について解説していきます。

「Search & Filter」プラグインをインストール

「Search & Filter」は、ウェブサイトやブログの検索機能にフィルター機能を追加することができるプラグインです。例えば、カテゴリーやタグなどの条件を設定することができます。それでは、具体的な使い方について見ていきましょう！

まずは、「Search & Filter」プラグインをインストールします。WordPressの管理画面から、「プラグイン」→「新規追加」を選択し、「Search & Filter」を検索してインストールします。

プラグインが有効になったら、WordPressダッシュボードの左側にある「Search & Filter」を選択します。

「Search & Filter」では、ショートコードを使用して検索フォームを設置します。「How To Use」の項目に表示されているショートコードをコピーします。

Elementorの編集画面を開き、「ショートコード」ウィジェットを使用します。

先ほどコピーしたショートコードを貼り付けます。

これで基本的な設置は完了です！次に、検索結果を表示するページを作成しています。

Elementor Pro の「Theme Builder」を使用して、検索フォームで検索した結果を表示するページを作成していきます。

「Theme Builder」内の、「Search Results」が検索結果を表示するページになります。
「Search Results」の「Add New」を選択し、検索結果ページを作成していきます。

検索結果の投稿を表示するには、「ポスト」ウィジェットを使用します。
※Archive Postsでは、固定ページも表示されてしまうため、ポストウィジェットを使用しています。

ページを作成し、「公開」ボタンを選択すると、テンプレートの公開設定画面に移ります。
「Search Results」を選択し、「SAVE&CLOSE」を選択します。

これで検索結果ページの作成は完了です！

検索フォームと検索結果ページの作成が完了したので動作確認をしていきます。

まず、検索条件を何も指定しなかった場合は、投稿が全て表示されます。

次に、検索条件も「カテゴリーA」を指定した場合、「カテゴリーA」の投稿のみが表示されます。

このように、検索条件を絞って投稿を検索することができます！次からは、検索条件のカスタマイズ方法について説明していきます。

Search & Filterでは、ショートコードのパラメータを編集することで、検索条件をカスタマイズすることができます。

検索項目をカスタマイズするには、ショートコードに「fieldsパラメータ」を指定します。

「search」：キーワード検索を表示

「category」：カテゴリー検索を表示

「post_tag」：タグ検索を表示

例えば、カテゴリー検索とタグ検索を検索項目としたい場合は、以下のショートコードになります。

[searchandfilter fields="category,post_tag"]

必要な条件を組み合わせることで、様々な条件での絞り込み検索が可能になります。

検索項目に見出しをつける場合は、ショートコードに「headingsパラメータ」を指定します。

[searchandfilter fields="category,post_tag" headings="カテゴリー,タグ"]

また、ショートコードに「submit_labelパラメータ」を指定することで、検索ボタンのテキストを指定することができます。

[searchandfilter fields="category,post_tag" headings="カテゴリー,タグ" submit_label="検索"]

検索タイプを変える場合は、ショートコードに「typesパラメータ」を指定します。

「select」：プルダウンメニューを表示

「checkbox」：チェックボックスを表示

「radio」：ラジオボタンを表示

例えば、カテゴリーをチェックボックス、タグをラジオボタンにした場合は、以下のショートコードになります。

[searchandfilter fields="category,post_tag" headings="カテゴリー,タグ" types="checkbox,radio" submit_label="検索"]

以上が、Elementor に検索フォームを設置する手順になります！「Search & Filter」プラグインをショートコードで使用することで、フィルターを簡単に表示することができるため、ぜひ活用してみてください！