グリッドを作成します。

概要

グリッド テーマ、定義アイテム、設定アイテムの作成方法について説明します。

SXA にはデフォルトで、4 つのグリッド システムが付属しています。ブートストラップ (3 または 4)、ファンデーション、または Grid960 グリッド システムを使用したくない場合は、独自のカスタム CSS フレームワークを追加できます。

グリッド システムは Sitecore の関数として保存され、次のものが含まれます。

  • グリッド テーマ – すべてのグリッド クラスを含む css ファイルが含まれます。

  • グリッド定義アイテム – すべてのグリッド システム固有アイテム (デバイスとそのクラス) が含まれます。

  • グリッド設定アイテム – [新しいサイトを作成] ウィザードのドロップダウン リストにグリッドを含めるためのスキャフォールディング アイテムです。

    Sitecore に保存されたグリッド。

カスタム グリッドには、グリッド テーマが割り当てられている必要があります。SXA には、スクリプトとスタイルを含むベース グリッド テーマが付属しています。このベース テーマをカスタム グリッド テーマに使用できます。

グリッド テーマを作成するには:

  1. sitecore/メディアライブラリ/機能に移動し、グリッド用の新しいフォルダーを作成します。デフォルトのグリッドはエクスペリエンス アクセラレーター フォルダー (sitecore/メディア ライブラリ/機能/エクスペリエンス アクセラレータ) に保存されます。SXA は標準の SXA セクションを SXA 更新で上書きするため、グリッド用に別個のフォルダーを作成することをお勧めします。

  2. 新しいフォルダーを右クリックして、[テンプレートから挿入] をクリックします。

  3. [テンプレートから挿入] ダイアログ ボックスで、sitecore/テンプレート/Foundation/エクスペリエンス アクセラレーター/グリッド/ に移動し、[グリッド テーマ] をクリックします。

  4. 新しいグリッド テーマを右クリックし、[挿入]、[スタイル] の順にクリックします。ここにすべてのスタイルをアップロードします。

カスタム テーマには、すべてのグリッド システム固有アイテム (デバイスとそのクラス) を含むグリッド定義アイテムが必要です。

グリッド定義アイテムを作成するには:

  1. sitecore/システム/設定/機能/に移動し、グリッド用の新しいフォルダーを作成します。デフォルトのグリッドはエクスペリエンス アクセラレーター フォルダー (sitecore/メディア ライブラリ/機能/エクスペリエンス アクセラレーター) に保存されます。SXA は標準の SXA セクションを SXA 更新で上書きするため、グリッド用に別個のフォルダーを作成することをお勧めします。

  2. 新しいフォルダーを右クリックして、[テンプレートから挿入] をクリックします。

  3. [テンプレートから挿入] ダイアログ ボックスで、sitecore/テンプレート/Foundation/エクスペリエンス アクセラレーター/グリッド/ に移動し、[グリッド定義] をクリックします。

  4. 次のフィールドを入力します。

    • [名前] - サイト作成ウィザードに表示するグリッド システムの名前。

    • [レンダリング パラメーター フィールド タイプ] - グリッド パラメーターがレンダリングされる方法を指定します。カスタマイズしたくない場合は、デフォルトのフィールド レンダラーを使用します: Sitecore.XA.Foundation.Grid.Fields.FieldRenderers.GridRenderingParametersFieldRenderer, Sitecore.XA.Foundation.Grid

    • [デフォルト コンポーネント レイアウト] - ページにドラッグするレンダリングのデフォルトの列サイズを設定します。

    • [グリッド テーマ] - グリッドに使用されるテーマへのリンク。

    • [グリッド フィールド パーサー タイプ] - グリッド フィールドを解析するパーサー タイプを指定します。カスタマイズが必要ない場合は、デフォルトを使用します: Sitecore.XA.Foundation.Grid.Parser.GridFieldParser,Sitecore.XA.Foundation.Grid

    • [グリッド本文ビュー パス] - ページ本文のレイアウトを定義する cshtml ファイルへのパス。ヘッダー、メイン、フッターなど、必要なすべてのプレースホルダーを含める必要があります。

サイト作成でウィザードグリッド オプションの 1 つとして新しいグリッドを追加するには、グリッド設定を追加する必要があります。

グリッド設定を追加するには:

  1. 新しいグリッドを右クリックして、[テンプレートから挿入] をクリックします。

  2. [テンプレートから挿入] ダイアログ ボックスで、sitecore/テンプレート/Foundation/エクスペリエンス アクセラレーター/Scaffolding/ルートに移動し、[グリッド設定] をクリックします。

  3. 次のフィールドを入力します。

    • [名前] - サイト作成ウィザードに表示するグリッド システムの名前。

    • [依存関係] - モジュールをインストールする順序を指定します。

    • [グリッド定義] - グリッド定義アイテムを参照します。たとえば、この例のカスタム グリッドの場合は、設定/機能/<My custom grid>/<My custom grid definition> になります。

  4. これで、サイトの作成時にカスタム グリッドを選択できるようになりました。