Drupalのテーマ作成方法

テーマの作成方法をご紹介いたします。

最初にテーマ名を決めます。例えば作成するテーマ名を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が格納されています。