Come creare un tema Drupal 9 personalizzato in 9 semplici passaggi

Drupal 9 offre agli sviluppatori e ai proprietari di siti la flessibilità di creare componenti su misura che possono essere assemblati per creare esperienze digitali avvincenti. I temi sono blocchi di design di Drupal che rappresentano l'aspetto visivo di un sito web. Drupal 9 viene fornito con una scelta di temi principali e temi di terze parti, il più popolare è il tema Bootstrap. Tuttavia, se nessuno dei temi Drupal 9 lo taglia per te, probabilmente dovresti guardare allo sviluppo di temi personalizzati. Con i temi personalizzati di Drupal 9, puoi adattare il tuo design ai requisiti esatti.

Drupal 9 fornisce Bartik come tema frontend per Drupal, ma se hai bisogno di un tema personalizzato Drupal 9, puoi creare il tuo sviluppo del tema Drupal 9, migliorando così le tue abilità di temi Drupal. Il modo più semplice per comprendere veramente lo sviluppo del tema di Drupal 9 è esercitarsi e crearne uno da zero.

Drupal 8 ha ora raggiunto EOL. Ora è il momento di migrare a Drupal 9. Tuttavia, se stai ancora provando a creare un tema personalizzato in Drupal 8, questi passaggi funzioneranno anche per una configurazione di Drupal 8.

Iniziare con lo sviluppo del tema personalizzato Drupal 9

Iniziamo con la creazione di un tema Drupal 9 per il nostro sito Web Drupal.
PASSO 1: Innanzitutto, dobbiamo creare un tema personalizzato nella cartella "web/themes/custom" . Chiameremo la cartella come custom_theme .

FASE 2: Successivamente, avremo bisogno di creare un file info.yml . Dobbiamo specificare le chiavi di base per esso. Specifichiamolo qui -

 CODICE:
nome : tema personalizzato
tipo : tema
description : 'Tema personalizzato per il mio sito web.'
pacchetto : Altro
core_version_requirement : ^8 || ^9

PASSO 3 : Ora creiamo un file library.yml per specificare tutte le librerie di cui abbiamo bisogno (CSS E JS) per il nostro tema Drupal 9 personalizzato. Creeremo anche la directory CSS e JS e i suoi file per collegarla qui. Chiameremo la libreria come global-styling .

 CODICE:
stile globale :
versione : 1.x
js :
js/script.js : {}
css :
tema :
css/style.css : {}

PASSO 4: Dopo aver creato il file library.yml , dobbiamo collegarlo al nostro tema. Per questo, lo aggiungeremo nel file info.yml che poi lo applicherà all'intero tema.

 CODICE:
biblioteche :
- tema_personalizzato/stile-globale

Quindi, la chiave sarà le librerie e il percorso sarà il nome del tema - ' custom_theme ' / nome libreria - 'global-styling' .

FASE 5 : Successivamente, dobbiamo ereditare il 'Tema di base'. Nel nostro caso, erediteremo il tema ' classe ' che è un tema centrale di Drupal. Quindi, la chiave sarà il tema di base in info.ym l.

 CODICE:
tema di base : di classe

PASSO 6 : Ora definiremo le 'regioni' per il nostro tema. In info.yml , dobbiamo definirlo sotto la chiave 'regioni'.

 CODICE:
regioni :
marchio : marchio
navigazione : Navigazione principale
cerca : Cerca
in primo piano: in primo piano
contenuto : contenuto
right_sidebar : barra laterale destra
footer_first : prima il piè di pagina
footer_second : secondo piè di pagina
piè di pagina_terzo : piè di pagina terzo
footer_bottom : piè di pagina in basso

Sotto la chiave "regioni", puoi definire le tue regioni per il tema Drupal personalizzato. Qui,
branding: è l'id della regione che dovrebbe essere in lettere minuscole.
Branding: è il nome della regione che può essere composto da lettere maiuscole.

PASSO 7: Dopo aver definito le nostre regioni per il nostro tema Drupal personalizzato, dobbiamo sovrascrivere page.html.twig per prendere le nostre "regioni" invece del tema classico. Creeremo templates/system directory in cui creeremo il page.html.twig .

 CODICE:
