EC-CUBE3のデザインを変更したときにやった事まとめ
2017/01/31
こんにちは、okutani(@okutani_t)です。今回は、私がEC-CUBE3（v3.0.8）でデザインを変更するときにやったことをまとめて紹介します。
なお、EC-CUBE3の導入方法、初期設定方法はそれぞれ下記記事を参考にしてください。先に一読しておくことで、よりスムーズにデザイン変更をおこなうことができるかと思います。
なお、本記事ではデフォルトで設定されているテンプレートを元にして、楽（？）をしながらデザインを変更しています。
本記事では基礎的な部分しかおこなっていませんが、EC-CUBE3初学者の参考になれば幸いです。
ではさっそく、EC-CUBE3のデザイン変更方法をみていきましょう。
スポンサーリンク
もくじ
テンプレートの構造について理解しよう
デザインを変更していく前に、デフォルトのテンプレートが置いてある場所を確認しておきましょう。以下の場所にあります（画像はbitbucketで管理している画面）。
（EC-CUBE3インストール場所）/src/Eccube/Resource/template/default/
上記の場所に格納してあるファイルは「Twig」というPHPのテンプレートエンジンで記述されています。以前（EC-CUBE2）はSmartyだったようですが、EC-CUBE3からこのTwigに変更されました。
ここのTwigファイルを直接変更していけば、デザインを変更していけそうかな？ と考えるかと思いますが、実はこのファイルを「直接編集することはNG」です。
では、どうすればよいかというと、下記の場所に.twigファイルを追加、もしくはコピーして、デザインをカスタマイズしていきます。
（EC-CUBE3インストール場所）/app/template/default/上記の場所にディレクトリがない場合は適宜作成しておきます。
もしくは、管理画面のコンテンツ管理からページもしくはブロックを編集すると、自動で作成（もしくはコピー）されます。
ページの新規作成の場合はちょっと動作が違うので、本記事最後の項目で解説してるので別途参考にしてください。
確認すると、次のようにファイルが作成されていました。以前、コンテンツ管理からテストでブロックを作成したため、このように自動生成されているのが確認できます。
試しに、管理画面からページ管理を開き、TOPページのページ編集から、下記のようにh1タグを挿入して保存。TOPページの場合はindex.twigという名前で管理されています。
次のように、index.twigが「/app/template/default/」に作成（コピー）されました。
「（EC-CUBE3インストール場所）/src/Eccube/Resource/template/default/」にあるindex.twigには、h1タグが挿入されていないことも確認しておきましょう。何も変更されていないはずです。
というわけで、このように管理画面からファイルを編集して自動保存機能を利用するか、先ほど確認した「（EC-CUBE3インストール場所）/src/Eccube/Resource/template/default/」から、編集したいファイルを「（EC-CUBE3インストール場所）/app/template/default/」にコピーして利用するようにすればOK。
その場合、Blockディレクトリに含まれているファイルなら、コピー先でも同じようにBlockディレクトリに入れるように階層を合わせておきましょう。これで部分的にデザインを編集することができますね。
そして、テンプレートファイルは次の順番で読み込まれます。テンプレートファイルがない場合は、次の読み込み先を見に行くので、すべてのファイルをコピーして利用することなく利用できます。
- （EC-CUBE3インストール場所）/app/template/default（もしくはテンプレート名）/
- （EC-CUBE3インストール場所）/src/Eccube/Resource/template/default/
- （EC-CUBE3インストール場所）/app/plugin/（プラグイン名）/Resource/template/（プラグインのテンプレート）
テンプレートは先に読み込まれたものが順に適応されます。また、3のディレクトリは、プラグインで作成されたファイルが格納される場所です。
では、先ほど変更したh1タグがきちんと反映されているか確認…… といきたいところですが、Twigファイルは新規で追加すると「キャッシュが邪魔をして表示されない」ことがあります。
管理画面からTwigファイルを編集した場合は大抵の場合大丈夫かとは思いますが、一応、次のようにキャッシュをクリアしておきましょう。
FTPなどでTwigファイルを新規でアップした場合はキャッシュクリア必須です。
TOPページに、挿入したh1タグが反映されていることを確認できました。
テンプレートの編集方法が分かったので、次はCSSの追加方法を確認してみましょう。
CSSファイルを作成して読み込ませてみよう
新しくCSSファイルを作成して、EC-CUBE3で利用できるように設定していきましょう。以下の場所に「mystyle.css」を作成してみます。
（EC-CUBE3インストール場所）/html/template/default（もしくはテンプレート名）/css/また、今回はスタイルを確認するため、mystyle.css内に「h1 { color: red; }」という記述をしておきます。
すべてのページで読み込みたいので、以下の場所にある「default_frame.twig」ファイルにCSS読み込み処理を追加してみましょう。default_frame.twigが無い場合は、先ほどの説明のとおりデフォルトの場所からコピーして配置しましょう。
（EC-CUBE3インストール場所）/app/template/default（もしくはテンプレート名）/default_frame.twigdefault_frame.twig内44行目あたり、<link rel="stylesheet"～>が固まって記述してある場所があります。そのすぐ下辺りに、次のコードを追記してみましょう。
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/mystyle.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">default_frame.twigファイル保存後、Twigファイルのキャッシュをクリアし、mystyle.cssに記述したスタイルが表示されているか確認してみます。
先ほど追加したh1タグが赤に変わっているのが確認できました。
これからはmystyle.cssに追加したいレイアウトをどんどん記述していけばOKですね。
また、特定のページにのみ、作成したCSSを読みこませることもできます。TOPページでのみmystyle.cssを読み込ませたい場合は、index.twigの下記該当箇所に、先ほどのCSS挿入コードを使います。
{% block stylesheet %}
<link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/mystyle.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}">
{% endblock %}これでTOPページでのみ、mystyle.cssが読み込まれるようになりました。
また、上記手順と同じように、JavaScriptファイル・画像ファイルなんかも、下記の場所にそれぞれ保存して利用することができます。
# JavaScriptファイル
（EC-CUBE3インストール場所）/html/template/default（もしくはテンプレート名）/js/# 画像ファイル
（EC-CUBE3インストール場所）/html/template/default（もしくはテンプレート名）/img/Twigファイルから呼び出す場合は、それぞれ次のとおりです。
{% block javascript %}
<script src="URL"></script>
もしくは
<script>
// my_script
</script>
{% endblock %}<img src="{{ app.config.front_urlpath }}/img/myimg.jpg">これで、独自に追加したCSS・JavaScript・画像ファイルが使えますね。
スライドショーの切り替えをフェードアウトにしてみる
個別ページのJavaScriptの編集方法が分かったので、一例としてTOPページのスライドショーの挙動を、フェードアウトに変更してみましょう。
スライドショーのJavaScriptコードはindex.twigにあるので、該当箇所を次のように変更。
{% block javascript %}
<script>
$(function(){
$('.main_visual').slick({
dots: true,
arrows: false,
infinite: true,
speed: 500,
autoplay: true,
fade: true,
cssEase: 'linear'
});
});
</script>
{% endblock %}これでTOPページのスライドショーがフェードアウトに切り替わります。
こうすることで、無駄なコードを省いて利用することができますね。
新しいページを追加してみる
以下の手順で新しいページを追加することができます。
ちなみに、ヘッダー・フッターなどは別ページと同じように使いまわして利用することができます。
管理画面から「ページ管理」→「新規入力」をクリック。
適宜ページの内容を入力してみましょう。登録ボタンを押すと新しくページが作成されます。
ファイルの内容は次のようにすれば、ヘッダーやフッターなどを含んだ親ファイル（default_frame.twig）を継承して使うことができます。
{% extends 'default_frame.twig' %}
{% block main %}
//ここに新しいページの内容
{% endblock %}新しく作成したページは以下の場所に追加されます。
（EC-CUBE3インストール場所）/html/user_data/このページへのアクセスは次のようにすればOKです。一例として、media.twigとして作成し、aタグでリンクすると仮定して作成してみました。
<a href="{{ url(app.config.user_data_route, {"route": "media"}) }}">メディアのページ</a>URLに含まれるuser_dataを取り除く
ただ、すこし細かい点を指摘すると、新しく作成したページへのアクセスには「http://example.com/html/user_data/media」というように、user_dataが含まれたものになってしまいます。
これを解決するには、次のファイルを編集します。
（EC-CUBE3インストール場所）/src/Eccube/ControllerProvider/FrontControllerProvider.php次のとおり、user_data_routeが含まれた行の頭に//をつけてコメントアウトし、return $c;の前あたりに次のコードを挿入します。
...省略...
// ↓コメントアウト
// $c->match('/'.$app['config']['user_data_route'].'/{route}', '\Eccube\Controller\UserDataController::index')->assert('route', '[0-9a-zA-Z_]+')->bind('user_data');
...省略...
// ↓追加
$c->match('/'.'{route}', '\Eccube\Controller\UserDataController::index')->assert('route', '[0-9a-zA-Z_]+')->bind('user_data');
return $c;
}これで、user_data無しのURLで新しいページにアクセスすることができます。かなり細い設定ですが、気になる方はやってみてください。
さらに、サイトTOPをhtml無しにしたい場合は「EC-CUBE3をさくらのレンタルサーバにインストールした時にhtmlを付けさせない方法 – AmidaikeBlog」あたりを参考にしてみてください。いくつかの方法が紹介されていて分かりやすいです。
今回の内容で僕が作成したサイトが「エリソンキャトル | TOPページ」です。
このサイトは私が個人的に運営・管理しているデザインTシャツのオンラインショップです。
エリソンキャトルでは、snap, media, aboutページを新規で作成し、デフォルトのテンプレートに追加して実装しています。EC-CUBE3の使用例として、参考になれば幸いです。
まとめ
EC-CUBE3でのデザイン変更方法について解説していきました。
なお、EC-CUBE3はまだリリースされて日が浅いため、編集方法が一部変更することがあるかと思います。分かる範囲でこちらの記事に追記していきますので、もしおかしなところを見つけた場合はokutaniまでご連絡くださると幸いです。
また、今回カスタマイズした内容は下記の本が詳しく書いてあります。手元に置いておくと良いかと思います。
EC-CUBE3を使ったネットショップ作成に役立ててください。それでは。
Web開発のお仕事を募集しています
フリーランスのエンジニアとして、Webシステム開発のお仕事依頼を随時募集しています（現在の業務量によってお受けできない場合もあります）。
「Ruby on Rails」「JavaScript（jQuery, Reactなど）」「HTML + CSS」を用いたシステム開発、「Heroku」等を用いたサーバー構築・運用、「Git」や「GitHub」を利用したソーシャルコーディングなどに対応しています。
ご依頼を検討している方は、下記リンク本ブログからのお問い合わせ、もしくはokutaniのポートフォリオからご連絡ください。
LINKお問い合わせ
スポンサーリンク
