Sottotemi

02/10/2025, by Ivan

I sottotemi, come qualsiasi altro tema, hanno una sola differenza: ereditano le risorse del tema genitore. Non ci sono limiti alle catene di ereditarietà che collegano i sottotemi ai loro genitori. Un sottotema può essere figlio di un altro sottotema e può essere ramificato e organizzato come si ritiene opportuno. Questo è ciò che conferisce ai sottotemi un grande potenziale.

Per creare un sottotema, definiscilo come qualsiasi altro tema e dichiara il suo tema base usando la chiave «base theme». (Nota: questa chiave non contiene il trattino basso.)

Esempio di sottotema: Fluffiness

Fluffiness è un esempio di sottotema che usa Classy come tema base.

Questa è la struttura delle cartelle, con i file inclusi:

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

Il file informativo si chiama fluffiness.info.yml:

name: Fluffiness
type: theme
description: This is a fluffy sub theme of Classy
core: 8.x
# Definisce il tema base
base theme: classy
# Definisce i gruppi di librerie nei quali possiamo aggiungere css/js.
libraries:
  - fluffiness/global-styling
# Regioni
regions:
  header: Header
  featured: Featured
  content: Content
  sidebar_first: First sidebar
  sidebar_second: Second sidebar
  footer: Footer

Includi il file fluffiness.libraries.yml per aggiungere css/js al gruppo di stili globali definito sopra nella sezione library: key.

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

Scopri di più su come aggiungere fogli di stile (CSS) e JavaScript (JS) a un tema Drupal 8.

Se vuoi usare un altro nome invece di «fluffiness», basta sostituire tutte le occorrenze di «fluffiness» con il tuo nome (questo include anche il nome della cartella). Ad esempio:

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

Il testo che inserisci nella riga «name:» del file info.yml è arbitrario e non deve necessariamente corrispondere esattamente al nome file del tuo sottotema. Ad esempio, può essere così:

name: My Custom Theme
# (tutte le altre righe omesse per brevità)

Sottotema di un sottotema

Quando crei un sottotema di un sottotema, devi dichiarare come tema base il sottotema stesso.

Fluffiness: primo sottotema di Classy

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

Shaved: sottotema di Fluffiness (quindi sottotema di un sottotema di Classy)

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

Nota che il parametro base theme: è il machine name del tema base, mentre il parametro name: è il nome descrittivo.

Ereditarietà delle regioni del tema

Le regioni del tema non vengono ereditate dal tema base. Se il parametro regions: viene lasciato vuoto nel file info.yml del tuo sottotema o non include tutte le regioni del tema base, allora le regioni predefinite di Drupal possono essere usate come fallback per il posizionamento dei blocchi nel tuo sottotema. Si consiglia vivamente di copiare tutte le regioni definite nel tema base nel file info.yml del tuo sottotema.

# Poiché le regioni non vengono ereditate, qualsiasi regione, incluse
# le regioni standard di Drupal così come quelle del tema base, deve
# essere definita nel sottotema. Questo esempio mostra un sottotema
# che utilizza un sottoinsieme delle regioni standard di Drupal (1),
# alcune regioni personalizzate definite nel tema base (2),
# e infine tre regioni aggiuntive collegate al "colophon" definite in questo sottotema.
regions:
  # 1. Regioni standard di Drupal (anch’esse definite e usate dal tema base).
  # 2. Regioni copiate dal tema base.
  # 3. Ulteriori regioni personalizzate del sottotema.
  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

Ereditarietà del posizionamento dei blocchi

In Drupal 8 i temi possono includere una cartella config/install/, dove le configurazioni predefinite dei blocchi, incluso il loro posizionamento nelle regioni, vengono importate quando il tema viene attivato. Drupal può ereditare queste configurazioni dei blocchi e il posizionamento delle regioni dal tema base, ma se le regioni definite nel file info.yml del tuo sottotema non corrispondono a quelle disponibili nel tema base, potrebbero verificarsi posizionamenti imprevisti in regioni casuali.

Ereditarietà dei template dei blocchi

Se il tema esteso ha template personalizzati per i blocchi, questi non verranno ereditati automaticamente, poiché il sottotema crea copie di tutti i blocchi del tema genitore e li rinomina con il nome del sottotema come prefisso. I template Twig dei blocchi derivano dal nome del blocco, e ciò rompe il collegamento tra questi template e i blocchi stessi. Attualmente, per risolvere questo problema, è necessario un workaround nel sottotema. Seguendo gli esempi sopra, creiamo un file chiamato shaved.theme nella cartella del sottotema. In questo file inserisci questo hook:

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

  // Carica i suggerimenti di template per i blocchi dal tema genitore.
  foreach ($suggestions as &$suggestion) {
    $suggestion = str_replace('shaved_', 'fluffiness_', $suggestion);
  }
}

Per i tuoi sottotemi personali sostituisci «shaved» con il nome del tuo sottotema e «fluffiness» con il nome del tuo tema base.

Differenze rispetto a Drupal 7

La differenza più evidente rispetto a Drupal 7 è che i file .info sono diventati file .info.yml, che usano la sintassi YAML.

Extra Block Types (EBT) - Nuova esperienza con Layout Builder❗

❗Extra Paragraph Types (EPT) - Nuova esperienza con Paragraphs

Menu