検索テンプレート
は、カスタム検索結果ページに検索結果を表示するために 検索フォーム と併用されます。テンプレートオプションを使用すると、結果の見た目と雰囲気を完全に制御でき、ウェブサイトのデザインに一致し、優れたユーザーエクスペリエンスを提供できます。
このドキュメントでは、テンプレートオプションページの使用方法、レイアウトテーマの選択、カスタムスタイリングの適用、およびSearchWPテンプレートをウェブサイトのどこにでも埋め込む方法について説明します。
注意：テンプレートのカスタマイズは、検索フォームのSearchWPテンプレートオプションでのみ使用できます。サイトのデフォルトテンプレートをカスタマイズしたい場合は、テーマのデフォルトの検索テンプレートを編集する必要があります。
テンプレートの始め方
SearchWPの結果を表示するための新しいテンプレートを作成するには：
- WordPressダッシュボードに移動します。
- SearchWP > テンプレートに移動します。
- 「新規追加」ボタンをクリックして、新しいテンプレートデザインを作成します。
次の画面には、カスタマイズのための2つの主なセクションがあります。
- レイアウトテーマを選択
- カスタムスタイル
各セクションが提供するものを詳しく見ていきましょう。
1. レイアウトテーマを選択
このセクションでは、ウェブサイトのフロントエンドに検索結果が表示されるレイアウトスタイルを選択できます。さまざまなレイアウトテーマを簡単に切り替えて、保存する前に各テーマをプレビューできます。
利用可能なレイアウトテーマ：
- ミニマル： 各結果のタイトルと説明のみを表示する、クリーンでシンプルなリストレイアウト。
- コンパクト： タイトル、説明、および小さな画像サムネイルを含むリストレイアウト。
- カラム： タイトル、説明、および小さな画像を含む、複数のカラムで結果を表示するグリッドレイアウト。
- ミディアム： タイトルと説明とともに、中程度のサイズの画像を含むリストレイアウト。
- リッチ： 大きな画像、タイトル、および説明を含む、視覚的に魅力的なリストレイアウト。
- 組み合わせ： このオプションを使用すると、カスタムスタイリングセクションの設定を組み合わせて、完全にカスタムなレイアウトをデザインできます。
テーマを選択することは良い出発点であり、以下のスタイリングオプションを使用してデザインをさらに微調整できます。
2. カスタムスタイリング
レイアウトテーマを選択したら、カスタムスタイリングセクションを使用して、検索結果の見た目と動作を微調整します。
レイアウトスタイル： 結果の配置方法を選択できます：
- グリッド：結果をマルチカラムレイアウトで表示します。
- リスト: 結果をリスト形式で1行ずつ表示します。
基本的なスタイリングオプション
基本的なスタイリングオプションを使用すると、検索結果の視覚的な外観を調整して、ウェブサイトのデザインにより適合させることができます。これらのオプションは、各結果の表示方法を制御する柔軟性を提供し、一貫性のあるプロフェッショナルな外観を保証します。
説明: 検索結果の説明フィールドを、好みに応じて有効または無効にすることができます。有効にすると、説明にはコンテンツからの短い抜粋が表示されます。さらに、抜粋内で検索キーワードをハイライトするオプションがあります。キーワードがハイライトされたカスタム抜粋を生成するには、SearchWP設定のハイライトオプションを有効にするだけです。
画像: 画像オプションを使用すると、検索結果の横に表示される画像のサイズを選択できます。小、中、大など、さまざまな定義済みサイズから選択できます。
タイトル: 結果のタイトルの色とフォントサイズを、サイトのタイポグラフィに合わせてカスタマイズできます。
価格: 価格オプションは、WooCommerceやEasy Digital Downloadsなどのeコマースプラグインがサイトでアクティブな場合に利用可能になります。検索結果に表示される商品価格の色とフォントサイズをカスタマイズできます。
ボタンのスタイル: ボタンのスタイルセクションでは、各結果の抜粋の末尾に表示される「続きを読む」ボタンの外観をカスタマイズできます。
ボタンのラベルテキストを、「もっと見る」や「詳細はこちら」など、より文脈に合った、または魅力的なものに変更できます。さらに、ボタンの背景色、フォントの色、フォントサイズを変更して、目立たせたり、結果のレイアウトにシームレスに溶け込ませたりすることができます。
1ページあたりの結果数: この設定では、1ページに表示される検索結果の最大数を指定できます。
注意: searchwp\results\per_pageフィルターを使用して、プログラムで1ページあたりの結果数を設定することもできます。これは、特定の基準またはページタイプに基づいて動的に結果数を調整したい場合に便利です。
ページネーションのスタイル: ページネーションのスタイルオプションを使用すると、ユーザーが複数ページの検索結果をどのようにナビゲートするかを制御できます。
利用可能なページネーションタイプ:
- AJAXでさらに読み込む
このオプションは、ページを更新せずに、追加の検索結果を動的に読み込みます。この方法では、ユーザーは現在のページを離れることなく、より多くの結果を表示できるため、シームレスなブラウジング体験を提供します。ボタンのラベルとスタイル（背景、フォントの色、サイズ）をカスタマイズできます。 - Default Pagination (Number-Based)
The Default Pagination method displays traditional page numbers, allowing users to navigate through result pages manually. You can select from the following styles:- No Box: このスタイルは、ボックスや円形のスタイリングなしで、前の/次のリンクの横にページ番号を表示します。前のボタンと次のボタンのラベルをカスタマイズすることもできます。
- Boxed: ボックススタイリングでページ番号を表示します。
- Circular: 円形の境界線スタイリングでページ番号を表示します。
テンプレートの埋め込み
検索フォームと同様に、SearchWPテンプレートは次のいずれかの方法を使用してWordPressサイトの任意のページに埋め込むことができます。
1. Gutenbergブロック
Gutenbergブロックの方法を使用すると、WordPressサイトの任意の投稿またはページにSearchWPの結果を簡単に埋め込むことができます。この方法は、Gutenbergエディターを使用して作業し、検索結果をコンテンツ内にシームレスに配置したいユーザーに特に役立ちます。
- 任意の投稿またはページを編集しながら、「SearchWP Results」ブロックを検索してください。
- 結果を表示したい場所にブロックを挿入します。
- 結果は、検索フォーム設定で割り当てられたエンジンとテンプレートに従って表示されます。ブロック設定の下で、結果を表示するための別のテンプレートとエンジンを選択するオプションがあります。これは通常必要ありません。検索フォームによって設定された設定をオーバーライドする必要がある場合にのみ使用してください。
2. ショートコード: 各テンプレートには一意のショートコードが用意されています。結果を表示するために、任意のページ、投稿、またはウィジェット領域にコピーして貼り付けます。
3. PHPコード: 提供されたPHPスニペットを使用して、検索結果をテーマファイルに直接、またはコードスニペットプラグイン経由で挿入します。
4. 埋め込みターム: ドロップダウンメニューから選択して、既存のページに結果テンプレートブロックを簡単に追加できます。または、ブロック専用の新しいページを作成することもできます。
テンプレート使用のヒント
- ウェブサイトのさまざまなセクションに複数のテンプレートを作成できます。たとえば、ブログ検索用のレイアウトと製品検索用の別のレイアウトです。
- また、単一のテンプレートを複数のページにわたって再利用することもできます。
- 各テンプレートは完全にカスタマイズ可能で、レイアウト、色、スタイル、コンテンツの表示を完全に制御できます。
