EC-CUBE初心者のテンプレートカスタマイズ方法入門

Pocket

無料で使えてECサイトとしての機能も充実しているEC-CUBE。管理画面の使い方は公式本に掲載されていますが、ページの追加やブロックの作成方法などの情報が少ないのが難点。

初心者には少し敷居が高く感じるのですが、せっかく無料で誰でも使えるのでカスタマイズにもチャレンジしてみましょう。

ここではカスタマイズの入門編ということで、EC-CUBEカスタマイズの全体像をさくっと紹介します。

初心者のためのカスタマイズ入門

EC-CUBEのテンプレート構造

EC-CUBEにはPC用、スマホ用、ケータイ用の3つのテンプレートがあります。デフォルトではそれぞれのデバイスでアクセスすると自動的に表示されるテンプレートが決められますが、設定を変更することでPCのみ表示することも可能。

PC用テンプレート
EC-CUBE初心者のためのテンプレートカスタマイズ入門1
スマホ用テンプレート
EC-CUBE初心者のためのテンプレートカスタマイズ入門2

EC-CUBEのテンプレートを変更する方法

テンプレートを変更するには、管理画面メニューのデザイン管理 -> テンプレート追加で新しいテンプレートを追加し、その後テンプレート設定から追加したテンプレートを適用します。

テンプレートの追加と設定は各デバイスごとに設定できるので、PCだけ変更したり、スマホだけ変更することも可能。
EC-CUBE初心者のためのテンプレートカスタマイズ入門3
テンプレートを入手するにはオーナーズストアやこちらのテーマショップで購入できます。

各テンプレートの中身

各デバイスごとにテンプレートがありますが、それぞれの中身はだいたい同じ(もちろんコードは違います)。ざっくりと分類すると以下の3つの要素に分けることができます。

  • ページ:URLにアクセスしたときに表示されるページ
  • ブロック:各ページごとに入れ替え可能なコンポーネント
  • フレーム:ブロックやページを呼び出すテンプレート

head内や呼び出すブロックの位置などを変更する場合はフレームテンプレート、ページのカスタマイズは各ページのテンプレート、ブロックをカスタマイズする場合は各ブロックのテンプレートを変更します。

EC-CUBEテンプレートコードをカスタマイズする方法

ブロックやページのコードをカスタマイズするには、変更したいテンプレートをテキストエディターなどで開いて書き換え、保存すればOK。
EC-CUBE初心者のためのテンプレートカスタマイズ入門4
デフォルトのテンプレートをカスタマイズする方法が一般的かと思いますが、もちろんゼロからコードを書いても問題ありません。

EC-CUBEのテンプレートエンジン、Smartyについて

EC-CUBEではテンプレートエンジンにSmartyを使っています。カラーミーショップやブログサービスなどでも使われているメジャーなものなので使えるよになっておくと便利。

Smartyについてはこちらのリファレンスが分かりやすいです。

テンプレートをカスタマイズする際には、すでにEC-CUBEで定義されている定数を使ったり、各ページやブロックでテンプレートに送られてくる配列を加工して表示していきます。

例えば、indexページでは以下のような方法でimgフォルダへのパスを取得し、画像を表示しています。

<img src="<!--{$TPL_URLPATH}-->img/banner/bnr_top_main.jpg" />

このあたりはWordpressのテンプレートタグのような感じですね。

EC-CUBEのクラスについて

基本的にはあまり触ることはないのですが、デフォルトにはない機能を追加したり、独自にブロックを追加する場合はクラスファイルを作成する必要があります。

クラスファイルの構造はこんな感じ。

  • class:クラスファイル本体
  • class_extends:クラスファイルを継承したもの
  • php:クラスファイルとテンプレートをつなぐもの

新しいページやブロックに新しい機能がある場合、上記の3つのファイルを用意する必要があります。

ブロックやページの作り方、追加方法はこちら↓
EC-CUBEのブロックを作成・追加する方法

EC-CUBEのテンプレートにスタイルを当てる方法

テンプレートにCSSスタイルを当てるには、CSSファイルを編集すれば良いのですが、テンプレートフォルダにあるCSSを変更してもスタイルが適用されません。

CSSスタイルを変更するには、EC-CUBEのフォルダ -> html -> user_data -> packages ->テンプレートフォルダにあるCSSファイルやjavascriptファイルを編集します。