EC-CUBEのデザインをカスタマイズする際に誰もがハマる事。

この記事は2.4系の記事です。最新版の2.11系ではディレクトリー構造が違います。

twitterで「EC CUBE」で検索すると、これからEC-CUBEをカスタマイズする方や今現在カスタマイズされている方のTLが結構見れます。
皆さんネットショップのちょっとしたデザインのカスタマイズから入るみたいなのですが、いきなりつまづいている方を結構見かけます。
今日はそんなEC-CUBEカスタマイズ初心者の方に向けた情報です。

EC-CUBEのテンプレートファイルの落とし穴

まず、EC-CUBEのデザインテンプレートのファイルがあるディレクトリですが、
/data/Smarty/templates
にあります。
インストール直後だとdefaultというテンプレートがあるハズです。
大抵の場合、ここにあるファイルを修正してデザインを変更したりするのですが、ここにひとつ落とし穴があります。

実は
/html/user_data/packages
にもテンプレートファイルがあります。
スタイルシートなんかはこのディレクトリにあるファイルが読み込まれます。なので、
/data/Smarty/templates
にあるスタイルシートをいじっても表示は変わりません。

スタイルシートは
/html/user_data/packages/テンプレート名/css
にあるファイルを修正しましょう。

この、/data/Smarty/templatesと/html/user_data/packagesは非常によく似ていて、みなさんここで結構ハマるみたいです。
/data/Smarty/templatesと/html/user_data/packagesの関係は複雑ですが、こう覚えると簡単です。
/html/user_data/packagesに無かったら/data/Smarty/templatesのファイルが使われる。

管理画面からブロックやページのHTMLを修正すると、/html/user_data/packagesにあるファイルが修正されます。
/html/user_data/packagesにファイルが無い場合は/data/Smarty/templatesから/html/user_data/packagesにファイルがコピーされ、それが利用されます。

デザインを修正する場合はこの2つのディレクトリの違いを把握するのがEC-CUBEのデザインをカスタマイズする上での第一歩です。
ここを解っていないと、
「テンプレート修正したのに反映されない〜！！」
といった事になります。

ちょっと作業しにくいですが、EC-CUBEの管理画面から全部やっちゃうのも良いかもしれません。
この2つのディレクトリの違いを考えずに済みます。

ちなみに、/html/user_data/のuser_dataというディレクトリ名はEC-CUBEの管理画面の「パラメータ設定」から変える事が出来ます。実際のディレクトリ名は変えてくれないので、そこは手作業で変更してください。

次回はEC-CUBEのテンプレートファイルの構成についてでも書こうかな？