DrupalのテーマはWordpressなどの他のCMSと同様、Webサイトの外観を定義するためのものです。
テーマにはそのテーマの設定ファイル、テンプレート、css、Javascript、素材などのデータが含まれます。
Drupal8からテンプレート・エンジンとしてTwigが採用されました。
この章では
・すでに世の中で導入豊富なテーマのうち、弊社で導入したテーマのご紹介
・新規でテーマを作成する方法
・テンプレートについて
・Twigについて
・テーマの開発環境について
ご紹介いたします。
Drupal8 テーマ＆テンプレート開発事例のご紹介
今回弊社では、Bootstrap対応の無料HTML5/CSS3テンプレート素材 「Titan 」を利用し、Drupalベースのウェブサイトを構築いたしました。
今回の事例をベースにDrupalのテーマとテンプレートの開発方法をご紹介いたします。
【テーマとテンプレートについて】
まず最初にDrupalのテーマとテンプレートについての確認です。
・テーマとは
ウェブサイトの外観を定義する定義ファイル、テンプレートやcss、Javascriptなどのファイルの集合体です。
・テンプレートとは
Drupalから動的に出力される要素をテーマのHTMLに組み込んで出力するための定義ファイルです。
Drupal8ではテンプレテート・エンジンとしてTwigを採用しています。
・テーマの構成について
標準的な構成は弊社のDrupalstudyでご確認ください。
http://www.ffront.jp/drupalstudy/23
Drupalではテーマに基づいてHTMLを出力しますが、そのベースになるのがテンプレートです。
下記はffwebにあるpage.html.twigというテンプレートです。こちらでは、<body>タグの内容、ヘッダーやメニュー、コンテンツ、サイドバーなどの構成要素のHTMLを出力します。
Drupal8からテンプレートエンジンとしてtwigが採用されました。テンプレートを修正するにはtwigを習得する必要があります。
弊社では下記のテーマを導入、カスタマイズしてみました。
テーマの変更は管理画面 > テーマから簡単に変更できます。
■Bartik
coreに装備されている標準テーマですので、Drupal導入後すぐに利用できます。
レスポンシブ・デザインに対応したclassyのサブ・テーマです。
■zircon
ビジネス向けのシンプルデザインのテーマ
レスポンシブ・デザインに対応したclassyのサブ・テーマです。
■AdaptiveTheme