[eccube4]テンプレート(独自デザイン)作成前日譚

手探りばっか

準備

ECCubeに限らないけどテスト環境は作ったほうがいい。
ECCube4は環境が限られるから、前に書いた記事みたいにローカルでとりあえず用意しておいたほうが無難。

独自テンプレート(仮)作成

管理画面を開いて、
左メニュー「オーナーズストア」→「テンプレート」→「テンプレート一覧」、テンプレート名「デフォルト」をダウンロード、「default.tar.gz」が保存される。

左メニュー「オーナーズストア」→「テンプレート」→「テンプレート一覧」→「アップロード」で以下のように

テンプレートコード:半角英数(ディレクトリ名)
テンプレート名:全角可(テンプレート表示名)
テンプレートファイル:「default.tar.gz」

入力したら画面右下の「保存」をクリック。

「テンプレート一覧」に入力した内容が追加されてるのでそれを選択して右下の「登録」をクリック。
これで、元のデザインとまんま同じ内容が表示される独自テンプレートが完成。

独自デザインの組み込みについて

検索したらどこでも書いてあることだけど、ざっくりいうとECCubeはWPでいう「親テーマ」と「子テーマ」みたいなのがあって、ディレクトリ的にいうと

親:src\Eccube\Resource\template\default
子:app\template\default

って感じ。「子」のデータの読み込みが優先されて、「子」になければ「親」が読み込まれる。
管理画面の「ページ管理」で編集した場合もまずは「子」に保存されてそれが上書きされてって感じ。

組み込みをどうやっていくか

「子」で作っていけばまず間違いないんじゃないのって気持ち。
いきなり「親」で始めて、もしぶっ壊れたらフォローが効かないし。

保険として「親」を残しておくイメージでやってればひとまず問題ないと思う。

エラーが出たら

テンプレートを切り替えてたらエラーを吐いた。
エラーコードで調べたら同じ環境での対処法があった。

【解決方法】EC CUBE4のインストール直後に起こったエラー | De La Luna Office Days | WORDPRESSとEC CUBEくらいしか触っていないWEBデザイナーの日記とかメモ。

要するにキャッシュを消せばいいんだよってことで、消したら直った。

デザインの反映

wpで慣れきってると馴染みがないんだけど、テンプレートをいじってディレクトリにアップロードしたら管理画面側でテンプレートを再登録(キャッシュ削除)しないと反映されない。環境にもよるんだろうけど登録に時間がいちいちかかるのでめんどくさい。

全部ページ管理でいじれたらまだいいんだけどね。
default_frame.twigとかは直接触らないと無理だもの。

で、管理画面「コンテンツ管理」>「キャッシュ管理」からも前項と同じようにキャッシュを削除(=修正内容の反映)できるんだけど、安定しないのかなんなのかエラーを吐きやすいので前項の通りにディレクトリまで行って削除するのがひょっとして一番手っ取り早いのかもしれない。

毎回キャッシュ構築を待つのがめんどくさいですね。

画像とかCSSとかJSとか

wpとの相違点というか、テンプレートは1箇所で管理されないので注意。
ページデータと装飾関係のデータはディレクトリから違う。

ページ:app\template\default
装飾:html\template\default\asset

一旦デフォのテンプレートをDLしとけば分かる範囲なので混乱はしないと思う。まあ、間違えないように。

twigファイルの細分化について

デフォルトの構成を見ると「なんでここまで?」ってレベルで各パーツをファイル分けしまくってて、読み取るだけでも超だるい。同一ファイル内でifとか使えないのかよみたいなくらいで。

でまあ、各パーツをその名称のファイル名で小分けにして読み込まないと動かないぞって話ではないので、例えばheaderでとりあえず分けておいて、その中のcartとかそういうのをまた分けてみたいに、大枠から攻めていけばいいんじゃないのって感じ。

各変数的なのとかも似たようなもんで、ECCube4用のチートシート的なもんは探してもないっぽいのでtwigの方で漁らないとって感じで、なんか遠回りなんだよなって感じだからいきなりそっちに行かずに手を抜けるところは静的な表記のままで、都度分かる範囲でやってればいい気がする

コメント

タイトルとURLをコピーしました