【EC-CUBE 4】Twig まとめ(1) ~継承やブロックについて~

Twigテンプレートの継承とブロックについて解説
  • {% extends ‘default_frame.twig’ %}
  • {% block main %}{% endblock %}

Twigテンプレート特有の、これらの記法ってどういう意味?

本記事では、EC-CUBE(Symfony)で用いられるテンプレートエンジン『Twig』の基本となる、継承ブロックを中心に纏めています。

EC-CUBE 4で用意されているTwigファイルを元に説明しているので、実際にコードを弄りながら見てみると理解が早いかもしれません。

なお、Twigについては以下記事でも纏めていますので、合わせてご覧ください。

【動作環境】
EC CUBEのバージョン:4.1.2
サーバー:Xserver

目次

デフォルトのTwigファイル(TOPページ)から、Twigを理解する

EC-CUBE 4で、最初から用意されているTOPページのTwigファイルは以下のようになっています。
(コードは一部省略。EC-CUBE管理画面のコンテンツ管理→ページ管理から、下記ファイルが見れます。)

{#
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>
      {# 〜略〜 #}
    </style>
{% endblock %}

{% block javascript %}
    <script>
      {# 〜略〜 #}
    </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 %}

このコードを見ると、後半のdivタグを除いて一般的なHTMLタグ(<html>や<body>)は記述されていません。一方、{# #}や{% %}で囲まれたTwigファイル特有の記述が見られます。Twigファイルを使いこなすには、これらの記述方法を理解する必要があります。

{# ~ #} → コメントアウト

EC-CUBEで用意されているTwigファイルの冒頭数行には、{# #}で囲まれたコピーライトに関する記述がありますね。

{# #}で囲われた部分はいわゆるコメントアウトで、この部分に書かれた内容は実行されません。

HTMLでコメントアウトする場合(<!– –>)と記述方法が異なるので、注意しましょう。

{% set %} → 変数設定

以下のように記述することで、テンプレート側で変数を設定できます。

{% set 変数 = 値 %}

詳細は別記事に纏めます。

{% extends %} → 継承

{% extends ファイル名 %} を一番最初に記述しておくことで、指定したテンプレートを継承することができます。継承とは、別で用意されているテンプレートを読み込んで、そこに新しい内容を上書きして新たなテンプレートを作る機能です。

ここでは以下のような記述になっています。

{% extends 'default_frame.twig' %}

これは「default_frame.twig」というTwigファイルを継承して新しいテンプレートを作ることを意味します。

継承とはどのような仕組みか?

「default_frame.twig」の中身を見ながら、継承の仕組みを見てみます。

まず「default_frame.twig」ファイルは、「src/Eccube/Resource/template」下に格納されています。
他の記事で ファビコンの変更 titleタグ の変更 を行っている場合、「app/template/default」下に「default_fram.twig」を新規作成している場合があります。その際はそちらを参照してください。

default_frame.twigの格納場所_FTP
「default_frame.twig」の格納場所

「default_frame.twig」ファイルは以下のような構成になっています。(コードが長いため抜粋しています。)

<!doctype html>
{#
 ~~~
#}
<html>
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  ~~~

    <title>{{ BaseInfo.shop_name}}</title>

  ~~~

    <link rel="stylesheet" href="">

  ~~~

   {% block stylesheet %}{% endblock %}

  ~~~

 </head>
 <body>

  ~~~

   {% block main %}{% endblock %}

  ~~~

   {% block javascript %}{% endblock %}

  ~~~

 </body>
</html>

こちらのファイルでは、<html>や<head>、<body>といった、一般的なHTMLの記述になっていますね。<title>タグや<meta>タグなども記載されています。

継承とは、この「default_frame.twig」をベースとし、継承先Twigファイルの内容が反映されて新しいページが作られる、という仕組みになっています。(継承先Twigファイルがどのように反映されるかは、次項のブロックを参照。)

TOPページのTwigファイル「index.twig」は、この「default_frame.twig」を継承しているため、<html>や<body>などのタグを書かなくても良いというわけです。TOPページに限らず、継承しているページはすべて同じように反映されるため、レイアウトを統一したりコードの編集が楽になったりというメリットがあります。

{% block %} → ブロック

Twigテンプレートでは、以下のようなブロックを用いた構文が使われます。

{% block 名前 %}
    〜〜〜
{% endblock %} 

Twigでは、上記で囲まれた部分を 指定した名前のブロック として扱います。

ブロックの内容が、継承元のTwigに上書き(オーバーライド)される

例えば、TOPページ「index.twig」には {% block main %}{% endblock %} で囲まれた部分に、スライド画像を表示する<img>タグが3つ書かれています。

また、継承元の「default_fram.twig」にも {% block main %}{% endblock %} の記述があります。(こちらの中身は空です。)

このように記述すると、

  • 継承元「default_frame.twig」の {% block main %}{% endblock %} に、
  • 継承先「index.twig」の {% block main %}{% endblock %} の内容が、

上書き(オーバーライド)されます。

同様に、{% block stylesheet %}{% endblock %} や {% block javascript %}{% endblock %} に記述した内容も上書きされます。以下記事でCSSとJavaScriptの適用方法を紹介しておりますが、それはこの仕組みを利用しています。

上書き(オーバーライド)のイメージ

継承元「default_frame.twig

<html>
<head>
  <meta>
  <title></title>

{% block stylesheet %}
{% endblock %}

</head>
<body>

{% block main %}
{% endblock %}

{% block javascript %}
{% endblock %}

</body>
</html>

継承先「index.twig

{% extends 'default_frame.twig' %}

{% block stylesheet %}
<style>
~~~
</style>
{% endblock %}

{% block javascript %}
<script>
~~~
</script>
{% endblock %}

{% block main %}
<div class=”ec-sliderRole”>
~~~
</div>
{% endblock %}

最終的に生成される内容

<html>
<head>
  <meta>
  <title></title>
  <style>
    ~~~
  </style>
</head>
<body>
  <div class="ec-sliderRole">
    ~~~
  </div>
  <script>
    ~~~
  </script>
</body>
</html>

EC-CUBEで用意されているページのほとんどには、最初に {% extends ‘default_frame.twig’ %} が記載されています。
「default_frame.twig」をベースとすることで基本情報が統一され、他のページにはメインの内容だけを書けば良いためコードの可読性も上がります。

{% %} を使ったその他の記法

ここで紹介した以外にも、Twigには {% %} というタグを使ってさまざまな機能が用意されています。

よく使われる特殊タグの例
  • {% set %} → 変数設定
  • {% if %} → 条件表示
  • {% for %} → 繰り返し表示

詳しい使い方や実装例は こちらの記事 にて。

また、{{ 値 | raw }} のように書くことで特殊な出力を行うフィルター機能もあります。

この辺りも、後日別記事に纏めて解説します。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ノベルティグッズのECサイトを運営する中小企業役員。
本ブログを通じ、販促向けの最新/ロングセラー商品紹介やWebサイト制作に役立つ技術情報を発信しています。

目次