このエントリーは a-blog cms Advent Calendar 2023 8日目の記事です。

a-blog cms のエントリー編集画面で、

• カスタムフィールドがとてもたくさんある
• 更新者のスキルにばらつきがあり、スキルの高い更新者にしかいじられたくないカスタムフィールドがある
• 値を変更するケースが珍しい

などの理由で、カスタムフィールドをそのまま出したくない場合は、デフォルトでは閉じた状態である詳細設定に入れてしまいましょう。このエントリーでは、初心者向けにエントリーのカスタムフィールドを詳細設定の中に入れるやり方を説明していきます。

Siteテーマを使っている前提で、「ピックアップ設定」を詳細設定の中に入れる例を説明しますが、もちろん他の公式テーマや自作テーマに取り入れることもできます。

エントリーの編集画面は themes/system/admin/entry/edit.html です。このファイルは開いてみると分かるとおり、 themes/system/admin/_layouts/entry/edit.html を継承しています。なので、 まずはthemes/system/admin/entry/edit.html を使用中のテーマの同階層に複製し、themes/system/admin/_layouts/entry/edit.html から必要な section をコピペします。

@extends("/admin/_layouts/entry/edit.html")

@section("apply-link-url")
@parent
@include("/admin/entry/edit-field-detail.html")
@endsection

@section("reapply-link-url")
@parent
@include("/admin/entry/edit-field-detail.html")
@endsection

ポイントは下記の4点です。

• 詳細設定の中の「リンク先URL」の下に「ピックアップ設定」を追加する
• 詳細設定の中のカスタムフィールドは新規作成時と編集時で別に必要なので、apply-link-url と reapply-link-url のsectionをコピペしておく
• 継承元をそのまま使う箇所は削除して代わりに @parent としておく（CMSアップデート時にsystemテーマに何らか変更があってもこれで大丈夫！）
• カスタムフィールドは同じものを2回読み込むので /admin/entry/edit-field-detail.html として共通化しておく

「ピックアップ設定」は themes/site/admin/entry/field-pickup.html にあります。ここから <tr> タグの内容、つまりテーブルの行をコピーして /admin/entry/edit-field-detail.html にペーストします。

<tr>
	<th>ピックアップ</th>
	<td>
		<div class="acms-admin-form-checkbox">
			<input type="checkbox" name="pickup[]" value="true"{pickup:checked#true} id="input-checkbox-pickup" />
			<label for="input-checkbox-pickup"><i class="acms-admin-ico-checkbox"></i>サブカラムに表示させる場合はチェックを入れてください。</label>
		</div>
		<input type="hidden" name="field[]" value="pickup" />
	</td>
</tr>

最後に、 themes/site/admin/entry/field.html において

@include("/admin/entry/field-pickup.html")

の部分をコメントアウトあるいは削除してフィールドがダブらないようにしておきます。

これで、ピックアップ設定を詳細設定に入れることができました。簡単でしたね。詳細設定にもともと入っているファイル名、公開日時、掲載期限、概要、インデキシング、リンク先URLは entry[] であって field[] ではないので、書き方は少し違っているという点には注意が必要です。entry[]の書き方を参考にせず、他にも詳細設定にカスタムフィールドを追加したい場合はカスタムフィールドメーカーで作成したコードを基準にしてください。

このようにして、管理画面をHTMLでカスタマイズできるのも a-blog cms の特長のひとつです。CSSやJSを使ってもっと自在にカスタマイズすることも可能です。そのやり方も折に触れてシェアしていきます。