ECCUBE3でデフォルトテンプレートから独自テンプレートを作る方法

 
ECCUBE3でデフォルトテンプレートから独自テンプレートを作る方法

ECCUBE3のデフォルトのテンプレートをコピーし独自のテンプレートでデザインカスタマイズしていく環境を整える方法をご紹介します。

ECCUBE3のテンプレートの基礎知識

ECCUBE3の構成ファイルの中でデザインテンプレートに使用するためのファイルは以下の3か所です。

1:app/template/

2:src/Eccube/Resource/template/

3:app/plugin/プラグイン名/Resource/template/

独自デザインテンプレートの場合に関係するのは1と2になり、1はcss、js、imagesなど普段からよく使うビジュアル編集に利用するファイルが格納され、2には管理画面の【コンテンツ管理】の「ファイル管理、ページ管理、ブロック管理」で使うような構成ファイルが格納されています。

ECCUBE3をインストールした初期状態では上記/template/以下には【default】というテンプレート群が格納されているので複製して独自テンプレートを作っていきましょう。

ECCUBE3で独自テンプレート環境を作る

デフォルトテンプレートの内容をコピー

以下のデフォルトテンプレートの中身をすべてコピーします。

src/Eccube/Resouce/template/default

デフォルトテンプレートの内容をコピー

続いてコピーしたファイル群を以下のdefault内にペーストしましょう。

app/template/default

デフォルトテンプレートの内容をコピー2

管理画面よりデフォルトテーマをダウンロード

管理画面の「オーナーズストア」→「テンプレート」→「テンプレート一覧」からデフォルトテンプレートをダウンロードします。

管理画面よりデフォルトテーマをダウンロード

新しいテンプレート名をつけてアップロード

ダウンロードしたデフォルトのテンプレートをそのまま「オーナーズストア」→「テンプレート」→「アップロード」よりテンプレートコードとテンプレート名を入力してアップロードしましょう。

新しいテンプレート名をつけてアップロード

これでテンプレート一覧よりデフォルトテンプレートを複製して作った「mysite」という独自テンプレートが表示されているので選択して【登録】で完了です。

こうすることでデフォルトテンプレートを温存しつつカスタマイズを進めていくことができる環境となります。