コレクションの設定方法
コレクション機能は、ウェブサイトに同じ種類のアイテムを複数表示したい場合に便利なツールです。同じ構造を持つサブページのテンプレートを作成できます。ブログ、求人情報、不動産情報、ディレクトリ、あるいはシンプルなニュースなどが、コレクション機能の代表的な例です。
この記事では、コレクションを作成して使用する方法について説明します。
ブログなどのコレクションは 4 つの部分で構成されます。
-
すべてのアイテムの構造を定義する コレクションフィールド (タイトル、名前、日付、公開/非公開フィルター、テキスト コンテンツなど) 。
-
コレクションアイテム は 、ブログ記事や求人情報などのそれぞれのコンテンツを含むアイテムと呼ばれます。
-
ウェブサイト上のプレビューを整理する コレクションリスト
-
個々のコレクションアイテムの統一されたデザインを整理する シングルページレイアウト
コレクションマネージャーでは、コレクションを管理できます。ここでは、コンテンツマネージャーなど、様々な機能があり、個々のアイテムやコンテンツを管理できます。
コレクション マネージャーにアクセスするには、 右上のヘッダー メニューで [その他] をクリックし、 [コレクション マネージャー] をクリックします。
ここでコレクションを選択できます。クリックすると、そのコレクションに対応するマネージャーが開きます。または、 「+」 から新しいコレクションを作成することもできます。
コレクションの作成を開始する前に、次の重要な注意事項を確認してください。
コレクションテンプレートからゼロから始める
Section titled “コレクションテンプレートからゼロから始める”ウェブサイトにコレクションを作成するには2つの方法があります。コレクションリストを最初から作成するか、コレクションテンプレートのいずれかを使用するかです。テンプレートを使用する場合、コレクションリストはウェブサイトに直接作成され、コレクションマネージャーのフィールドと構造、サンプルコンテンツも用意されています。
テンプレートを直接使用して開始する場合は、左側のコンテンツ サイドバーのコレクション カテゴリを開き、コレクションテンプレート セクションまでスクロールして、ドラッグ アンド ドロップを使用して、テンプレートの 1 つを Web サイトの目的の位置に挿入します。
次に、ここを読み進めて、個々の機能を確認してください。
機能に慣れるために、完成したコレクションを事前にご覧になりたい場合は、「Wanderlust」、「Pesk」、「Evergreen」、「Ashop」、「Opus」などのテンプレートをお勧めします。コレクションは既にページに組み込まれています。
最初のステップ: コレクションの作成
Section titled “最初のステップ: コレクションの作成”完全に新しいコレクションから始める場合は、次の手順に従うこともできます。
- ウェブサイトビルダーで、 右上のメニューにある 「その他」 をクリックします。ドロップダウンメニューが開きます。
- 次に、 「コレクション マネージャー」 をクリックします。
- コレクションのパネルが開きます。ここで、作成したすべてのコレクションの概要を確認できます。
- 「+ コレクションを追加」 を使用して 新しいコレクションを作成します。コレクションに適切な名前（例：「blog」）を付け、右側の保存アイコンをクリックします。
- ウェブサイト エディターによってコレクションが作成されます。
- コレクションを作成すると、コレクションマネージャーが開き、同じビューでフィールドの概要とコレクションのシングルページレイアウトが表示されます。デフォルトでは、必須フィールド 「Name」 と 「Slug」 が含まれています。
- さらにフィールドを追加できるようになりました。
- コンテンツの 管理アイコン の上に、Web サイト エディターの新しいタブが開き、ブログ投稿や不動産オファーなどのアイテムを作成できます。
- 「ページ」の下に、単一ページレイアウトも自動的に追加されるようになりました。
コレクションフィールド
Section titled “コレクションフィールド”データフィールドでは、各アイテムにどのような情報をどのような形式で入力するかを指定できます。これらのフィールドは、各アイテムに入力する「フォーム」を形成し、コレクションリストやシングルページレイアウト内の要素とリンクすることで、アイテムに含まれるデータを表示できます。
アイテムごとに、単一ページレイアウトと作成したフィールドから個別のページが自動的に作成されます。
デフォルトでは、コレクションに 2 つの必須フィールドが作成されます。
- Name はアイテムのタイトルです
- Slug はURLの一部を簡略化したもので、各アイテムを識別するために使用されます。スラッグは名前から自動的に生成されます。もちろんカスタマイズ可能ですが、コレクション内で同じスラッグを2回使用することはできませんのでご注意ください。
フィールドを追加するには、コレクションマネージャーで 「フィールドを追加」 をクリックするか、 コンテンツマネージャーのアイテムの概要で 「+」 をクリックします。すると、コレクションマネージャーにリダイレクトされます。
コレクション マネージャーでは、コレクションごとにフィールドを個別に作成および移動して、希望する順序に並べることができます。
「ブログ：フィールド」 セクションには、現在選択されている ブログ コレクションのフィールドが表示されます。コレクション名が 「情報」 であれば、このセクションの名前は 「情報：フィールド」 になります。これにより、正しいコレクションのフィールドを編集しているかどうかを素早く簡単に確認できます。
このセクションでは、既存のフィールドを編集できるだけでなく、 「フィールドを追加」 をクリックしてフィールドを追加することもできます。
新しいフィールドを定義するには、さまざまなフィールド タイプから選択できます。
- テキスト フィールドは 1 つの単語または 1 つの文に適しています。
- リッチテキスト は、フォーマットする必要がある長いテキストに適しています。
- リンク では、リンクを追加するオプションが提供されます。
- CMS を使用すると、個々の要素とセクション テンプレートまたはページ全体を統合できます。
- ファイル ではファイルや画像を表示できます
- チェックボックス を使用すると、「完了」と「未完了」の2つのステータスを選択できます。つまり、2つの状態を選択するのに最適です。例えば、チェックボックスを使用して、アイテムが「公開済み」かどうかを指定できます。チェックボックスがオンの場合は「公開済み」、オフの場合は「未公開」を意味します。また、コレクション一覧のフィルターとしても使用できます。
- 選択肢 を使用すると、複数のオプションを含むドロップダウン選択メニューを作成できます。たとえば、不動産リストのアイテムを、アパート、住宅、オフィス、商業などのさまざまなカテゴリに分類できます。
- 日付 では、記事が書かれた日付などを入力できます。
- 数 では、数字による並べ替えなどの並べ替えオプションが提供されます。
ラベル 入力フィールドにフィールド名を入力します。タイプを選択すると、別の入力フィールドの ヘルプテキスト が表示されます。補足として使用したい場合は、ここにフィールドの簡単な説明を入力してください。これにより、長期間使用した後でも、このフィールドの目的を明確に把握できます。
以下は、テンプレート「Evergreen」のサンプルブログを使用したさまざまなフィールドの例です。
コンテンツマネージャー: 新しいアイテムを作成する
Section titled “コンテンツマネージャー: 新しいアイテムを作成する”最初のアイテムを作成しましょう。コレクションマネージャー内のコンテンツマネージャーのアイコンをクリックしてください。コレクションマネージャーの左側にアイテムのリストが表示されます。
- 新しいアイテムを作成するには、 「アイテムを追加」 をクリックします。
オーバーレイが開き、アイテムにコンテンツを入力できるようになります。各アイテムには、コレクション用に作成したすべてのフィールドが表示され、SEO関連情報を入力することもできます。ここで新しいフィールドを追加することもできます。
- 変更が完了したらすぐに「保存」をクリックします。
次のステップでは、まず個々のアイテムがウェブサイト上でどのように表示されるかを決定することをお勧めします。これは、個々のページレイアウトによって決定されます。
次に、ウェブサイト上でコレクションをどこにどのように表示し、どのように並べ替えるかを決定します。これはコレクションリストで制御されます。
シングルページレイアウト:コレクションアイテムのデザイン
Section titled “シングルページレイアウト:コレクションアイテムのデザイン”シングルページレイアウトは、すべてのアイテムの統一されたデザインを定義します。ここでは、特定のコレクション内のすべてのアイテムのテンプレートを作成します。
このデザインはさまざまな場所から呼び出すことができます。
コレクションマネージャーより:
ページの概要:
シングルページレイアウトを呼び出し、ウェブサイトエディタで他のページと同じようにテンプレートを編集します。すべてのコレクションフィールドが利用可能です。
まずはヘッダーとフッターから始めましょう。もちろん、ここで対応する要素を参照することをお勧めします。
ヘッダーとフッターの間で、どのコレクションのどのコンテンツを表示するかを定義できるようになりました。
静的なままにしておくべきコンテンツを追加する場合は、要素にコレクションフィールドを割り当てず、「割り当てなし」に設定したままにしてください。コンテンツは静的のままです。
動的コンテンツ、つまり個々のコレクションアイテムのコンテンツの場合は、適切な要素を選択し、コレクションfにリンクします。
個々の要素にフィールドを割り当てたら、プレビューを使用して、この事前に作成されたレイアウトで各アイテムの内容がどのように表示されるかを確認できるようになります。
コレクション一覧: ウェブサイト上のコレクションの概要
Section titled “コレクション一覧: ウェブサイト上のコレクションの概要”コレクションリストは、ウェブサイト上のコレクションアイテムーの概要を表示します。ブログ、不動産アイテムー、求人情報などが表示されます。
左側の設定パネルには、並べ替えとフィルタリングのオプションがあります。
注意：表示できるのは1つのコレクションのみで、共通のコレクションのアイテムのみです。現在、2つのコレクション間のいわゆる相互参照はできません。そのため、どのコレクションにどのコンテンツを表示するかは慎重に検討してください。
ウェブサイト上の複数の場所にコンテンツを表示したり、異なる順序で並べ替えたりしたい場合は、リストを複製するか、対応するコレクションを表示する新しいリストを作成します。
コレクションの一覧には2つのオプションがあります。まだコレクションを作成していない場合は、ここで既存のコレクションを作成することができます。
すでにコレクションを作成している場合は、コレクションリストコンテナを使用することをお勧めします。コンテナは次のように挿入します。
- ウェブサイト エディターで、コレクションを表示するページに切り替えます。
- 次に、 左側のパネルの 「コレクション」 をクリックします。
- 次に、 コレクションリスト コンテナーを、コレクションを表示する Web サイトの場所にドラッグします。
- ウェブサイトエディタで、リンクするコレクションを選択するよう求められます。現在のコレクションを選択してください。
- これで、スタイルを調整し、さらにフィルターや設定を行うことができます。
- 次に、コレクションリストにどのコンテンツをどのデザインで表示するかを決定します。そのためには、画像要素、見出し2、テキスト要素など、さまざまな要素をコレクションリストに追加します。
- 個々の要素ごとに、コレクションのどのフィールドをここに表示するかを指定できます。それぞれのアイテムからコンテンツが自動的に生成されることがわかります。
コレクションテンプレート
Section titled “コレクションテンプレート”ウェブサイトエディターには、ウェブサイトにコレクションを直接挿入できる、既製のコレクションテンプレートがいくつか用意されています。コレクションは、既製のフィールドとサンプルコンテンツを使用してバックグラウンドで作成されます。
- ウェブサイト エディターで、コレクションを表示するページに切り替えます。
- 次に、 左側のパネルの 「コレクション」 をクリックします。
- ここには、ブログ、物件リスト、求人広告、チーム概要などのための コレクションテンプレート セクションがあります。
- 希望するテンプレートを、コレクションを表示したいウェブサイトの場所にドラッグ アンド ドロップします。
- これで、単一ページのレイアウト、コレクション フィールドをカスタマイズし、サンプル コンテンツを自分のコンテンツに置き換えることができます。
コレクションのコンテンツをインポートする
Section titled “コレクションのコンテンツをインポートする”コレクションのコンテンツをインポートすることができます。これを行うには、新しいコレクションを作成し、コレクションにインポートするデータフィールドを設定します。
これで、コンテンツ マネージャーの省略記号アイコン (3 つのドット) から [インポート] をクリックし、CSV または JSON ファイルから既存のコレクションをアップロードできるようになりました。
アップロード後、左側にインポート ファイルからドラッグされたすべての見出しまたはフィールド名が表示され、右側にはそれぞれ、新しく作成されたコレクションにコレクション フィールドを割り当てるために使用できるドロップダウンが表示されます。
割り当てに満足したら、「インポート」をクリックし、インポートが正常に完了するまで待ちます。
経験がない場合は、まず 2 ～ 3 個のアイテムを含むテスト ページでテスト インポートを実行することをお勧めします。
インポートできるのはテキストのみです。画像や動画は個々のアイテムに手動で追加する必要があります。