Diviで検索結果ページテンプレートを作成する方法

私たちは皆、検索フォームを使用してWebサイトで必要なものを見つけることに慣れてきました。 したがって、DiviでWebサイトを作成するときは、検索結果のルックアンドフィールを促進するページ結果テンプレートのデザインを検討する必要があります。

このチュートリアルでは、Divi ThemeBuilderを使用してシンプルでエレガントな検索結果ページテンプレートを作成する方法について説明します。 動的なページ結果のタイトルやブログモジュールによって生成された関連する検索コンテンツなど、検索結果ページテンプレートの重要な要素を含める方法を説明します。

始めましょう。

スニークピーク

これから作成する検索結果ページテンプレートを簡単に見てみましょう。

テンプレートを無料でダウンロード

このチュートリアルの検索結果ページテンプレートを利用するには、まず下のボタンを使用してテンプレートをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

レイアウトをページにインポートするには、zipファイルを抽出し、テーマビルダーの移植性オプションを使用してjsonファイルの1つをDiviテーマビルダーに追加するだけです。

チュートリアルに行きましょう。

始めるために必要なもの

開始するには、Diviテーマをインストールしてアクティブ化する必要があります。 最新バージョンのDiviを使用していることを確認してください。

また、検索結果ページに実際に結果を表示するには、テスト目的で作成されたいくつかの投稿/ページが必要になります。

その後、あなたは行く準備ができています。

検索結果ページについて

Diviでは、検索結果ページは、ユーザーがDiviの検索フォームの1つに検索クエリを入力するとリダイレクトされるページです。 検索結果ページにつながる可能性のある検索クエリには、デフォルトのDiviヘッダーの検索フォーム、Divi Builderの検索モジュールから生成された検索フォーム、WordPressに組み込まれている検索ウィジェットが含まれます。

デフォルトでは、検索結果ページには、通常のブログページと同じように、フィードで検索されたページまたは投稿が表示されます。 ただし、Diviを使用すると、Diviテーマビルダーを使用してテンプレートを好きなようにデザインできます。

Diviで検索結果ページテンプレートを作成する方法

新しいテンプレートを作成する

開始するには、WordPressダッシュボードに移動し、Divi> ThemeBuilderに移動します。 次に、「新しいテンプレートの追加」領域をクリックします。

テンプレート設定で、テンプレートの検索結果を割り当てます。

次に、新しいテンプレートの[カスタムボディの追加]領域をクリックして、[カスタムボディの構築]を選択します。

レイアウトを最初から作成する場合に選択します。

テンプレートレイアウトエディタを使用した検索結果ページテンプレートの設計

ページ結果テンプレートの見出しセクション

テンプレートレイアウトエディタ内で、デフォルトのセクションに1列の行を追加して、テンプレートのデザインを開始します。 ここで、テンプレートのページ見出しを作成します。

仕切りモジュール設計アクセント

次に、ディバイダーモジュールを挿入します。 これは、ページ見出しのデザインアクセントとして機能します。

次のように仕切りスタイルを更新します。

• 線の色：＃3a405a
• ライン位置：下
• 仕切りの重量：5px
• Zインデックス：-1

見出し付きのテキストモジュール

Divider Moduleの下に、次の内容の新しいテキストモジュールを追加します。

<h1>Search Results</h1>

次のようにテキストデザインを更新します。

• 背景色：#ffffff
• テキストの配置：中央
• 見出しフォント：Muli
• 見出しフォントの太さ：重い
• 見出しのテキストの色：＃3a405a
• 見出しのテキストサイズ：70px（デスクトップ）、40px（タブレット）、22px（電話）
• 見出し線の高さ：80px
• 最大幅：60％
• モジュールの配置：中央
• 最小の高さ：80px

これで、カスタムマージンを追加して、テキストモジュールを上に移動して仕切りを重ねることができます。

• マージン：-75px

検索モジュール

見出しのあるテキストモジュールの下に、検索モジュールを追加します。 これは、検索結果ページにアクセスした後もブログ/サイトを引き続き検索したいユーザーに役立ちます。

フォームの入力プレースホルダーテキストを追加します。

例外オプショングループの下のオプションを選択することにより、検索結果から特定のページ、投稿、および/またはカテゴリを除外するオプションもあります。 たとえば、主にブログ用の検索フォームを作成している場合、ブログの投稿のみが表示されるように、検索結果からページを除外したい場合があります。

次に、検索設定を次のように更新します。

