Drupalでカスタムテーマを作ってみよう

この記事ではDrupalでカスタムテーマを作成するやり方をご紹介します。

Drupalにおけるテーマとは

DrupalにおいてテーマとはWEBサイトのページを構成する各要素のレイアウトや視覚的な見た目を定義するファイルの集合体です。

このテーマには大きく分けて3つあります。

• コアテーマ
• コントリビュートテーマ
• カスタムテーマ

コアテーマとは

コアテーマとはDrupalインストール時にすでに使用可能となっているテーマのことです。
Drupal10では以下の3つが最初から使用できます。

Olivero

Claro

Stark

コントリビュートテーマとは

コントリビュートテーマはDrupal.orgで配布されているテーマのことです。

2024年2月4日現在、ここでは3120のテーマが公開されており自由に使用することができます。
中には過去のDrupalでコアテーマとして使用されていたものもこちらで配布されています。

コアテーマから変えたいけど自分で全て作るのは大変という場合、コントリビュートテーマはおすすめです。

カスタムテーマとは

カスタムテーマとは自分でテーマに関するファイルをすべて作成したもののことです。

コアテーマやコントリビュートテーマはカスタマイズできる部分に限りがあります。
用件や要望に基づき自由に見た目や機能を作成したい場合はおすすめです。

今回はカスタムテーマの作成方法についてこちらでご紹介します。

カスタムテーマでできること

カスタムテーマはフロントエンドで作成するレイアウトやデザイン、バックエンドで作成するフックなどを自由にカスタマイズすることができます。

全てゼロから作成するため検討や実装でのコストはかかりますが、要件や要望に合わせたカスタマイズがほぼなんでもできるため拡張性が非常に高いです。

カスタムテーマを作成する

テーマ用のフォルダを作成する

web/theme配下にcustomフォルダを作ります。

mkdir custom

さらにその配下にカスタムテーマ用のフォルダを作ります。
このフォルダはカスタムテーマ1つに対して作成し、フォルダ名はカスタムテーマのマシン名にします。
今回はfirst_themeというマシン名で作成します。

mkdir first_theme

設定ファイルを作成する

テーマの名前や説明、対応するコアバージョンを定義するファイルです。
先ほど作成したweb/theme/custom/first_themeにfirst_theme.info.ymlを作成します。

touch first_theme.info.yml

ファイル名のfirst_themeの部分は作成するモジュールのマシン名に置き換えてください。

今回は設定ファイルは以下のように設定します。

name: First Theme
type: theme
description: '初めてのカスタムテーマ'
core_version_requirement: '>=10.0'
libraries:
  - first_theme/global-styling
  - first_theme/global-scripts
base theme: stable9
regions:
  header: 'ヘッダー'
  content: 'コンテンツ'
  sidebar: 'サイドバー'
  footer: 'フッター'

今回設定ファイルに定義した項目はそれぞれ以下の通りです。

name : テーマの名前です。管理画面に表示されます。
type : テーマの場合はthemeで固定です。
description : テーマの説明です。管理画面に表示されます。
core version requirement : どのコアバージョンで動作するかを指定します。
libraries : テーマで使用するアセットファイルを指定します（後ほど作成）。
base theme : なんのコアテーマをもとに作成するか指定します。
regions : ページどのような要素を配置するかを指定します。
　　　　contentは必須項目です。

これでテーマとして必要最低限作成できました。
この状態でインストールは可能ですがまだ何も機能がないのでここからカスタマイズしていきます。

フックファイルを作成する

フックファイルはテーマで使用するテンプレートやモジュールの機能内の処理を実行する前後で割り込んで実行することでオリジナルのプログラムを作成できるファイルです

今回は特に何もプログラムは追加しませんがファイルだけ作成しておきます。

touch first_theme.theme

CSSとJSファイルを作成する

先ほどテーマの設定ファイルでライブラリと呼ばれるものを設定しました。
テーマ内で使用するCSSやJSを作成していきます。

touch first_theme.libraries.yml

まずテーマで使用するアセットを設定するファイルを作成します。
以下の通りに作成します。

global-styling:
  version: 0.0
  css:
    theme:
      css/vendor/destyle.css: {}
      css/styles.css: {}
global-scripts:
  version: 0.0
  js: 
    js/scripts.js: {}  
  dependencies:
    - core/jquery

設定ファイル内に記載されているCSSやJSは指定したパスにファイルを配置します。

次に設定ファイルで指定したCSSやJSを作成します。

touch css/vendor/destyle.css
touch css/styles.css
touch js.scripts.js

ここまで作成するとテーマフォルダの構成は以下の通りになると思います。
※私はstyles.scssをコンパイルしてstyles.cssを作成しました。

テーマをインストールする

さいごに管理画面でテーマをインストールします。
インストールしてデフォルトに設定を選択してメインのテーマに設定します。

次のメッセージが表示されればインストール成功です。

管理画面のテーマは変更されていないよ、という意味のメッセージです。
デフォルトに設定したテーマはURLが/adminから始まるページ以外で適用されます。

トップページを見ると無機質なレイアウトになっていますが、
CSSやJSでフロントエンドのレイアウトを作成していないためこのようになっています。

なお管理画面のブロックレイアウトを確認するとテーマの設定ファイルで設定したリージョンが表示されていることがわかります。

補足：デフォルトテーマと管理テーマについて

デフォルトテーマはトップページやログインページ、管理画面で作成したコンテンツのページなど、
管理者権限を持たないユーザーでもアクセスできる一般のページで適用されるテーマです。

対して管理テーマとは管理者権限を持つユーザーしかアクセスできないURLが「/admin」から始まるページ（いわゆる管理画面）でのみ適用されるテーマです。

テーマの種類	適用されるページ
管理テーマ	URLが「/admin」から始まるページ
デフォルトテーマ	管理テーマが適用されないページ

さいごに

今回はDrupalでカスタムテーマを作成する方法をご紹介しました。

もしコアテーマでもコントリビュートテーマでも実現できない機能があれば
今回ご紹介した内容を参考にぜひテーマを作ってみてください。