Mauticの管理画面をカスタマイズする

菱川拓郎
菱川拓郎

Mautic の管理画面をちょっと変更したい…という場合、ファイルを探し出して直接変更してもいいのですが、どのファイルを変更したかまずあとで分からなくなります。Mautic のテンプレートオーバーライドの仕組みを使えば、わかりやすく管理できます。やってみましょう。

テーマを作成する

Mautic の管理画面は、プリインストールされている Mauve というデザインテーマが適用されています。こちらをベースに、新しくテーマを作成することで全体的なデザインが変更できます。

方法は簡単で、/themes/Mauve ディレクトリを中身ごと複製して /themes/CustomMauve など名前をつけて別ディレクトリを作成してください。作成したら、ディレクトリ内の config.json 内の "name" で設定されているテーマ名も変更しましょう。以上で、管理画面から作成したテーマを選択できるようになります。

テーマ選択

あとは、cssやフォントの調整は作成したカスタムテーマ内で行うことができます。

テンプレートをオーバーライドする

色やフォントなどの全体的なデザインはテーマで規定されていますが、画面内の各パーツはPHPファイルのテンプレートでできています。例えば、ログイン後表示されるダッシュボード画面のテンプレートは

app/bundles/DashboardBundle/Views/Dashboard/index.html.php

というファイルになります。

これらのファイルは、テーマ内からオーバーライド(上書き)できるようになっています。上記のファイルであれば、

themes/CustomMauve/html/MauticDashboardBundle/Dashboard/index.html.php

というファイルをおけばオーバーライドできます。

  1. テーマ内に html というフォルダを作ってその中に格納します。
  2. 元ファイルの DashboardBundle/Views 部分が MauticDashboardBundle のように置きかわります。/Views を削って頭に Mautic が来ます。

オーバーライドで表示を変更した例:

オーバーライド結果

オーバーライドの仕組みを使えば、テーマ内のhtmlフォルダを見ればカスタマイズしたテンプレートがどれなのかが一目瞭然ですので、カスタマイズ範囲が把握しやすくなりますね。