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

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

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フラグメントのコードを編集する必要があります。