EC-CUBE4のオリジナルテンプレートの作り方の解説

2023年6月21日
2023年6月21日
EC-CUBE
EC-CUBE, カスタマイズ, テンプレート
2View
0件

EC-CUBE

この記事では、EC-CUBE4が既にインストールされている前提で、オリジナルテンプレートの作成からトップページ、下層ページの作成までを解説いたします。

１．オリジナルテンプレートの作成

オーナーズストア　＞　テンプレート　＞　テンプレート一覧からデフォルトのファイル（default.tar.gz）をダウンロードします。

オーナーズストア　＞　テンプレート　＞　アップロードから任意のテンプレートを作成する

私の場合は、default.tar.gzのファイルサイズが2.7MBだったので、エラーが出てしまいました。

.htaccessからアップロードできるファイルサイズを変更します。

# 1ファイルあたりの最大アップロードサイズを5MBにする
php_value upload_max_filesize 5M

私の場合は、こちらの方法でもエラーが出てしまいましたので、php.iniを直接変更することにしました。

php.iniはサーバーによって、変更の仕方が異なりますので、「使用されているサーバー　php.ini」と検索をすると、変更方法がわかると思います。

無事にアップロードができましたら、テンプレート一覧から作成したテンプレートを選択します。

テンプレートを変更したことにより、フロントの構築のフォルダが変わりました。

保存先に記述されていますが、デフォルトであれば、下記が構築フォルダです。

app/template/default・・・フロントの構築（トップや下層、購入などのページ）
html/template/default・・・画像やcss、jsなどのassetsのフォルダ

テンプレートを作成したことにより、下記のフォルダが生成されています。

app/template/original・・・フロントの構築（トップや下層、購入などのページ）
html/template/original・・・画像やcss、jsなどのassetsのフォルダ

２．トップと下層ページの作成

１．作業環境の構築

現状は作成したフォルダには何も入ってません。

app/template/original

ますは下記のフォルダの中身をすべてダウンロードして、上記のフォルダにアップロードします。

src/Eccube/Resource/template/default

※ちなみに全ファイルではなくても、修正するファイルだけを入れるというやり方でも問題はありません。
作成したテンプレートにないファイルは、自動的にデフォルトから取得します。

後は、修正したいページのファイルを編集していきます。

２．共通ファイルの編集

アップロードしたファイルには拡張子「tiwg」がついており、見慣れないと思いますが、phpのテンプレートエンジンです。

twigの記述法に関しては、深堀せずに進めていきます。

まずは、サイトで使う共通要素の記述する、下記のファイルから編集していきます。

app/template/original/default_frame.twig

WordPressの場合は、ヘッダー（header.php）とフッター（footer.php）、メインコンテンツ（front-page.phpなど）の3つのファイルで構成して、メインコンテンツでヘッダーとフッターを読み込みをします。

しかし、EC-CUBEでは、「default_frame.twig」にheadやヘッダー、フッターなどの共通部分を全て記述して、メインコンテンツを取得するという感じになります。

重要なコードだけ下記で補足いたします。

<!-- テンプレートのassetsの参照 -->
<!-- html/template/original/assets/css/style.css -->
<link rel="stylesheet" href="{{ asset('assets/css/style.css') }}">

<!-- それぞれのページから独自のcssの読み込み -->
{% block stylesheet %}{% endblock %}

<!-- 管理画面のコンテンツ管理　＞　レイアウト管理で指定したパーツを呼び出す（※画像参照） -->
{{ include('block.twig', {'Blocks': Layout.Head}) }}
{{ include('block.twig', {'Blocks': Layout.Header}) }}
{{ include('block.twig', {'Blocks': Layout.SideLeft}) }}
{{ include('block.twig', {'Blocks': Layout.Footer}) }}

<!-- それぞれのページからメインコンテンツの読み込み -->
{% block main %}{% endblock %}

<!-- それぞれのページから独自のjsの読み込み -->
{% block javascript %}{% endblock %}

私の場合はレイアウト管理を使用しないので、bodyの中身は下記になりました。

<body id="page_{{ app.request.get('_route') }}" class="{{ body_class|default('other_page') }}">
  <!-- app/template/original/Block/header.twigの呼び出し -->
  {{ include('Block/header.twig') }}
  {% block main %}{% endblock %}
  <!-- app/template/original/Block/footer.twigの呼び出し -->
  {{ include('Block/footer.twig') }}

  {% block javascript_cdn %}{% endblock %}
  <script type="text/javascript" src="/html/template/default/assets/js/function.js"></script>
  <script type="text/javascript" src="/html/template/default/assets/js/eccube.js"></script>
  <script type="text/javascript" src="{{ asset('assets/js/main.js') }}"></script>
  {% block javascript %}{% endblock %}
  {% include('@common/lang.twig') %}
  {# プラグイン用Snippet #}
  {% if plugin_snippets is defined %}
    {{ include('snippet.twig', { snippets: plugin_snippets }) }}
  {% endif %}
</body>

３．トップページの修正

app/template/original/index.twig

上記ファイルに下記を記述して、アップロードします。

<!-- extendsしたファイル（default_frame.twig）でblockや変数を上書きする -->
{% extends 'default_frame.twig' %}

<!-- bodyタグに「front_page」というクラス名を付与 -->
{% set body_class = 'front_page' %}

<!-- ページ独自のcssの追加 -->
{% block stylesheet %}
  <link href="{{ asset('assets/js/top.css') }}" rel="stylesheet">
{% endblock stylesheet %}

<!-- ページ独自のjsの追加 -->
{% block javascript %}
  <script type="text/javascript" src="{{ asset('assets/js/top.js') }}"></script>
{% endblock javascript %}

<!-- メインコンテンツ -->
{% block main %}
  <main></main>
{% endblock %}

EC-CUBEはキャッシュが強いため、スーパーリロードでもキャッシュの削除することができません。

管理画面のコンテンツ管理　＞　キャッシュ管理からtwigのキャッシュを削除することができます。

一度トップページを確認してみてください。

問題がなければ、綺麗に反映されているはずです。

４．下層ページの作成

まずは、作成したい下層ページの確認をします。

EC-CUBEでは、ログインや会員登録、購入などのシステムページやプライバシーポリシー、ご利用規約などのECには不可欠なページがデフォルトで存在しています。

コンテンツ管理　＞　ページ管理から確認することができます。

ファイル名から編集するファイルの場所を確認することができます。

作成したいファイルがここにある場合は、各ファイルから編集して、ない場合は、独自のファイルを作成する必要があります。

例えば、会社概要のページを作成したい場合は、下記ファイルを作成します。

app/template/user_data/company.twig

中身はトップページの記述をコピペして、アップロードします。

あとは、コンテンツ管理　＞　ページ管理で新規作成をクリックして、情報の入力をします。

まとめ

EC-CUBEはWordPressよりも情報が少ないので、テンプレートを作成するのに苦労します。

公式ドキュメントや開発コミュティで質問するが一番かと思います。