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