
最終更新日:2018年3月25日
テーマは、プレゼンテーション層を定義するファイル群です。また、テーマに1つ以上の「サブテーマ」やバリエーションを作成可能です。テーマとサブテーマには、 .info.yml ファイルのみが必須です。しかし、ほとんどの場合、その他のファイルも使用します。このページでは、一般的なテーマまたはサブテーマに含まれるファイルとフォルダについて説明します。
テーマの配置
テーマは、インストールしたDrupal内の「themes」フォルダに配置します。BartikやSevenなどのDrupalのコアテーマは、core/themes フォルダ内にあります。
「themes/contrib」フォルダ内に、寄与テーマを配置し、「themes/custom」フォルダ内に作成したテーマやサブテーマを配置することが推奨されています。
個別のテーマは、テーマ名を付けたフォルダに格納します。(例:fluffiness/ )フォルダ名はすべて小文字で、英字で始まり、スペースではなくアンダースコア(_)が使用できます。
インストールしたDrupalのフォルダ構造(一部)の例です:
|-core
| |-modules
| |-themes
| | |-bartik
| | |-seven
..
|-modules
|-themes
| |-contrib
| | |-zen
| | |-basic
| | |-bluemarine
| |-custom
| | |-fluffiness
テーマフォルダ構造
一般的なテーマフォルダの構造(ファイルとフォルダ)の例です。
|-fluffiness.breakpoints.yml
|-fluffiness.info.yml
|-fluffiness.libraries.yml
|-fluffiness.theme
|-config
| |-install
| | |-fluffiness.settings.yml
| |-schema
| | |-fluffiness.schema.yml
|-css
| |-style.css
|-js
| |-fluffiness.js
|-images
| |-buttons.png
|-logo.svg
|-screenshot.png
|-templates
| |-maintenance-page.html.twig
| |-node.html.twig
以下、テーマフォルダ内で、一般的なファイルの説明です。
* .info.yml
テーマは、テーマを定義する.info.ymlファイルが必要がです。.info.ymlファイルでは、主にメタデータ・ライブラリ・ブロックリージョンを設定します。テーマで必須になるファイルは .info.ymlファイルのみです。
* .libraries.yml
.libraries.ymlファイルはテーマに読み込むJavaScriptやCSSのライブラリを定義するのに使用されます。
* .breakpoints.yml
ブレイクポイントはサイズの異なるさまざまなデバイスにおいて、デザインが変更されるサイズを定義します。ブレークポイントは、.breakpoints.ymlファイルで設定します。
*.theme
.themeファイルは、すべての条件付きロジックや出力されるデータの(前)処理を含んだPHPファイルです。基本的なテーマ設定を拡張することができます。高度なテーマ設定に関してはこちらを参照してください。
CSS /
.cssファイルは、 'css'サブフォルダ内に保存することが推奨されています。Drupal 8のコアテーマは、SMACCSスタイルガイドに従ってCSSファイルを整理しています。テーマにCSSファイルを読み込むには、.libraries.ymlファイルで定義し、.info.ymlファイルでも設定(オーバーライドや削除)する必要があります。
js /
テーマで使うJavaScriptファイルは、 'js'サブフォルダに保存します。テーマにJavaScriptファイルを読み込むには、.libraries.ymlファイルで定義する必要があります。
images/
画像ファイルは、 'images'サブフォルダに保存することが推奨されています。
screenshot.png
テーマフォルダ内にscreenshot.pngファイルがある場合、そのファイルが「テーマ」ページで表示されます。また、.info.ymlファイルで、スクリーンショット用のファイルを設定可能です。
logo.svg
テーマフォルダ内にロゴSVGファイル(logo.svg)がある場合、webサイトのヘッダーで使用されます。また、ロゴファイルは「テーマ」の「設定」ページでアップロード可能です。
templates/
テンプレートは、HTMLマークアップとプレゼンテーションロジックを設定します。Drupal 7とは対照的に、Drupal 8のテンプレートファイル(* .html.twigファイル)は、 'templates'サブフォルダに保存する必要があります。テンプレートファイルの命名規則に従うことで、デフォルトのコアテンプレートを指定したテンプレートに置き換え、デフォルトのマークアップを上書きすることができます。
コアテーマBartikのフォルダ構造
例として、core / themes / bartikにあるBartikフォルダ構造を確認しましょう。
|-bartik.breakpoints.yml
|-bartik.info.yml
|-bartik.libraries.yml
|-bartik.theme
|-color
| |-color.inc
| |-preview.css
| |-preview.html
| |-preview.js
|-config
| |-schema
| | |-bartik.schema.yml
|-css
| |-colors.css
| |-layout.css
| |-maintenance-page.css
| |-print.css
|-images
| |-add.png
| |-required.svg
| |-tabs-border.png
|-logo.svg
|-screenshot.png
|-templates
| |-block--search-form-block.html.twig
| |-block--system-branding-block.html.twig
| |-block--system-menu-block.html.twig
| |-block.html.twig
| |-comment.html.twig
| |-field--taxonomy-term-reference.html.twig
| |-maintenance-page.html.twig
| |-node.html.twig
| |-page.html.twig
| |-status-messages.html.twig