Comment créer un thème Drupal 9 personnalisé en 9 étapes simples

Drupal 9 offre aux développeurs et aux propriétaires de sites la possibilité de créer des composants sur mesure qui peuvent être assemblés pour créer des expériences numériques convaincantes. Les thèmes sont des blocs de conception de Drupal qui représentent l'apparence visuelle d'un site Web. Drupal 9 propose des choix de thèmes principaux et de thèmes tiers, le plus populaire étant le thème Bootstrap. Cependant, si aucun des thèmes Drupal 9 ne vous convient, vous devriez probablement envisager le développement de thèmes personnalisés. Avec les thèmes personnalisés Drupal 9, vous pouvez adapter votre conception aux exigences exactes.

Drupal 9 fournit Bartik comme thème frontal pour Drupal, mais si vous avez besoin d'un thème personnalisé Drupal 9, vous pouvez créer votre propre développement de thème Drupal 9, améliorant ainsi vos compétences en matière de thème Drupal. Le moyen le plus simple de vraiment comprendre le développement de thèmes Drupal 9 est de s'entraîner et d'en créer un à partir de zéro.

Drupal 8 a maintenant atteint la fin de vie. Il est maintenant temps de migrer vers Drupal 9. Cependant, si vous essayez toujours de créer un thème personnalisé dans Drupal 8, ces étapes fonctionneront également pour une configuration Drupal 8.

Premiers pas avec le développement de thèmes Drupal 9 personnalisés

Commençons par créer un thème Drupal 9 pour notre site Web Drupal.
ÉTAPE 1 : Tout d'abord, nous devons créer un thème personnalisé dans le dossier 'web/themes/custom' . Nous nommerons le dossier custom_theme .

ÉTAPE 2 : Ensuite, nous devrons créer un fichier info.yml . Nous devons spécifier les clés de base pour cela. Précisons-le ici -

 CODE:
nom : Thème personnalisé
type : thème
description : 'Thème personnalisé pour mon site Web.'
forfait : Autre
core_version_requirement : ^8 || ^9

ÉTAPE 3 : Maintenant, créons un fichier libraries.yml pour spécifier toutes les bibliothèques nous avons besoin (CSS et JS) pour notre thème sur mesure Drupal 9. Nous allons également créer un répertoire CSS et JS et ses fichiers pour le lier ici. Nous allons nommer la bibliothèque comme global-styling .

 CODE:
global-styling :
version : 1.x
js :
js/script.js : {}
css :
thème :
css/style.css : {}

ÉTAPE 4 : Après avoir créé le fichier library.yml , nous devons le lier à notre thème. Pour cela, nous allons l'ajouter dans le fichier info.yml qui l'appliquera ensuite à l'ensemble du thème.

 CODE:
bibliothèques :
- custom_theme/global-styling

Ainsi, la clé sera les bibliothèques et le chemin sera le nom du thème - ' custom_theme ' / nom de la bibliothèque - 'global-styling' .

ÉTAPE 5 : Ensuite, nous devons hériter du 'Thème de base'. Dans notre cas, nous hériterons du thème ' classy ' qui est un thème principal de Drupal. Ainsi, la clé sera le thème de base dans info.ym l.

 CODE:
thème de base : classe

ÉTAPE 6 : Maintenant, nous allons définir les 'régions' pour notre thème. Dans info.yml , nous devons le définir sous la clé 'regions'.

 CODE:
régions :
image de marque : Image de marque
navigation : Navigation principale
recherche : Rechercher
en vedette : En vedette
contenu : Contenu
right_sidebar : barre latérale droite
footer_first : premier pied de page
footer_second : seconde de pied de page
footer_third : Troisième pied de page
footer_bottom : Bas du pied de page

Sous la touche « régions », vous pouvez définir vos régions pour le thème Drupal personnalisé. Ici,
branding : est l'identifiant de la région qui doit être en lettres minuscules.
Branding : est le nom de la région qui peut être en lettres majuscules.

