EC-CUBEにバナーを追加する方法

Pocket

EC-CUBEは簡単にECサイトを構築できる便利なツールです。TetraThemesではEC-CUBEのデザインテーマも多数公開中なので是非チェックしてみて下さい。

EC-CUBEのテンプレートを使ってオリジナルサイトを作りたいときに必ずと言っていいほど必要になるのが、バナーの設置。デフォルトのテンプレートにはメインエリアに画像が設置されていますが、ブロックとして自由に配置できればもっと便利ですよね。

そこで、このページではEC-CUBEにバナーを設置する方法を2パターン紹介したいと思います。

EC-CUBEにバナーを設置する方法

EC-CUBEのテンプレートに直接書き込む方法

テンプレートに直接バナーを設置するには、配置したい場所のテンプレートにHTMLコードを書き加えればOK。配置したい場所によってテンプレートは異なりますが、基本的には以下のテンプレートをカスタマイズしていきます。

  • ヘッダー:header.tpl
  • フッター:footer.tpl
  • メイン:index.tpl
  • トップページ(サイド含む):site_main.tpl
  • その他各ページ:各ページの.tpl

今回はサイドバーとメインエリアに設置してみます。サイドバーはsite_main.tplで記述されているため、バナーを設置したい場合もここに記述します。左サイドバー(LEFT COLUMN)ならこんな感じ。

<!--{* ▼LEFT COLUMN *}-->
<!--{if $arrPageLayout.LeftNavi|@count > 0}-->
    <div id="leftcolumn" class="side_column">
        <!-- ここにバナーを設置 -->
        <div class="banner">
            <a href="http://banner-url/"><img src="<!--{$TPL_URLPATH}-->img/banner-folder/banner-img.jpg" alt="banner-test"></a>
        </div>
        <!-- バナーここまで -->
        <!--{* ▼左ナビ *}-->
        <!--{foreach key=LeftNaviKey item=LeftNaviItem from=$arrPageLayout.LeftNavi}-->
            <!-- ▼<!--{$LeftNaviItem.bloc_name}--> -->
            <!--{if $LeftNaviItem.php_path != ""}-->
                <!--{include_php file=$LeftNaviItem.php_path items=$LeftNaviItem}-->
            <!--{else}-->
                <!--{include file=$LeftNaviItem.tpl_path items=$LeftNaviItem}-->
            <!--{/if}-->
            <!-- ▲<!--{$LeftNaviItem.bloc_name}--> -->
        <!--{/foreach}-->
        <!--{* ▲左ナビ *}-->
    </div>
<!--{/if}-->
<!--{* ▲LEFT COLUMN *}-->

注意したいのは、左カラムにブロックを配置しないと何も表示されないことと、ブロックの上下にしか追加できないところ。これは別のカラム、ページでも同じなので注意が必要です。

EC-CUBEのブロックを追加してバナーを設置する方法

もう1つのパターンはブロックとしてバナーを追加する方法です。先ほどの方法だとブロックの上下にしか追加できないなどのデメリットがあったのですが、こちらは自由に設置可能。

やり方はブロックを追加するだけなので非常に簡単。先ほど使用したバナーのコードをブロックの新規作成ページに貼付ければ完成です。
eccubeにバナーを追加する方法

あとはレイアウト画面で追加したバナーを配置すれば完了です。
eccubeにバナーを追加