カスタム検索結果ページを作成することで、訪問者により関連性の高い検索結果を提供し、コンテンツの閲覧を促すことができます。
その最も簡単な方法の1つは、Diviを使用することです。この強力なWordPressページビルダープラグインを使用すると、技術に詳しくなくてもカスタム検索結果ページを作成できます。
しかし、デフォルトのWordPress検索は機能が限られています。検索パフォーマンスを向上させるために、DiviとSearchWPを組み合わせることができます。
この記事では、Diviの検索結果ページテンプレートを作成する方法を説明します。
Diviカスタム検索結果ページテンプレートを作成する理由
訪問者がサイトの検索バーを使用するとき、関連性の高い結果が表示されることを期待しています。
検索クエリを入力した後に空白のページが表示された場合、訪問者はすぐにサイトを離れてしまう可能性が高いです。
幸いなことに、検索結果ページをカスタマイズすることで、このような状況を簡単に回避できます。
検索結果ページの表示を変更して、ユーザーフレンドリーにし、ウェブサイトのニーズにより沿ったものにすることができます。
たとえば、ページの結果数を管理したり、投稿の著者に関する情報を指定したり、ニュースレター登録フォームを追加したりするなど、さまざまなことができます。
さらに、カスタム検索結果ページを作成することで、次のことも可能になります。
- コンテンツの発見可能性を高める
- 1回の訪問あたりの表示数を増やす
- サイトの直帰率を下げる
サイトでカスタム検索結果ページを作成する必要がある理由がわかったので、次にその方法について説明します。
DiviとSearchWPで検索結果ページを作成する方法
独自の検索結果ページを作成する最も簡単な方法は、DiviのようなWordPressページビルダープラグインを使用することです。
また、サイトの検索をよりスマートにしたい場合は、DiviとSearchWPを一緒に使用できます。
SearchWPとは何か、そしてなぜそれを使用するのか？
SearchWPは、市場で最も強力で使いやすいWordPress検索プラグインです。
技術に詳しくない人でも、サイトでの検索方法を完全にカスタマイズできます。
たとえば、SearchWPを使用すると、検索結果から任意のページを除外したり、投稿タグを検索可能にしたり、WooCommerceストアのSKUを含めたりするなど、さまざまなことができます。
このようにして、訪問者にさらに関連性の高い検索結果を提供し、コンテンツの発見可能性を高めることができます。
最も良い点は、SearchWPはDiviと完全に互換性があり、WordPressテーマと自動的に統合されることです。
プラグインをインストールしたら、すぐに検索のカスタマイズを開始して、より良いものにすることができます。
Diviと連携して検索結果ページを作成する方法を見てみましょう。
ステップ1：SearchWPのインストールと有効化
開始するには、SearchWPのウェブサイトにアクセスしてアカウントにサインアップする必要があります。
続行するには、「今すぐSearchWPを入手」ボタンをクリックするだけです。
アカウントを作成したら、次にSearchWPプラグインをダウンロードします。
アカウントエリアに移動し、「ダウンロード」タブに切り替えるだけです。ここから「Download SearchWP」ボタンをクリックして、プラグインファイルをコンピューターに保存できます。
次のステップは、サイトにSearchWPプラグインをインストールして有効化することです。その方法がわからない場合は、WordPressプラグインのインストール方法ステップバイステップガイドを確認してください。
有効化すると、SearchWPへようこそ画面とセットアップウィザードが表示されます。「オンボーディングウィザードを開始」ボタンをクリックして、画面の指示に従ってください。
プラグインを有効化すると、SearchWPはサイトの検索フィールドと自動的に統合されます。
これにより、訪問者にさらに的確な検索結果をすぐに提供できるようになります。また、SearchWPでWordPressの検索結果ページをカスタマイズする方法に関するガイドも確認できます。
次に、Diviページビルダーを使用して検索結果ページを作成する方法を見ていきましょう。
ステップ2：カスタム検索結果ページテンプレートの作成
開始するには、WordPressダッシュボードのDivi » テーマビルダーに移動します。
テーマビルダーページに移動すると、デフォルトのウェブサイトテンプレートを編集するか、新しいテンプレートを追加するオプションが表示されます。
「新しいテンプレートを追加」オプションをクリックしてください。
その後、さまざまなテンプレート設定が表示されます。
ドロップダウンメニューの下部にある「検索結果」オプションの横にあるボックスをオンにして、「テンプレートを作成」ボタンをクリックしてください。
ご覧のとおり、新しい検索結果ページテンプレートが他のテンプレートの中に表示されました。
カスタマイズを開始するには、「カスタムボディを追加」をクリックしてください。
次に、Diviはカスタムボディを作成するか、ライブラリから選択するかを尋ねます。
「カスタムボディの構築」オプションを選択できます。
これにより、ページをスクラッチから構築するか、事前作成済みのテンプレートのいずれかを使用するかを選択できるページに移動します。
このチュートリアルでは、検索結果ページをスクラッチから構築しますので、「構築を開始」ボタンをクリックしてください。
その後、将来のページ用の行を選択できます。
たとえば、このチュートリアルでは最初のものを選択します。
次に、新しいページに最初のモジュールを追加できます。
バーカウンター、ブログ、ボタン、コメントなど、いくつかのオプションから選択できます。
このページに検索結果を表示するには、ブログモジュールを追加する必要があります。
開始するには、「ブログ」モジュールをクリックしてください。
次に、「現在のページの投稿」スイッチを「はい」に切り替えます。
これにより、このモジュールが表示するのは検索結果のみであることが保証されます。
ステップ3：検索結果レイアウトのカスタマイズ
これで、他のDiviページと同様に検索結果ページをカスタマイズできます。
たとえば、検索結果のレイアウトをグリッドに変更してみましょう。
これを行うには、ブログモジュールの設定にある「デザイン」タブに移動します。
ここから、「レイアウト」項目をクリックして設定を展開できます。
その後、モジュールのレイアウトをフルウィズからグリッドに変更します。
完了したら、チェックマークの付いたボタンをクリックして、ブログモジュールに加えた変更を保存します。
次に、検索結果ページに見出しを追加しましょう。
これを行うには、新しいモジュールを追加するために、ブログモジュールセクションの下部にあるプラスアイコンをクリックします。
これにより、検索ページに追加できるさまざまなモジュールが表示されます。
テキストモジュールを検索してクリックするだけで、ページに追加できます。
モジュール内のテキストを変更するには、それをクリックして、表示された設定ウィンドウに必要なものを入力します。
たとえば、このチュートリアルでは「検索結果」に変更します。
テキストのフォーマットを変更するオプションもあります。
テキストを見出しに変換するには、段落をクリックし、ドロップダウンメニューから見出し1を選択します。
見出しを中央揃えにしましょう。
これを行うには、中央揃えボタンをクリックします。
見出しの編集が完了したら、変更を保存することを忘れないでください。
最後のステップは、見出しの位置を検索結果の下ではなく、検索結果の上に移動することです。
これを行うには、見出しの上にカーソルを重ねて灰色のツールバーが表示されるまで待ち、ページの上部にドラッグします。
訪問者がクエリの結果がない場合に再度検索できるように、ページに検索バーを追加しましょう。
開始するには、見出しの上にカーソルを重ねると表示されるプラスボタンをクリックします。
次に、検索バーで検索モジュールを探します。
その後、それをクリックしてページに追加できます。
次に、入力プレースホルダーフィールドにテキストを入力して、検索フォームにテキストを追加できます。
たとえば、「別の検索を試す」というテキストを入力します。
検索フォームの外観に満足したら、緑色のチェックマークボタンをクリックして、検索フォームに加えた変更を保存します。
こちらが、テストサイトでのDivi WP検索結果ページの最終結果です。
検索結果ページのカスタマイズが完了したら、保存する必要があります。
開始するには、Diviページエディタの下部にある紫色の3点ボタンをクリックします。
ページの下隅にさらにオプションが表示されます。
新しい検索結果ページへの変更を保存するために、保存ボタンを押してください。
次のステップは、ページエディタを閉じて、テーマビルダーページに戻ることです。
これを行うには、右上隅のクロスアイコンをクリックするだけです。
次に、ページビルダーは新しいテンプレートを保存するように求めます。
そこに移動したら、左上の変更を保存をクリックできます。
最後のステップは、サイトで検索結果ページがどのように表示されるかを確認することです。
ステップ4：新しい検索結果ページを確認する
その最も簡単な方法は、WordPressダッシュボードの左上にあるサイト名の下のサイトを表示ボタンを押すことです。
サイトに移動したら、検索フィールドに検索クエリを入力して、その検索結果を表示します。
たとえば、「WooCommerce」という検索語を検索してみましょう。
探しているものを入力したら、「検索」ボタンをクリックするだけです。
ご覧のとおり、サイトの検索ページはDiviでカスタマイズしたとおりに表示されています。
これで完了です！検索結果ページの表示をカスタマイズすることで、訪問者がより多くのコンテンツを表示するように促し、ビジネスを成長させることができます。
この記事が、Divi検索結果ページテンプレートの作成方法を学ぶのに役立ったことを願っています。また、WordPressタグが検索できない問題を修正する方法やWordPress検索からカテゴリを除外する方法に関するガイドも参照してください。
よりパーソナライズされたWordPress検索エクスペリエンスを作成する準備はできましたか？今すぐSearchWPで始めましょう！
