Drupalでサブテーマを作成する

はじめに

ベーステーマを継承してサブテーマを作成します。ベーステーマがアップデートされてもカスタマイズしたコードはサブテーマ用ディレクトリに作成されているためロールバックされることはありません。テーマをカスタマイズする場合は必ずサブテーマを作成してから実施しましょう。今回はサブテーマの作成方法を説明します。

メインテーマをダウンロードする

今回利用するベーステーマはBootstrap for Drupalです。テーマ公開のページにアクセスし、コントリビュートテーマと同様にダウンロードします。

　解凍したフォルダをthemes/contrib下に保存し、まずはテーマ管理画面から「Bootstrap for Drupal 8.x」を「インストールしてデフォルトに設定」します。

　トップページに戻ると、ベーステーマのデザインが反映されています。

サブテーマを作成する

ベーステーマのインストールが完了したら、サブテーマを作成します。ここで紹介するのは汎用的な方法なので、実際のサブテーマ作成方法は各ベーステーマのドキュメントを参照してください。

　まずはサブテーマのフォルダをthemes/custom/に「subtheme_bootstrap」として作成し、中にsubtheme_bootstrap.info.ymlファイルを配置します。

subtheme_bootstrap.info.yml

name: 'Subtheme Bootstrap'
type: theme
description: 'Bootstrapベースのサブテーマです。'
core_version_requirement: ^8 || ^9 || ^10
base theme: bootstrap_for_drupal

ymlファイルのbase themeプロパティでベーステーマを指定します。これにより、ベーステーマを拡張する形でサブテーマを作成できます。テーマ管理画面にSubtheme Bootstrapテーマが追加されているので、「インストールしてデフォルトに設定」します。

テーマが変更されましたがトップページに戻ると、デザインが変わっていないことが確認できます。

　このサブテーマ機能を利用することで、ベーステーマを上書きすることなく、デザインを継承した独自のテーマを作ることができます。CSSやJSを追加する方法はカスタムテーマの時と同様です。

リージョンを追加する

　最後にリージョンを追加する方法を紹介します。リージョンとは連載第2回で紹介したブロックを配置することができるスロットです。まずsubtheme_bootstrap.info.ymlにregionsプロパティを追加します。値はBootstrap for Drupalのinfo.ymlのものをコピーし、「footer_sub_right: 'Footer sub - right box'」行の下に「footer_bottom: 'Footer Bottom'」行を挿入します。

subtheme_bootstrap.info.yml

name: 'Marucha Bootstrap'
type: theme
description: 'Bootstrapベースのサブテーマです。'
core_version_requirement: ^8 || ^9 || ^10
base theme: bootstrap_for_drupal
regions:
  header_special: 'Header - special'
  nav_main: 'Navigation - Main'
  nav_add: 'Navigation - Additional '
  content_before: 'Content - before'
  content: 'Content - main '
  content_after: 'Content - after'
  sidebar_left: 'Content - Sidebar'
  footer_left: 'Footer - left box'
  footer_center: 'Footer - center box'
  footer_right: 'Footer - right box'
  footer_sub_left: 'Footer sub - left box'
  footer_sub_center: 'Footer sub - center box'
  footer_sub_right: 'Footer sub - right box'
  footer_bottom: 'Footer Bottom'
  modal_container: 'Modal box container'

次にBootstrap for Drupalテーマのテンプレートを上書きします。まず、/themes/contrib/bfd/templates/layout/page.html.twigファイルを/themes/custom/subtheme_bootstrap/templates内にコピーします。templatesフォルダは新規に作成してください。コピーしたファイルの最下部に以下のコードを追加します。

{% if page.footer_bottom %}
  {{ page.footer_bottom }}
{% endif %}

 

 

 

　最後に、キャッシュをクリアし、サイト構築＞ブロックレイアウトの画面からFooter Bottomリージョンに「配信」ブロックを追加します。その際に「ディスプレイ・タイトル」のチェックボックスは外してください。

配信ブロックがきちんとページに掲載されているか確認するために、試しにトップページ以外のページ、例えば以前作成したHELLOWORLDページ（/helloworld）にアクセスしてみます。アクセスするとページ最下部にRSSアイコンが表示されています。

 

　なお、トップページにはこのアイコンは表示されません。これはトップページ専用のページテンプレートであるpage--front.html.twigファイルがBootstrap for Drupalに存在しているため、そちらが優先されて表示されるためです。必要に応じ、Marucha Bootstrapテーマ内に同名のファイルを置くことでトップページのリージョンもカスタマイズできます。

さいごに

いかがだったでしょうか。テーマをフルスクラッチで作成するのは効率が悪いためイメージにあったテーマをカスタマイズをするのが多いのではないでしょうか。その場合は必ずサブテーマを作成してからカスタマイズをするようにしましょう。