ÉTAPE 7 : Après avoir défini nos régions pour notre thème Drupal personnalisé, nous devons remplacer page.html.twig pour récupérer nos « régions » au lieu de celles du thème classique. Nous allons créer le répertoire templates/system sous lequel nous allons créer le page.html.twig .

 CODE:
< header aria-label ="Site header" class ="header" id ="header" role ="banner" >
{{ page.branding }}
{{ page.navigation }}
{{ page.search }}
</ en- tête >
< section class ="présenté" id ="présenté" rôle ="complémentaire" >
{{ page.featured }}
</ section >
< classe de section ="main" id ="main" >
< main aria-label ="Contenu principal du site" class ="content" id ="content" role ="main" >
{{ Contenu de la page }}
</ principal >
< side class ="right--sidebar" id ="sidebar" role ="complémentaire" >
{{ page.right_sidebar }}
</ de côté >
</ section >
< 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 >
</ pied de page >

Dans page.html.twig, nous allons créer la structure HTML de nos régions. Comme vous le voyez dans {{ page.branding }} – Ici,

page - Est la clé pour rendre les 'régions' dans la page

branding- Est la région que nous avons définie dans le fichier info.yml .

Alors maintenant, nous avons créé nos régions et les avons rendues sur la page.

Étape 8 : Accédez à Apparence dans votre site Drupal. Vous pouvez voir votre thème Drupal personnalisé présent dans la section Thèmes non installés.

Vous devez cliquer sur l'option « Installer et définir par défaut » pour installer votre thème Drupal sur le site.

Une fois l'installation terminée, accédez à Structure -> Disposition des blocs . Votre thème personnalisé apparaîtra sous la disposition des blocs.

Vous verrez un lien pour ' Démontrer les régions de bloc (Thème personnalisé) '.Cliquez sur le lien. Vous pouvez voir toutes les régions que vous avez déclarées dans info.yml et ajoutées dans page.html.twig

Étape 9 : Vous avez maintenant presque terminé la thématisation dans Drupal 9 ! Ensuite, vous devez appliquer des styles dans le CSS pour chaque région selon votre conception. Nous utiliserons CSS dans ce cas ; Vous pouvez même utiliser SCSS si vous le souhaitez. Inspectez simplement la région de marque - vous devriez voir la classe de région, puis ajouter le CSS à cette classe.

 . en-tête {
 affichage : flex ;
 justifier-contenu : espace-entre ;
 remplissage : 10 px ;
}


. en-tête . région {
 remplissage : 5 px ;
}


. en-tête . image de marque de la région {
 flexion : 0 1 20 % ;
}


. en-tête . navigation-région {
 flexion : 0 1 50 % ;
}


. en-tête . recherche par région {
 flexion : 0 1 30 % ;
}


. région . région de bloc {
 remplissage : 15 px ;
}


. en vedette {
 remplissage : 40 px 20 px ;
 background-color : indianred ;
}


. principal {
 remplissage : 50 px 0 ;
 affichage : flex ;
 justifier-contenu : espace-entre ;
}
		



. principal . contenu {
 flex : 0 1 65 %;
}


. principal . barre latérale droite {
 flexion : 0 1 30 % ;
}


. pied de page--haut {
 affichage : flex ;
 justifier-contenu : espace-entre ;
 remplissage : 10 px ;
}


. pied de page - haut . région {
 remplissage : 5 px ;
}


. region-footer-first , . région-pied de page-seconde , . région-pied de page-tiers {
 flexion : 0 1 30 % ;
}

Le résultat:

Votre thème personnalisé Drupal 9 est prêt !

Si vous avez besoin d'écrire des crochets ou de créer des suggestions pour votre fichier twig, vous pouvez ajouter le fichier .theme dans votre thème Drupal personnalisé (illustré ci-dessous).