MENU
  1. ホーム
  2. IT
  3. Drupal
  4. Drupalでカスタムテーマを作ってみよう

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

Drupal

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

目次

Drupalにおけるテーマとは

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

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

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

コアテーマとは

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

Olivero
image.png

Claro
image.png

Stark
image.png

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

コントリビュートテーマは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

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

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: 'フッター'

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

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

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

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

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

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

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

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

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

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

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

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

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

さいごに

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

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

Drupal
CMS Drupal Drupal10 PHP
目次