EC-CUBE3 管理機能
コンテンツ管理＞ブロック管理
ブロック管理の概要
EC-CUBE3にデフォルトで用意されているブロック内の編集や、全く新しいオリジナルのブロックを作成登録する管理機能です。
ブロック管理ではプログラムを埋め込んだ機能ブロックや表示させるだけのブロックなど自由にブロックを作ることが出来ます。
ブロック一覧
EC-CUBE3のデフォルトで用意されているブロックは下記の10ブロックです。
- ギャラリー
- フリーエリア
- 新着商品
- フッター
- ロゴ
- ログイン
- 新着情報
- 商品検索
- カゴの中
- カテゴリ
フロントページ（トップページ）のどのエリアに各ブロックが表示されれのかを示した画像です。
フロントページのデザインを変更する場合、各ブロックの中を編集しますが、そのブロック編集を行うのが、本項目のブロック管理です。
ブロック編集
ここでは、実際に新規ブロックを作成してみます。
参考例として、ヘッダーに配置されている「ロゴ」ブロックを画像化したブロックを作成してみましょう。
EC-CUBE3のデフォルトで用意されている「ロゴ」ブロックは、「設定＞基本情報設定＞ショップマスター」で登録した「店名」が自動で取得表示されるブロックとして作られています。
このヘッダーロゴの表示を会社や店舗のコーポレートロゴの画像で表示したい場合がありますので、画像を表示できる「画像ロゴ」というブロックを新規で作成してみます。
【画像ロゴ】ブロック作成の流れ
- 1.ロゴ画像の準備
- 2.ブロックの新規作成
- 3.ロゴ画像のアップロード
- 4.ブロックの差し替え
1.ロゴ画像の準備
ロゴ画像は.jpgや.pngなどの画像ファイルを用意します。
画像サイズは実際に表示したいサイズで準備します。
※画像サイズが大きいものなどで、レイアウトの編集が必要になるようなサイズとなる場合は、ヘッダーエリアや他のブロックとの配置関係などCSSを調整する必要が出てきますが、この説明では、「imglogo.jpg」という300px×80pxのJPEG画像を参考に使用します。
2.ブロックの新規作成
「新規入力」ボタンをクリックしてブロック編集画面を開きます。
新規入力の場合は、項目が全て空欄となっています。
- ブロック名・・・・・・・「画像ロゴ」と入力。※レイアウト編集に表示されるブロック名称。（任意名称）
- ファイル名・・・・・・・「imglogo」と入力。※ブロックTwigのファイル名。（任意名称）
- ブロックデータ・・・・・ブロックデータ。※ロゴ画像の取得パスコードなどを記述します。（下記コード参照。）
「画像ロゴ」ブロックデータ※テキストコピーして内容変更の上ご利用ください。
<div class="header_logo_area">
<h1 class="header_logo">
<a href="{{ url('homepage') }}">
<img src="{{ app.config.front_urlpath }}/img/common/imglogo.jpg" alt="{{ BaseInfo.shop_name }}" width="300" height="80"></a>
</h1>
<p class="description">画像ロゴに差し替えました。（ココはテキストのサイト説明文です。）</p>
</div><!-- .header_logo_area ↑ -->
3.ロゴ画像のアップロード
FTPツールなどでサーバーに画像ファイルをアップロードします。
ここでは、下記「common」フォルダにアップロードします。
/html/template/default/img/common
4.ブロックの差し替え
ブロック管理を開くと、ブロック一覧に新規作成した「画像ブロック」が追加表示されています。
「ページ管理＞TOPページ」のレイアウト編集を開くと、ブロック管理を開くと、新規作成した「画像ロゴ」ブロックが、「未使用ブロック」欄に追加表示されていますので、#headerにレイアウト配置されているデフォルトの「ロゴ」ブロックと、ブロックを入れ替えて「全ページ」にチェックを入れ、登録します。
フロントページを見るとロゴ部分が画像ロゴに挿し変わりました。
ワンポイント
この説明では画像のアップロード先を/html/template/default/img/commonにしましたが、違うディレクトリなどにする場合は、画像までのパスに書き換える必要があります。
また、ロゴ画像のalt属性には、元のデフォルトロゴ表示のショップマスターに入力した店名が取得挿入されるコードになっています。
もし、上記手順で、フロント側が画像ロゴが表示しない場合、「コンテンツ管理＞キャッシュ管理」でキャッシュのクリアを試してみましょう。
ワンポイント
EC-CUBE3の各ブロックは、ユーザーの操作によって、表示状態が切り替わるような条件分岐やデータ取得などのプログラムが記述された動的なブロックと、画像のみを並べて表示している静的なブロックがあります。
大きく分類すると
【動的ブロック】
【静的ブロック】
となります。
動的ブロックの方は、条件分岐などプログラムが組み込まれたブロックとなっており、静的ブロックの方は、データや画像の参照表示の為の変数のみが書かれた静的コードになっています。
静的ブロックは、コード内の画像ファイル名部分のみを書き換えるだけで、新しくアップロードした差し替え画像に変更して表示する事ができます。動的ブロックの方は条件分岐やループなど、ブロック内コードの編集でphpなどの記述を間違えると、ブロックが動作しなくなってしまいます。
また、新着商品ブロックなどは、1つの大きなエリア内で画像や説明文章などの段組みデザインとなっているので、このブロック内の表示レイアウトを変更したい場合は、CSSでデザイン調整をする必要があります。