はじめに
どうもこんにちは。
前回こちらの記事で管理画面テーマカスタマイズの導入方法を紹介しました。
baserCMS 5系で管理画面テーマをカスタマイズしてみよう
しかし前回記事の内容だけでは「内容を書き換えられる」というだけで具体的に何ができるのか分からない、
そう思われる方もいるかと思います。
そのため、実用的な画面のカスタマイズまで一緒に見ていければと思います。
環境は前回記事と同様にbaserCMS ver.5.2.4を使用します。
カスタマイズ例
例１：共通のレイアウトテンプレートを調整する
まずはレイアウトテンプレートを差し替えてみましょう。
レイアウトテンプレートは公開画面側と同じようにページの共通レイアウトが定義されており、
差し替えることで各画面共通の表示等を調整することができます。
それでは前回のダッシュボードページと同じように、コア側から元のファイルをコピーして
同じディレクトリ構成で配置することで差し替えてみましょう。
下記の通り、コア側から管理画面テーマ側へコピーします。
コピー元
vendor/baserproject/bc-admin-third/templates/Admin/layout/default.php
コピー先
plugins/BcPluginSample/templates/Admin/layout/default.php
動作確認のため、試しにページタイトル出力処理の前に「@」を付けてみましょう。
変更後@<h1 class="bca-main__header-title"><?php $this->BcAdmin->title() ?></h1>
各ページのページタイトルの頭に「@」がつくようになったかと思います。
動作の確認ができたら追加した「@」は削除しておいてください。
例２：CSSファイルを追加で読み込む
CSSについては複数の読み込み方法があると思いますが、
今回はレイアウトテンプレートにて「調整用のCSSファイルを追加で読み込む」方法をとります。
① スタイル調整用のCSSファイルを作成
下記のディレクトリ構成でCSSファイルを作成しましょう。
plugins/BcPluginSample/webroot/css/my_admin_style.css
ファイル内容については、読み込まれているか確認しやすいようにページタイトルのスタイル変更を定義しておきましょう。
.bca-main__header-title {
font-size: 5rem;
}②レイアウトテンプレートにCSSファイルへの参照を追加
<?php $this->BcBaser->css([
'vendor/bootstrap-4.1.3/bootstrap',
'vendor/jquery-ui/jquery-ui.min',
'vendor/jquery.timepicker',
'../js/vendor/jquery-contextMenu-2.2.0/jquery.contextMenu.min.css',
'admin/style',
'BcPluginSample.my_admin_style' // この行を追加
]) ?>
ちなみにですが、所定の位置にCSSファイルを置くと自動的に読み込む仕組みがあるので
それを利用すればレイアウトテンプレートの変更は不要になります。
ファイル名を変更し、下記の位置に配置し直してみましょう
ファイル名は「{プラグイン名}_admin.css」で、プラグイン名はスネークケースとしてください。
plugins/BcPluginSample/webroot/css/admin/bc_plugin_sample_admin.css
この状態で②で追加した読み込み行を削除しても、自動的に読み込まれていることがわかります。
基本的にはこの方法を利用し、読み込むファイルを自分で選びたい場合や読み込み順を制御したい場合は、
レイアウトテンプレート側で指定する方法を取るようにしましょう。
こちらも確認を終えたらCSSファイルの中身を空にしておいてください。
例３：ログイン画面をカスタマイズしてみる
ここまでの内容を元にすれば、特定の画面のデザインを変更することも可能です。
例としてログイン画面のデザインをカスタマイズしてみます。
①ログイン画面のViewファイルをコピー
コピー元
vendor/baserproject/bc-admin-third/templates/Admin/Users/login.php
コピー先
plugins/BcPluginSample/templates/Admin/Users/login.php
②Viewファイルのカスタマイズ
今回はロゴ画像も差し替えます。
まずは任意のロゴ画像を配置します。
plugins/BcPluginSample/webroot/img/my_login_logo.pngその後、Viewファイル上で表示している画像を変更しましょう。
<?php echo $this->BcBaser->getImg('BcPluginSample.my_login_logo.png', ['alt' => $this->BcBaser->getContentsTitle(), 'class' => 'bca-login__logo']) ?>
③CSS調整
例２で作成したbc_plugin_sample_admin.cssを調整します。
/* ログイン画面上部の見出しを非表示 */
#AdminBaserCoreUsersLogin .bca-main__header-title {
display: none;
}
/* ロゴ画像のサイズ調整 */
.bca-login__logo {
width: 120px;
}
/* ログインボックスの背景色 */
.bca-login {
background: #f0f7ff;
}
/* タイトル（ロゴ）下の余白 */
.bca-login__title {
margin-bottom: 30px;
}
/* ログインボタンの色 */
.bca-login button.bca-btn--login {
background: #1867c0;
border-color: #1867c0;
}
baserCMSバージョンアップ時の留意事項
管理画面テーマカスタマイズ機能を使うことでコア側を直接変更することがないため、
気兼ねなくbaserCMSのバージョンアップが可能です。
しかしプラグイン側にコピーしたViewファイルは自動的にはバージョンアップされないため、
もしコア側で何か変更が入っていた場合は差分が生じます。
管理画面に大幅な変更が入ることは稀だと思いますが、念の為バージョンアップ時には表示・動作を確認し、
必要に応じてコア側とプラグイン側で同期をとるようにしてください。
おわりに
今回はより実用的な管理画面の見た目の調整方法について説明してみました。
ご紹介したのはログイン画面の軽微なデザイン変更だけでしたが、
同じような方法でヘッダーやフッターの調整といった需要のありそうな変更も可能です。
また、JSファイルを追加で読み込むことで動的な表示制御も可能なため、その気になれば細かい調整も実現できます。
ただ冷静になって考えてみると需要がありそうな調整は管理画面から直接変更出来ると嬉しいですね。
そう思った方はぜひアイデアをIssueやフォーラムへ投稿したり、いきなりプラグイン化してマーケット申請でも良いので、
baserCMSの発展にお力添えを頂けたら嬉しいです。
それではまた。
[ユーザーズフォーラム]
https://forum.basercms.net/
[baserマーケット]
https://market.basercms.net/
