logo

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

Extra Block Types (EBT) - tipi di blocchi stilizzati e personalizzabili: Slideshows, Tabs, Cards, Accordion e molti altri. Impostazioni integrate per sfondo, DOM Box, plugin javascript. Vivi oggi il futuro della costruzione dei layout.

Demo moduli EBT Scarica moduli EBT

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

Extra Paragraph Types (EPT) - insieme di moduli basati su paragrafi in modo analogo.

Demo moduli EPT Scarica moduli EPT

Scorri
  1. Home
  2. Libro Drupal
  3. 6. Drupal: Creazione di temi

6.3. Creare il proprio tema Drupal basato sul tema Stable.

17/10/2025, by Ivan

Menu

A partire da questo articolo, inizieremo a creare il nostro tema in Drupal. In questa sezione del tutorial analizzeremo le basi della creazione di un tema in Drupal: dove si trovano i file, come includere e utilizzare CSS e JavaScript. Il nostro tema sarà basato sul tema di base del core Stable. Se vuoi imparare Drupal, partire da Stable è un’ottima scelta. Non è consigliabile iniziare da Bootstrap: incontreresti costantemente domande e errori. Nella prossima sezione del tutorial, con la conoscenza acquisita sulla creazione di temi in Drupal, inizieremo a lavorare con Bootstrap.

Ecco la documentazione ufficiale:

https://www.drupal.org/theme-guide/8

Creare una cartella per il nostro tema

Tutti i nuovi temi vengono inseriti nella cartella /themes. È possibile utilizzare la struttura come in Drupal 7 (sites/all/themes), ma è consigliabile seguire la nuova struttura di file di Drupal e posizionare tutto in /themes.

Io creerò la cartella /themes/drupalbook, ma puoi nominare il tuo tema come preferisci:

theme folder

Creare il file con le informazioni di base: drupalbook.info.yml

Nella cartella del nostro tema, crea il file theme_name.info.yml (nel nostro caso drupalbook.info.yml):

drupalbook.info.yml

Questo articolo fornisce informazioni dettagliate sul formato YAML:

https://en.wikipedia.org/wiki/YAML

Presta attenzione a due regole fondamentali:

  1. Non utilizzare tabulazioni per l’indentazione, solo spazi.
  2. Gli indent devono essere di uno o più spazi (es. name: value e non name:value).

Inserisci nel file drupalbook.info.yml il seguente contenuto:

name: Drupalbook
type: theme
base theme: stable
description: Il mio primo tema Drupal.
core: 8.x
core_version_requirement: ^8 || ^9
libraries:
  - drupalbook/global-styling
regions:
  header: Header
  content: Content  # Questa regione è obbligatoria
  sidebar_first: 'Sidebar first' # Ricordarsi di aggiungere le virgolette
  footer: Footer

Spiegazione delle righe

name – il nome del nostro tema. Il nome macchina del tema è lo stesso della cartella e del file drupalbook.info.yml – in questo caso drupalbook.

type – il tipo di progetto. In questo caso si tratta di un theme.

base theme – indica il tema da cui ereditiamo. In questo caso stable. Se si tratta di un tema completamente da zero, si può impostare false.

description – descrizione del tema che viene visualizzata nel pannello di amministrazione.

core – la versione del core Drupal per la quale il tema è destinato.

libraries – qui includiamo le librerie del nostro tema. Le definiremo nel file drupalbook.libraries.yml. Nota il riferimento global-styling, che useremo nel file delle librerie.

regions – regioni del tema. La regione content è obbligatoria, poiché Drupal visualizza il contenuto attraverso di essa. Se il nome della regione contiene più di una parola, racchiudilo tra virgolette. I nomi macchina delle regioni devono essere in minuscolo e separati da underscore.

Creare la libreria del tema

Ora creiamo il file drupalbook.libraries.yml e aggiungiamo il seguente contenuto:

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery

Ora analizziamo riga per riga:

  • global-styling – è il nome che abbiamo indicato nel file drupalbook.info.yml.
  • css – qui includiamo i file CSS. Nota che per la versione di stampa del sito abbiamo specificato media: print.
  • js – qui includiamo i file JavaScript. jQuery non è più incluso di default in Drupal, quindi, se vogliamo utilizzarlo nel nostro script personalizzato, dobbiamo aggiungere la dipendenza corrispondente.
dependencies:
  - core/jquery

Creare le cartelle CSS e JS

Crea le cartelle css e js all’interno del tema e aggiungi i seguenti file:

  • css/style.css
  • css/print.css
  • js/custom.js

Poiché ereditiamo dal tema Stable, anche i template vengono ereditati da esso. Ora vai nel pannello di amministrazione del sito, sezione Aspetto:

/admin/appearance

Pulisci la cache e abilita il nostro tema:

Tema

Ora il nostro nuovo tema Drupalbook è attivo sul sito:

Tema