Drupalでサブテーマを作成する
![Drupalでサブテーマを作成する](/sites/default/files/styles/wide/public/2024-02/drupal10_13.png?itok=7uVo07LB)
はじめに
ベーステーマを継承してサブテーマを作成します。ベーステーマがアップデートされてもカスタマイズしたコードはサブテーマ用ディレクトリに作成されているためロールバックされることはありません。テーマをカスタマイズする場合は必ずサブテーマを作成してから実施しましょう。今回はサブテーマの作成方法を説明します。
メインテーマをダウンロードする
今回利用するベーステーマはBootstrap for Drupalです。テーマ公開のページにアクセスし、コントリビュートテーマと同様にダウンロードします。
![](https://cz-cdn.shoeisha.jp/static/images/article/13347/13347_013.png)
解凍したフォルダをthemes/contrib下に保存し、まずはテーマ管理画面から「Bootstrap for Drupal 8.x」を「インストールしてデフォルトに設定」します。
![](https://cz-cdn.shoeisha.jp/static/images/article/13347/13347_014.png)
トップページに戻ると、ベーステーマのデザインが反映されています。
サブテーマを作成する
ベーステーマのインストールが完了したら、サブテーマを作成します。ここで紹介するのは汎用的な方法なので、実際のサブテーマ作成方法は各ベーステーマのドキュメントを参照してください。
まずはサブテーマのフォルダを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テーマが追加されているので、「インストールしてデフォルトに設定」します。
![](https://cz-cdn.shoeisha.jp/static/images/article/13347/13347_016.png)
テーマが変更されましたがトップページに戻ると、デザインが変わっていないことが確認できます。
このサブテーマ機能を利用することで、ベーステーマを上書きすることなく、デザインを継承した独自のテーマを作ることができます。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 %}
![](https://cz-cdn.shoeisha.jp/static/images/article/13347/13347_017.png)
最後に、キャッシュをクリアし、サイト構築>ブロックレイアウトの画面からFooter Bottomリージョンに「配信」ブロックを追加します。その際に「ディスプレイ・タイトル」のチェックボックスは外してください。
![](https://cz-cdn.shoeisha.jp/static/images/article/13347/13347_018.png)
配信ブロックがきちんとページに掲載されているか確認するために、試しにトップページ以外のページ、例えば以前作成したHELLOWORLDページ(/helloworld)にアクセスしてみます。アクセスするとページ最下部にRSSアイコンが表示されています。
![](https://drupalfan.com/wp-content/uploads/image-190-1024x169.png)
![](https://drupalfan.com/wp-content/uploads/image-189-1024x102.png)
なお、トップページにはこのアイコンは表示されません。これはトップページ専用のページテンプレートであるpage--front.html.twigファイルがBootstrap for Drupalに存在しているため、そちらが優先されて表示されるためです。必要に応じ、Marucha Bootstrapテーマ内に同名のファイルを置くことでトップページのリージョンもカスタマイズできます。
さいごに
いかがだったでしょうか。テーマをフルスクラッチで作成するのは効率が悪いためイメージにあったテーマをカスタマイズをするのが多いのではないでしょうか。その場合は必ずサブテーマを作成してからカスタマイズをするようにしましょう。
この記事に関するご質問やご意見などございましたらお問い合わせフォームからお気軽にご連絡ください。