フラグメントエディターの使用

Documentation Menu
戻る

フラグメントエディターの使用

Liferay DXP には、コンテンツページフラグメントを作成するための組み込みエディターが含まれています。 エディターにアクセスするには、 サイトメニュー(Site Menu) を開き、 ［デザイン］ → ［フラグメント］ に移動します。 ここから、フラグメントおよびフラグメントセットを表示、管理、および作成できます。

note

Liferay DXP 7.4以降の場合、フラグメントコレクションはLiferay UIではフラグメントセットと呼ばれます。

フラグメントセットの作成

新しいフラグメントを作成する前に、最初にそれらを配置する新しいフラグメントセットを作成する必要があります。

  1. サイトメニュー を開き、 ［デザイン］ → ［フラグメント］ に移動します。

    note

    Liferay DXP 7.1 および 7.2 では、プロダクトメニュー を開き、サイト → サイトビルダー → ページフラグメント に移動します。

  2. フラグメントセットの横にある プラス ボタン（Add Button）をクリックします。

    プラスボタンをクリックして、フラグメントセットにネストします。

  3. 新しいセットの 名前 と 説明 を入力します。

    tip

    機能ごと、またはチームや部門ごとにフラグメントをグループ化するセットを作成します。

  4. ［Save］ をクリックします。

保存したら、フラグメントをセットに追加できます。

新しいフラグメントの作成

フラグメントを作成するには、次の手順に従います。

  1. 目的のフラグメントセットに移動し、 追加 ボタン（Add Button）をクリックして、新しいフラグメントを作成します。

    目的のフラグメントセットに移動し、追加ボタンをクリックします。

    note

    Liferay DXP 7.3 より前では、フラグメントはセクションまたはコンポーネントのいずれかでした。 Liferay DXP 7.3以降では、ページフラグメントはすべてコンポーネントです。

  2. フラグメントの 名前 を入力し、 ［保存］ をクリックします。

    新しいフラグメントの名前を入力します。

  3. ［コード］ タブで、CSS、HTML、および JavaScriptフィールドを使用してフラグメントのリソースを追加します。 ここでは、さまざまなデバイスコンテキストでのフラグメントの外観のライブプレビューを表示することもできます。

    ここでは、HTML編集のショートカットを紹介します。

    • 開角括弧 (<) を入力すると、標準の HTML タグと Liferay の フラグメント固有のタグにアクセスすることができます。

    • 要素属性を data で開始し、Liferayの 編集可能なフラグメント属性 にアクセスします。

    Liferayの編集可能なフラグメント属性は、エディターで確認できます。

    以下の例では、編集可能なテキストを含むカードコンポーネントを追加しています。

    <div class="marketing-card-fragment-01">
  <div class="card">
    <lfr-editable id="01-card-image" type="image">
      <img src="https://cdn.dribbble.com/users/1408464/screenshots/9323535/media/a5b9a76256562e878ecc6dc5cd0fadf0.png" class="card-img-top" alt="2020 - Try New Things">
    </lfr-editable>
    <div class="card-body">
      <lfr-editable id="02-card-title" type="rich-text">
        <h5 class="card-title">Editable Card title</h5>
      </lfr-editable>
      <lfr-editable id="03-card-text" type="rich-text">
        <p class="card-text">Here is some editable text.</p>
      </lfr-editable>
      <lfr-editable id="04-card-link" type="link">
        <a href="#" class="btn btn-primary">Editable link</a>
      </lfr-editable>
    </div>
  </div>
</div>

    .marketing-card-fragment-01 .card img {
  max-width: 100%;
}

    Add CSS, HTML, and Javascript resources to the Fragment and see a live preview.

  4. 設定」タブで、 JSON フィールドを使用して、 設定オプション をページフラグメントに追加します。

    ページ フラグメントに構成オプションを追加します。

    tip

    JSONのfieldsオブジェクトと一緒に）どのフィールドセットにもconfigurationRole値を追加して、関連するフィールドがどのタブに表示されるかを指定することができます。 値を styles に設定するとスタイルタブにフィールドが表示され、advanced に設定すると詳細タブに表示されます（Liferay DXP バージョン U23+ または GA23+ でのみ使用可能）。 configurationRole`が設定されていない場合、デフォルトでGeneralタブに表示されます。

  5. ［Publish］ をクリックして、 コンテントページ で使用できるようにします。

    フラグメントはコンテンツ ページで使用できます。

フラグメントの作成中、変更内容はフラグメントが公開されるまで自動的にドラフトとして保存されます。 セットに追加すると、フラグメントエディターでいつでもフラグメントをコピー、エクスポート、編集、および削除できます。 ページ フラグメントで使用可能なアクションの詳細は、 フラグメントの管理 を参照してください。

note

Liferay DXP 7.2 SP1以降および Liferay Portal 7.2 GA2以降では、グローバル サイトでページ フラグメントを作成して、すべてのサイトで利用できるようにすることができます。 これらのバージョンの初期リリースでこの機能を公開するには、 com.liferay.fragment.web.internal.configuration.FragmentGlobalPanelAppConfiguration.config という名前の .config ファイルを作成し、 enabled=B "true" というプロパティを追加する必要があります。 そして、Liferay DXPインスタンスの osgi/configs フォルダにコピーしてください。 グローバル ページ フラグメントは子サイトに継承され、グローバル サイトからのみ編集できます。 グローバル ページ フラグメントがグローバル サイトから参照するすべてのリソースは、ページ フラグメントを利用するサイトにコピーされます。

追加情報

Not finding what you're looking for?

Pardon our dust as we revamp and transition our product documentation to this site. If something seems missing, please check Liferay Help Center documentation for Liferay DXP 7.2 and previous versions.

Try Liferay's Help Center