Drupal テーマのフォルダ構造

はじめに

最終更新日：2019年5月19日

テーマは、プレゼンテーション層を定義するファイル群です。また、一つのテーマをもとに複数のバリエーションを作成可能で、これらは 「サブテーマ」 とも呼ばれます。テーマとサブテーマには、 .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 9 のコアテーマは、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 9 のテンプレートファイル（*.html.twigファイル）は、 'templates'サブフォルダに保存する必要があります。 テンプレートファイルの命名規則に従うことで、デフォルトのコアテンプレートを指定したテンプレートに置き換え 、デフォルトのマークアップを上書きすることができます。また、サブフォルダーを利用してテンプレートファイルを整理することも可能です。例えば、全てのブロック用テンプレートを templates/block に格納し、ビューズのテンプレートを 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

詳しくは 

コーディング規格：CSSファイルの構成