【EC-CUBE 4】カスタマイズ方法まとめ

eccube4のカスタマイズ方法まとめ

この記事では、日本でもっとも選ばれているECオープンソース・EC-CUBEのバージョン4について、著者自身が学習・実践してきたカスタマイズ方法をまとめています。(著者の学習状況に合わせて随時更新中)

EC-CUBEとは

ネットショップの製作や管理ができるオープンソース型ソフトウェアのこと。誰でも無料でインストールでき、サイトの外観からカート機能、売上管理といった基本的な機能が備わっている。
ドトールのオンラインショップたおる本舗 など、35,000を超える店舗で運用されている。その中には「ドン・キホーテ」や「ジュンク堂書店」なども含まれるようです。

EC-CUBEは誰でも無料で使え、かつカスタマイズ性が高いのが特徴です。が、初心者にはそのカスタマイズがなかなか難しい。

サイトの文章や配置をちょっと変更する程度ならあまり問題ありませんが、商品の管理項目を増やして保存したり、商品や顧客データベースから特定のデータだけを抽出したりといった機能は、プログラミングやサーバー管理の知識・技術が必要となります。

本ブログでは、著者自身が実際に行ったカスタマイズ方法を備忘録として纏め、できる限り分かりやすく公開しています。
ただし独学のため、中には非効率な方法だったりバージョンや動作環境によって機能しなかったりなどあるかもしれません。その点はご容赦ください。

EC-CUBEのカスタマイズをしようと思っている方の、一つの参考になれば嬉しいです!

【動作環境】
EC CUBEのバージョン:4.1.2
サーバー:Xserver

目次

管理画面の操作のみでできるカスタマイズ

コンテンツ管理から、既存ページの編集や新規ページの作成ができます。

ここで作成した新規ページには「user_data」というURLが自動で入ってしまい、データベースの情報を取得したり更新したりといったことが基本的にできません。したがって、そのページのみで完結する内容(例えばブログ)が中心となります。
より柔軟なページを作成したい場合は、ファイルサーバーにControllerファイルをアップするなど、少し高度なカスタマイズが必要です。詳細はこちら

またページのレイアウトや装飾などをがっつり修正したいなら、HTMLやCSS、JavaScriptの知識に加えて、Twigと呼ばれるPHP向けのテンプレートエンジンを理解する必要があります。

Twigテンプレートを使いこなそう!

通常のHTMLとは異なった記法となるTwigテンプレートについて纏めています。

CSSとJavaScriptを使ってデザインを変更しよう!

CSSについて

「CSS管理」を開いてCSSコードを書き込むと、その内容がサイト全体に反映されます。

より詳しく知りたい方は以下の記事にて。

JavaScriptについて

「JavaScript管理」を開いてJavaScriptコードを書き込むと、その内容がサイト全体に反映されます。

より詳しく知りたい方は以下の記事にて。

HTML / CSS / JavaScript については、こちらに色々な表現パターン(メッセージの表示や自動計算、画像拡大など)のコードを公開しています。EC-CUBE関連記事と合わせて参考にしていただければと思います。

ファイルサーバーやデータベースの操作が必要なカスタマイズ

カスタマイズをするなら、やはりファイルサーバーやデータベースの操作はできるようにしておきたいところ。
難易度は高いですが、よりオリジナリティの高いサイト設計ができるでしょう。

なお、EC-CUBEにはSymfonyと呼ばれるPHPフレームワークが採用されています。
できれば知っておきたい仕組みですが、ここでは基礎的な内容は省き、『こういうカスタマイズをするなら◯◯』といったピンポイントな記事を列挙しています。

操作を誤ると、取り返しのつかない事態に発展する可能性があります。(当方では責任を負いかねますので、自己責任でお願いします。)
バックアップを用意しておくか、慣れるまでは練習用の模擬サイトを用意して、試行錯誤してみるのをオススメします。

まずはデバッグモードを設定しよう

EC-CUBEの初期設定では、バグが発生しても専用のエラーページが表示されるようになっています。このページだけではエラー内容が全くわからないのですが、予めデバッグモードを設定しておくことで、エラーの詳細が表示されるようになります。

運用環境のときは、デバッグモードの解除を忘れないように!

ページの基本設定(headタグの編集)に関するカスタマイズ

『default_frame.twig』というファイルを編集することで、サイトのタイトルやアイコン(ファビコン)などの編集ができます。該当ファイルを修正してアップするだけで手数が少なく、初心者でも比較的簡単に対応できるカスタマイズです。

新規ページ作成(Controllerの編集)に関するカスタマイズ

新規ページの作成はEC-CUBEの管理画面からでもできますが、先述の通り「user_data」というURLが自動で入ってしまったり、データベースから情報を取得したりといったことができません。

こちらの方法を用いることで、URLを自由に決めることはもちろん、データベースから特定の情報を選んで表示させるといったことができるようになります。

こういった新規ページの作成には、Controllerと呼ばれるファイルの作成が必須となります。
まずは比較的簡単なところからで、新規ページのURLから「user_data」を消すと同時に簡単なControllerファイルを作成できる、以下記事がオススメです。

新規ページを作成できたら、Controller経由で実際にデータを渡してWebページに表示させてみましょう。

さらに、データベースから情報を引っ張ってきて表示させてみましょう。

このあたりの記事で、データベースの情報取得&Webページへの表示方法が何となくでも理解できるようになれば嬉しいです。

(応用)特定の商品だけをピックアップして一覧表示する

Controllerからデータベースの表示ができれば、以下のようなページを作ることもできます。
ここまでできれば、かなり実用的なカスタマイズになるかと思います。

(応用)特定の商品を非表示にする

商品の公開ステータスを利用して、特定の商品を非表示にする仕組みを解説しています。
前項のようなオリジナル商品一覧ページを作成した場合に、合わせて実装しておくとベターです。

(応用)ID別に詳細ページを作成できる自動フェッチ

ID別に複数ページを用意する場合は『自動フェッチ』機能が便利です。
商品詳細ページ「(ドメイン名)/products/detail/1」のように、URLの末尾に指定した数字と同じIDをもつデータ(レコード)を抽出することができます。

データベース拡張や変更に関するカスタマイズ

既存のテーブル(商品情報や会員情報)に新しい項目(属性)を追加したいときや、新規でオリジナルのテーブルを追加したい場合はこちら。

EC-CUBEのデータベース拡張は少し癖があり、サーバーにSSH接続してコマンド入力する必要があります。著者は初めてのトライでかなり苦戦しましたので、なるべく手順を詳細に書いたつもりです。

既存のテーブルを編集する場合

新規のテーブルを作成する場合

データベース拡張後は直接データベースを操作しても良いですが、その項目を管理画面から登録できるようにしておくと便利ですね。

テーブルを新規に作成した場合、そこに保存したデータを扱うにはRepositoryが必要です。以下記事で、作成したテーブルのデータをWebページに表示する方法を解説しています。

特定のページから、オリジナルテーブルに新しくデータ(レコード)を追加する方法は以下記事で解説しています。

また、作成したテーブルを修正する方法についても解説しています。

まとめ

以上、【EC-CUBE 4】カスタマイズについての記事をまとめました。

冒頭の通り、著者自身も勉強&実践中です。
引き続き、自身の備忘録の意味合いも込めて、カスタマイズ方法を随時更新していこうと思います。

今後とも、よろしくお願いします!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次