Documentation

フラグメント固有のタグと属性のリファレンス

標準の HTML、CSS、JavaScript に加えて、Liferay 固有のタグと、Liferay Portal 7.3 GA3 および Liferay DXP 7.3 以降では属性を使用して、編集可能なセクションを作成したり、フラグメントにウィジェットを埋め込むことができます。 編集可能な要素は公開前に変更できます。つまり、フォーマットは同じでありながら、特定のコンテキストに適応可能な要素を含む、単純で再利用可能なフラグメントを作成できます。

ページフラグメントは、次の機能を追加するこれらのタイプの liferay 固有のタグと属性にアクセスできます。

注釈

タグの名前を入力し始めると、HTML editorは、編集可能な要素や埋め込み可能なウィジェットのような lfr タグの自動補完機能を提供します。

ここで提供するテキストまたは画像は、フィールドのデフォルト値です。 ページの最終バージョンでそれらを表示したり、ページを公開する前にフィラーテキストを置き換えることができます。

これらすべてが連携して、サイトを構築するための動的で再利用可能な要素を作成するのに役立ちます。 たとえば、製品の説明を提供するために画像とリンクを含む小さなテキスト ボックスが必要な場合、編集可能なフィラー テキスト、編集可能な画像用のスペース、適切なフォーマット、および編集可能なリンクを含むフラグメントを作成できます。 その後、フラグメントを複数のページに追加し、説明する必要がある各製品の画像、テキスト、およびリンクを定義できます。

警告

編集可能な要素の ID は一意である必要があります。 ページ フラグメントがページに追加された後は、ID を変更しないでください。 変更後に編集可能なフラグメントの ID を変更すると、変更が失われる可能性があります。

ウィジェットを含めることで、フラグメントをさらに動的にすることができます。 現在、ウィジェットの埋め込み可能なタイプはポートレットのみですが、他のオプションも計画されています。

フラグメント エディタは、Liferay フラグメント固有のタグのオートコンプリートを提供します。

このリファレンスには、使用可能な編集可能なタグと属性が、フラグメントでそれらを使用する方法の例とともにリストされています。

注釈

Liferay Portal 7.3 GA3 および Liferay DXP 7.3 以降は、編集可能な要素をlfr-editableタグでラップするのではなく、data-lfr-editable*属性を使用して要素を編集可能として定義できます。 古いタグは下位互換性のために引き続き機能しますが、Portal 7.3 GA3 以降または Liferay DXP 7.3 を実行している場合は、より記述しやすい新しいデータ属性を使用することをお勧めします。

テキストを編集可能にする

image 要素に data-lfr-editable-type="text" 属性を含めることで、フラグメント テキストを編集可能にできます。 例を以下に示します。 data-lfr-editable-id は一意の ID である必要があります。

<p data-lfr-editable-id="text1" data-lfr-editable-type="text">
  Placeholder
</p>

注釈

すべてのブロック要素とインライン要素が編集可能なテキストに対応しています。

Liferay Portal 7.3 GA2 以下では、以下の構文を使用します。 要素を適切にレンダリングするには、一意の ID が必要です。

<lfr-editable id="unique-id" type="text">
   This is editable text!
</lfr-editable>

テキスト スタイルやカラー スタイルなどの書式設定オプションが必要な場合は、rich-textを使用します。

<p data-lfr-editable-id="text1" data-lfr-editable-type="rich-text">
  Placeholder
</p>

注釈

すべてのブロック要素タグは、編集可能なリッチ テキストに対応しています。

Liferay Portal 7.3 GA2 以下では、以下の構文を使用します。

<lfr-editable id="unique-id" type="rich-text">
   This is editable text that I can make bold or italic!
</lfr-editable>

注釈

HTML 要素内のテキストを編集可能にしたい場合は、rich-text タイプを使用する必要があります。 textタイプは、レンダリング前にテキストから HTML フォーマットを取り除きます。

画像を編集可能にする

画像はテキストと同じ data-lfr-editable-type 属性を使用しますが、 image タイプを使用すると、次のようになります。

<img
  src="placeholder.jpg"
  alt="Placeholder"
  data-lfr-editable-id="img1"
  data-lfr-editable-type="image"
>

Liferay Portal 7.3 GA2 以下では、以下の構文を使用します。

<lfr-editable id="unique-id" type="image">
   <img src="...">
</lfr-editable>

フラグメントにタイプ image を含む lfr-editable タグを追加した後、そのフラグメントをページに追加すると、編集可能な画像をクリックしてコンテントページエディターサイドバーから画像ソースなどの設定を行うことができるようになります。

コンテンツ ページで画像を定義するには、いくつかのオプションがあります。

ほとんどの画像はこのように処理できますが、編集可能な背景画像を追加するには、背景画像 ID data-lfr-background-image-id を設定するプロパティを追加する必要があります。 背景画像の ID は、フラグメントのメインの div に設定されており、編集可能な画像 ID と同じです。

<div data-lfr-background-image-id="unique-id">
   <lfr-editable id="unique-id" type="image">
      <img src="...">
   </lfr-editable>
</div>

コンテンツ マッピングは、フラグメント内の編集可能なフィールドを、Web コンテンツやブログなどのアセット タイプのフィールドに接続します。 たとえば、画像フィールドをマップして、Webコンテンツ記事のプレビュー画像を表示できます。 マッピングフィールドの詳細については、 Fragment Mapping Settings を参照してください。

編集可能なリンクの作成

編集可能なリンク要素を作成するための特定の構文もあります。

