Drupal8 テーマ＆テンプレート開発事例のご紹介
今回弊社では、Bootstrap対応の無料HTML5/CSS3テンプレート素材 「Titan 」を利用し、Drupalベースのウェブサイトを構築いたしました。
今回の事例をベースにDrupalのテーマとテンプレートの開発方法をご紹介いたします。
【テーマとテンプレートについて】
まず最初にDrupalのテーマとテンプレートについての確認です。
・テーマとは
ウェブサイトの外観を定義する定義ファイル、テンプレートやcss、Javascriptなどのファイルの集合体です。
・テンプレートとは
Drupalから動的に出力される要素をテーマのHTMLに組み込んで出力するための定義ファイルです。
Drupal8ではテンプレテート・エンジンとしてTwigを採用しています。
・テーマの構成について
標準的な構成は弊社のDrupalstudyでご確認ください。
http://www.ffront.jp/drupalstudy/23
今回はテーマ名をffwebsiteとします。
【手順１】
最初に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で保存します。