デフォルトのフラグメントリファレンス
Liferay はすぐに使用できるフラグメントを多数提供しているため、すぐにソリューションの構築を開始できます。 利用可能なフラグメントを表示するには、コンテンツ ページまたはページ テンプレートの編集を開始します。 編集中に、編集サイドバー メニューで フラグメントとウィジェット タブ (
) を開きます。
フラグメントは、次のセットに編成されています。
使用可能な構成オプションは、フラグメントおよびフラグメントのサブ要素によって異なります。 詳細については、 フラグメントの構成 を参照してください。
レイアウト要素
Liferay 7.3以降の場合
レイアウト要素は、ページおよびテンプレートのレイアウトを設計するためのドロップ ゾーンを定義します。 デフォルトでは、Liferay には 2 つのレイアウト要素が含まれています: コンテナー と グリッド。
| フラグメント | 説明 |
|---|---|
| コンテナ（以前は パネル） | 構成可能なドロップゾーンを追加します。 |
| グリッド（以前は 行） | 複数のドロップゾーンモジュールを追加します。 これらのモジュールは、垂直または水平に構成および配置できます。 |
基本コンポーネント
これらは、ページに基本的な機能を追加するシンプルなデザイン要素です。 例としては、ボタン、見出し、タブなどがあります。 これらのコンポーネントを使用すると、ページを少しずつ構築できます。 DXP には次の基本コンポーネントが含まれています。
| フラグメント | 説明 |
|---|---|
| ボタン | リンクまたはアクション タイプになることができる リンク要素 を追加します。 プライマリ、セカンダリ、リンク、アウトライン プライマリ、アウトライン セカンダリの 5 つのボタン スタイルを適用できます。 |
| カード | 表示カードとして配置された 画像、 リッチ テキスト、および リンク 要素を追加します。 |
| 日付 | カスタム日付フィールドにマップできるフィールドを追加します。 |
| ドロップダウン 7.4+ | シンプルなテキスト要素 とドロップ ゾーンを追加します。 他のフラグメントやウィジェットをドロップゾーンにドラッグ アンド ドロップして、高度なドロップダウン メニューを作成できます。 |
| 外部ビデオ 7.4+ | ページまたはテンプレートに外部ビデオを埋め込みます。 対応するビデオソースは、YouTube、Facebook、Twitch、Vimeo、およびドキュメントとメディアに保存されているビデオです。 |
| HTML | 編集可能な HTML 要素を追加します。 要素をダブルクリックすると、HTML構文を使用してコンテンツを編集できるモーダルウィンドウが開きます。 |
| 見出し | H1〜H6の見出しレベルを使用するように構成できる 単純なテキスト要素 を追加します。 |
| 画像 | 設定可能な 画像要素を追加します。 構成するときは、画像の元のサイズを使用するか、コンテキストに合わせて調整するかを決定します。 |
| パラグラフ | リッチテキスト要素を追加します。 編集するときは、フラグメントのテキストを強調表示して、追加のフォーマットオプションにアクセスします。 |
| セパレーター（区切り文字) | ページ要素間に水平線を追加します。 その間隔と色を構成できます。 |
| スライダー | スライドにグループ化された複数の 画像 と リッチ テキスト オーバーレイを追加します。 ユーザーは各スライドを手動で切り替えることができます。 |
| ソーシャル | Facebook、Twitter、LinkedIn のアイコンが付いた 画像要素 を追加します。各プラットフォームのページにリンクできます。 |
| スペーサー | ページ上のフラグメント間に水平方向の空白を追加します。 その高さを設定できます。 |
| タブ | シンプルなテキスト要素 と、ウィジェットやその他のフラグメントを追加するための個別のドロップ ゾーンを含む複数のタブを追加します。 |
| ビデオURL（以前はビデオフラグメント） | YouTube またはドキュメントとメディアからのビデオ をページまたはテンプレートに埋め込みます。 ビデオを自動再生、ループ、ミュート、またはコントロールを非表示に設定できます。 エンドユーザーからビデオコントロールを非表示にすることもできます。 |
テキスト フィールドを持つ Web コンテンツ構造 を使用する場合、フィールド タイプを 複数行 に設定すると、Web コンテンツ エディターで複数行の入力が可能になります。 ただし、改行 (\n) は自動的にレンダリングされません。 その結果、その構造を使用している記事のテキスト フィールドを段落フラグメントにマップすると、1 行として表示されます。 書式設定を保持し、改行を維持するには、リッチ テキスト フィールドを使用します。
フォームコンポーネント
フォーム コンポーネント フラグメントを使用して、コンテンツ ページにフォームを構築します。 これらのフラグメントはカスタム オブジェクトのみをサポートします。 これらを有効にしてアクセスするには、公開されたオブジェクトが少なくとも 1 つ必要です。 詳細については、 フォーム フラグメントの使用 を参照してください。
| フラグメント | 説明 |
|---|---|
| フォームコンテナー | コンテンツ ページにフォームを構築するためのコンテナーを追加します。 追加したら、コンテナーをカスタム オブジェクトにマップする必要があります。 コンテナーは、オブジェクト内の各フィールドのフォーム フラグメントを自動的に生成します。 コンテナからフラグメントを追加または削除したり、フォーム送信のカスタム成功メッセージを設定したりできます。 マップされたフォーム コンテナーには、他のフォーム コンポーネントのみを配置できます。 |
| キャプチャ | フォーム コンテナーに CAPTCHA 確認を追加します。 フォーム コンテナーを追加すると、送信時に人間による検証が必要になります。 |
| チェックボックス | ブール フィールドにマップできるチェック ボックスをフォーム コンテナーに追加します。 |
| 日付 | カスタム日付フィールドにマップできるフィールドを追加します。 |
| ファイルアップロード | 添付ファイルフィールドにマップできるファイルアップロードボタンを追加します。 マップされた添付ファイルフィールドによって、ファイルのアップロード方法が決まります。 デフォルトでは、このフラグメントにはサポートされているファイル拡張子が表示されます。 |
| 複数選択のリスト | 複数選択の選択リストにマップできるフィールドを追加します。 |
| 数値入力 | カスタム数値フィールド (整数、長整数、小数、精度小数) にマップできるフィールドを追加します。 プレースホルダー値とヘルプテキストを設定できます。 |
| リッチテキスト入力 | リッチ テキスト フィールドにマップできるフィールドを追加します。 |
| プルダウン | カスタム選択リストおよび関係フィールドにマップできるドロップダウン メニューを追加します。 マップされたフィールドに 10 を超えるオプションが含まれている場合、ユーザーはドロップダウン メニューでクエリ オプションを検索できます。 |
| 送信ボタン | フォーム入力を送信するためのボタンを追加します。 すべてのフォーム コンテナーには送信ボタンが含まれている必要があります。 |
| テキスト入力 | テキスト フィールド (テキスト、長いテキストなど) にマップできるフィールドを追加します。 |
| テキスト領域 | 長いテキスト フィールドにマップできるフィールドを追加します。 |
| タグ | 現在のサイトまたはグローバル サイトからオブジェクト エントリにタグを追加するためのフィールドを追加します。 |
| カテゴリ | 現在のサイトまたはグローバル サイトからオブジェクト エントリにカテゴリを追加するためのフィールドを追加します。 |
コンテンツの表示
Liferay 7.3以降の場合
コンテンツ表示フラグメントを使用して、サイト コンテンツを個別に、またはコレクションの一部として表示します。 ページコンテンツを評価またはフラグ付けするためのページ要素を追加することもできます。 DXP には、次のコンテンツ表示フラグメントが含まれています。
| フラグメント | 説明 |
|---|---|
| コレクション表示 | 手動で定義されたコレクションと動的に定義されたコレクション、およびコレクション プロバイダーによって定義されたコレクションを表示します。 コレクションをグリッドで表示するか、リスト テンプレート (境界線付き、箇条書き、インライン、番号付き、スタイルなし) で表示するかを設定できます。 詳細については、 コレクションの表示 を参照してください。 |
| コンテンツの表示 | ドキュメントとメディア、Web コンテンツ、ブログ、またはカテゴリからの単一のコンテンツ項目を表示します。 使用可能な構成オプションは、選択したコンテンツの種類によって異なります。 |
| 適用されたフィルター（7.4以降で利用可能） | コレクション表示に適用されたフィルターを表示および管理するための要素を追加します。 |
| コンテンツのフラグ | コンテンツ項目にフラグを立てるための要素を追加します。 |
| コレクションフィルター（7.4以降で利用可能） | 語彙またはカテゴリを使用してコレクションの表示をフィルタリングするための要素を追加します。 |
| コンテンツの評価 | コンテンツ項目を評価するための要素を追加します。 |
!!! note
Collection Filter fragments used in Collection Display fragments only work if mapped to object collection providers or blueprint collection providers.
アカウント
Liferay DXP 7.4 U72+/GA72+
アカウント セレクターを使用すると、製品を閲覧したり注文を作成したりするときに、アカウントを簡単に切り替えることができます。 詳細については、 アカウント セレクター フラグメント セットの使用 を参照してください。
カート
ライフレイ DXP 7.4 U69+/GA69+
ミニ カート フラグメントを使用して、カートの詳細な概要を取得します。 これを使用すると、製品の数量を調整したり、アイテムを削除したり、チェックアウト プロセスを開始したり、製品を簡単に検索してカートに追加したりできます。 詳細については、 ミニ カート フラグメントの使用 を参照してください。
主なコンテンツ
注目コンテンツフラグメントセットは、Liferay DXP 2024.Q4/Portal GA129 の時点で 非推奨 となっており、将来のリリースで削除される予定です。
注目のコンテンツ フラグメントは、複数のコンポーネントで構成された複雑なページ要素です。 フラグメントのレイアウトをプレビューするには、フラグメントとウィジェット パネルで カード ビュー (
) に切り替えます。 Liferay には、次の注目のコンテンツフラグメントが含まれています。
Liferay DXP/Portal 7.3 では、各フラグメントの 情報 アイコン（
）にマウスを移動することで、レイアウトをプレビューできます。
バナー
バナー フラグメントを使用して、コンテンツ ページにテキストとリンク要素を追加し、CTA (Call to Action) バナーを作成します。 DXPには、次のレイアウトが含まれています。
機能
機能フラグメントを使用して、主要な機能を宣伝するためのテキスト、画像、リンク要素をコンテンツ ページに追加します。 Liferay は次のレイアウトを提供します。
ハイライト
ハイライト フラグメントを使用して、コンテンツ ページに画像、テキスト、リンク要素を追加し、ハイライト表示します。 Liferay は次のレイアウトを提供します。
フッタ
Liferay DXP 7.3+
フッター フラグメントを使用して、 マスター ページ テンプレートにカスタム フッターを追加します。 各フッターには、ナビゲーションメニュー、サインインリンク、画像要素、著作権テキストが含まれています。 Liferay は、フッターフラグメントに次のレイアウトを提供します。
ナビゲーションバー
Liferay DXP 7.3+
ナビゲーション バー フラグメントを使用して、 マスター ページ テンプレートにカスタム ヘッダーを追加します。 各ナビゲーションバーには、ナビゲーションメニュー、サインインリンク、およびロゴの画像要素が含まれています。 Liferay は、ナビゲーション バー フラグメントに次のレイアウトを提供します。
メニュー表示
Liferay DXP 7.4+
メニュー表示フラグメントを使用すると、コンテンツ ページにメニューを追加できます。 デプロイされると、定義済みの ナビゲーション メニューから選択できるようになります。 サイト ナビゲーションのメニュー表示フラグメントを構成する方法の詳細については、 メニュー表示の構成の「メニュー表示ウィジェットの構成」を参照してください。
ナビゲーション メニュー セレクター構成を使用して、特定のマークアップと必要な動作を持つカスタム メニュー表示フラグメントを作成することもできます。