カスタムユニット

カスタムユニットを使えば、独自にユニットの表示内容をカスタマイズすることができます。カスタムフィールドでは、ユニットとユニットの間に挿入できませんが、カスタムユニットだと挿入することができるので表現の幅が広がります。

編集設定画面

カスタムユニットを利用するにはコンフィグの編集設定画面からモードがカスタムであるボタンを追加する必要があります。図のようにモードからカスタムを選択し、それに対するラベルの名前を決めてください。ラベルの名前は任意です。追加ボタンを押せば設定したラベル名のついたボタンがエントリー編集画面で使えるようになっています。



しかしこの段階でエントリー編集画面にいき、ユニットの追加ボタンを押しても、カスタマイズをしていないので空っぽのユニットが表示されるだけです。



入力フォームのカスタマイズ

カスタムユニットの入力フォームを実装していきます。カスタムユニットの入力フォームをカスタマイズするときには、/themes/自分のテーマ/admin/entryの中に、unitディレクトリを作り、custom.html(Ver.2.1.1.4以前をお使いの方は/admin/entryの中にcustom-unit.html)というファイルを作成してください。そのファイルに、カスタムフィールドメーカー等を使い、入力用フォームを作成しましょう。ここで注意しなければならないことは二つあります。

例:custom.html(Ver.2.1.1.4以前はcustom-unit.html)

<table>
	<tbody>
		<tr>
			<th>名前</th>
			<th>画像</th>
		</tr>
		<tr>
			<td>
				<input type="text" name="name{id}" value="{name}" class="acms-form-width-3quarters" />
				<input type="hidden" name="unit{id}[]" value="name{id}" />
			</td>
			<td>
				<!-- BEGIN_IF [{face_image@path}/nem/] -->
				<img src="%{ARCHIVES_DIR}{face_image@path}" />
				<input type="hidden" name="face_image{id}@old" value="{face_image@path}" /><br />
				<label class="acms-form-checkbox">
					<i class="acms-ico-checkbox"></i><input type="checkbox" name="face_image{id}@edit" value="delete" /> 削除
				</label>
				<!-- END_IF -->
				<input type="file" name="face_image{id}" size="20" />
				<input type="hidden" name="unit{id}[]" value="face_image{id}" />
				<input type="hidden" name="face_image{id}:extension" value="image" />
				<input type="hidden" name="face_image{id}@size" value="300" />
				<input type="hidden" name="face_image{id}@filename" value="" />
			</td>
		</tr>
	</tbody>
</table>
  • 変数指定のところの前に{id}を付加する
  • field[]をunit{id}[]にする

以上の2つがカスタムフィールドと記述が違うため注意が必要です。

出力内容のカスタマイズ

例:custom.html(Ver.2.1.1.4以前はcustom-unit.html)

カスタムユニットの出力内容を実装していきます。カスタムユニットの出力内容をカスタマイズするときには、/themes/自分のテーマ/includeの中に、unitディレクトリを作りcustom.htmlというファイルを作成してください。
Ver. 2.1.1.4以前をお使いの方は/themes/自分のテーマ/include/の中にcustom-unit.htmlというファイルを作成してください。

<div class="acms-grid">
	<div class="acms-col-6">
		<img src="%{ARCHIVES_DIR}{face_image@path}"/>
	</div>
	<div class="acms-col-6">
		<strong>{name}</strong>
	</div>
</div>

出力内容のテンプレートはカスタムフィールドのテンプレートと同じように変数を挿入するだけで出力されます。

デベロッパーサイトのカスタムユニットメーカーを使用する


カスタムユニットの編集用のHTMLを手作業で記述するのは項目数が増えてくると時間がかかります。そこで、カスタムユニットのHTMLの生成を簡単にするカスタムユニットメーカーを本デベロッパーサイトに用意しました。
カスタムユニットメーカーを使えばカスタムユニットの編集用に使用するラジオボタンや、画像等をアップロードできるHTMLをボタン操作のみで生成することができます。
カスタムフィールドメーカーを既にお使いの方はご存知だと思いますが、使い方は全く同じになります。

カスタムユニットメーカーで設置できる項目

カスタムユニットメーカーでは下記の項目のHTMLを出力できます。

  • テキスト
  • セレクト
  • ラジオ
  • テキストエリア
  • 画像

カスタムユニットメーカーの場所

カスタムユニットメーカーはVer.2.5よりa-blog cmsの管理画面、および本デベロッパーサイト内に設置されています。本デベロッパーサイト内のグローバルナビゲーションよりカスタムユニットメーカーを選択すると移動できます。是非サイト制作にお役立てください。


カスタムユニットメーカーの使い方

  1. typeを選びます
  2. テキストを選択するとタイトルとname属性という入力フォームが現れますので値を入力してください
  3. [生成]ボタンを押すとカスタムフィールドのHTMLが生成されます

生成されたHTMLコードを、/themes/自分のテーマ/admin/entry/unit/の中のcustom.htmlに貼付けてご使用ください。
Ver. 2.1.1.4以前をお使いの方は/themes/自分のテーマ/admin/entry/の中にcustom-unit.htmlというファイルを作成して、コードを貼付けてご使用ください。


関連

イントロダクション

はじめてみよう

リファレンス

コア機能

機能別

開発