Drupal 8 サブテーマの作成

テーマのcss等をカスタマイズするために、テーマの導入後、まず、そのテーマのサブテーマを作成します。

ちなみに、私がこのサイトで利用しているテーマは、Bootstrap Mintです。Top 10 Drupal Themes for 2018の中から選びました。

テーマの作成方法は、Creating sub-themesを参考にしています。

親テーマのフォルダー構成

親テーマのBootstrap Mintのフォルダー構成は、以下となっています。

themes/
└──  bootstrap_mint/
     ├── bootstrap_mint.breakpoints.yml
     ├── bootstrap_mint.info.yml
     ├── bootstrap_mint.libraries.yml
     ├── bootstrap_mint.theme
     ├── composer.json
     ├── config/
     ├── css/
     ├── favicon.ico
     ├── images/
     ├── js/
     ├── LICENSE.txt
     ├── logo.svg
     ├── README.txt
     ├── Release Notes.txt
     ├── screenshot.png
     └── templates/

サブテーマのフォルダー構成

今回、「drupal_study」というサブテーマを作成しますが、「themes」フォルダ配下に、「bootstrap_mint」と横並びで、「drupal_study」フォルダを作成し、最低限のファイルとしては、以下を置けば、サブテーマの完成です。

themes/
└──  drupal_study/
     ├── css/
     │    └── style.css
     ├── drupal_study.info.yml
     ├── drupal_study.libraries.yml
     ├── favicon.ico
     └── logo.svg

サブテーマとしての本当の最低限のファイルという意味では、「drupal_study.info.yml」を置けば出来上がりですが、今回の目的としては、最低限、cssをカスタマイズしたいので、ファイル「drupal_study.libraries.yml」とフォルダ「css」、サイズ0のファイル「style.css」を置きます。

また、「favicon.ico」および「logo.svg」については、親テーマから継承されないので、まずは、「bootstrap_mint」から「favicon.ico」、「logo.svg」をコピーします。

 モジュール.info.yml

「drupal_study.info.yml」の内容は、以下のように記述します。

name: Drupal study
type: theme
base theme: bootstrap_mint
description: 'Bootstrap Mingテーマをベースとしたテーマ'
core: 8.x

#Libraries
libraries:
  - drupal_study/global-styling

#Regions
regions:
  sliding_header_one: 'Sliding Header Left'
  sliding_header_two: 'Sliding Header Right'
・・・

「name」には、今回作成するサブテーマの名前、「description」には、サブテーマの説明を記述します。
「type」には、「theme」と記述し、「base theme」には、今回の親テーマである「bootstrap_mint」を記述します。
「core」も必須で、「8.x」と記述します。
「regions」は、親テーマから継承されないので、親テーマの「bootstrap_mint」の「regions」から、そのままコピーします。
「libraries」は、cssやjsのカスタマイズのために使用しますが、今回の記述としては、Creating sub-themesに倣って記述しています。

モジュール.libraries.yml

「drupal_study.libraries.yml」の内容は、以下のように記述します。

global-styling:
  css:
    theme:
      css/style.css: {}

こちらの書き方も、Creating sub-themes同様に記述しています。

テーマの導入

必要なファイルおよびその内容は以上で、そして、管理画面の「テーマ」を開くと、「アンインストール済みテーマ」のところに、今作成した「Drupal study」のテーマがあるので、「インストールしてデフォルトに設定」をクリックすると、「bootstrap_mint」の時と同じ画面が表示されます。

これで、サブテーマ「Drupal study」の完成です。

cssファイルのカスタマイズ

cssファイルをカスタマイズする場合は、上記の「style.css」ファイルに記述すれば、OKです。また、twigファイルをカスタマイズする場合は、templatesフォルダを作成し、その中に必要なtwigファイルを置きます。

logo.svgとfavicon.ico

logo.svg と favicon.ico は、その後、自分で作成したものを置いていますが、その際に利用させていただいたサイトを以下に記します。どちらも、簡単に使えて良かったです。

• Method Draw：svgファイルの作成
• ファビコン favicon.icoを作ろう!：pngファイルからfavicon.icoファイルの作成

次回からは、本ブログサイトのためのDrupalのカスタマイズ内容について記載していきます。