ユニットのグループ化

更新日：2024.02.07

FreeLayoutContentFieldプラグインでは、ユニットをグループ化して、複数のユニットをまとめて追加したりすることもできます。

ユニットグループの概要

例えば、以下のような状況を考えてみてください。

「見出し」「本文」「画像」の3つのユニットを登録している
ユニットを追加する際に、「見出し」と「本文」や、「見出し」と「画像」のように、複数のユニットを組み合わせて追加することが多い

このような状況を想定して、複数のユニットの組み合わせをひな形のように定義しておいて、それらをまとめて追加したり、切り替えたりする機能があります。この機能を「ユニットグループ」と呼びます。
以下の図は、ユニットグループを定義した場合の例です。ユニットを選択して追加する部分の右に、ユニットグループを追加する部分が表示されます。ユニットグループを選んで、「ユニットのグループを追加」のボタンをクリックすると、ユニットグループを追加することができます。
また、ユニットグループを選択して「選択したグループに変更」のボタンをクリックすると、そのコンテンツフィールドに現在あるユニットを全部削除し、選択したユニットグループが追加されます。なお、この場合はそのコンテンツフィールド（の各ユニット）に現在入力しているデータは削除されます。

ユニットグループの例

ユニットグループを使う場合のフィールドの定義

ユニットグループも、コンテンツフィールドの設定画面の「フィールドの定義」の箇所で定義します。ユニットグループを使う場合のフィールドの定義の書き方は、以下のようになります。

ユニットグループを使う場合のフィールドの定義の書き方

fields:
  ・・・（フィールドの定義）
units:
  ・・・（ユニットの定義）
options:
  ・・・（オプションの定義）
unit_groups:
  groups:
    - name: ユニットグループ名
      label: ユニットグループのラベル
      units:
        - ユニット名
        - ユニット名
        ・・・
    - name: ユニットグループ名
      label: ユニットグループのラベル
      units:
        - ユニット名
        - ユニット名
        ・・・
    ・・・
  default: デフォルトのユニットグループ名

「ユニットグループ名」には、個々のユニットグループを識別するための名前を入れます。ユニットグループは半角英数字とアンダースコアの組み合わせで決めます。
「ユニットグループのラベル」には、個々のユニットグループのラベル（表示名）を指定します。管理画面のユニットグループ選択のセレクトに、ここで指定したラベルが表示されます。
「ユニット名」には、そのユニットグループを構成する個々のユニットの名前を入れます。
そして、「デフォルトのユニットグループ名」には、コンテンツを新規作成した時点で、初期状態で表示したいユニットグループの名前を指定します。この行は省略可能で、その場合は初期状態で先頭のユニットグループが表示されます。ただし、ユニットの定義（units）の部分で「default」の部分を指定している場合は、そちらで指定したユニットが表示されます（「ユニットの定義」-「コンテンツの新規作成時に表示するユニットの指定」の節を参照）

ユニットグループの例

ユニットグループの例として、「ユニットグループの概要」の図にあるように、「見出し」「文章」「画像」の3つのユニットを元に、「見出しと文章」「見出しと画像」の2つのユニットグループを作る例を取り上げます。以下の手順で作っていきます。

フィールドとして「見出し」「文章」「画像」の3つを作ります。フィールドの定義は、「ユニットの定義」-「ユニットの基本的な例」の表のとおりとします。
「見出し」「文章」「画像」の3つのユニットを作り、⒈のそれぞれのフィールドを入れます。ユニット名とラベルは以下のようにします。

ユニット名とラベル

ユニット名ラベル
u_header 見出し
u_text 文章
u_image 画像
「見出しと文章」「見出しと画像」のユニットグループを作ります。ユニットグループの内容は以下のようにします。

ユニットグループの内容
ユニットグループ名ラベルユニットグループに入れるユニット
header_text 見出しと文章見出し、文章
header_image
見出しと画像
見出し、画像

この場合、コンテンツフィールドの「フィールドの定義」の欄には、以下のように入力します。後半の「unit_groups」以降の部分で、「見出しと文章」「見出しと画像」のユニットグループを定義しています。

フィールドの定義

fields:
  header:
    type: text
    label: 見出し
    class: hdr
  text:
    type: textarea
    class: txtarea
    label: 文章
  image:
    type: image
    label: 画像
units:
  names:
    - name: u_header
      label: 見出し
    - name: u_text
      label: 文章
    - name: u_image
      label: 画像
options:
  multiple: 1
  sortable: 1
unit_groups:
  groups:
    - name: header_text
      label: 見出しと文章
      units:
        - u_header
        - u_text
    - name: header_image
      label: 見出しと画像
      units:
        - u_header
        - u_image
  default: header_text

「レイアウト用HTML」の欄には、以下のように各ユニットのHTMLを入力します。

レイアウト用HTML

<!-- {{unit:u_header}} -->
<p>{{header_label}}<br />{{header}}</p>
<!-- {{unit:u_text}} -->
<p>{{text_label}}<br />{{text}}</p> 
<!-- {{unit:u_image}} --> 
{{image_label}}
{{image}}

また、「レイアウト用CSS」の欄には、以下のCSSを入力します。

レイアウト用CSS

<style type="text/css"> 
{{field_id}} .hdr { 
  width: 100%; 
  font-size: 1.5em; 
} 
{{field_id}} .txtarea { 
  width: 100%; 
  height: 5em; 
} 
</style>

プラグインTOP

ユニット名	ラベル
u_header	見出し
u_text	文章
u_image	画像

ユニットグループ名	ラベル	ユニットグループに入れるユニット
header_text	見出しと文章	見出し、文章
header_image	見出しと画像	見出し、画像