a-blog cmsのビルトインモジュールの内容をカスタマイズする
a-blog cmsは、管理画面も非常にカスタマイズしやすくできています。
テーマフォルダの中にシステムのテンプレート(/themes/system/)があり、自分のテーマの中に、システムと同じ階層で同名のファイルを作ると、自テーマのファイルが優先されて表示されます。
今回、バナーモジュールの属性値1、2を、テキスト入力ではなく、固定値でチェックボックスにしようと思い、作業をしてみました。
自テーマに上書きファイルを作成
元のシステムのテーマファイルを、自テーマの中にコピーします。
元のファイル:/a-blog cms設置ディレクトリ/themes/system/admin/config/banner_body.html
コピー先:/a-blog cms設置ディレクトリ/themes/自分のテーマ/admin/config/banner_body.html
自分のテーマには、通常/admin/config/ディレクトリはないはずなので、作成してから複製します。
以降は、コピーしたものを修正します。
チェックボックスに書き換え
属性1、2は、元々は次のようになっています。
<tr> <th><!--T-->属性1<!--/T--><i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="<!--T-->任意の属性を設定できます。(変数名 attr1)<!--/T-->"></i></th> <td><input type="text" name="banner-{banner#img_id}@attr1" value="{attr1}" style="width:90%;" /> <input type="hidden" name="config[]" value="banner-{banner#img_id}@attr1" /></td> </tr> <tr> <th><!--T-->属性2<!--/T--><i class="acms-admin-icon-tooltip js-acms-tooltip" data-acms-tooltip="<!--T-->任意の属性を設定できます。(変数名 attr2)<!--/T-->"></i></th> <td><input type="text" name="banner-{banner#img_id}@attr2" value="{attr2}" style="width:90%;" /> <input type="hidden" name="config[]" value="banner-{banner#img_id}@attr2" /></td> </tr>
修正する箇所は、以下の部分です。
<input type="text" name="banner-{banner#img_id}@attr1" value="{attr1}" style="width:90%;" />
<input type="text" name="banner-{banner#img_id}@attr2" value="{attr2}" style="width:90%;" />
これらをそれぞれ、次のように修正します。
<div class="acms-admin-form-checkbox"> <!-- BEGIN_IF [{attr1}/nem/] --> <input type="checkbox" name="banner-{banner#img_id}@attr1" value="属性1 チェックボックス" id="input-checkbox-banner-{banner#img_id}@attr1" checked /> <label for="input-checkbox-banner-{banner#img_id}@attr1"><i class="acms-admin-ico-checkbox"></i><!--T-->表示<!--/T--></label> <!-- ELSE --> <input type="checkbox" name="banner-{banner#img_id}@attr1" value="属性1 チェックボックス" id="input-checkbox-banner-{banner#img_id}@attr1" /> <label for="input-checkbox-banner-{banner#img_id}@attr1"><i class="acms-admin-ico-checkbox"></i><!--T-->表示<!--/T--></label> <!-- END_IF --> </div>
<div class="acms-admin-form-checkbox"> <!-- BEGIN_IF [{attr2}/nem/] --> <input type="checkbox" name="banner-{banner#img_id}@attr2" value="属性2 チェックボックス" id="input-checkbox-banner-{banner#img_id}@attr2" checked /> <label for="input-checkbox-banner-{banner#img_id}@attr2"><i class="acms-admin-ico-checkbox"></i><!--T-->表示<!--/T--></label> <!-- ELSE --> <input type="checkbox" name="banner-{banner#img_id}@attr2" value="属性2 チェックボックス" id="input-checkbox-banner-{banner#img_id}@attr2" /> <label for="input-checkbox-banner-{banner#img_id}@attr2"><i class="acms-admin-ico-checkbox"></i><!--T-->表示<!--/T--></label> <!-- END_IF --> </div>
ビルトインモジュールの入力項目のタイプは固定されている模様
a-blog cmsは、チェックボックスやラジオボタンの「チェック済み」を反映させる際、inputタグに{変数名:checked#値}という書式を付記します。
上記も、通常であれば、
<input type="checkbox" name="banner-{banner#img_id}@attr2" value="属性2 チェックボックス" id="input-checkbox-banner-{banner#img_id}@attr2"{attr2:checked#属性2 チェックボックス} />
という風に書くはずです。
が、どうやら、ビルトインモジュールの入力項目のタイプは固定されているらしく、checkedの判定がでません。
判定は出ないものの、データ自体は保存されていて、{attr1}や{attr2}と書いて確認すると、チェックされた項目のvalueの値が表示されます。
そのため、IFブロック(IF [変数/nem/])で、変数に値が入っている場合(チェックされている)、入っていない場合(チェックされていない)で状態を出し分けています。
応用すれば、ラジオボタンでも行けそうです。
IFブロックを使う方法は、教えてもらうまで気づきませんでした。
この辺は、発想次第ですねぇ。気付いてない使い方何かがまだまだたくさんありそう。