Drupal 8テーマフォルダの構造
テーマは、プレゼンテーション層を定義するファイルのセットです。1つ以上の「サブテーマ」またはテーマのバリエーションを作成することもできます。必要なのは.info.ymlファイルだけですが、ほとんどのテーマとサブテーマは他のファイルも使用します。このページでは、一般的なテーマまたはサブテーマにあるファイルとフォルダーを一覧表示します。
テーマの場所
テーマは、Drupalインストールの「themes」フォルダーに配置する必要があります。BartikやSevenなどのDrupalコアテーマは、インストールのcore/themesフォルダーにあることに注意してください。
追加されたテーマは「contrib」サブフォルダーに、独自のテーマは「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ファイルはメタデータ、ライブラリ、ブロック領域を定義します。これはテーマの唯一の必須ファイルです。
*.libraries.yml
.libraries.ymlファイルは、テーマによって読み込まれるJavaScriptおよびCSSライブラリを定義するために使用されます。
*.breakpoints.yml
ブレークポイントは、異なるデバイスに応答するためにレスポンシブデザインが変更される場所を定義します。ブレークポイントは.breakpoints.ymlファイルで定義されます。
*.theme
.themeファイルは、すべての条件ロジックとデータの前処理を含むPHPファイルです。また、基本テーマ設定を拡張することもできます。高度なテーマ設定の作成。
CSS/
.cssファイルは「css」サブフォルダーに保存することをお勧めします。Drupal 8のコアテーマは、SMACSSスタイルガイドに従ってCSSファイルを整理します。テーマがCSSファイルを読み込むには、.libraries.ymlファイルで定義する必要があり、.info.ymlファイルでオーバーライドまたは削除できます。
JS/
テーマ固有のJavaScriptファイルは「js」フォルダーに保存されます。テーマがJavaScriptファイルを読み込むには、それらが.libraries.ymlファイルで定義されている必要があります。
images/
画像は「images」サブフォルダーに保存することをお勧めします。
screenshot.png
screenshot.pngファイルがテーマフォルダーにある場合、「外観」ページで使用されます。また、.info.ymlファイルでスクリーンショットを定義することもできます。
logo.svg
テーマフォルダーにテーマのロゴのベクターSVGファイルがある場合、サイトのヘッダーで使用できます。ロゴは「外観」>「設定」でもアップロードできます。
templates/
テンプレートはHTMLマークアップとプレゼンテーションロジックを提供します。Drupal 7とは異なり、Drupal 8のテンプレートファイル（*.html.twigファイル）は「templates」サブフォルダーに保存する必要があります。特定の命名規則に従うと、Drupalは提供したテンプレートでデフォルトのコアテンプレートを置き換えます。これにより、デフォルトのマークアップをオーバーライドできます。また、テンプレートをサブフォルダーに整理することもできます。たとえば、すべてのブロックテンプレートをtemplates/blocks内に、すべてのビューテンプレートをtemplates/views内に配置できます。
コアテーマ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