カスタムフィールドのチェックボックスの4つの実装方法について

この記事は公開日より10年以上経過しているため、現在の内容と異なる可能性があります。

昨日、チェックボックスのカスタムフィールドの実装について質問されたことをまとめてみました。 チェックボックスの4つの実装方法を考えて、実際に実装してみた方法をご紹介してみます。

  1. カスタムフィールドの値を表示するだけ
  2. フィールド毎にラベルのカラーを変更する（通常版）
  3. フィールド毎にラベルのカラーを変更する（オリジナル校正オプション版）
  4. チェックの無い項目も表示させたい場合
a-blog cms のHTML形式のメールマガジンを定期的に送付していますが、ご存知でしょうか？

次号（2015年2月23日くらいに配信予定）に、方法3で利用する 校正オプション split を紹介する予定です。登録されていない方は、是非ご登録ください。

メルマガ申し込み

1.カスタムフィールドの値を表示するだけ

新製品 残り僅か

同じ名前のチェックボックスでチェックがあったものをループで表示させる場合には、以下のように記述します。

表示側のテンプレート

<p><!-- BEGIN label:loop -->
<span class="acms-label">{label}</span> 
<!-- END label:loop -->
</p>

管理ページ側のテンプレート

<table>
<tr>
	<th>ラベル 1</th>
	<td>
		<label class="acms-form-checkbox" for="input-label-在庫限り">
			<input type="checkbox" name="label[]" value="在庫限り" id="input-label-在庫限り"{label:checked#在庫限り} />
			<i class="acms-ico-checkbox"></i>在庫限り
		</label>
		<label class="acms-form-checkbox" for="input-label-新製品">
			<input type="checkbox" name="label[]" value="新製品" id="input-label-新製品"{label:checked#新製品} />
			<i class="acms-ico-checkbox"></i>新製品
		</label>
		<label class="acms-form-checkbox" for="input-label-おすすめ">
			<input type="checkbox" name="label[]" value="おすすめ" id="input-label-おすすめ"{label:checked#おすすめ} />
			<i class="acms-ico-checkbox"></i>おすすめ
		</label>
		<label class="acms-form-checkbox" for="input-label-残り僅か">
			<input type="checkbox" name="label[]" value="残り僅か" id="input-label-残り僅か"{label:checked#残り僅か} />
			<i class="acms-ico-checkbox"></i>残り僅か
		</label>
		<input type="hidden" name="field[]" value="label" />
	</td>
</tr>
</table>

2.フィールド毎にラベルのカラーを変更する（通常版）

在庫限り おすすめ 残り僅か

1.のデータをカラーで表示させたいという要望があった時には、ループで表示させることができません。4つの別の項目として用意し、それぞれの変数を個別に表示する場所を用意して、その部分を :veil のブロックで囲むことで表示の制御をします。IFブロックを利用することもできますが、判定処理をしない分 :veil の方が処理が少なく済むことになります。

表示側のテンプレート

<p>
<!-- BEGIN label2_a:veil --><span class="acms-label acms-label-success">{label2_a}</span> <!-- END label2_a:veil --> 
<!-- BEGIN label2_b:veil --><span class="acms-label acms-label-danger">{label2_b}</span> <!-- END label2_b:veil --> 
<!-- BEGIN label2_c:veil --><span class="acms-label acms-label-info">{label2_c}</span> <!-- END label2_c:veil --> 
<!-- BEGIN label2_d:veil --><span class="acms-label acms-label-warning">{label2_d}</span> <!-- END label2_d:veil --> 
</p>

管理ページ側のテンプレート

<table>
<tr>
	<th>ラベル 2</th>
	<td>
		<label class="acms-form-checkbox" for="input-label2_a-在庫限り">
			<input type="checkbox" name="label2_a[]" value="在庫限り" id="input-label2_a-在庫限り"{label2_a:checked#在庫限り} />
			<i class="acms-ico-checkbox"></i>在庫限り
		</label>
		<input type="hidden" name="field[]" value="label2_a" />

		<label class="acms-form-checkbox" for="input-label2_b-新製品">
			<input type="checkbox" name="label2_b[]" value="新製品" id="input-label2_b-新製品"{label2_b:checked#新製品} />
			<i class="acms-ico-checkbox"></i>新製品
		</label>
		<input type="hidden" name="field[]" value="label2_b" />

		<label class="acms-form-checkbox" for="input-label2_c-おすすめ">
			<input type="checkbox" name="label2_c[]" value="おすすめ" id="input-label2_c-おすすめ"{label2_c:checked#おすすめ} />
			<i class="acms-ico-checkbox"></i>おすすめ
		</label>
		<input type="hidden" name="field[]" value="label2_c" />

		<label class="acms-form-checkbox" for="input-label2_d-残り僅か">
			<input type="checkbox" name="label2_d[]" value="残り僅か" id="input-label2_d-残り僅か"{label2_d:checked#残り僅か} />
			<i class="acms-ico-checkbox"></i>残り僅か
		</label>
		<input type="hidden" name="field[]" value="label2_d" />
	</td>
</tr>
</table>

3.フィールド毎にラベルのカラーを変更する（オリジナル校正オプション版）

在庫限り 新製品 残り僅か

今回、新しく split という校正オプションを作ってみました。

これを利用すると1つのカスタムフィールドの項目に「表示させる項目」と「Class名」をカンマ区切りで保存させ、それを校正オプションで個別に取り出すことで、2.の部分をループで表示させることができるようになります。

表示側のテンプレート

<p><!-- BEGIN label3:loop -->
<span class="acms-label acms-label-{label3}[split(",",1)]">{label3}[split(",",0)]</span> 
<!-- END label3:loop -->
</p>

管理ページ側のテンプレート

<table>
<tr>
	<th>ラベル 3</th>
	<td>
		<label class="acms-form-checkbox" for="input-label3-在庫限り,success">
			<input type="checkbox" name="label3[]" value="在庫限り,success" id="input-label3-在庫限り,success"{label3:checked#在庫限り,success} />
			<i class="acms-ico-checkbox"></i>在庫限り
		</label>
		<label class="acms-form-checkbox" for="input-label3-新製品,danger">
			<input type="checkbox" name="label3[]" value="新製品,danger" id="input-label3-新製品,danger"{label3:checked#新製品,danger} />
			<i class="acms-ico-checkbox"></i>新製品
		</label>
		<label class="acms-form-checkbox" for="input-label3-おすすめ,info">
			<input type="checkbox" name="label3[]" value="おすすめ,info" id="input-label3-おすすめ,info"{label3:checked#おすすめ,info} />
			<i class="acms-ico-checkbox"></i>おすすめ
		</label>
		<label class="acms-form-checkbox" for="input-label3-残り僅か,warning">
			<input type="checkbox" name="label3[]" value="残り僅か,warning" id="input-label3-残り僅か,warning"{label3:checked#残り僅か,warning} />
			<i class="acms-ico-checkbox"></i>残り僅か
		</label>
		<input type="hidden" name="field[]" value="label3" />
	</td>
</tr>
</table>

ユーザー校正オプション

自作の校正オプションは、/php/ACMS/User/Corrector.php に追記します。

　　2015年2月23日ごろに配信予定のメルマガで紹介します。
　　

使い方は、[split( 区切り文字 , 何番目の項目 )] のように記述します。

4.チェックの無い項目も表示させたい場合

在庫限り 新製品 おすすめ 残り僅か

残念ながら、カスタムフィールドにデータの無い項目をループで表示させることができないので、上記の場合には、2.に近い書き方でIFブロックを利用して表示させることになります。

表示側のテンプレート

<p>
<!-- BEGIN_IF [{label4_a}/nem/] --><span class="acms-label acms-label-success">在庫限り</span> <!-- ELSE --><span class="acms-label">在庫限り</span> <!-- END_IF --> 
<!-- BEGIN_IF [{label4_b}/nem/] --><span class="acms-label acms-label-danger">新製品</span> <!-- ELSE --><span class="acms-label">新製品</span> <!-- END_IF --> 
<!-- BEGIN_IF [{label4_c}/nem/] --><span class="acms-label acms-label-info">おすすめ</span>  <!-- ELSE --><span class="acms-label">おすすめ</span> <!-- END_IF --> 
<!-- BEGIN_IF [{label4_d}/nem/] --><span class="acms-label acms-label-warning">残り僅か</span>  <!-- ELSE --><span class="acms-label">残り僅か</span> <!-- END_IF --> 
</p>

管理ページ側のテンプレート

<table>
<tr>
	<th>ラベル 4</th>
	<td>
		<label class="acms-form-checkbox" for="input-label4_a-在庫限り">
			<input type="checkbox" name="label4_a[]" value="在庫限り" id="input-label4_a-在庫限り"{label4_a:checked#在庫限り} />
			<i class="acms-ico-checkbox"></i>在庫限り
		</label>
		<input type="hidden" name="field[]" value="label4_a" />

		<label class="acms-form-checkbox" for="input-label4_b-新製品">
			<input type="checkbox" name="label4_b[]" value="新製品" id="input-label4_b-新製品"{label4_b:checked#新製品} />
			<i class="acms-ico-checkbox"></i>新製品
		</label>
		<input type="hidden" name="field[]" value="label4_b" />

		<label class="acms-form-checkbox" for="input-label4_c-おすすめ">
			<input type="checkbox" name="label4_c[]" value="おすすめ" id="input-label4_c-おすすめ"{label4_c:checked#おすすめ} />
			<i class="acms-ico-checkbox"></i>おすすめ
		</label>
		<input type="hidden" name="field[]" value="label4_c" />

		<label class="acms-form-checkbox" for="input-label4_d-残り僅か">
			<input type="checkbox" name="label4_d[]" value="残り僅か" id="input-label4_d-残り僅か"{label4_d:checked#残り僅か} />
			<i class="acms-ico-checkbox"></i>残り僅か
		</label>
		<input type="hidden" name="field[]" value="label4_d" />
	</td>
</tr>
</table>

同じタグ付けがされている記事

Mautic と a-blog cms の連携についての実装

2015年くらいから a-blog cms のサイト上で Mixpanel を利用していることもあり、勉強会で何度か紹介をしてきましたが、この秋くらいからオープンソースの Mautic の注目度が上がってきています。 そこで、今回は...

続きを読む

エントリーのカスタムフィールドでパスワードを設定する実装方法

a-blog cms では、ブログ単位で会員コンテンツとしてログインしないと見えないコンテンツを管理するような実装は標準で用意されております。しかし、今回は、もう少し簡単にエントリーのカスタムフィールドでエン...

続きを読む

a-blog cms を使ってみたいけど、なにから始めたらいいの？

このコンテンツは、a-blog cms（エーブログ シーエムエス）を使ってみたいけどまずは何をしたらいいかわからない人に向けて、効率の良い学び方や基礎的な機能についてまとめた記事です。くわしい実装方法や使い方...

続きを読む

管理画面のカスタム設定タブのUIをやめるカスタマイズ方法

a-blog cms のカスタムフィールドは、ブログ・カテゴリー・エントリー・ユーザー・モジュール とありますが、今回は カテゴリー・ユーザー のタブの数が少ない時に使えるカスタマイズをご紹介します。 例えば、こ...

続きを読む

Unit_List の使用ケースその2：Google MapのAPI 「MarkerClusterer」

エントリー内のユニットを表示するUnit_Listの使用ケース紹介その2では、Google MapのAPI 「MarkerClusterer」を使ったUnit_Listの活用方法をご紹介します。 たとえば、1つの地図に各エントリーに1つずつ挿入され...

続きを読む

校正オプションsubstringを新規作成し、PDFのサムネイル画像にresizeImgの校正オプションを適用する方法

この記事では、先日メールサポートで質問をいただいたメディアに登録したPDFのサムネイル画像にresizeImgの校正オプションを適用する方法についてご紹介します。 PDFのサムネイル画像をカスタムフィールドで表示...

続きを読む