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>