BLOG
Webエンジニア2025年新卒採⽤ BRISKは新卒からリモートワークです。

【EC-CUBE 4系】管理画面をカスタマイズする方法

更新日:2023/10/23

EC-CUBEの管理画面に機能を追加したいけれど、要件に合うプラグインが見当たらない…ということはありませんか?
実はEC-CUBEではフロント画面だけではなく、管理画面もカスタマイズできるようになっています。
そのため、jQueryライブラリなどと組み合わせればかなり自由に機能を追加をすることができます。

ということで今回はEC-CUBEの管理画面をカスタマイズする方法を紹介しています。
ぜひ最後までご覧ください!

基本編

まずは基本編として、

  • 要素を追加する方法

  • メニュー項目を追加する方法

  • を紹介していきます。
    「要素を追加する方法」は、管理画面にちょっとした機能を追加したい!という時に、
    「メニュー項目を追加する方法」は、管理画面に本格的な機能を追加したい!という時に便利です。

    要素を追加する

    EC-CUBEの管理画面に新たな要素を追加するには、以下2つの方法があります。

    • 1つ目 : コアファイルを編集する方法

      1つ目の方法は、EC-CUBEのコアファイルを編集していくというものです。
      EC-CUBEのコアファイルは以下ディレクトリにあります。

      こちらの方法だとEC-CUBEのバージョンを上げる際に、記述が無くなってしまう可能性があります。
      ですので、EC-CUBEのバージョンを上げる見込みのあるサイトには推奨されません。

    • 2つ目 : カスタマイズファイルを作成する方法

      2つ目の方法は、カスタマイズファイルを作成し、そのファイルを編集していくというものです。
      こちらの方法ではEC-CUBEのバージョンを上げても「記述が無くなる」ということは発生しません。
      また、こちらはEC-CUBEのプラグインでもよく使われている方法となっています。
      ですので、今回は2つ目のカスタマイズファイルを作成する方法を紹介します。

      以下実装の手順です。

    1 カスタマイズするTwigファイルを作成する

    ファイルを作成する場所は以下です。

    今回は管理画面TOPに要素を追加しようと思うので、

    上記のように、admin_test.twig を作成しました。

    admin_test.twig 内には、追加したい要素追加する場所の指定をする必要があります。

    今回は上記画像の赤枠部分に要素を追加したいので、以下のように記述しました。

    2 イベントを追加する

    ファイルを作成する場所は以下です。

    EventListener というディレクトリが無ければ、作成してください。

    今回は以下ファイルを作成しました。

    ファイル名に規定はありませんので、分かりやすい名前にしておくのが良いと思います。

    作成したファイルに記載するのは

    • 名前空間の指定

    • 表示したい管理画面のファイルの指定

    • 追加したい要素のファイルの指定

    です。

    イベント名やメソッド名は、適宜分かりやすい名前を指定してください。

    そうすると、管理画面に要素が追加されていると思います!

    メニュー項目を追加する

    メニューの項目ごと追加する方法を紹介していきます。

    以下実装の手順です。

    1 サイドバーに項目を追加する

    管理画面のサイドバー情報が保存されているのは

    です。

    今回は商品管理の中に「在庫管理」というメニューを追加してみます。

    直前の項目などを参考に命名すると良いと思います。

    2 項目名を定義する

    次に、サイドバーに実際に表示される項目名を定義します。
    変更ファイルのコアファイルは以下です。

    上記ファイルを以下にコピーし、編集しましょう。

    eccube_nav.yaml で設定した name を指定し、項目名を入力してください。

    3 フロントに表示させるTwigファイルを作成する

    続いて、Twigファイルを作成します。
    今回は商品管理内に項目を追加するので、以下のようにファイルを作成しました。

    記述は以下になります。

    解説①
    eccube_nav.yaml の定義名「product_stock_menu」を上記のように指定することで、サイドメニューがカレント表示されます。
    解説②
    eccube_nav.yaml のname「admin.product.product_stock_menu」を上記のように指定することで、messages.ja.yaml で設定した項目名が出力されます。

    4 コントローラーを作成する

    最後にコントローラーを作成します。
    以下のようにファイルを作成しました。

    ポイントは以下二点です。

    • @Route

      @Routeの第一引数に追加したいメニューのURLを指定し、第二引数にeccube_nav.yamlで指定したURLを記入します。

    • @Template

      @Templateには返したいテンプレート名を記載します。
      今回だとこちらで作成した「product_stock_menu.twig」です。

    応用編 : 管理画面TOPに売れ筋商品分析グラフを追加する

    基本編の内容をもとに、管理画面のカスタマイズ例を紹介します。
    今回は、「売れ筋商品」をグラフにして表示してみます。

    ページ上にグラフを載せる方法は多々あるかと思いますが、jQueryのライブラリ「Chart.js」を使用すると
    簡単にグラフを描画できるのでおすすめです。
    以下記事では「Chart.js」について解説していますので、気になった方は是非ご覧ください。

    【3系】Chart.jsでレーダーチャートを描画してみよう

    作業手順はこちらです。

    要素を追加する

    こちらの方法の通り、Twigファイルとイベントを追加していきます。

    まずTwigファイルを作成します。

    続いてイベントを追加します。

    上記ファイルをサーバーにアップし、管理画面のTOPに追加した要素が表示されるかご確認ください。
    確認できたら、次に進みましょう!

    静的にグラフを描画する

    まずはChart.jsを読み込みます。

    続いてグラフを描画する記述を追加します。

    このあとデータを取得するため、グラフには仮の値を入れています。
    グラフの描画は以下を参考に行いました。
    https://www.chartjs.org/docs/2.9.4/charts/

    全ソースの表示