デジタルマーケティングやデザイン・開発に関する情報やセルリアに関するトピックを更新。
運営メディアのピックアップコンテンツ、外部サイトへの寄稿記事なども公開しています。

ビジネスを成功へと導くWeb制作・インターネット広告・コンサルティング

Search

サイト内検索

初心者必見!ECCUBE4の管理画面をカスタマイズする方法

更新:2023年07月18日 カテゴリ: デザイン・開発

みなさんこんにちは!エンジニアの高澤です! 今回はECCUBE4の管理画面のカスタマイズ方法について解説したいと思います。

当記事ではECCUBE4の管理画面のカスタマイズに関して下記のメリットがあります。

  • 管理画面カスタマイズの基礎がわかる
  • 管理画面ダッシュボードに任意の項目やさまざまなグラフを追加できる
  • 商品登録ページに任意の項目を追加できる

それでは解説していきます。

ECCUBE4でカスタマイズするとは

ECCUBE4の管理画面をカスタマイズするのに必要な知識

ECCUBE4の管理画面をカスタマイズするにはいくつか必須の知識があります。

そもそもECCUBE4のカスタマイズはプラグインを使わない限りはエンジニアでなければできず、ある程度の学習は必要になってきます。 ECCUBE4を問題なくカスタマイズできるために、ここではいくつか必要と考える知識を解説いたします。

必要な知識は下記になります。

HTML/CSSの基礎知識

そもそも大前提として知っておかなければならないのが、HTMLとCSSです。

HTMLとCSSはウェブサイトの構築に必須のマークアップ言語になります。 WordPressなど他のCMSなどにしてもそうですが、サイトの表示や記事などのカスタマイズにはHTMLやCSSをアレンジして実現することが必須になります。

このHTMLとCSSを扱えるだけでも多くのことができますので、ぜひ身につけておきましょう。

PHPフレームワークSymfonyの基礎知識

ECCUBE4はPHPフレームワークであるSymfonyを使ってECサイトを実装しております。

Symfonyはフレームワークの機能としてモデル、ビュー、コントローラーの大きく3つの構成でできております。 この基本的な部分を理解しすることでECCUBE4の本体ファイルの中のPHPファイルをカスタマイズすることができます。

PHPプログラミングの基礎知識

ECCUBE4は大枠ではPHPのフレームワークであるSymfonyで実装されております。 そのため、ページの表示にはPHPテンプレートエンジンであるtwigを使用しますが、その他のECサイトとしてのシステム処理などに関してはSymfonyベースのPHPのプログラムで構築されております。

当記事でも扱いますが、PHPファイル(.phpというファイル名)の中のSymfonyベースのPHPプログラムを追加・修正したりするため、PHPの基礎を事前に理解していただくことはかなり重要といっても過言ではありません。

Twigテンプレートエンジンの知識

ページの表示にはPHPテンプレートエンジンであるtwigを使用します

TwigはPHPのテンプレートエンジンであり、テンプレートのロジックや変数の表示、条件分岐、ループなどを制御するための機能を提供しています。

システムで処理したデータをページに表示するというお決まりのフローがあるため、処理システムとページの表示の部分に関しては切っても切れないです。 なので、twigは必ず扱えるようにしましょう。

ECCUBE4のアーキテクチャの知識

ECCUBE4をカスタマイズする上で、ECCUBE4のアーキテクチャ(構造)や仕組みを知識として仕入れておくことが必要です。 コントローラー、モデル、ビューのそれぞれの役割や関係性、データベースの構造などを事前に把握することで、効果的なカスタマイズをスムーズにおこなうことができます。

ECCUBE4カスタマイズの基礎知識

ECCUBE4カスタマイズの

管理画面カスタマイズにはディレクトリ構造を理解することが重要

ECCUBE4をカスタマイズするにはまずECCUBE4の本体ファイルの全体的なディレクトリ構造を理解することが必要です。

また中でも重要な階層が「app」ファイル内の内容です。 appファイルはECCUBE4本体ファイルのルートディレクトリに配置されております。 管理画面のカスタマイズやページ表示でのカスタマイズの際に大体appファイルの中のものをいじることになります。

ECCUBE4のディレクトリ構造やファイル構造は下記のリンクから確認することができます。 ディレクトリ・ファイル構成|EC-CUBE 4 開発者向けドキュメントサイト

商品登録ページに任意の項目を追加する

それでは最初に商品登録ページに任意の項目を追加するカスタマイズ方法を解説したいと思います。 基本を理解する意味でもこの内容は最適かと思います。

商品登録ページに任意の項目の表示部分のコードの書き方

商品登録ページの管理画面に任意の表示部分を追加します。

当記事では任意のテキストを静的に表示させる実装になりますが、こちらのサンプルコードを応用させて登録商品ごとに別のデータを出し分け加工して表示させるなど、いろいろなことに使うことができます。

まずはルートディレクトから下記のパス通りにECCUBE本体ファイルをFTPで進んでいきます。 【ルートディレクト】/app/template/admin/Product/product__snippet.twig

ダッシュボードページに任意の項目を表示する実装コードの書き方

