Drupal 8 テーマのフォルダ構造

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

最終更新日: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

詳しくは

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

 
フッターの採用情報
 
Yoshikazu Aoyamaの写真

この記事を書いた人: Yoshikazu Aoyama

昔は回線交換やL2/L3のプロトコルスタックの開発をしてました。その後、組み込みLinuxやJava/Ruby on RailsなどのWebシステム開発などを経て現職。
インフラからDrupalのモジュール開発、Drupal以外の開発までなんでもやります。
普段は札幌で猫と一緒にリモートワークしています。 好きなモジュールは Restful Web Services と Rules

関連コンテンツ