サブテーマ

05/05/2020, by maria

サブテーマは、他のテーマと同様ですが、1つだけ違いがあります。親テーマのリソースを継承する点です。サブテーマを親テーマに接続するチェーンに制限はありません。サブテーマは別のサブテーマの子になることができ、必要に応じて分岐して編成できます。これがサブテーマに大きな可能性を与えています。

サブテーマを作成するには、他のテーマと同様に定義し、「base theme」キーを使用してベーステーマを宣言します。（このキーにはアンダースコアがないことに注意してください。）

サブテーマの例：Fluffiness

Fluffinessは、Classyをベーステーマとして使用するサブテーマの例です。

これは、次のファイルを含むフォルダー構造です：

themes/
└──  fluffiness/
     ├── fluffiness.info.yml
     └── fluffiness.libraries.yml

情報ファイルはfluffiness.info.ymlという名前です：

name: Fluffiness
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:
  - fluffiness/global-styling
# Regions
regions:
  header: Header
  featured: Featured
  content: Content
  sidebar_first: First sidebar
  sidebar_second: Second sidebar
  footer: Footer

fluffiness.libraries.ymlファイルを有効にして、上のlibraries:キーセクションで定義されたグローバルスタイリンググループにcss/jsを追加します。

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

Drupal 8テーマへのスタイルシート（CSS）とJavaScript（JS）の追加について詳しく学ぶ。

「fluffiness」の代わりに別の名前を使用したい場合は、「fluffiness」のすべての出現箇所を自分の名前に置き換えるだけです（「すべての出現箇所」にはフォルダー名も含まれます）。例：

themes/
└──  my_custom_theme/
     ├── my_custom_theme.info.yml
     └── my_custom_theme.libraries.yml

info.ymlファイルの「name:」行に入力するテキストは任意の形式で、サブテーマのファイル名と正確に一致する必要はありません。たとえば、次のようになります：

name: My Custom Theme
# (all the other lines omitted for brevity)

サブテーマのサブテーマ

サブテーマのサブテーマを作成する場合、ベーステーマとしてそのサブテーマを指定する必要があります。

Fluffiness：Classyの最初のサブテーマ

name: Fluffiness
type: theme
description: This is a fluffy sub theme of Classy
core: 8.x
# Defines the base theme
base theme: classy

Shaved：Fluffinessのサブテーマ（Classyのサブテーマのサブテーマ）

name: Shaved
type: theme
description: This is a reduced fluff sub theme of Fluffiness
core: 8.x
# Defines the base theme
base theme: fluffiness

base theme:パラメータはベーステーマのマシン名であり、name:パラメータは説明的な名前であることに注意してください。

テーマ領域の継承

テーマ領域は指定されたベーステーマから継承されません。サブテーマのinfo.ymlファイルでregion:パラメータが空のままであるか、ベーステーマのすべての領域を含まない場合、Drupalのデフォルト領域をサブテーマのブロック配置のフォールバックとして使用できます。ベーステーマで定義されたすべての領域をサブテーマのinfo.ymlファイルにコピーすることを強くお勧めします。

# Because regions are not inherited, any region including standard
# Drupal regions as well as base theme regions must be defined in
# the sub-theme. This example demonstrates a sub-theme that leverages
# a subset of the standard Drupal regions (1), plus some custom
# regions defined in the base theme (2), and finally three
# "colophon"-related regions defined in this sub-theme.  
regions:
  # 1. Standard Drupal regions (also defined and used by base theme).
  # 2. Regions copied from base theme.
  # 3. Additional custom sub-theme regions.
  header:             'Header'                    # 1
  primary_menu:       'Main menu'                 # 1
  secondary_menu:     'Secondary menu'            # 1
  highlighted:        'Highlighted'               # 1
  help:               'Help'                      # 1
  section_nav:        'Section Nav'               # 2
  breadcrumb:         'Breadcrumb'                # 1
  page_title:         'Page Title'                # 2
  local_tasks:        'Local Tasks'               # 2
  content:            'Content (Constrained)'     # 1
  content_fullwidth:  'Content (Edge-to-edge)'    # 2
  colophon_first:     'Colophon First Col'        # 3
  colophon_second:    'Colophon Second Col'       # 3
  colophon_third:     'Colophon Third Col'        # 3
  footer:             'Footer'                    # 1

ブロック配置の継承

Drupal 8では、テーマはconfig/install/フォルダーとともに提供でき、テーマ領域への配置を含む事前設定されたブロック設定がテーマの有効化時にインポートされます。Drupalはこれらのブロック設定と領域配置をベーステーマから継承できますが、サブテーマのinfo.ymlファイルで定義されたテーマ領域がベーステーマで利用可能な領域と一致しない場合、ランダムな領域に予期しない配置が発生する可能性があります。

ブロックテンプレートの継承

拡張元テーマにカスタムブロックテンプレートがある場合、サブテーマは親テーマのすべてのブロックのコピーを作成し、サブテーマ名をプレフィックスとして名前を変更するため、それらはすぐには継承されません。Twigブロックテンプレートはブロック名から派生するため、これらのテンプレートとブロックの間のリンクが壊れます。この問題の修正には現在、サブテーマにフックが必要です。上記の例に従って、サブテーマディレクトリにshaved.themeという名前のファイルを作成します。このファイルにこのフックを貼り付けます。

/**
 * Implements hook_theme_suggestions_HOOK_alter for blocks.
 */
function shaved_theme_suggestions_block_alter(&$suggestions, $variables) {

  // Load theme suggestions for blocks from parent theme.
  foreach ($suggestions as &$suggestion) {
    $suggestion = str_replace('shaved_', 'fluffiness_', $suggestion);
  }
}

独自のサブテーマでは、「shaved」をサブテーマの名前に、「fluffiness」をベーステーマの名前に置き換えます。

Drupal 7との違い

Drupal 7との最も顕著な違いは、.infoファイルがYAML構文を使用する.info.ymlファイルになったことです。

パレット - カラフルに🎨

Menu