サブテーマを使う
次にサブテーマを利用したテーマ開発を行う方法を紹介します。サブテーマのベースとしての利用を前提としたコントリビュートテーマをインストールし、カスタマイズします。
ベーステーマをダウンロード
今回利用するベーステーマはBootstrap for Drupalです。テーマ公開のページにアクセスし、コントリビュートテーマと同様にダウンロードします。
解凍したフォルダをthemes/contrib下に保存し、まずはテーマ管理画面から「Bootstrap for Drupal 8.x」を「インストールしてデフォルトに設定」します。
トップページに戻ると、ベーステーマのデザインが反映されています。
サブテーマを作成する
ベーステーマのインストールが完了したら、サブテーマを作成します。ここで紹介するのは汎用的な方法なので、実際のサブテーマ作成方法は各ベーステーマのドキュメントを参照してください。
まずはサブテーマのフォルダをthemes/custom/に「marucha_bootstrap」として作成し、中にmarucha_bootstrap.info.ymlファイルを配置します。
name: 'Marucha Bootstrap' type: theme description: 'Bootstrapベースのまる茶用テーマです。' core_version_requirement: ^8 || ^9 base theme: bootstrap_for_drupal
ymlファイルのbase themeプロパティでベーステーマを指定します。これにより、ベーステーマを拡張する形でサブテーマを作成できます。テーマ管理画面にMarucha Bootstrapテーマが追加されているので、「インストールしてデフォルトに設定」します。
テーマが変更されましたがトップページに戻ると、デザインが変わっていないことが確認できます。
このサブテーマ機能を利用することで、ベーステーマを上書きすることなく、デザインを継承した独自のテーマを作ることができます。CSSやJSを追加する方法はカスタムテーマの時と同様です。
リージョンを追加する
最後にリージョンを追加する方法を紹介します。リージョンとは連載第2回で紹介したブロックを配置することができるスロットです。まずmarucha_bootstrap.info.ymlにregionsプロパティを追加します。値はBootstrap for Drupalのinfo.ymlのものをコピーし、「footer_sub_right: 'Footer sub - right box'」行の下に「footer_bottom: 'Footer Bottom'」行を挿入します。
name: 'Marucha Bootstrap' type: theme description: 'Bootstrapベースのまる茶用テーマです。' core_version_requirement: ^8 || ^9 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/marucha_bootstrap/templates内にコピーします。templatesフォルダは新規に作成してください。コピーしたファイルの最下部に以下のコードを追加します。
{% if page.footer_bottom %}
{{ page.footer_bottom }}
{% endif %}
最後に、キャッシュをクリアし、サイト構築＞ブロックレイアウトの画面からFooter Bottomリージョンに「配信」ブロックを追加します。その際に「ディスプレイ・タイトル」のチェックボックスは外してください。
配信ブロックがきちんとページに掲載されているか確認するために、試しにトップページ以外のページ、例えば店舗一覧ページ（/stores）にアクセスしてみます。アクセスするとページ最下部にRSSアイコンが表示されています。
なお、トップページにはこのアイコンは表示されません。これはトップページ専用のページテンプレートであるpage--front.html.twigファイルがBootstrap for Drupalに存在しているため、そちらが優先されて表示されるためです。必要に応じ、Marucha Bootstrapテーマ内に同名のファイルを置くことでトップページのリージョンもカスタマイズできます。
まとめ
今回はサイトの見た目を変更するテーマ機能について紹介しました。ダウンロードしてすぐに利用できるコントリビュートテーマは手軽に始めることができます。自分で1からテーマ開発を行うこともできますが、ベーステーマと呼ばれる種類のテーマを利用してサブテーマを作成することで、効率よく独自のテーマを構築できます。今回紹介したテーマ開発機能は全体のごく一部なので、より詳しく知りたい方はぜひドキュメントを参照してください。
次回は、Drupalサイトの機能拡張を実現する「モジュール」と呼ばれる機能のひとかたまりを開発する方法について紹介します。