<a
  href="#placeholder"
  target="_blank"
  data-lfr-editable-id="link1"
  data-lfr-editable-type="link"
>
  Go to placeholder
</a>

Liferay Portal 7.3 GA2 以下では、以下の構文を使用します。

<lfr-editable id="unique-id" type="link">
    <a href="default-target-url-goes-here">Link text goes here</a>
</lfr-editable>

リンクの種類、ターゲットURL、リンクマッピングは、コンテントページエディターのサイドバーから編集することができます。

リンクの外観と動作を定義するためのオプションがいくつかあります。

編集可能なリンクの詳細は、 Editable Links を参照してください。

編集可能な HTML の作成

data-lfr-editable-type 属性を html に設定することで、一般的な HTML 要素も編集可能にできます。

<article data-lfr-editable-id="text1" data-lfr-editable-type="html">
  <h1>Placeholder</h1>
</article>

Liferay Portal 7.3 GA2 以下では、以下の構文を使用します。

<lfr-editable type="html" id="text1">
  <h1>Placeholder</h1>
</lfr-editable>

フラグメント内にウィジェットを含める

各ウィジェットには、登録名とそれに対応する lfr-widget-[name] タグがあり、フラグメントに埋め込むために使用する必要があります。 例えば、メニュー表示ウィジェットは navとして登録されているため、そのタグは <lfr-widget-nav />となります。 次のようにブロックに埋め込むことができます。

<div class="nav-widget">
    <lfr-widget-nav>
    </lfr-widget-nav>
</div>

埋め込み可能なウィジェットとそれに付随するタグは次のとおりです。

ウィジェット名

タグ

DDL表示

<lfr-widget-dynamic-data-list>

Form (Automatic Copy)

<lfr-widget-form>

アセットバプリッシャー

<lfr-widget-asset-list>

パンくずリスト

<lfr-widget-breadcrumb>

Category Filter (Automatic Copy)

<lfr-widget-categories-nav>

Flash

<lfr-widget-flash>

メディアギャラリー

<lfr-widget-media-gallery>

メニュー表示

<lfr-widget-nav>

アンケート

<lfr-widget-polls>

関連するアセット

<lfr-widget-related-assets>

サイトマップ

<lfr-widget-site-map>

タグクラウド

<lfr-widget-tag-cloud>

タグフィルター

<lfr-widget-tags-nav>

Webコンテンツの表示

<lfr-widget-web-content>

RSS パブリッシャー(廃止予定)

<lfr-widget-rss>

Iframe

<lfr-widget-iframe>

ウィジェットの埋め込みを有効にする

フラグメントに埋め込むカスタム ウィジェットがある場合は、そのウィジェットを埋め込み可能に設定できます。 ウィジェットを埋め込むには、OSGi コンポーネントである必要があります。 埋め込みたいポートレットクラスの @Component アノテーションの中に、次のプロパティを追加します。

com.liferay.fragment.entry.processor.portlet.alias=app-name

ウィジェットをデプロイすると、追加できるようになります。 プロパティで指定する名前は、次のように lfr-widget タグに追加する必要があります。

<lfr-widget-app-name>
</lfr-widget-app-name>

注釈

W3C HTML 標準によると、カスタム要素は自己終了できません。 したがって、開始と終了 <lfr-widget...> のタグの間に何かを追加することはできませんが、タグに自己終了表記を使用することはできません。

フラグメント設定のローカライズ

対応可能:Liferay DXP/Portal 7.4以降

ページのターゲット言語のフラグメント設定をローカライズできます。 例えば、ボタンフラグメントでは、ページの言語がen-USの場合はあるボタンタイプを定義し、es-ESの場合は別のボタンタイプを定義することができます。 フラグメントの設定フィールドをローカライズするには、 localizable 属性を使用します。

注釈

localizable属性は、configurationRoleプロパティがstyleに設定されているフラグメント設定フィールドでは使用できません。

次のコード抜粋では、ボタンフラグメントの設定により、fieldSetsの下の fieldsセクションのローカライズ可能な属性 を true に設定されます。 ローカライズ可能な 属性は、フィールドレベルで設定されます。 この例では、 buttonType のフィールドが1つだけ存在します。 複数のフィールドを持つフラグメントがある場合、それぞれに ローカライズ可能な 属性を設定することが可能です。

"fieldSets": [
  {
    "fields": [
      {
        "dataType": "string",
        "defaultValue": "primary",
        "label": "type",
        "name": "buttonType",
        "type": "select",
        "localizable": true,
        "typeOptions": {
          "validValues": [
            {
              "value": "primary"
            },
            {
              "value": "secondary"
            },
            {
              "value": "link"
            },
            {
              "value": "outline-primary"
            },
            {
              "value": "outline-secondary"
            }
          ]
        }
      }
    ]
  }

このサンプルコードを使うと、ページのターゲット言語に応じてボタンの種類を変更することができます。 次の例では、 Contact Us / Contacto ボタンフラグメントはbuttonTypeフィールドのローカライズ可能な属性をtrueに設定します。 この例では、この属性を使って、ページがen-US言語を使う場合(A)には Primary ボタンタイプを、ページがes-ESを使う場合(B)には Outline Primary タイプを設定します。

フラグメントのローカライズ可能な要素には、一般タブにフラグのアイコンが表示され、言語ごとに異なる設定をサポートします。

ちなみに

フラグメントの一般設定にあるフラグアイコンは、設定フィールドがローカライズ可能であることを示します。

ローカライズ可能な 属性を持つフラグメントで、言語のカスタム設定を指定しない場合、デフォルトのページ言語の設定が使用されます。