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

EC-CUBE4は無料でネットショップを構築できるCMSですが、Wordpressに比べて情報量も少なく、Twigの書き方も覚える必要がるので難しいと感じる方が多いと思います。

このページでは、これからEC-CUBE4のテンプレートをカスタマイズする人のために、テンプレート構造からコーディング、スタイルの編集方法までじっくり解説していきます!

今すぐ使える!Bootstrap4対応 格安レスポンシブテンプレート公開中

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

カラーミーショップ レスポンシブテンプレート

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

カスタマイズを始める前にEC-CUBE4のテンプレート構造と開発環境の構築についてまとめてみます。

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

EC-CUBE4のテンプレート構造はWordpressと違って固定となっています。Wordpressはindex.php1つでテーマとして成立してましたが、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 スニペットテンプレート?

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

テンプレートファイルは現在開いているページに対応するファイルが読み込まれますが、単に現在使用中のテンプレートから取得するだけでなく、そこになければソース側のテンプレート、さらにプラグインと順に読み込まれます。

つまり、テンプレートをカスタマイズする際は必要なテンプレートだけを追加するだけで問題なく動作するということですね。

1. ECCUBEROOT/app/template/[template_code]
2. ECCUBEROOT/src/Eccube/Resource/template/[template_code]
3. ECCUBEROOT/app/Plugin

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

開発環境の構築方法

EC-CUBE4をローカル環境で使用するには開発環境を整える必要があります。

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

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

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

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

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

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

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

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

管理画面から編集した場合は自動的にファイルが作成されます。デフォルトのページやブロックだけでなく、新規追加することも可能です。

EC-CUBE4からは管理画面のページ編集エリアがエディターっぽくなってるので、管理画面から直接編集もやりやすくなっています。

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

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

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

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

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

どんなデータが取得できるかを調べるには、各ページの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のCSSスタイルをカスタマイズする方法

CSSを変更する方法は次の4つのやり方があります。EC-CUBE4.0.2からCSS管理が追加されたのでより簡単にスタイルのカスタマイズができるようになっています。

1.ページごとの編集ページでstylesheetブロックに記述

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

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

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

2.Sassを編集してビルド

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

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

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

cd /Applications/MAMP/htdocs/eccube-4.0.4

移動したらインストールコマンドを打ち込みます(インストールは最初の1回だけで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にはスタイルガイドがあるためこちらを参考にカスタマイズしていくことができます。

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

新しくCSSファイルを作成して読み込むこともできます。作成したファイルは、html/template/テンプレート名/assets/css/に入れておき、default_frame.twigのheadにlinkタグを挿入します。

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

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

EC-CUBE4.0.2から管理画面でCSSコードを追加できるようになりました。CSSコードを貼り付けるだけなのでビルドも不要。

やり方は、コンテンツ管理->CSS管理でCSS編集ページを開き、コードを貼り付けるだけ。

EC-CUBE4 管理画面からCSSを追加する

これならSassのビルドが難しくても簡単にスタイルをカスタマイズできますね。

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

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

まとめ

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

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

Copyright © 2020 homupedia.com