フラグメント内の要素の順序を設定する

対応可能：Liferay 7.4以降

スライダー または タブ フラグメントは、通常、情報の異なる領域を表示するために使用されるものです。 スライダーは、この情報をスライドのカルーセルのように表示します。 タブは複数あり、それぞれ異なる情報が表示されます。

ページまたはテンプレートでスライダーまたはタブフラグメントを構成する場合、それらのサブ要素はサイドバーメニューの 選択 パネル（）に一覧表示されます。 Liferay DXP 7.4以前では、これらの要素は順番に表示されるものではありませんでした。 そのため、特に多くの要素を持つフラグメントでは、スライダーやタブの要素がどのようにグループ化されているかを識別することが困難でした。

Liferay DXP 7.4から、スライダーとタブフラグメントはその要素を順番に表示するようになりました。 さらに、Liferay DXP 7.4 には新しい data-lfr-priority HTML 属性があり、フラグメント内の要素の順序を設定することができます。 data-lfr-priority の値が小さい要素は、HTMLコード内の順序とは無関係に、セレクションリスト内で優先されます。

スライダーフラグメントの要素の順序をカスタマイズする

1. ［サイト管理］ → ［デザイン］ → ［フラグメント］ へ移動します。

2. ［フラグメントセット］ で、カスタマイズしたいフラグメントのあるセットをクリックします。

3. スライダーまたはタブフラグメントの アクション ボタンをクリックして [編集] を選択して ［フラグメントエディター］を開いてください。

   

4. HTMLコードエリアでは、スライダーフラグメントのコードを編集することができます。 data-lfr-priority 属性を編集可能領域またはドロップゾーン領域に追加します。 この例では、この順序を使用するようにカルーセル要素を設定します。

   1. First Slide Title, with data-lfr-priority="1"
   2. First Slide Subtitle, with data-lfr-priority="2"
   3. First Responsive Image, with data-lfr-priority="3"

       <div class="carousel-inner text-break" id="${fragmentEntryLinkNamespace}-carouselInner" role="group">
           <div class="carousel-item active">
               <img
                   alt="First Responsive Image"
                   class="w-100"
                   data-lfr-editable-id="01-01-image"
                   data-lfr-editable-type="image"
                   data-lfr-priority="3"
                   src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAJCAYAAAA7KqwyAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAkSURBVHgB7cxBEQAACAIwtH8Pzw52kxD8OBZgNXsPQUOUwCIgAz0DHTyygaAAAAAASUVORK5CYII="
               />
   
               <div class="carousel-caption d-none d-md-block">
                   <h2
                       data-lfr-editable-id="01-02-title"
                       data-lfr-editable-type="rich-text"
                       data-lfr-priority="1"
                   >
                       First Slide Title
                   </h2>
   
                   <p
                       data-lfr-editable-id="01-03-subtitle"
                       data-lfr-editable-type="rich-text"
                       data-lfr-priority="2"
                   >
                       First Slide Subtitle
                   </p>
               </div>
           </div>
   

   コンテントページエディタで ［Selection］( ボタンをクリックすると、このような結果になります。

   

   note

   JavaScript、CSS、設定など、フラグメントの他の部分のコードを編集する必要はありません。

コンテントページエディタで要素の新しい並び順を確認する

1. ［サイト管理］ → ［サイトビルダー］ → ［Pages］ に移動します。

2. スライダーフラグメントのサンプルを追加したいコンテントページを編集します（または 新規ページの追加）。

3. コンテントページのサイドバーから、 ［フラグメントとウィジェット］()をクリックします。

4. フラグメントの欄で、表示したいスライダーやタブのフラグメントを探します。

5. フラグメントを編集エリアにドラッグ＆ドロップします。

6. コンテンツページサイドバーで、 Selection をクリックします() ボタンを押すと、フラグメント に含まれる要素のリストが表示されます。

   note

   Liferay DXP 7.4 より前のバージョンからインポートしたスライダーやタブフラグメントは、コンテントページエディタのサイドバーに順番に表示されますが、 data-lfr-priority HTML属性が含まれません。 この属性を含めるには、HTML フラグメントのコードを編集する必要があります。

関連情報

• フラグメントツールキットの使用
• フラグメントエディターの使用
• フラグメントの開発