EC-CUBE3.0 フッターブロックのカスタマイズ方法

Pocket

EC-CUBE3.0のフッターブロックをカスタマイズする簡単な方法を紹介します。

フッターブロックはクラスファイルと紐付いてないのでほぼHTMLと同じ扱いが可能。フッターメニューの変更やロゴ画像の変更などが簡単にできます。

フッターブロックのカスタマイズ方法

フッターメニューに独自メニューを追加する

デフォルトテンプレートで用意されているフッターメニューは、単純にulタグを使ってリストを作っているだけなのでHTMLの編集と同じようにカスタマイズすることができます。

<ul>
    <li><a href="{{ url('help_about') }}">当サイトについて</a></li>
    <li><a href="{{ url('help_privacy') }}">プライバシーポリシー</a></li>
    <li><a href="{{ url('help_tradelaw') }}">特定商取引法に基づく表記</a></li>
    <li><a href="{{ url('contact') }}">お問い合わせ</a></li>
</ul>

デフォルトメニューに独自メニューを追加するとこんな感じに

<ul>
    <li><a href="ページのURL">よくある質問</a></li>
    <li><a href="ページのURL">ブログ</a></li>
    <li><a href="{{ url('help_about') }}">当サイトについて</a></li>
    <li><a href="{{ url('help_privacy') }}">プライバシーポリシー</a></li>
    <li><a href="{{ url('help_tradelaw') }}">特定商取引法に基づく表記</a></li>
    <li><a href="{{ url('contact') }}">お問い合わせ</a></li>
</ul>

フッターのロゴを画像に変更する

フッターのロゴ部分はテキストで表示されます。ここをロゴ画像に置き換えるにはimgタグを設置するだけ。

// 変更前
<p class="logo"><a href="{{ url('homepage') }}">{{ BaseInfo.shop_name }}</a></p>

// 変更後
<p class="logo">
  <a href="{{ url('homepage') }}">
    <img src="{{ app.config.front_urlpath }}/img/logo.jpg" alt="{{ BaseInfo.shop_name }}" />
  </a>
</p>

ここでは使用中のテンプレートフォルダ内のimgフォルダにあるlogo.jpgを表示しています。URLパスの表示に使えるのは以下の2つ。

  • app.config.front_urlpath: テンプレートフォルダへのパス
  • app.config.root_urlpath: htmlフォルダへのパス

フッターのコピーライトを書き換える

フッターブロックのコピーライトは定型文通りなのでそのままでも問題ありませんが、もし変更する場合は、直接テキストを編集することでカスタマイズ可能です。

<p class="copyright">
    <small>© 2016 Sample Inc. All Rights Reserved.</small>
</p>