6.3. Stable テーマをベースに独自の Drupal テーマを作成する。

この記事から、Drupal で私たちのテーマ作りを行っていきます。チュートリアルのこのセクションでは、Drupal のテーマの基本、どこに何があるか、CSS、JavaScript の組み込みと使い方を分析します。私たちのテーマを作るには、コアのテーマビルダー Stable をベースにします。Drupal を学びたいなら、Stable は素晴らしい出発点です。Bootstrap から始めるべきではありません。絶えず疑問やエラーが出てきます。チュートリアルの次のセクションでは、Drupal のテーマ作成に関する知識を持って、Bootstrap で作業を始めます。

こちらが公式ドキュメントです

https://www.drupal.org/theme-guide/8

私たちのテーマ用のフォルダーを作成します

すべての新しいテーマを /themes フォルダーに置きます。drupal 7 の sites/all/themes のようにフォルダーを置くこともできますが、新しい Drupal のファイル構造を使い、/themes フォルダーに置くのが最善です。

私は /themes/drupalbook フォルダーを作成します。テーマの名前は好きなように付けられます:

drupalbook.info.yml に関する基本情報を含むファイルを作成します

私たちのテーマのフォルダーに、ファイル theme_name.info.yml を作成します:

この記事では、YAML 形式に関する詳細情報を提供しています:

https://en.wikipedia.org/wiki/YAML

2 つのことに注意してください:

1) インデントにタブを使わず、スペースのみを使います。

2) インデントは 1 つ以上のスペースでなければなりません。（つまり name: value であり、name:value ではありません）。

drupalbook.info.yml ファイルに挿入します:

name: Drupalbook
type: theme
base theme: stable
description: My first Drupal theme.
core: 8.x
core_version_requirement: ^8 || ^9
libraries:
  - drupalbook/global-styling
regions:
  header: Header
  content: Content  # このリージョンは必須です
  sidebar_first: 'Sidebar first' # 引用符を追加するのを忘れないでください
  footer: Footer

各行が何を意味するか見てみましょう。

name - 私たちのテーマの名前。私たちのテーマのマシン名は、フォルダーとファイル drupalbook.info.yml の名前――drupalbook です。

type - プロジェクトタイプは Drupal で、私たちはこれをテーマとして持っています。

base theme - stable テーマから継承します。テーマがゼロからなら、false と書きます。

description - 管理パネルに表示されるテーマの説明。

core - このテーマが対象とする Drupal コアのバージョン。

libraries - ここでモジュールにライブラリを組み込みます。次に作成するファイル drupalbook.libraries.yml を通じて行います。global-styling に注目してください。drupalbook.libraries.yml で使います。

regions - 私たちのテーマのリージョン。必須の content リージョンで、Drupal のコンテンツはこれを通じて表示されます。また、リージョンの名前が 2 語以上の場合は、引用符で囲むのを忘れないでください。リージョンのマシン名はアンダースコアを使って書きます。

私たちのテーマのライブラリを作成しましょう。

Drupalbook.libraries.yml ファイル

drupalbook.libraries.yml に次の行を追加します:

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

それでは、すべてを 1 行ずつ解析しましょう:

global-styling - これはまさに drupalbook.info.yml で設定した名前です

css - ここで CSS ファイルを組み込みます。サイトの印刷版には media: print を指定したことに注意してください。

js - ここで javascript ファイルを組み込みます。jQuery は Drupal では任意なので、カスタム JavaScript で jQuery を使いたい場合は、それへの依存を追加します

dependencies:
  - core/jquery

css、js フォルダーを作成し、ファイルをそこに置きます:

css/style.css

css/print.css

js/custom.js

stable テーマから継承するので、テンプレートもそれから継承します。それでは、サイトの appearance セクションに移動します:

/admin/appearance

キャッシュをクリアして、私たちのテーマを有効にします:

これで、サイトに新しい Drupalbook テーマができました: