更新日: 2022 / 04 / 28

【2022最新】EC-CUBE4初心者のためのテンプレートカスタマイズ方法

カテゴリー: EC-CUBE4 ネットショップ構築ガイド

EC-CUBE4は無料でネットショップを構築できるCMSですが、Wordpressに比べて情報量も少なく、Twigの書き方も覚える必要がるので難しいと感じる方が多いと思います。わかってしまえばそれほど難しくないのですが、分かるまでが結構つらいんですよね（僕も苦労しました）。

このページではEC-CUBE4初心者の方でも分かりやすく、テンプレートやデザインのカスタマイズ方法を具体的に解説していきます！

EC-CUBE4.2対応 一番安いデザインテンプレート

EC-CUBE4.2対応に対応したレスポンシブテンプレートを公開しています。あらかじめデザインされたUIブロックを多数同梱しているので、面倒なコーディングなしに今すぐショップを構築したい方におすすめ。

-> 詳細はこちら

EC-CUBE4 テンプレートカスタマイズの基礎

カスタマイズを始める前にEC-CUBE4のテンプレート構造と開発環境の構築など基本的な内容について解説しておきます。

  • テンプレート構造について
  • テンプレートファイルの呼び出し順
  • 開発環境の構築方法

テンプレート構造について

EC-CUBE4のテンプレート構造はWordpressと違って固定となっています。Wordpressはindex.php１つでテーマとして成立してましたが、EC-CUBEの場合はデフォルトテンプレートの構造をそのまま使用する必要があります。

EC-CUBE4のテンプレート（ページ）構造 

テンプレートフォルダ
  - Block/ ブロック
  - Cart/ カートページ
  - Contact/ お問い合わせページ
  - Entry/ 会員登録ページ
  - Forgot/ パスワードの再発行ページ
  - Form/ フォームパーツ
  - Help/ ご利用ガイドなど
  - Mail/ 自動送信メールのテンプレート
  - Mypage/ マイページ
  - Product/ 商品一覧と詳細
  - Shopping/ 決済ページ
  - block.twig ブロックのフレーム
  - default_frame.twig 全ページのフレーム
  - error.twig エラーページ
  - index.twig トップページ
  - pager.twig ページネーション用テンプレート
  - snippet.twig スニペットテンプレート？

テンプレートファイルの呼び出し順

テンプレートファイルは基本的には現在使用中のテンプレート内にあるファイルが呼び出されます。ところがデフォルトテンプレートの中身をみてみると空っぽ...

EC-CUBE4 テンプレートファイルの呼び出し順

ページテンプレートだけでなく、ブロックもありません。にもかかわらず正しく表示されてるのはなぜでしょうか？

EC-CUBE4では単に現在使用中のテンプレートからファイルを取得するだけでなく、そこになければソースコードにあるファイル、さらにプラグインのファイルと順に読み込まれます。

デフォルトテンプレートが空っぽにもかかわらず正しく表示されているのは、ソースコードから読み込まれてるからです。

// まずは現在使用中のテンプレートに含まれるファイルが呼び出されます
1. ECCUBEROOT/app/template/[template_code]

// 現在使用中のテンプレートにファイルがなければ、ソースコードにあるファイルが呼び出されます
2. ECCUBEROOT/src/Eccube/Resource/template/[template_code]

// ソースコードにないもの（例えばプラグインで追加されたもの）はプラグインにあるファイルが呼び出されます
3. ECCUBEROOT/app/Plugin

ファイルを編集する場合は、app/templateの方にあるテンプレートフォルダにテンプレート構造と同じ場所にファイルを設置します。

もしくは管理画面の「コンテンツ管理 -> ページ管理」で編集すると自動的にファイルが作成されるのでそのファイルを編集します。

これはWordpressの子テーマに近いイメージ。カートや決済、マイページなど重要な部分はデフォルトでそれ以外のページのみ変更する、といったことも可能です。

ソースコードのファイルは変更しない

ソースコードの方が読み込まれているからといってソースコードのファイルを編集しないようにしてください。ソースコードのファイルを編集してしまうとデフォルトに戻せなくなるので注意が必要です。

開発環境の構築方法

EC-CUBE4は各種レンタルサーバーで簡単にインストールできるようになっているので、いきなりサーバー上でカスタマイズすることも可能です。ただ、最初はわからないことが多く、最悪ページが真っ白になって何も表示されなくなったり、管理画面にログインできないといったことも発生します。

なのでまずは自分のPC（ローカル環境）でEC-CUBE4を使ってみて操作に慣れておくことをおすすめします。

こちらの記事でMAMPを使ってローカル環境を構築する方法について解説しているので参考にしてみてください。

公式ドキュメントでも、MAMPやXAMPP、Dockerを使った開発環境の構築方法がまとめられています。

EC-CUBE4のテンプレートカスタマイズ方法

EC-CUBE4のテンプレートカスタマイズ方法は大きく分けて次の２つです。

  • 1.テンプレートファイルをコードエディターで直接編集する
  • 2.管理画面からページやブロックを編集する

簡単なカスタマイズであれば管理画面から編集することができます、複雑な修正が必要な場合はコードエディターを使うのがおすすめ。

1.テンプレートファイルをコードエディターで直接編集する

テンプレートファイルはコードエディターで開いて編集することができます。編集したファイルはFTPツールなどを使ってapp/templates/テンプレート名にアップロードします。

アップロードした後に変更を反映するために、キャッシュクリアが必要なので忘れずやっておきましょう。

注意！サーバーにページやブロックのファイルを配置するだけでは表示されない

管理画面からではなく、サーバーに直接ページテンプレートやブロックのtwigファイルをアップロードしてもEC-CUBEには認識されず、ブラウザに表示することもできません。

新しくページやブロックを作成する場合は必ず管理画面から作成しましょう。そのあとならコードエディターを使って編集することができます。

2.管理画面からページやブロックを編集する

EC-CUBE4の管理画面メニューの「コンテンツ管理 -> ページ管理」や「コンテンツ管理 -> ブロック管理」からページとブロックの編集ができます。

EC-CUBE4 2.管理画面からページやブロックを編集する1

管理ページに表示される一覧の中から編集したいものをクリックすると編集画面に移動します。EC-CUBE4からは管理画面のページ編集エリアがエディターっぽくなってるので、管理画面から直接編集もやりやすくなっています 。 EC-CUBE4 2.管理画面からページやブロックを編集する2

管理画面から編集した場合はキャッシュが自動的にクリアされます。

なお、default_frame.twigは管理画面から編集することができないため注意が必要です。

新しくページやブロックを追加する

最初から用意されているデフォルトページやブロックだけでなく、新しくページやブロックを作って追加することも可能です。

管理ページの上部にある「新規作成」ボタンを押すと新しいページやブロックの作成が可能です。

新しくページを作成する場合は次の3つの情報が必要です。

  • ページ名: ページの名前、分かりやすい名前を記入
  • URL: ページのURL、他のページと被らないURLを記入
  • ファイル名: このページで使用するファイル名を半角英数字で記入

EC-CUBE4 2.管理画面からページやブロックを編集する2

新しくブロックを作成する場合は次の2つの情報を記入してください。

  • ブロック名: 分かりやすいブロック名を記入
  • ファイル名: ファイル名、半角英数字で記入

EC-CUBE4 2.管理画面からページやブロックを編集する3

テンプレートで使えるデータについて

商品データやショップの設定データなどはWordpressのようにタグを使って取り出せるものもあれば、自分でデータをテンプレートに渡すコード（PHP）を書く必要があるものもあります。

EC-CUBE4の各ページで使用できるデータはドキュメントが用意されていないため、自分でController.phpやEntityを調べる必要があります。

どんなデータが取得できるかを調べるには、各ページのController.phpを開いてdump()関数で調べることができます。例えば商品ページならこんな感じ。

// src/Eccube/Controller/ProductController.php
/**
 * 商品詳細画面.
 * // 省略
 * @param Request $request
  * @param Product $Product
  *
  * @return array
  */
public function detail(Request $request, Product $Product)
{
    // 省略

    // returnの前にdump()でデータをチェック
    dump($Product);

    return [
        'title' => $this->title,
        'subtitle' => $Product->getName(),
        'form' => $builder->getForm()->createView(),
        'Product' => $Product,
        'is_favorite' => $is_favorite,
    ];
}

商品詳細ページを開くと取得したデータの中身をチェックできます。調べ方はマイページやカートページでも同じ。データをテンプレートで使う方法はEC-CUBE4カスタマイズ初心者のためのTwig入門をご覧ください。

EC-CUBE4 テンプレートで使えるデータ

新着商品や売り上げランキングを作るには？

上にも書いたようにデフォルトで用意されていないデータはPHPコードを書いてデータを取得するコードを書く必要があって、初心者の方にはかなり難易度の高い作業になります。

すぐにショップを開設したいけど、PHP書くのめんどくさい！という方のために、新着商品や売り上げランキングを簡単に実装できるプラグインを開発しました。

UICube

設定画面で月ごと、週ごとなどの集計やカテゴリの設定もできる便利なプラグインになっています。きになる方は是非チェックしてみてください。

EC-CUBE4のデザインをカスタマイズする方法

EC-CUBE4のデザインをカスタマイズする方法は次の4つの方法があります。

  • 1.CSS画面からCSSを追加する
  • 2.新しくCSSファイルを作って読み込む
  • 3.ページやブロックに直接CSSコードを書き込む
  • 4.Sassを編集してビルドする

この中でも1と3は管理画面からCSSコードを入力してデザインをカスタマイズすることができるので簡単です。

1.管理画面からCSSを追加する

1つめは管理画面の「コンテンツ管理 -> CSS管理」からCSS設定ページを開き、CSSコードを記入する方法です。

EC-CUBE4のデザインをカスタマイズする方法方法 1.管理画面からCSSを追加する

ここで入力した内容はショップ全体に適用されるようになります。デザインを細かくカスタマイズする場合コード量が多くなってしまいますが、一箇所で管理できるので分かりやすいというメリットもあります。

2.新しくCSSファイルを作って読み込む

2つめはWordpressなどでも一般的に使われる方法で、CSSファイルを作成してテンプレートに読み込む方法です。

作成したファイルは、html/template/テンプレート名/assets/css/に入れておき、default_frame.twigのheadにlinkタグを挿入します。

挿入する場所はデフォルトのスタイルシートの直後にしておきます。

<!-- default_frame.twig -->

<!-- デフォルトのスタイルシート -->
<link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">
<!-- 追加のスタイルシート -->
<link rel="stylesheet" href="{{ asset('assets/css/myTheme.css') }}">

default_frame.twigは管理画面から編集できないので、コードエディターで編集してFTPツールでアップロードします。

アップロード後は「コンテンツ管理 -> キャッシュ管理」からキャッシュの削除をおこなって変更を適用してください。

3.ページやブロックに直接CSSコードを書き込む

EC-CUBE4 ページごとのstylesheetブロックに記述

ページ編集画面に表示されるコードにはstylesheetブロックがあり、ここにページ（またはブロック）ごとのスタイルを記述することができます。

この方法は手軽ですが、ファイル内のコード量が多くなり可読性が悪くなるという欠点があります。また、ここで書いたコードはこのページでしか使えないため注意が必要です。

4.Sassを編集してビルド

アセットフォルダにある元のCSSファイルを編集することもできますが、このファイルは巨大なため直接編集するのはかなり大変。なので元のスタイルをカスタマイズするならSassを使った編集方法がおすすめです。

Sassでビルドを行うにはnode.jsのインストールが必要です。こちらのQiitaの記事が参考になるのでサクッとインストールしておきましょう。

nodeがインストールできたら、ターミナルでeccube4のルートフォルダ（ここではeccube-412）に移動します。

cd /Applications/MAMP/htdocs/eccube-412

移動したらインストールコマンドを打ち込みます（インストールは最初の１回だけでOK）。

npm install

npm installで必要なnodeパッケージがダウンロードされます。ダウンロードが完了したら、続けてビルドコマンドを入れます。

npm run build

するとデフォルトテンプレートに、最初はなかったstyle.min.cssが作成されます。

ECCUBE4 Sassを編集してビルド1

追記: 4.0.3以降ではビルドコマンドだけで問題なくスタイルが適用されますので、以下の作業は不要です。

ところが、自分で作ったテンプレート(ここではnewTemplate)には何も変化がありません。その理由はgulpfile.jsでSassのビルド設定を行っていないためです。

eccube-4.0.0/gulpfile.jsを開いて8~11行目にあるビルド対象（初期状態ではdefaultテンプレートとadminテンプレート）の配列に新しく追加したテンプレートを入力しましょう。

// eccube-4.0.0/gulpfile.js
const srcPattern = [
    'default',
    'admin',
    'newTemplate' // 追加したテンプレート名
];

もう一度先ほどのビルドコマンドを打ち込めば今度はうまくいきます。

EC-CUBE4 Sassを編集してビルド2

ちなみに、EC-CUBE4にはスタイルガイドがあるためこちらを参考にカスタマイズしていくことができます。

EC-CUBE4 おすすめリソース集

最後にEC-CUBE4のリソースをまとめておきました。テンプレートのカスタマイズだけでなく、管理画面の使用マニュアルや不具合の相談ができる開発コミュニティなどもあるのでぜひ参考にしてみてください。

まとめ

EC-CUBE4は無料で使えるので、やや学習コストは高めですが、じっくり取り組むことができます。

このページではカスタマイズ方法の全体的なことについて解説しました。このあとの流れとしてはローカル環境を作ってデフォルトテンプレートをいじってみるところから初めてみるのがおすすめです！