EC-CUBE4 管理機能

コンテンツ管理>ブロック管理

ブロック管理の概要

EC-CUBE4にデフォルトで用意されているブロック内の編集や、全く新しいオリジナルのブロックを作成登録する管理機能です。

ブロック管理ではプログラムを埋め込んだ機能ブロックや表示させるだけのブロックなど自由にブロックを作ることが出来ます。

ブロック一覧

ブロック一覧

EC-CUBE4のデフォルトで用意されているブロックは下記の10ブロックです。

  • bodyタグ直前サンプル
  • ブロックサンプル
  • #contents_top
  • bodyタグ直後サンプル
  • headタグ内サンプルブロック
  • トピック
  • 商品検索
  • 新着情報
  • 新着商品
  • ロゴ
  • ログインナビ(SP)
  • ログインナビ(共通)
  • ヘッダー(商品検索・ログインナビ・カート)
  • フッター
  • 新入荷商品特集
  • カテゴリナビ(SP)
  • カテゴリナビ(PC)
  • カテゴリ
  • カート

ブロック一覧

フロントページ(トップページ)のどのエリアに各ブロックが表示されれのかを示した画像です。

フロントページのデザインを変更する場合、各ブロックの中を編集しますが、そのブロック編集を行うのが、本項目のブロック管理です。

ワンポイント

EC-CUBE4の各ブロックは、ユーザーの操作によって、表示状態が切り替わるような条件分岐やデータ取得などのプログラムが記述された動的なブロックと、画像のみを並べて表示している静的なブロックがあります。

大きく分類すると

【動的ブロック】

  • フリーエリア
  • ログイン
  • 新着情報
  • 商品検索
  • カゴの中
  • カテゴリ

【静的ブロック】

  • ギャラリー
  • 新着商品
  • フッター
  • ロゴ

となります。

動的ブロックの方は、条件分岐などプログラムが組み込まれたブロックとなっており、静的ブロックの方は、データや画像の参照表示の為の変数のみが書かれた静的コードになっています。

静的ブロックは、コード内の画像ファイル名部分のみを書き換えるだけで、新しくアップロードした差し替え画像に変更して表示する事ができます。動的ブロックの方は条件分岐やループなど、ブロック内コードの編集でphpなどの記述を間違えると、ブロックが動作しなくなってしまいます。

また、新着商品ブロックなどは、1つの大きなエリア内で画像や説明文章などの段組みデザインとなっているので、このブロック内の表示レイアウトを変更したい場合は、CSSでデザイン調整をする必要があります。

ブロック編集

ロゴブロック

ここでは、実際に新規ブロックを作成してみます。

参考例として、ヘッダーに配置されている「ロゴ」ブロックを画像化したブロックを作成してみましょう。

EC-CUBE4のデフォルトで用意されている「ロゴ」ブロックは、「設定>基本情報設定>ショップマスター」で登録した「店名」が自動で取得表示されるブロックとして作られています。

このヘッダーロゴの表示を会社や店舗のコーポレートロゴの画像で表示したい場合がありますので、画像を表示できる「画像ロゴ」というブロックを新規で作成してみます。

【画像ロゴ】ブロック作成の流れ

  • 1.ロゴ画像の準備
  • 2.ブロックの新規作成
  • 3.ロゴ画像のアップロード
  • 4.ブロックの差し替え

1.ロゴ画像の準備

ロゴ画像は.svgや.jpgや.pngなどの画像ファイルを用意します。

画像サイズは実際に表示したいサイズで準備します。

※画像サイズが大きいものなどで、レイアウトの編集が必要になるようなサイズとなる場合は、ヘッダーエリアや他のブロックとの配置関係などCSSを調整する必要が出てきますが、この説明では、「imglogo.png」という300px×60pxのpng画像を参考に使用します。

ロゴ画像


2.ブロックの新規作成

ブロックの新規作成

「新規入力」ボタンをクリックしてブロック編集画面を開きます。

新規入力の場合は、項目が全て空欄となっています。

  • ブロック名・・・・・・・「画像ロゴ」と入力。※レイアウト編集に表示されるブロック名称。(任意名称)
  • ファイル名・・・・・・・「imglogo」と入力。※ブロックTwigのファイル名。(任意名称)
  • ブロックデータ・・・・・ブロックデータ。※ロゴ画像の取得パスコードなどを記述します。(下記コード参照。)

「画像ロゴ」ブロックデータ※テキストコピーして内容変更の上ご利用ください。


<div class="ec-headerRole">
    <div class="ec-headerRole__title">
        <div class="ec-headerTitle">
            <div class="ec-headerTitle__title">
                <h1>
                    <a href="{{ url('homepage') }}">
                        <img src="{{ asset('assets/img/common/imglogo.png') }}" alt="{{ BaseInfo.shop_name }}" >
                    </a>
                </h1>
            </div>
        </div>
    </div>
</div>

ブロックの新規作成


3.ロゴ画像のアップロード

FTPツールなどでサーバーに画像ファイルをアップロードします。

ここでは、下記「common」フォルダにアップロードします。

/html/template/default/assets/img/common


4.ブロックの差し替え

ブロックの差し替え

ブロック管理を開くと、ブロック一覧に新規作成した「画像ブロック」が追加表示されています。


ブロックの差し替え

ブロックの差し替え

「ページ管理>トップページ用レイアウト」のレイアウト編集を開くと、新規作成した「画像ロゴ」ブロックが、「未使用ブロック」欄に追加表示されていますので、headerにレイアウト配置されているデフォルトの「ロゴ」ブロックと、ブロックを入れ替えて登録します。


ブロックの差し替えフロント表示

フロントページを見るとロゴ部分が画像ロゴに挿し変わりました。
「ページ管理>下層ページ用レイアウト」も同様にブロックを差し替えます。

ワンポイント

この説明では画像のアップロード先を/html/template/default/img/commonにしましたが、違うディレクトリなどにする場合は、画像までのパスに書き換える必要があります。

また、ロゴ画像のalt属性には、元のデフォルトロゴ表示のショップマスターに入力した店名が取得挿入されるコードになっています。

もし、上記手順で、フロント側が画像ロゴが表示しない場合、「コンテンツ管理>キャッシュ管理」でキャッシュのクリアを試してみましょう。

PAGE TOP