![](https://design-tera.com/wp-content/uploads/2023/01/fd1b863e460fa5d1209f04e6f584e113-133x85.jpg)
EC-CUBE3.0のテンプレートカスタマイズの手順。
カテゴリ:WEB制作
タグ:
![](https://design-tera.com/wp-content/uploads/2016/08/ec-cube-thumb.jpg)
![EC CUBEのカスタマイズ手順](https://design-tera.com/wp-content/uploads/2016/08/ec-cube-thumb.jpg)
EC-CUBE3.0のリリースから約1年程が経ちました。
はじめてテンプレートのカスタマイズを行おうとした際に開始早々にimg・css・jsが外れてレイアウトが崩れてしまいました。その時の対処法も含めてテンプレートのカスタマイズを開始する際の手順を紹介します。
1.テーマの複製
管理画面のオーナーズストア→テンプレート→テンプレート一覧で複製したいテーマをダウンロードします。
今回はデフォルトをダウンロードします。
![デフォルトテンプレートのダウンロード。](https://design-tera.com/wp-content/uploads/2016/08/default-download.jpg)
ダウンロードしたdefault.tar.gzをテンプレートのアップロードから読み込ませます。
適当なテンプレート名を入れてください。今回はcustom01にします。
![デフォルトテンプレートのアップロード。](https://design-tera.com/wp-content/uploads/2016/08/default-upload.jpg)
テンプレート一覧に戻ってアップロードしたテンプレートを登録(適用)します。
![テンプレートの適用](https://design-tera.com/wp-content/uploads/2016/08/custom-select.jpg)
次に、src/Eccube/Resouce/template/defaultのフォルダにあるファイルを全てapp/template/custom01のフォルダにコピペしてください。
![ファイルをコピペ](https://design-tera.com/wp-content/uploads/2016/08/copy-1.png)
とりあえず、コレでテーマの複製は完了です。
2.front_urlpathの変更
![レイアウト崩れ](https://design-tera.com/wp-content/uploads/2016/08/crush.png)
1の過程で上記のようにimg・css・jsへのリンクが外れた方はおそらくfront_urlpathが正しい所を見ていないです。
下記を試してみてください。
app/config/eccube/のフォルダにpath.ymlがあるのでコレを編集します。
30行目の
front_urlpath: /template/default
を
front_urlpath: /html/template/custom01
に書き換えてください。
※custom01の部分は自分で名前を付けたテンプレート名です。
直っていない場合はコンテンツ管理→キャッシュ管理→キャッシュクリアを行ってください。
![キャッシュのクリア](https://design-tera.com/wp-content/uploads/2016/08/cash-clear.jpg)
3.カスタマイズの階層について
あとは、それぞれのファイルを追加修正してカスタマイズするだけです。
階層は下記です。
テンプレートはapp/template/custom01(1.テーマの複製でペーストした場所)にあります。
CSS等は/html/template/custom01にあります。