< header aria-label ="Site header" class ="header" id ="header" role ="banner" >
{{ page.branding }}
{{ pagina.navigazione }}
{{ pagina.ricerca }}
</ intestazione >
< section class ="in primo piano" id ="in primo piano " ruolo ="complementare" >
{{ pagina.in primo piano }}
</ sezione >
< sezione class ="principale" id ="principale" >
< main aria-label ="Contenuto principale del sito" class ="content" id ="content" role ="main" >
{{ pagina.contenuto }}
</ principale >
< side class ="right--sidebar" id ="sidebar" role ="complementary" >
{{ page.right_sidebar }}
</ a parte >
</ sezione >
< footer aria-label ="Site footer" class ="footer" id ="footer" role ="contentinfo" >
< div class ="footer--top" >
{{ page.footer_first }}
{{ page.footer_second }}
{{ page.footer_ Third }}
</ div >
< div class ="footer--bottom" >
{{ page.footer_bottom }}
</ div >
</ piè di pagina >

In page.html.twig, creeremo la struttura HTML per le nostre regioni. Come vedi in {{ page.branding }} – Qui,

pagina - È la chiave per rendere 'regioni' nella pagina

branding- È la regione che abbiamo definito nel file info.yml .

Quindi ora abbiamo creato le nostre regioni e le abbiamo rese nella pagina.

Passaggio 8: vai su Aspetto nel tuo sito Drupal. Puoi vedere il tuo tema Drupal personalizzato presente nella sezione Temi disinstallati .

È necessario fare clic sull'opzione " Installa e imposta come predefinita " per installare il tema Drupal sul sito.

Dopo l'installazione, vai su Struttura -> Layout blocco . Il tuo tema personalizzato apparirà sotto il layout del blocco.

Vedrai un collegamento per " Dimostra regioni a blocchi (tema personalizzato) ".Fai clic sul collegamento. Puoi vedere tutte le regioni che hai dichiarato in info.yml e aggiunto in page.html.twig

Passaggio 9: ora hai quasi finito con i temi in Drupal 9! Successivamente, devi applicare gli stili nel CSS per ogni regione secondo il tuo progetto. Useremo i CSS in questo caso; Puoi anche usare SCSS se lo desideri. Ispeziona semplicemente la regione del marchio: dovresti vedere la classe della regione e quindi aggiungere il CSS a quella classe.

 . intestazione {
 display : flessibile ;
 giustificare-contenuto : spazio-tra ;
 imbottitura : 10 px ;
}


. intestazione . regione {
 imbottitura : 5 px ;
}


. intestazione . marchio regionale {
 flessione : 0 1 20 %;
}


. intestazione . regione-navigazione {
 flessione : 0 1 50 %;
}


. intestazione . regione-ricerca {
 flessibilità : 0 1 30 %;
}


. regione . regione di blocco {
 imbottitura : 15 px ;
}


. in primo piano {
 imbottitura : 40 px 20 px ;
 colore di sfondo : rosso indiano ;
}


. principale {
 riempimento : 50 px 0 ;
 display : flessibile ;
 giustificare-contenuto : spazio-tra ;
}
		



. principale . contenuto {
 flessibilità : 0 1 65 %;
}


. principale . barra laterale destra {
 flessibilità : 0 1 30 %;
}


. piè di pagina--top {
 display : flessibile ;
 giustificare-contenuto : spazio-tra ;
 imbottitura : 10 px ;
}


. piè di pagina: in alto . regione {
 imbottitura : 5 px ;
}


. regione-piè di pagina-prima , . regione-piè di pagina-secondo , . regione-piè di pagina-terzo {
 flessibilità : 0 1 30 %;
}

Il risultato:

Il tuo tema personalizzato Drupal 9 è pronto!

Se hai bisogno di scrivere hook o creare suggerimenti per il tuo file ramoscello, puoi aggiungere il file .theme nel tuo tema Drupal personalizzato (mostrato sotto).