【Drupal 10】カスタムテーマ開発においてのファイル構成

3. 主要ファイルの役割と記述例

それぞれの構成ファイルには、Drupalシステムがテーマを解釈するための明確な役割が与えられています。

① marucha_theme.info.yml （システムへのテーマ登録）

テーマをDrupalに認識させるためのファイルであり、唯一必須となる設定ファイルです。テーマの基本プロパティのほか、使用する親テーマの指定、読み込むライブラリ、レイアウト構成を定義します。

name: 'Marucha Theme'
type: theme
description: '標準デザインをベースにしたカスタムサブテーマです。'
core_version_requirement: '^9 || ^10'
base theme: olivero
libraries:
  - marucha_theme/global-styling
  - marucha_theme/global-scripts

② marucha_theme.libraries.yml （CSS/JSの管理）

HTML（Twig）に対して直接 <link> や <script> タグを記述することはDrupalでは非推奨です。CSSやJSは必ずこのファイルで「アセットライブラリ」として部品単位で定義します。これにより、キャッシュが最適化されます。

global-styling:
  version: 1.0
  css:
    theme:
      css/style.css: {}
global-scripts:
  version: 1.0
  js:
    js/script.js: {}
  dependencies:
    - core/jquery

③ marucha_theme.breakpoints.yml （レスポンシブ画像との連携）

レスポンシブWebデザインにおける画面切り替えのピクセル幅条件を、システムに可視化して登録するファイルです。

ここに定義した目印はモジュールに連携され、ブラウザの幅に応じて最適な画像サイズを動的に出し分ける <picture> タグの自動生成に利用されます。

marucha_theme.mobile:
  label: mobile
  mediaQuery: '(min-width: 0px)'
  weight: 0
  multipliers:
    - 1x
marucha_theme.wide:
  label: wide
  mediaQuery: '(min-width: 851px)'
  weight: 1
  multipliers:
    - 1x

④ marucha_theme.theme （PHP前処理）

PHPファイルであり、ビュー（HTML）を出力する前にバックエンド側でデータを加工します。

管理画面からユーザーが入力したURLを取得し、Twigテンプレートが扱える変数配列（$variables）へ代入します。

<?php
function marucha_theme_preprocess_page(&$variables) {
  $variables['twitter_url'] = theme_get_setting('twitter_url');
}

⑤ theme-settings.php ＆ config/install/marucha_theme.settings.yml

管理画面の入力フォーム自体をForm APIで拡張・カスタムするためのPHPファイルです。

合わせて、config/install/ ディレクトリ配下に同名の設定YAMLを配置しておくことで、テーマの新規インストール時に自動適用される初期値をDBへインポートさせることができます。