検索ウィジェットテンプレートの使用

デフォルトの検索ウィジェットの表示は便利ですが、サイトのウィジェットにはおそらく特別なデザインが必要になるでしょう。 利用可能なウィジェットテンプレートから選択するか、新しいテンプレートを作成できます。 ウィジェットの表示用テンプレートの作成に関する一般的な情報については、 ウィジェットテンプレートを使用したウィジェットのスタイリング を参照してください。

各ウィジェットの 設定から、[表示テンプレート] フィールドでテンプレートを選択します。 利用可能なテンプレートは、設定中のウィジェット専用に作成されたもので、グローバルサイトまたは現在のサイトで、 サイトメニュー () → デザイン → テンプレート → ウィジェットテンプレート から確認できます。

インスタンス設定 から、ウィジェットのデフォルトテンプレートを変更できます。 ウィジェットをページに追加すると、デフォルトで設定済みのテンプレートが使用されます。 これを行うには、テンプレートエディタからウィジェットテンプレートのキーを取得する必要があります。

すぐに使えるテンプレートがいくつか用意されています。

既成テンプレートの使用

既成のウィジェットテンプレートは、そのまま使用することも、独自のウィジェットテンプレートを作成する際の参考にすることもできます。 どちらがあなたに最適かを確認できるよう、プレビューをご用意しました。

カスタムフィルター

デフォルトテンプレート：

コンパクトレイアウトテンプレート：

検索バー

デフォルトテンプレート：

左揃えアイコンレイアウトテンプレート：

注

左揃えアイコンレイアウトテンプレートは、 検索バー候補をサポートしていません。

検索ファセット

すべての検索ファセットウィジェットには、デフォルトテンプレートが用意されています。

コンパクトレイアウトテンプレートは、修正ファセットウィジェットを除くすべてのウィジェットで利用可能です。

ラベルレイアウトテンプレートは、修正ファセットウィジェットを除くすべてのウィジェットで利用可能です。

クラウドレイアウトテンプレートは、タグファセットウィジェットとカテゴリファセットウィジェットで使用できます。

語彙レイアウトテンプレートは、 カテゴリファセットウィジェット で使用できます。

ラジオボタンレイアウトテンプレートは、ユーザーが選択できる項目を1つに制限するもので、カスタムファセットと変更済みファセットで使用できます。

チェックボックスレイアウトは、カスタムファセットで使用できます。 その主な目的は、デフォルトテンプレートのテンプレートベースの実装を提供することです。 これを、独自のカスタムテンプレート の出発点として使用できます:

検索結果設定

リストレイアウトテンプレートはデフォルトです。

カードのレイアウトです。

コンパクトなレイアウト：

類似結果

コンパクトレイアウトテンプレートがデフォルトです。

リストレイアウトテンプレート：

カードレイアウトテンプレート：

検索ウィジェットテンプレートの作成

1. テンプレートを使用したいサイトにアクセスしてください。

   注

   すぐに使えるウィジェットテンプレートは、グローバルサイトに表示されます。 あなたも同じようにできますし、特定のサイトにあなたの情報を追加することもできます。

2. サイト → デザイン → テンプレート を開く。

3. ウィジェットテンプレート タブをクリックします。

4. 新規 → その他 をクリックしてください。

5. ウィジェットの一覧から、テンプレートの対象となるウィジェットを選択してください。

   注

   「検索結果テンプレート」の最初の項目は検索結果ウィジェットを対象としており、同じ名前の2番目の項目はコマース検索結果ウィジェットを対象としています。

6. エディターにあらかじめ定義されている変数を使用して、FreeMarkerでテンプレートを作成します。

7. 完了したら、 保存 をクリックするか、 保存して続行 をクリックして作業の進行状況を保存し、作業を続行してください。

保存後、ウィジェットの設定からテンプレートを選択できます。

既存のテンプレートをコピーして必要に応じて修正することで、テンプレート開発を加速できます。

1. グローバルサイトにアクセスしてください。 サイトを選択 () → マイサイト → グローバル をクリックします。

2. サイト → デザイン → テンプレート を開く。

3. ウィジェットテンプレート タブをクリックします。

4. コピーしたいテンプレートのタイトルを検索してください。 例えば、コンパクトレイアウトテンプレートから始めるには、 compact を検索してください。

5. 目的のウィジェットのエントリを見つけて、 アクション （）→ コピーを作成をクリックします。

   

6. エディタの事前定義変数と独自のFreeMarkerを使用して、テンプレートを作成します。

   

7. 完了したら、 保存 をクリックするか、 保存して続行 をクリックして作業の進行状況を保存し、作業を続行してください。

保存後、ウィジェットの設定からテンプレートを選択できます。

例：検索結果ウィジェットのコンパクトレイアウトテンプレートの拡張

この例では、コンパクトレイアウトテンプレートを拡張し、結果の最終更新日を含めるようにします。

1. グローバルサイトのメニューで、 サイト → デザイン → テンプレート を開き、 ウィジェット テンプレート タブをクリックします。

2. compactを検索し、 Actions () → Make a Copy をクリックして、検索結果テンプレートを作成します。

3. 名前は コンパクトで詳細 とします。

4. あなたのコピーは他のコピーと一緒にリストに表示されますので、 詳細をコンパクト化 をクリックして編集を開始してください。

5. テンプレートのリスト項目ブロック（ <li> から </li>までのコード）をこのコードに置き換えてください。

   <li class="c-mb-3 c-mt-3">
      <a class="link-primary single-link" href="${entry.getViewURL()}">
         ${entry.getHighlightedTitle()}
      </a>
      <details class="text-2">
         <summary>Details...</summary>
         <p class ="c-mb-0 c-mt-0">
            Last modified:<em>${entry.getModifiedDateString()?keep_before(",")}</em>
         </p>
         <#if entry.getModifiedByUserName()?has_content>
            <p class ="c-mb-0 c-mt-0">
               Edited by: <em>${entry.getModifiedByUserName()}</em>
            </p>
         </#if>
      </details>
   </li>
   

6. ［保存］をクリックします。

関連トピック

• 検索設定のリファレンス
• ウィジェットテンプレートを使用したウィジェットのスタイル設定