Help us understand the problem. What is going on with this article?

EC-CUBE4 デザインカスタマイズ(あっさり解説)

はじめに

本記事は
「EC-CUBEさっぱりわからん」
から
「見た目は変えられる」
になることを前提としています。

普段はWordPressでのサイト制作が主なため、EC-CUBE開発でのSymfonyの理解に時間がかかると感じました。
Symfonyの記法やMVCの説明は公式の開発ドキュメントや技術書に任せ、
あくまでデザインのカスタマイズについてのみ、あっさり解説していきます。

・開発ドキュメント(公式)
https://doc4.ec-cube.net/
公式のドキュメントは正義です。が、
慣れていない段階では読み解くハードルがやや高いです。

・EC-CUBE 4 システム構築入門 &店舗運営・管理ビギナーズガイド
https://www.amazon.co.jp/dp/B07PBWN5Y9/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

この記事の対象者

  • 普段はHTML、CSS、JS(jQuery)、WordPressでのWeb開発が主
  • EC-CUBEは過去バージョンも含めて触ったことがない
  • WordPressなどのCMS構築に慣れていて、基本的なPHPの記法がわかる

MVCって…なに?

EC-CUBEを学び始めるとまず目に入るMVCというワード。
Model View Controllerの頭文字を取った言葉です。

乱暴に説明すると、
Model:中身、データベース側
View:見た目、フロント側
Controller:ModelとViewの仲介役
です。

恐らく、実際の役割と異なる点があり、誤解が生まれる可能性がありますが
あっさり解説のためひとまずこの解釈で大丈夫。

本記事ではViewのみ解説します。

EC-CUBEのファイル構造

ルートディレクトリを見ると多くのファイルやフォルダがあります。
appやbinといったフォルダ名に馴染みが無いため面食らいましたが、
この記事ではデザイン編集に必要な3つのフォルダに絞って説明します。

1. srcフォルダ

デフォルトのテンプレートが入っています。(テンプレート以外もありますが、割愛)

正確には、下記のディレクトリにテンプレートがあります。
/src/Eccube/Resource/template/default/

↓デフォルトテンプレートのディレクトリ
デフォルトのテンプレートがあるディレクトリ

トップページのテンプレート

/src/Eccube/Resource/template/default/index.twig

商品詳細ページのテンプレート

/src/Eccube/Resource/template/default/Product/detail.twig

srcフォルダのテンプレートファイルは基本いじりません
次に紹介するappフォルダを使います。

2. appフォルダ

カスタマイズしたテンプレートを配置するフォルダ。
インストール直後は何も入っていないので、srcフォルダから編集したいファイルをコピーして配置します。
最初から全てのテンプレートをコピーしてもよいでしょう。

↓カスタマイズするテンプレートを配置するディレクトリ
appフォルダ

トップページのテンプレートを置く場所

/app/template/default/index.twig

商品詳細ページのテンプレートを置く場所

/app/template/default/Product/detail.twig

3. htmlフォルダ

cssや画像が入っています。

デフォルトの画像やcss

/html/template/default/assets/

カスタマイズした画像やcss

/html/user_data/assets/

基本は/html/user_data/assets/を編集します。
customize.cssは最初から用意されていますが、管理画面から編集できるためクライアントが触ってしまう可能性があります。

既存ページのデザインを変える

例えば、トップページを表示する際に
EC-CUBEは以下の順番でテンプレートを読み込みます。

  1. /app/template/default/index.twig
  2. /src/Eccube/Resource/template/default/index.twig