ルートディレクトから下記のパス通りにECCUBE本体ファイルをFTPで進んでいきます。 【ルートディレクト】/app/Customize/EventListener/AdminProductTwigEventListener.php

管理画面ダッシュボードの上部分に任意の項目を追加するのコードの書き方

この内容では、ダッシュボードページに任意の項目を表示させる実装が可能です。

例えば、任意のテキストを表示させることで何かしらの周知する際に役に立つかと思います。

ダッシュボードに任意の項目の表示部分のコードの書き方

ルートディレクトから下記のパス通りにECCUBE本体ファイルをFTPで進んでいきます。 【ルートディレクト】/app/template/admin/admin_test.twig

ダッシュボードに任意の項目の機能を実装するコードの書き方

ルートディレクトから下記のパス通りにECCUBE本体ファイルをFTPで進んでいきます。 【ルートディレクト】/app/Customize/EventListener/AdminTestEventListener.php

管理画面ダッシュボードに商品売上ランキングの分析用グラフを追加する

この内容では、ダッシュボードに商品売上ランキングの分析用グラフを追加するための解説になります。

実装自体はchart.jsというJavaScriptライブラリを使用しているため、ご自身次第でグラフのデザインに関してもカスタマイズすることが可能です。

グラフの機能部分を実装するコードを記述する

ルートディレクトから下記のパス通りにECCUBE本体ファイルをFTPで進んでいきます。 【ルートディレクト】/app/template/admin/admin_sales.twig

グラフの表示部分を実装するコードを記述する

ルートディレクトから下記のパス通りにECCUBE本体ファイルをFTPで進んでいきます。 【ルートディレクト】/app/Customize/EventListener/AdminSalesEventListener.php

まとめ

以上でECCUBE4の管理画面カスタマイズ方法の解説を終わりにいたします。 当記事では解説の手順通りにコピー&ペーストしていただければ実装可能な構成となっております。

また、ECCUBE4でカスタマイズする際に必要な周辺知識に関しても解説し、当記事一つでカスタマイズがなんたるかがわかるようになっております。

ECCUBEエンジニアとしても管理画面をカスタマイズできることは一つの大きなスキルとなるかと思いますので、よろしければぜひ当記事を繰り返しご活用ください。

更新:2023年07月18日 カテゴリ: デザイン・開発

現状のデジタルマーケティングに課題をお感じですか?

デジタルマーケティング施策やWebサイトの機能・デザイン等を見直される際は、ぜひお声がけください。 貴社のご状況やご要望に合わせ、アクセス解析から数値的な根拠を持って課題点の抽出と改善に向けての施策を無料にてご提案させていただきます。

お問い合わせ

CONTACT

目標を共に背負い、伴走するWebコンサルティング

Web Cusulting & Direction

当社の考えるWebコンサルティングは、目標をクライアントと共に共有し達成へと邁進すること。これは「解決策を示すことが役割である」という従来のコンサルティングの考え方と少し異なるかもしれません。あくまで、コンサルタントは経営者や事業責任者に対し、課題に対して解決につながる施策を示すまで仕事、と言う解釈が一般的でしょう。当社は設立してすぐにWebコンサルティング事業をはじめました。若いメンバー中心、驚かれるような実績もほとんどありませんでした。
そんな私たちが、大きな責任を背負った役職者に対し助言を行い、プロジェクトを成功に導かなければなりません。改善策を示すだけでは足りませんし、なかなか信じてももらえません。そのような中でどうしたらチームの一員として貢献できるのか。もがいた末たどり着いた答えは非常にシンプルでした。
助言だけでなく同時に実践も引き受け、先に成果を出してしまうこと。そうすれば、その実績が信頼に変わり、我々の示す改善策がチームに受け入れられやすくなり良いサイクルが作れます。私たちの中で強く根付いた価値観、「伴走するWebコンサルティング」を心の中心に据えて、クライアントの目標に対して真正面から向き合います。

作るだけではない、ビジネスの芯を捉えるWeb制作・開発

Design & Development

Webサイト制作会社、デザイン会社は日本全国に1万社以上存在します。加えて、最近ではWebサイトを無料で簡単に作れるサービスなども生まれてきました。
Web制作を生業とする企業は今一度事業のあり方を考えなければならない帰路に立たされています。当社もその例にもれず、自分たちのできるWeb制作とは何か、真剣に悩んできました。そしてたどり着いたのが、「ビジネスの芯を捉える」Web制作・開発を提供すること。かっこいいデザイン、印象の残るデザイン、確かにそれらは非常に価値があります。誤解を恐れずに言うならば、我々よりも良いデザインを作る会社はたくさんあるでしょう。我々は広告賞の受賞歴もなければ、アートに精通したクリエイティブディレクターが在籍しているわけでもない。言ってしまえば、最先端のクリエイティブを手掛けるにはまだ経験が浅いのは否めません。
だったら何ができるのか?私たちは、”集客で成果を出す”ことに長けています。創業から5年、クライアントのビジネスで結果を出すことだけを考えてきました。我々にとってデザインは手段。得意のユーザー解析、SEO、広告運用と組み合わせて「ビジネスの芯を捉えた」デザインを創造することで事業成長に繋げていきます。

