baserCMS5で管理画面テーマをカスタマイズしてみよう

はじめに

こんにちは。

いきなりですが、baserCMSのテーマというと何が思い浮かぶでしょうか?
そう、公開画面側の見た目等をカスタマイズできる、あのテーマですね。

しかしbaserCMSの用途によっては「管理画面側のテーマを変更したい」という要望もあるでしょう。

そんな時に使えるのが「管理画面テーマカスタマイズ(公式マニュアル)」です。
baserCMS5では管理画面を「コアファイルを編集することなく」カスタマイズできる仕組みがあります。

特に最新機能というわけではないので古いバージョンでも問題ありませんが、
今回は現時点で最新のbaserCMS5.2.4を使用して紹介します。

事前準備

baserCMS5をインストール

まずはbaserCMS5をインストールしましょう。

管理画面テーマカスタマイズの設定についての記事ですので、インストール周りの詳細は割愛しますが、
インストール時に「サンプルプラグイン(BcPluginSample)が入る設定でインストール」をしてください。
新規プラグインを作成する過程を省いてサンプルプラグインを流用する手順で進めるためです。

プラグイン作成に慣れている方は独自プラグインを作成しても問題ありません。
その場合、以降の手順に出てくるプラグイン名は読み替えてください。

BcPluginSampleの有効化

管理画面のプラグイン管理から「BcPluginSample」をインストールしてください。
管理画面テーマカスタマイズで使用するのは「プラグイン」なので覚えておきましょう。
 

設定ファイル作成

BcPluginSampleディレクトリの下に「configディレクトリ」を作成し、そこに「setting.phpファイル」を作成してください。
ファイルの内容は以下の通りです。

// BcPluginSample/config/setting.php

return [
    'BcApp' => [
        'customAdminTheme' => 'BcPluginSample'
    ]
];

カスタマイズ例

例1:ダッシュボードの表示を変更してみよう

ここまでの手順で事前準備が完了したので、設定に誤りがなければ指定したディレクトリ構造でViewファイルを置くと
管理画面の表示を差し替えることができます。

試しに「ダッシュボード」をBcPluginSample側の独自Viewファイルに差し替えてみましょう。
Viewファイルを配置するディレクトリ構造はコア側のbc-admin-thirdに従います。
例えばダッシュボードは、bc-admin-thirdだと下記にViewファイルが配置されています。

vendor/baserproject/bc-admin-third/templates/Admin/Dashboard/index.php
上記パスのtemplates以降を真似して作成してみましょう。
BcPluginSample/templates/Admin/Dashboard/index.php

お試しなのでViewファイル中身はなんでも良いですが、今回は下記内容にします。

差し替え後のダッシュボードです。


表示を確認すると、上記内容で差し替えられていることが確認できます。

例2:メニューから「テーマ管理」を削除してみよう

厳密には管理画面テーマカスタマイズの機能ではありませんが、
今度は管理画面のメニューを変更してみましょう。

前提として、変更する場合はコアファイルを確認して配列の構造を維持した状態で
コピペしないと追加定義が読み込まれなかったり、エラーになったりするので気をつけましょう。
メニュー含めデフォルト設定は下記に定義されています。

vendor/baserproject/baser-core/config/setting.php

今回は試しにテーマ管理をメニューから消すため下記のようにプラグイン側のsetting.phpを変更しました。

BcPluginSampleディレクトリの下に「configディレクトリ」を作成し、そこに「setting.php」を作成してください。
ファイルの内容は以下の通りです。

// BcPluginSample/config/setting.php

return [
    'BcApp' => [
        'customAdminTheme' => 'BcPluginSample',

        // 追加メニュー設定
        'adminNavigation' => [
            'Systems' => [
                'Theme' => [
                    'disable' => true,
                ],
            ]
        ]
    ]
];

この状態でメニューから「設定」を開くと「テーマ管理」が非表示になったことを確認できます。

注意点ですが、これは見た目として「非表示」になっただけです。
ですので、アドレスバーから直接URLを指定すれば利用することは可能です。

もし、この機能を使用されたくないという場合は「ユーザー管理>アクセスルールグループ」により
適切な権限を設定するべきだということを覚えておいてください。

おわりに

今回は「管理画面テーマカスタマイズ」について導入部分を紹介しました。

公開画面側とは異なり運営者にしか見えない画面ではありますが、
不要な情報を削除したり、追加のスタイルを当てたりなどして自分好みの管理画面にすることも可能です。

普段からよく使う機能ではありませんが、
機会があれば是非試してみてはいかがでしょうか!

  • このエントリーをはてなブックマークに追加

AUTHOR

赤坂 佑樹

赤坂 佑樹 アドバイザリエンジニア

 

群馬で生まれ育った、東京在住の赤坂佑樹です。
前々職はメーカー系SIer、前職はWebエンジニアをやってました。

趣味は強いて言うならゲームですかね。
昔は格ゲーやテレビゲームに熱中してましたが、最近ではSteamでゲームを買ったり買わなかったり程度です。
あとは知らない土地で、自然や建造物を見ながら適当に歩いたりするのが好きです。

そこそこ腰が重く、色々考えがちなところもあり、物事が勢いに乗るまで割と時間がかかったりしますが、
焦らず、周囲との折り合いも付けつつ、堅実に頑張っていければと思います。

こんな記事も書いています