(参照:https://doc4.ec-cube.net/design_template

appフォルダにテンプレートを配置することで、
カスタマイズしたデザインが表示されます。

ページデザイン編集の流れはこちら
1. srcフォルダからデフォルトのテンプレートをコピー(/src/Eccube/Resource/template/default/index.twig
2. appフォルダにペースト(/app/template/default/index.twig
3. index.twigを編集

EC-CUBEにおけるページ構成

EC-CUBEではページがどう作られているのか見てみます。

管理画面で「コンテンツ管理>レイアウト管理>トップページ用レイアウト」を開きます。
すると、トップページがいくつもの”ブロック”で構成されていることが分かります。
スクリーンショット 2019-11-13 16.45.42.png

ここで、トップページのテンプレートファイルを見てみます。
/src/Eccube/Resource/template/default/index.twig

index.twigのコードを見る
{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends 'default_frame.twig' %}

{% set body_class = 'front_page' %}

{% block stylesheet %}
    <style>
        .slick-slider {
            margin-bottom: 30px;
        }

        .slick-dots {
            position: absolute;
            bottom: -45px;
            display: block;
            width: 100%;
            padding: 0;
            list-style: none;
            text-align: center;
        }

        .slick-dots li {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            padding: 0;

            cursor: pointer;
        }

        .slick-dots li button {
            font-size: 0;
            line-height: 0;
            display: block;
            width: 20px;
            height: 20px;
            padding: 5px;
            cursor: pointer;
            color: transparent;
            border: 0;
            outline: none;
            background: transparent;
        }

        .slick-dots li button:hover,
        .slick-dots li button:focus {
            outline: none;
        }

        .slick-dots li button:hover:before,
        .slick-dots li button:focus:before {
            opacity: 1;
        }

        .slick-dots li button:before {
            content: " ";
            line-height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            width: 12px;
            height: 12px;
            text-align: center;
            opacity: .25;
            background-color: black;
            border-radius: 50%;

        }

        .slick-dots li.slick-active button:before {
            opacity: .75;
            background-color: black;
        }

        .slick-dots li button.thumbnail img {
            width: 0;
            height: 0;
        }
    </style>
{% endblock %}

{% block javascript %}
    <script>
        $(function() {
            $('.main_visual').slick({
                dots: true,
                arrows: false,
                autoplay: true,
                speed: 300
            });
        });
    </script>
{% endblock javascript %}

{% block main %}
    <div class="ec-sliderRole">
        <div class="main_visual">
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc01.jpg') }}"></div>
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc02.jpg') }}"></div>
            <div class="item slick-slide"><img src="{{ asset('assets/img/top/img_hero_pc03.jpg') }}"></div>
        </div>
    </div>
{% endblock %}

index.twigを見てもメインスライドしか記述されていません。
これは、他の要素を”ブロック"で構成しているためです。

ヘッダー/フッター、TOPICSやNEW ITEMも
“ブロック"として管理されており、
それを組み合わせることでトップページが作られています。

ブロックの追加/編集

管理画面「コンテンツ管理>ブロック管理」から「新規作成」をクリックし作成しましょう。
作成したブロックは以下のディレクトリに保存されます。

・カスタマイズしたブロックのディレクトリ
/app/template/default/Block/test_block.twig

cssファイルの新規作成

customize.cssと同じ階層に
任意のファイル名でcssファイルを設置します。
/html/user_data/assets/css/style_add.css

追加したcssを読み込むには、
default_frame.twig内に
customize.cssを読み込んでいる箇所があるのでその下に追記します。
/src/Eccube/Resource/template/default/default_frame.twig

{# 中略 #}
    <link rel="stylesheet" href="{{ asset('assets/css/customize.css', 'user_data') }}">
    <link rel="stylesheet" href="{{ asset('assets/css/style_add.css', 'user_data') }}"> {# 追加css #}
</head>
{# 中略 #}

これで新規追加したcssが読み込めました。

ログイン判定

デザインをいじるだけに絞ると言いつつ、軽く条件分岐のコードを紹介。

{% if is_granted('ROLE_USER') %}
    {# ログイン中に表示 #}
{% else %}
   {# 非ログイン中に表示 #}
{% endif %}

デザインカスタマイズ以外の参考URL

【PHP超入門】名前空間(namespace・use)について

https://qiita.com/7968/items/1e5c61128fa495358c1f

本記事では触れていないControllerを学ぶ際につまずいた、
namespaceuseについてとても分かりやすく書かれています。

まとめ

ファイル構造がわかると、機能に絡まない見た目はすんなり変えられます。
EC-CUBE・Symfonyを学んでいる最中のため、本記事の加筆修正を行っていきます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした