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

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

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

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

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

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

Olivero
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622183/0ad2e766-fe11-b308-40cf-e9c08a56b035.png)

Claro
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622183/f9422829-b7b1-01f3-f00f-9daebec2b08e.png)

Stark
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622183/985e6fa7-a5b6-385b-d53a-7e580dbbe448.png)

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

https://www.drupal.org/project/project_theme

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
```

:::note info
ファイル名の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: 'フッター'
```

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

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

これでテーマとして必要最低限作成できました。
この状態でインストールは可能ですがまだ何も機能がないのでここからカスタマイズしていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622183/e1923961-414c-a396-3039-c5b7d3c97cf7.png)

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

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

```
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
```

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

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

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

ここまで作成するとテーマフォルダの構成は以下の通りになると思います。
※私はstyles.scssをコンパイルしてstyles.cssを作成しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622183/a055344c-1ac9-73a1-8e34-019f3773bbe6.png)

## テーマをインストールする
さいごに管理画面でテーマをインストールします。
**インストールしてデフォルトに設定**を選択してメインのテーマに設定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622183/38fdbd90-2f7f-3af2-9018-3ab03384f15e.png)

次のメッセージが表示されればインストール成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622183/7aabc8cf-6a24-af00-c13b-3004b4c041a5.png)

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

トップページを見ると無機質なレイアウトになっていますが、
CSSやJSでフロントエンドのレイアウトを作成していないためこのようになっています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622183/92742d67-d6f6-57bf-6946-5258985bb88d.png)

なお管理画面のブロックレイアウトを確認するとテーマの設定ファイルで設定したリージョンが表示されていることがわかります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/622183/cc987ccb-bae3-ca3f-1540-4e7b67868e39.png)

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

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

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

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