EC-CUBEは無料で公開されているネットショップ構築のためのCMS。無料で使えて、レンタルサーバーにも対応していることもあり、自分でショップを作りたいという方も多いようです。
EC-CUBEの最新版である3.0.10では機能の追加や不具合の修正など、初期のバージョンに比べて使いやすくなっており、2.13系やそれ以前のバージョンを使っている方もそろそろ乗り換えタイミングかも。
ということでこのサイトでは初心者でもできるEC-CUBE3.0の簡単なカスタマイズ方法についてまとめていこうと思います。
EC-CUBE3.0のテンプレートをカスタマイズする
EC-CUBE3のインストール方法についてはこちらをご覧ください。
EC-CUBE3.0をインストールする方法
EC-CUBE3.0はインストーラーが用意されており、レンタルサーバーでは簡単インストール機能もあるのでとくに問題なくインストールできるはずです。
EC-CUBE3.0 新規テンプレートの作成
EC-CUBE3.0をインストールした直後はデフォルトテンプレートが登録されています。このデフォルトテンプレートをカスタマイズしていくことでも、オリジナルデザインのショップは構築可能ですが、今回は新しくテンプレートを作ってみます。
テンプレートを登録するには管理画面から登録する方法が簡単。以下の手順でデフォルトテンプレートをコピーしたものを登録します。
- app/template/defaultに、src/Eccube/Resouce/template/defaultの中身を全てコピー
- 管理画面/オーナーズストア/テンプレート/テンプレート一覧でデフォルトテンプレートをダウンロード
- 管理画面/オーナーズストア/テンプレート/アップロードでテンプレート名など入力し、ダウンロードしたdefault.tar.gzをアップロード
EC-CUBE3.0 新規テンプレートのカスタマイズ
新しいテンプレートの場所は、app/template/テンプレート名にあります。
テンプレートをカスタマイズして画面に変化がない場合、管理画面/コンテンツ管理/キャッシュ管理でキャッシュのクリアボタンを押し、キャッシュのクリアをしておきます。
EC-CUBE3.0でCSSスタイルをカスタマイズする方法
テンプレートのスタイルは、html/template/テンプレート名/cssにあります。
CSSスタイルをカスタマイズした後画面に変化がない場合は、テンプレートと同様キャッシュのクリアを試してみます。
新しくCSSファイルを作成した場合、テンプレートから読み込むのを忘れずに。
ベーステンプレート（デフォルトならdefault_frame.twig）のhead部分に以下のようにコードを追加しておきます。
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/ファイル名.css">
まとめ
あとはCSSスタイルを修正してデザインを変更したり、テンプレートのコードを書き換えてコンテンツを付け加えたりしていけばOK。EC-CUBE3からはSymfonyとTwigに変わっているので、そちらも合わせて勉強しておく必要があります。
新しいページの追加やブロックの追加、プラグインの開発などはまた次回。
