EC-cube3のheaderカスタマイズ
ファイルの置き場所
変更するソースの初期状態のものは
/src/Eccube/Resource/template/default/
の中にあります。
しかし、直接変更すると自動的にアップデートされてしまうため、
変更したソースを、
/app/template/default/
にコピー設置することでカスタマイズができます
headerのレイアウトをカスタマイズしたい場合
試しにheaderをカスタマイズしたい場合、
/src/Eccube/Resource/template/default/default_frame.twig
このファイルを下記にコピーします。(元のファイルは残したままです)
/app/template/default/default_frame.twig
内容を編集します。今回は
<header id="header">
の中身に
<div>
タグを加えてみます。
編集前
<header id="header"> <div class="container-fluid inner"> {# ▼HeaderInternal COLUMN #} {% if PageLayout.Header %} {# ▼上ナビ #} {{ include('block.twig', {'Blocks': PageLayout.Header}) }} {# ▲上ナビ #} {% endif %} {# ▲HeaderInternal COLUMN #} <p id="btn_menu"> <a class="nav-trigger" href="#nav">Menu<span></span></a> </p> </div> </header>
編集後
<header id="header"> <div style="color: red;"> aaaa </div> <div class="container-fluid inner"> {# ▼HeaderInternal COLUMN #} {% if PageLayout.Header %} {# ▼上ナビ #} {{ include('block.twig', {'Blocks': PageLayout.Header}) }} {# ▲上ナビ #} {% endif %} {# ▲HeaderInternal COLUMN #} <p id="btn_menu"> <a class="nav-trigger" href="#nav">Menu<span></span></a> </p> </div> <div style="color: red;"> bbbb </div> </header>