Ver.2.9より、@extends機能がさらに拡張され、@sectionの入れ子ができるようになりました。このハンズオンでは、この入れ子を利用して普段記事を書く時に利用するエントリーの編集画面を拡張してみましょう。ハンズオンにはsite2018テーマを使用します。
このハンズオンで行うこと
- エントリー編集画面の余分な項目を取り除く
- エントリー編集画面の時刻選択にTimepickerを導入する
- 管理メニューからいらない項目を取り除く
1. エントリー編集の余分な項目を取り除く
エントリーを作成する場合、カテゴリーの登録やタグの登録が必要ない場合があります。そういった余計なUIを編集画面から取り除いてみましょう。
site2018テーマに /admin/entry/edit.htmlを作成し、以下のように記述します。エントリーの新規追加はapplyブロック、既存のエントリーの編集はreapplyブロックに記述されているので、それにあわせて@sectionもapplyとreapplyに分けて記述する必要があります。
@extends("/admin/_layouts/entry/edit.html")
@section("apply-category")
@endsection
@section("apply-sub-category")
@endsection
@section("apply-tag")
@endsection
@section("reapply-category")
@endsection
@section("reapply-sub-category")
@endsection
@section("reapply-tag")
@endsection以下のように、カテゴリーとタグなどの登録UIが編集画面からなくなっていれば成功です。
2. エントリー編集画面の時刻選択にTimepickerを導入する
エントリー編集画面のデフォルトの時刻登録はhh:mm:ss形式で手入力で入力する必要があり、Webに不慣れなユーザーにとっては入力のハードルが少し高めです。そこで、管理画面のhtmlを拡張して、ここにjQueryのTimepickerプラグインを以下の手順で導入してみましょう。
- Timepickerプラグインの利用
- site2018テーマの直下にadmin.htmlを追加し編集
- site2018テーマで読み込まれるCSSとJavaScriptを編集
1. Timepickerプラグインの利用
site2018/js/timepicker.jsを用意し、以下のように記述します。
$(function() {
$('#entryTime').timepicker({
timeFormat: 'hh:mm:ss',
interval: 30,
minTime: '10',
maxTime: '6:00pm',
startTime: '10:00:00',
dynamic: false,
dropdown: true,
scrollbar: true
})
});
2. site2018テーマの直下にadmin.htmlを追加し編集
@extends("/_layouts/admin.html")
@section("admin-css")
@parent
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
@endsection
@section("admin-js")
@parent
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script src="/js/timepicker.js"></script>
@endsection
3. site2018テーマで読み込まれるCSSとJavaScriptを編集
次に、include/head/js.htmlに以下の記述し必要なscriptを追加します。
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script src="/js/timepicker.js"></script>
include/head/link.htmlも追記して必要なlinkを追加しましょう
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
下のような結果になっていれば成功です。
3. 管理メニューからいらない項目を取り除く
管理画面のバーティカルメニューにも運用しているサイトによってはいくつかいらない項目があると思います。例えばタグの項目がいらなかったり、カートの項目がいらなかったり。いらない項目を減らして、利用しているユーザーに必要なメニューだけを表示してみましょう。
site2018テーマの直下にadmin.htmlを設置して以下のように記述します。
@extends("/_layouts/admin.html")
@section("admin-menu-others-publish")
@endsection
@section("admin-menu-others-app")
@endsection
@section("admin-menu-entry-tag")
@endsection
@section("admin-menu-entry-approval")
@endsection
@section("admin-menu-site-approval")
@endsection
@section("admin-menu-site-schedule")
@endsection
@section("admin-menu-site-cart")
@endsection
@section("admin-menu-site-shop")
@endsection
@section("admin-menu-site-comment")
@endsection余談
@sectionを使ってカスタマイズできる管理画面のテンプレートはこの限りではありません。
systemテーマの、/_layouts/直下と、/admin/_layouts/直下に拡張元のテンプレートがいくつか設置していますので、必要に応じて、管理画面を拡張してみてくださいね。