• プレースホルダーの色：＃3a405a
• フィールドの背景色：#ffffff
• フィールドフォント：Montserrat
• フィールドテキストサイズ：20px
• ボタンと境界線の色：＃3a405a
• ボタンフォント：Muli
• ボタンのフォントの太さ：太字
• ボタンのテキストの色：#ffffff
• ボタンのテキストサイズ：18px
• 幅：100％
• 最大幅：300px
• モジュールの配置：中央
• 丸みを帯びた角：8px

これで、ほとんどの場合、見出しセクションが処理されます。

行のパディング

次のセクションを開始する前に、行の下のパディングを取り出しましょう。

• パディング：0px下

検索結果テンプレートの本文セクションの作成

これで、検索結果のアーカイブタイトルと検索結果のコンテンツを含むテンプレートの2番目のセクションを追加する準備が整いました。

新しいセクションと行の作成

上部のセクションの下で、新しい通常のセクションをレイアウトに追加します。

次に、セクションに1列の行を追加します。

投稿/アーカイブタイトルを動的コンテンツとして追加する

検索結果ページは、ユーザーが入力した検索クエリを表示するタイトルの恩恵を受けます。 テキストモジュールを使用してこれをページに追加し、投稿/アーカイブタイトルの動的コンテンツ要素を取り込むことができます。

まず、テキストモジュールを追加します。

本文コンテンツボックス内のダミーテキストを削除し、本文コンテンツボックスにカーソルを合わせたときに表示される動的コンテンツアイコンを選択します。 次に、リストから投稿/アーカイブタイトルを選択します。

Post / Archive Title要素は、「Results for」というフレーズで始まり、括弧内に検索コンテンツ/クエリが続きます。 以下は、ユーザーが「ビジネス」という用語を検索した場合に表示される例です。

次に、テキストモジュールのデザイン設定を次のように更新します。

• テキストフォント：Muli
• テキストフォントの太さ：重い
• テキストテキストの色：＃d30c7b
• テキストテキストサイズ：22px
• テキストの配置：中央
• アニメーションスタイル：スライド
• アニメーションの方向：下
• アニメーション強度：250％

追加されたアニメーションは、「クラウド」ディバイダースタイルの下から検索結果のタイトルを表示します（これは少し後で追加します）。 そのため、ユーザーが新しい検索クエリを入力するたびに、タイトルがドロップダウンしてクールな効果が得られます。

新しい行を追加

post / archive title要素を含むTextモジュールの下に、新しい1列の行を作成します。

行にブログモジュールを追加します。 これにより、検索結果ページの実際の投稿/コンテンツが表示されます。

ブログモジュールのコンテンツ設定を次のように更新します。

• 現在のページの投稿：はい
• 投稿数：9
• 抜粋の長さ：120
• 作者を表示：いいえ

ここで最も重要なオプションは、現在のページの投稿です。 検索結果ページに検索の動的コンテンツを表示するには、これをアクティブにする必要があります。

次に、ブログモジュールのデザインを次のように更新します。

• レイアウト：グリッド
• タイトルフォント：Muli
• タイトルフォントの太さ：超太字
• タイトルテキストの色：＃3a405a
• タイトルテキストサイズ：24px
• タイトルラインの高さ：1.3em
• ボディフォント：Montserrat
• 本文の色：＃3a405a
• グリッドレイアウトの丸みを帯びたコーナー：10px
• グリッドレイアウトの境界線の幅：0px
• ボックスシャドウ：スクリーンショットを表示
• ボックスシャドウの垂直位置：0px
• ボックスシャドウブラー強度15px
• ボックスシャドウスプレッド強度：-5px

次に、ページネーションスタイルを次のように更新します。

セクションの背景とディバイダー

デザインの最後の仕上げとして、セクション設定を次のように更新します。

• 背景-色：#eeeeee
• トップディバイダースタイル：スクリーンショットを参照
• 仕切りの色：#ffffff
• 仕切りフリップ：垂直
• 仕切りの配置：セクションの内容の上に
• パディング：100pxトップ

最終結果

ライブサイトで「ビジネス」という用語を検索したときのページテンプレートの最終結果は次のとおりです。

これがタブレットと電話のデザインです。

また、検索結果ページの追加クエリに検索フォームを使用した場合の検索結果のタイトルアニメーションの例を次に示します。

最終的な考え

検索結果ページはユーザーにとって便利なツールになる可能性があるため、それに値する注意を払うことをお勧めします。 Diviを使用すると、テンプレートの設計時にDivi Visual Builderを使用して、必要なすべての動的要素を含む検索結果テンプレートを作成できます。 コードの知識は必要ありません。 これにより、独自のブログまたはサイト用のカスタム検索結果ページテンプレートを作成するためのインスピレーションが少し得られることを願っています。

コメントでお返事をお待ちしております。

乾杯！