Subtemas

Subtemas, como cualquier otro tema, se distinguen por una diferencia clave: heredan los recursos del tema padre. No existen restricciones en la cadena que conecta subtemas con sus padres. Un subtema puede ser hijo de otro subtema y puede estar organizado y ramificado como usted lo considere necesario. Esto es lo que le da a los subtemas un gran potencial.

Para crear un subtema, defínalo como cualquier otro tema y declare su tema base usando la clave “base theme”. (Tenga en cuenta que esta clave no lleva guion bajo.)

Ejemplo de subtema: Fluffiness

Fluffiness es un ejemplo de subtema que usa Classy como tema base.

Esta es la estructura de carpetas en la que tendrá los siguientes archivos:

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

El archivo de información se llama 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

Incluya el archivo fluffiness.libraries.yml para añadir css/js al grupo de estilos globales definido arriba en la sección library: key.

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

Para más información, consulte sobre añadir hojas de estilo (CSS) y JavaScript (JS) en un tema Drupal 8.

Si desea usar otro nombre en lugar de “fluffiness”, simplemente reemplace todas las ocurrencias de “fluffiness” por su nombre (todas las ocurrencias incluyen también el nombre de la carpeta). Por ejemplo:

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

El texto que escriba en la línea “name:” del archivo info.yml es arbitrario y no tiene que coincidir exactamente con el nombre de archivo de su subtema. Por ejemplo, podría ser así:

name: My Custom Theme
# (todas las otras líneas omitidas por brevedad)

Subtema de un subtema

Al crear un subtema de un subtema, debe declarar como tema base el subtema.

• Fluffiness: primer subtema de 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: subtema de Fluffiness (subtema del subtema 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

Tenga en cuenta que el parámetro base theme es el machine name del tema base, mientras que el parámetro name es el nombre descriptivo.

Herencia de regiones temáticas

Las regiones del tema no se heredan del tema base declarado. Si el parámetro regions: está vacío en el archivo info.yml de su subtema o no contiene todas las regiones del tema base, entonces las regiones por defecto en Drupal pueden usarse como ubicaciones de respaldo para bloques en su subtema. Se recomienda encarecidamente copiar todas las regiones definidas en su tema base al archivo info.yml de su subtema.

# Debido a que las regiones no se heredan, cualquier región incluyendo
# las regiones estándar de Drupal así como las regiones del tema base
# deben ser definidas en el subtema. Este ejemplo demuestra un subtema
# que usa un subconjunto de las regiones estándar de Drupal (1),
# además de algunas regiones personalizadas definidas en el tema base (2),
# y finalmente tres regiones “colofón” definidas en este subtema (3).
regions:
  # 1. Regiones estándar de Drupal (también definidas y usadas por el tema base).
  # 2. Regiones copiadas del tema base.
  # 3. Regiones personalizadas adicionales del subtema.
  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

Herencia de la colocación de bloques

En Drupal 8, los temas pueden venir con una carpeta config/install/ donde las configuraciones preestablecidas de bloques, incluyendo la ubicación en regiones temáticas, se importan al activar el tema. Drupal puede heredar estas configuraciones de bloques y la ubicación de las regiones del tema base, pero si las regiones definidas en el archivo info.yml de su subtema no coinciden con las disponibles en el tema base, pueden ocurrir ubicaciones inesperadas en regiones al azar.

Herencia de plantillas de bloques

Si un tema extendido tiene plantillas personalizadas para bloques, estas no se heredarán automáticamente, ya que el subtema crea copias de todos los bloques en el tema padre y los renombra con el nombre del subtema como prefijo. Las plantillas Twig de bloque se basan en el nombre del bloque, por lo que esto rompe la relación entre esas plantillas y sus bloques. Actualmente, la solución a este problema requiere un truco en el subtema. Siguiendo los ejemplos anteriores, se crea un archivo llamado shaved.theme en el directorio del subtema. En ese archivo, inserte este hook:

/**
 * Implements hook_theme_suggestions_HOOK_alter para bloques.
 */
function shaved_theme_suggestions_block_alter(&$suggestions, $variables) {

  // Carga las sugerencias de tema para bloques del tema padre.
  foreach ($suggestions as &$suggestion) {
    $suggestion = str_replace('shaved_', 'fluffiness_', $suggestion);
  }
}

Para sus propios subtemas, reemplace “shaved” por el nombre de su subtema, y “fluffiness” por el nombre de su tema base.

Diferencias con Drupal 7

La diferencia más notable con Drupal 7 es que los archivos .info se convirtieron en archivos .info.yml que usan sintaxis YAML.