ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。

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

Liferay DXP 7.4+

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

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

Liferay DXP 7.4 以降では、フラグメント内の要素の順序が順に表示されます。

Liferay DXP 7.4 以降、スライダーとタブのフラグメントは要素を順番に表示されます。さらに、Liferay DXP 7.4 には、フラグメント内の要素の順序を設定するための新しい data-lfr-priority HTML 属性が含まれています。 data-lfr-priority 値が低い要素は、HTML コード内の順序に関係なく、選択リスト内で優先されます。

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

サイト管理 → デザイン → フラグメントに移動します。
フラグメントセットの下で、カスタマイズするフラグメントを含むセットをクリックします。
スライダーまたはタブフラグメントの アクション () ボタンをクリックし、編集を選択してフラグメントエディターを開きます。

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

最初のスライドのタイトル、 data-lfr-priority="1"
最初のスライドのサブタイトル、 data-lfr-priority="2"
最初のレスポンシブ画像、 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>
</div>

これは、選択 () をクリックしたときにコンテンツページエディターに表示される結果です。

スライダーフラグメント内の要素は、HTML コードで定義した順序を使用します。

注

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

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

サイト管理 → サイトビルダー → ページに移動します。
スライダーフラグメントサンプルを追加するコンテンツページを編集します (または新しいページを追加します)。
コンテンツページのサイドバーから、 フラグメントとウィジェット () をクリックします。
フラグメント列の下で、表示するスライダーまたはタブフラグメントを見つけます。
フラグメントを編集領域にドラッグアンドドロップします。
コンテンツページのサイドバーで、選択 () ボタンをクリックして、フラグメント内の要素のリストを表示します。

注

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