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

昨日、チェックボックスのカスタムフィールドの実装について質問されたことをまとめてみました。 チェックボックスの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>

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