EC-CUBE3.0初心者の簡単なテンプレートカスタマイズ方法

Pocket

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をインストールした直後はデフォルトテンプレートが登録されています。このデフォルトテンプレートをカスタマイズしていくことでも、オリジナルデザインのショップは構築可能ですが、今回は新しくテンプレートを作ってみます。

テンプレートを登録するには管理画面から登録する方法が簡単。以下の手順でデフォルトテンプレートをコピーしたものを登録します。

  1. app/template/defaultに、src/Eccube/Resouce/template/defaultの中身を全てコピー
  2. 管理画面/オーナーズストア/テンプレート/テンプレート一覧でデフォルトテンプレートをダウンロード
  3. 管理画面/オーナーズストア/テンプレート/アップロードでテンプレート名など入力し、ダウンロードしたdefault.tar.gzをアップロード

EC-CUBE3.0のテンプレートのアップロード

EC-CUBE3.0 新規テンプレートのカスタマイズ

新しいテンプレートの場所は、app/template/テンプレート名にあります。
EC-CUBE3.0のテンプレートの場所

テンプレートをカスタマイズして画面に変化がない場合、管理画面/コンテンツ管理/キャッシュ管理でキャッシュのクリアボタンを押し、キャッシュのクリアをしておきます。
EC-CUBE3.0のキャッシュクリア方法

EC-CUBE3.0でCSSスタイルをカスタマイズする方法

テンプレートのスタイルは、html/template/テンプレート名/cssにあります。
EC-CUBE3.0のCSSの場所

CSSスタイルをカスタマイズした後画面に変化がない場合は、テンプレートと同様キャッシュのクリアを試してみます。

新しくCSSファイルを作成した場合、テンプレートから読み込むのを忘れずに。
ベーステンプレート(デフォルトならdefault_frame.twig)のhead部分に以下のようにコードを追加しておきます。

<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/ファイル名.css">

まとめ

あとはCSSスタイルを修正してデザインを変更したり、テンプレートのコードを書き換えてコンテンツを付け加えたりしていけばOK。EC-CUBE3からはSymfonyとTwigに変わっているので、そちらも合わせて勉強しておく必要があります。

新しいページの追加やブロックの追加、プラグインの開発などはまた次回。