メインコンテンツにスキップ
検索ページ

キーワードでCMSアイテムを検索し、結果を表示するページを作成できます。

Saika avatar
対応者:Saika
1か月以上前に更新

対象プロジェクトプラン:全プラン


検索ページでできること

検索ページとCMS(コンテンツ管理システム)機能を組み合わせることで、サイト内検索機能を実装できます。訪問者がキーワードを入力すると、CMSアイテム(動的リスト)から該当するものを検索し、結果を表示します。

検索機能を使う様子。

注意:現在は一単語での検索のみに対応しています。「Studio デザイン」のような複数キーワードでの検索(AND検索)には対応していません。

想定される利用シーン

  • ブログサイトで記事を探す

  • お知らせ記事から関連記事を探す

  • 企業サイトで特定のサービスを見つける

検索ページに必要な要素と役割

検索機能を利用するには、次の2つが必要です。検索ページを新規追加するとこれらが自動で配置されます。

1. 検索フォーム(検索キーワードの入力欄)

  • 検索キーワードを入力するボックスです。

  • 検索ページ以外にも配置でき、設定パネルから遷移先の検索ページを選択できます。

スクリーンショット:検索フォームを配置する様子。

2. 動的(CMS)リスト(検索対象のリスト)

  • 検索ページに配置する検索結果を表示するリストです。

スクリーンショット:検索結果を表示する動的リストを配置する様子。

注意:下記データが検索対象です。

  • 記事タイプモデル :本文とタイトル

  • 記事タイプ以外のモデル:タイトルのみ

プロパティ内のテキストデータ、コレクション内アイテムは検索対象外となります。

作成手順

1. 検索(Search)フォームの配置

検索フォームは検索ページ以外のページにも配置でき、設定パネルから遷移先となる検索ページを選択します。

スクリーンショット:検索フォームを配置する様子。

2. 動的(CMS)リストの配置・設定

動的(CMS)リストでは、検索キーワードでアイテムを絞り込むために次の設定が必要です。

  • フィルターで「検索ワード」を選択

  • 検索文字列で「検索ワード」のプロパティを選択

リストのデザインに加え、検索結果が0件の場合に表示するデザインと「もっと見るボタン」のデザイン調整が可能です。詳しくは、動的リストをご覧ください。

スクリーンショット:検索フォームを配置する様子。

3. 動作確認

検索結果は、エディタ、ライブプレビュー、公開サイトで確認できます。

エディタで確認

検索ページの画面左上にある「検索ワードでプレビュー」欄に、検索キーワードを入力して確認します。エディタ上での確認では、「下書き」「公開予約中」を含むすべてアイテムが表示されます。

スクリーンショット:エディタで動作確認する様子。

ライブプレビューで確認

ライブプレビューを使って、検索フォームにキーワードを入力して動作を確認します。ライブプレビューでの確認でも、「下書き」「公開予約中」を含むすべてアイテムが表示されます。

公開サイトで確認

サイトを公開・更新し、実際に入力して確認できます。公開サイトでは、公開中のアイテムのみ検索・表示されます。


公開サイトで検索結果が表示されないなどあれば、Studioへログインの上、エディター右下の「?」をクリックし、チャットサポートへお問い合わせください。

こちらの回答で解決しましたか?