高速PDCAを実現する、総合的な広告運用

Advertising management

「広告運用代行会社」と聞くと、多くの人はGoogleやYahoo!のリスティング広告をクライアントの代わりに運用する会社というイメージを思い浮かべるのではないでしょうか。それはある種間違いではないのですが、もしかすると時代遅れかもしれません。インターネット広告の種類は多種多様、リスティング広告とほとんど同じ意味とし使われていた「運用型広告」は、実際はリスティング広告以外にも効果的な手法が数多く存在します。加えて、Google広告やYahoo!広告はAIによる運用の簡略化やサポートの充実化が進み、代理店を介さずとも未経験者の運用で一定の効果を挙げられるようにもなっています。広告代理店の存在意義を改めて定義し直さなければなりません。
私たちが考える広告運用代行の価値は「成果を出し続けること」と「成果を出すプロセス、ノウハウをクライアントと共有すること」であると考えています。成果を出し続けるために、当社は多数の広告手法に精通する広告運用コンサルタントを育て、それらを最適なバランスで組み合わせて運用する体制を整備しました。
運用の状況をタイムリーにクライアントと共有しご一緒に課題や改善策を共有することで、長期的に見て価値の高い広告パートナーとしてチームに貢献いたします。

目標を共に背負い、伴走するWebコンサルティング

Web Cusulting & Direction

当社の考えるWebコンサルティングは、目標をクライアントと共に共有し達成へと邁進すること。これは「解決策を示すことが役割である」という従来のコンサルティン[続きを表示する]グの考え方と少し異なるかもしれません。あくまで、コンサルタントは経営者や事業責任者に対し、課題に対して解決につながる施策を示すまで仕事、と言う解釈が一般的でしょう。当社は設立してすぐにWebコンサルティング事業をはじめました。若いメンバー中心、驚かれるような実績もほとんどありませんでした。そんな私たちが、大きな責任を背負った役職者に対し助言を行い、プロジェクトを成功に導かなければなりません。改善策を示すだけでは足りませんし、なかなか信じてももらえません。そのような中でどうしたらチームの一員として貢献できるのか。もがいた末たどり着いた答えは非常にシンプルでした。助言だけでなく同時に実践も引き受け、先に成果を出してしまうこと。そうすれば、その実績が信頼に変わり、我々の示す改善策がチームに受け入れられやすくなり良いサイクルが作れます。私たちの中で強く根付いた価値観、「伴走するWebコンサルティング」を心の中心に据えて、クライアントの目標に対して真正面から向き合います。

作るだけでない、ビジネスの芯を捉えるWeb制作・開発

Design & Development

Webサイト制作会社、デザイン会社は日本全国に1万社以上存在します。加えて、最近ではWebサイトを無料で簡単に作れるサービスなども生まれてきました。Web制[続きを表示する]作を生業とする企業は今一度事業のあり方を考えなければならない帰路に立たされています。当社もその例にもれず、自分たちのできるWeb制作とは何か、真剣に悩んできました。そしてたどり着いたのが、「ビジネスの芯を捉える」Web制作・開発を提供すること。かっこいいデザイン、印象の残るデザイン、確かにそれらは非常に価値があります。誤解を恐れずに言うならば、我々よりも良いデザインを作る会社はたくさんあるでしょう。我々は広告賞の受賞歴もなければ、アートに精通したクリエイティブディレクターが在籍しているわけでもない。言ってしまえば、最先端のクリエイティブを手掛けるにはまだ経験が浅いのは否めません。だったら何ができるのか?私たちは、”集客で成果を出す”ことに長けています。創業から5年、クライアントのビジネスで結果を出すことだけを考えてきました。我々にとってデザインは手段。得意のユーザー解析、SEO、広告運用と組み合わせて「ビジネスの芯を捉えた」デザインを創造することで事業成長に繋げていきます。

高速PDCAを実現する、総合的な広告運用

Advertising management

「広告運用代行会社」と聞くと、多くの人はGoogleやYahoo!のリスティング広告をクライアントの代わりに運用する会社というイメージを思い浮かべるのではな[続きを表示する]いでしょうか。それはある種間違いではないのですが、もしかすると時代遅れかもしれません。インターネット広告の種類は多種多様、リスティング広告とほとんど同じ意味とし使われていた「運用型広告」は、実際はリスティング広告以外にも効果的な手法が数多く存在します。加えて、Google広告やYahoo!広告はAIによる運用の簡略化やサポートの充実化が進み、代理店を介さずとも未経験者の運用で一定の効果を挙げられるようにもなっています。広告代理店の存在意義を改めて定義し直さなければなりません。私たちが考える広告運用代行の価値は「成果を出し続けること」と「成果を出すプロセス、ノウハウをクライアントと共有すること」であると考えています。成果を出し続けるために、当社は多数の広告手法に精通する広告運用コンサルタントを育て、それらを最適なバランスで組み合わせて運用する体制を整備しました。運用の状況をタイムリーにクライアントと共有しご一緒に課題や改善策を共有することで、長期的に見て価値の高い広告パートナーとしてチームに貢献いたします。

サイト情報

SITE INFO