【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