テーマの作成方法をご紹介いたします。
最初にテーマ名を決めます。例えば作成するテーマ名をffwebとした場合、フォルダをffwebとし、ffwebフォルダ配下に下記ファイルを作成します。
drupal/themes/ffweb/
|-ffweb.breakpoints.yml
|-ffweb.info.yml
|-ffweb.libraries.yml
|-ffweb.theme
|-templates
|-page.html.twig
①ffweb.info.ymlについて
テーマ名、drupal coreのバージョン、利用するlibraries、リージョンなどの情報を設定します。
ffwebテーマでは下記のように設定しています。コア・テーマclassyのサブテーマです。
ここで設定したリージョンがDrupal管理画面のブロックレイアウトのリージョンとして表示されます。
name: ffweb
type: theme
description: This is a fluffy sub theme of Classy
core: 8.x
# Defines the base theme
base theme: classy
# Defines libraries group in which we can add css/js.
libraries:
- ffweb/global-styling
# Regions
regions:
header: Header
primary_menu: 'Primary menu'
highlighted: Highlighted
breadcrumb: Breadcrumb
featured: Featured
sidebar_first: 'First sidebar'
content: Content
sidebar_second: 'Second sidebar'
featured_bottom_first: 'Featured bottom first'
featured_bottom_second: 'Featured bottom second'
featured_bottom_third: 'Featured bottom third'
footer: Footer
②ffweb.libraries.yml
ffwebテーマで利用するcss、Javascriptを定義します。下記はfweb.libraries.ymlの一部になります。
global-styling:
version: 1.x
css:
base:
includes/bootstrap/css/bootstrap.css: {}
includes/bootstrap/css/bootstrap-theme.css: {}
component:
css/components/block.css: {}
css/components/book.css: {}
③ffweb.breakpoints.yml
レスポンシブウェブデザインのブレイクポイントの設定です。
ffweb.mobile:
label: mobile
mediaQuery: ''
weight: 0
multipliers:
- 1x
ffweb.narrow:
label: narrow
mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
weight: 1
multipliers:
- 1x
ffweb.wide:
label: wide
mediaQuery: 'all and (min-width: 851px)'
weight: 2
multipliers:
- 1x
④templatesフォルダ
テーマで利用するテンプレートの格納場所です。
この例ではpage.html.twigが格納されています。