Drupal テーマのフォルダ構造

Drupal テーマ作成ガイドバナー
この記事は「 Drupal theme folder structure 」の翻訳です。
この記事の目次

最終更新日: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 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'サブフォルダに保存する必要があります。テンプレートファイルの命名規則に従うことで、デフォルトのコアテンプレートを指定したテンプレートに置き換え、デフォルトのマークアップを上書きすることができます。また、サブフォルダーを利用してテンプレートファイルを整理することも可能です。例えば、全てのブロック用テンプレートを 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ファイルの構成

ANNAI株式会社の写真

この記事を書いた人 : ANNAI株式会社

ANNAIは、2009年からDrupal専門のWebシステム開発会社として、世界規模で展開するグローバル企業や大学・自治体を中心に数多くのWebソリューションを提供。
CoreやModuleのコントリビューターなど、Drupalエキスパートが多数在籍。国内ユーザーコミュニティへも積極的にコミットし、定期的なセミナーの等の開催を通じて、オープンソース技術の普及や海外コミュニティとの緊密な連携を図っている。
Webシステムの企画・開発〜デザイン、クラウド運用までをワンストップで提供する他、Drupalのコーディングを評価する"Audit業務"や最適なモジュールの調査・選定等、幅広いコンサルティングを行っている。Drupalアソシエーション公式パートナー。

関連コンテンツ