【a-blog cms】カスタムフィールドの変数を入れ子にする
a-blog cmsで、変数を入れ子にしたい場合があります。
例えば、「エントリーにラジオボタンで選択できるカスタムフィールドを付けたい。そして、その一覧も別のカスタムフィールドで追加できるようにしたい」というようなときなどです。
入力側を作る
まず、a-blog cmsの管理画面から、コンフィグ>カスタムフィールドメーカーを選び、カスタムフィールドグループを作成します。
以下の例の場合、次のような設定で作成しています。
| group名 | choices |
|---|---|
| groupタイトル | ラジオボタンの選択肢 |
| type | テキスト |
| タイトル | 選択肢 |
| フィールド | myOption |
<h2 class="acms-admin-admin-title2">ラジオボタンの選択肢</h2>
<table class="js-fieldgroup-sortable adminTable acms-admin-table-admin-edit">
<thead class="acms-admin-hide-sp">
<tr>
<th class="acms-admin-table-left acms-admin-admin-config-table-item-handle"> </th>
<th class="acms-admin-table-left">選択肢</th>
<th class="acms-admin-table-left acms-admin-admin-config-table-action">削除</th>
</tr>
</thead>
<tbody>
<!-- BEGIN choices:loop -->
<tr class="sortable-item">
<td class="item-handle"><i class="acms-admin-icon-sort"></i></td>
<td>
<input type="text" name="myOption[{i}]" value="{myOption}" class="acms-admin-form-width-full"/>
</td>
<td><input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除" /></td>
</tr>
<!-- END choices:loop -->
<tr class="sortable-item item-template">
<td class="item-handle"><i class="acms-admin-icon-sort"></i></td>
<td>
<input type="text" name="myOption[]" value="" class="acms-admin-form-width-full"/>
</td>
<td><input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除" /></td>
</tr>
</tbody>
<tfoot>
<tr><td colspan="3"><input type="button" class="item-insert acms-admin-btn-admin" value="追加" /></td>
</tr>
</tfoot>
</table>
<input type="hidden" name="@choices[]" value="myOption" />
<input type="hidden" name="field[]" value="myOption" />
<input type="hidden" name="field[]" value="@choices" />
これを、ブログのカスタムフィールドとして表示できるようにし、管理画面で必要な値を入力します。
選択肢として表示する
次に、ここで入力したものを、エントリーのカスタムフィールドに選択肢一覧として表示させます。
同じくカスタムフィールドメーカーでひな形を作って、次のように修正します。
<table class="entryFormTable acms-admin-table-entry"><!-- クラス名は任意 -->
<tr>
<th>ブログのカスタムフィールドで設定した選択肢</th>
<td>
<!-- BEGIN_MODULE Blog_Field --><!-- BEGIN choices:loop -->
<label class="acms-admin-form-radio"><input type="radio" name="myChoice" value="{myOption}"\{myChoice:checked#{myOption}\} /><i class="acms-admin-ico-radio"></i>{myOption}</label>/
<!-- END choices:loop --><!-- END_MODULE Blog_Field -->
<input type="hidden" name="field[]" value="myChoice" />
</td>
</tr>
</table>
この際のキモになるのが、\{myChoice:checked#{myOption}\}の部分です。
これは、このフィールドの値とラジオボタンの値が等しい場合、そのラジオボタンをチェック状態にする処理です。
よくみると変数({}で囲まれたもの)が入れ子になっていて、外側に「\」がついています。これは、外側の{}をエスケープする記述です。
まず内側の{myOption}の部分に値を入れた後、{myChoice:checked#...の部分で、checkedの処理を行うという流れです。
これは、変数だけではなく、モジュールでも可能なようです。
いずれにしても、内側に動的に処理するものがある場合、その外側をエスケープすれば、動的処理の結果を使って外側の処理が可能になります。
https://gist.github.com/steelydylan/3dc9b71fa824e888e4e9
タグ:a-blog_cms ノウハウ