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ブロックを使う方法は、教えてもらうまで気づきませんでした。
この辺は、発想次第ですねぇ。気付いてない使い方何かがまだまだたくさんありそう。


このページをみんなにシェアする

お問い合わせ

ファイルサイズが大きすぎます。