Drupal8 テーマ&テンプレート開発事例

Drupal8 テーマ&テンプレート開発事例のご紹介

今回弊社では、Bootstrap対応の無料HTML5/CSS3テンプレート素材 「Titan 」を利用し、Drupalベースのウェブサイトを構築いたしました。
今回の事例をベースにDrupalのテーマとテンプレートの開発方法をご紹介いたします。

【テーマとテンプレートについて】

まず最初にDrupalのテーマとテンプレートについての確認です。

・テーマとは
ウェブサイトの外観を定義する定義ファイル、テンプレートやcss、Javascriptなどのファイルの集合体です。

・テンプレートとは
Drupalから動的に出力される要素をテーマのHTMLに組み込んで出力するための定義ファイルです。
Drupal8ではテンプレテート・エンジンとしてTwigを採用しています。

・テーマの構成について
標準的な構成は弊社のDrupalstudyでご確認ください。
http://www.ffront.jp/drupalstudy/23

今回はテーマ名をffwebsiteとします。


【手順1】
最初にffwebsiteのサイトの構成を検討し、リージョンを決める必要があります。
リージョンはコンテンツを表示する領域のことで、ここで設定したリージョンがDrupal管理画面のブロックレイアウトのリージョンとして表示されます。
つまりリージョンを決定し、ブロックレイアウトの管理画面でリージョンが表示されるので、その上に各コンテンツのブロックを設置する流れになります。

ブロックレイアウトについては
弊社のDrupalstudyでご確認ください。
http://www.ffront.jp/drupalstudy/18

弊社で検討したリージョンの構成

リージョン

ヘッダー、フッターの各リージョンとコンテンツエリアを3カラムにした構成です。
リージョンの上に各ブロックが設置されます。

【手順2】
上記テーマの構成をもとにテーマ・ディレクトリを作成します。
今回はthemes/ディレクトリの配下にffwebsiteディレクトリを作成します。
ffwebsiteディレクトリ配下に
ffwebsite.info.ymlを作成します。



name: ffwebsite
type: theme
base theme: classy
description: 'A flexible, recolorable theme with many regions and a responsive, mobile-first layout.'
version: 8.x-1.0.0
core: 8.x
libraries:
  - ffwebsite/bootstrap
  - ffwebsite/flexslider
  - ffwebsite/wow
  - ffwebsite/jquery
  - ffwebsite/global-styling
  - ffwebsite/messages
  - ffwebsite/local-stylesheets
  - ffwebsite/fontawesome
regions:
  header: 'Header First'
  page_intro: 'Page Intro'
  promoted: 'Promoted Area'
  content: 'Content'
  sidebar_first: 'First Sidebar'
  sidebar_second: 'Second Sidebar'
  footer: 'Footer First'
  hidden_blocks_collection: 'Hidden blocks collection'

ffwebsite.libraries.ymlを作成します。
css、js、lib、templatesフォルダを作成します。

【手順3】
今回のリージョンに対応したテンプレートの開発を行います。
下記構成図をもとにテンプレートを開発します。

テンプレート

下記テンプレートは概要図にあるテンプレートです。

html.html.twig:html全体の構成を決めるテンプレート。<head>タグ、<body>タグが含まれます。
page.html.twig:<body>タグの内部を決めるテンプレート
region.html.twig:リージョンの内部を決めるテンプレート


今回弊社ではDrupalコアにあるclassyテーマをベースに開発を行いました。
Drupalは自動的にclassyテーマにある必要なテンプレートを呼び出して利用します。
修正が必要な場合は、classyのテンプレートを手動でtemplatesフォルダにコピーしてきます。
コピーしたファイルに修正をかけて利用します。


今回弊社では
page.html.twig
region.html.twig
の修正を行いました。

page.html.twigの一部を抜粋します。
Titanのbodyタグの要素を組み込んでいます。


<main>

<div class="page-loader">

<div class="loader">Loading...</div>
</div>

<nav role="navigation" aria-labelledby="{{ heading_id }}" class="navbar navbar-custom navbar-fixed-top" style="top:auto;">  

  </nav>  

  {{ page.header }}  

例えば今回の構成ではリージョンが複数存在します。
リージョンの場合の命名規則は
region--[region名].html.twigです。
(テンプレートの命名規則)
https://www.drupal.org/docs/8/theming/twig/twig-template-naming-conventions

例えばリーション名がfooterの場合のリージョンのテンプレート名は
region--footer.html.twig
です。
classyのテンプレートregion.html.twigをコピーし、修正してregion--footer.html.twigで保存します。

カテゴリー