EC-CUBE 4のトップページを構成するTwigテンプレートとブロックの見つけ方
EC-CUBE 4のトップページは、管理画面のレイアウト管理で配置する「ブロック」と、それを載せる本体テンプレート「index.twig」の二層構造です。変えたい部分がどちらに属するかを先に見極めるのが遠回りせずに済むコツです。以下は4系を前提にしています。
index.twigとブロックが組み合わさる仕組み
フロントの本体は app/template/default/index.twig です。メインビジュアルや新着情報といったパーツはそれぞれ独立したブロックのTwigで、配置位置はレイアウト管理の画面で決まります。
そのため「新着情報の見た目」を変えたいのに index.twig を探しても見つかりません。対象はブロック側のテンプレートです。
Twigを編集して見た目を変える具体的な手順とローカルでの検証
本番でいきなり触らず、複製環境で編集して確認する流れを徹底します。トップページで使う構文は限られています。
トップページで頻出するTwig構文
変数出力・ループ・include の三つを押さえれば、ほぼ事足ります。
{{ value }}：変数の出力（自動エスケープあり）{% for item in items %}…{% endfor %}：新着情報などの繰り返し{% include '@user_data/xxx.twig' %}：部品の読み込み
HTMLをそのまま出したい時だけ |raw を付けます。ただしユーザーの入力値に使うとXSSの穴になるため、用途は限定してください。
反映前に確認すべきポイント
テンプレートを直したら、まずキャッシュを消してから表示を確認します。
php bin/console cache:clear --no-warmup次にブラウザをスーパーリロードして、ブラウザ側のキャッシュも切ってから崩れがないか見ます。開発環境なら APP_ENV=dev にしておくとキャッシュが効かずTwigの変更が即時反映され、試行錯誤のテンポが上がります。
編集したのに反映されない・崩れる典型パターン
「保存したのに変わらない」で最も多いのは、キャッシュのクリア忘れと編集場所の取り違えです。管理画面でブロックを一度でも編集するとDB側の内容が優先され、ファイルを直したはずが画面に出ない、という食い違いが起きます。どちらを正とするか決めていないと、延々とハマります。
次に多いのが Unexpected token のようなTwigの構文エラーです。{% %} と {{ }} の取り違えや endfor の閉じ忘れが原因で、画面が真っ白になったりデザインが総崩れになります。エラーの出方は環境依存で、devなら画面に、prodなら var/log のログにだけ出ます。まずログを見る癖をつけると、原因の特定が一気に早まります。使用中の系統やSymfonyのバージョンが気になる場合はSymfonyバージョンの確認方法も合わせて押さえておくと安心です。
EC-CUBEゴールドパートナー
EC-CUBEに関するお問い合わせ
[重要]現在公式にセキュリティサポートが切れていないPHPは8.1以上、MySQLは8.0以上で、対応しているEC-CUBEバージョンは4.2以上です。古いEC-CUBEを使っている方は適切なタイミングでバージョンアップをご検討ください。
