テーマについて

Drupalのテーマについて

DrupalのテーマはWordpressなどの他のCMSと同様、Webサイトの外観を定義するためのものです。

テーマにはそのテーマの設定ファイル、テンプレート、css、Javascript、素材などのデータが含まれます。

Drupal8からテンプレート・エンジンとしてTwigが採用されました。

この章では

・すでに世の中で導入豊富なテーマのうち、弊社で導入したテーマのご紹介

・新規でテーマを作成する方法

・テンプレートについて

・Twigについて

・テーマの開発環境について

ご紹介いたします。
 

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

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

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

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

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

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

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

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

Drupalのテンプレートについて

Drupalではテーマに基づいてHTMLを出力しますが、そのベースになるのがテンプレートです。

下記はffwebにあるpage.html.twigというテンプレートです。こちらでは、<body>タグの内容、ヘッダーやメニュー、コンテンツ、サイドバーなどの構成要素のHTMLを出力します。

Drupal8からテンプレートエンジンとしてtwigが採用されました。テンプレートを修正するにはtwigを習得する必要があります。

弊社で導入したフリーのテーマのご紹介

弊社では下記のテーマを導入、カスタマイズしてみました。

テーマの変更は管理画面 > テーマから簡単に変更できます。

 

■Bartik

coreに装備されている標準テーマですので、Drupal導入後すぐに利用できます。

レスポンシブ・デザインに対応したclassyのサブ・テーマです。

■zircon

ビジネス向けのシンプルデザインのテーマ

レスポンシブ・デザインに対応したclassyのサブ・テーマです。

 ziricon

■AdaptiveTheme