Introduction

Drupal 10, avec son architecture flexible et modulaire, offre d’excellentes opportunités pour personnaliser l’expérience visuelle à travers des thèmes. Ce chapitre vous guidera à travers les subtilités de la sélection et de la personnalisation de thèmes dans Drupal.

1. Pourquoi utiliser un thème existant ?

Avant de plonger dans le vif du sujet, il est essentiel de comprendre pourquoi il est souvent préférable d’opter pour un thème existant plutôt que de créer le sien de zéro.

Bien que Drupal soit parfaitement capable de gérer des projets de tailles modestes, rappelons qu’il excelle dans les projets de grande envergure nécessitant une architecture robuste et extensible, ce qui peut parfois s’avérer relativement complexe pour des projets plus petits en raison de sa structure et de sa flexibilité intrinsèque.

Dans ce contexte, utiliser un thème basé sur des frameworks tels que Bootstrap reste souvent la meilleure approche. Ces thèmes offrent une multitude de composants prédéfinis qui facilitent la construction et la personnalisation de sites, permettant ainsi d’exploiter pleinement les capacités de Drupal sans se perdre dans les détails techniques complexes pour des besoins plus simples.

Cette approche maximise l’efficacité et permet une meilleure gestion des ressources pour...

Gérer les thèmes

Dans cette section, nous aborderons les étapes clés pour gérer efficacement les thèmes dans Drupal 10, depuis l’installation et l’activation jusqu’à la création de sous-thèmes personnalisés, y compris pour l’administration et pour des frameworks spécifiques comme Bootstrap.

1. Installer et activer un thème

L’installation d’un thème dans Drupal peut s’effectuer de deux manières : directement via l’interface utilisateur ou en utilisant Composer, cette dernière méthode étant fortement recommandée pour assurer une gestion optimale des dépendances.

Installer un thème via Composer est similaire à l’installation d’un module. Voici la commande pour installer le thème Bootstrap5, comme indiqué sur sa page communautaire :

Entrez donc dans le terminal la commande indiquée sur cette page :

composer require 'drupal/bootstrap5:^4.0'

Une fois le thème téléchargé, il faut procéder à son activation :

Depuis le menu d’administration, cliquez sur Appearance.

Vous pouvez installer un thème directement via l’interface avec le bouton Add new theme, bien que l’utilisation de Composer soit préférable.

De plus, vous pouvez consulter à la fois les thèmes déjà installés et ceux qui ne le sont pas encore. Vous aurez également la possibilité de sélectionner...

Structure d’un thème

La structure d’un thème dans Drupal est essentielle pour comprendre comment personnaliser et étendre les fonctionnalités de votre site. Cette section détaille les composants clés de la structure d’un thème et comment ils interagissent.

1. Déclaration (info.yml)

Chaque thème dans Drupal doit avoir un fichier MY_THEME.info.yml. Ce fichier sert de manifeste pour le thème et inclut des informations de base, comme le nom du thème, sa description, le type de base (s’il hérite d’un autre thème) et les bibliothèques de style ou de scripts qu’il utilise.

Voici un exemple simple de ce que pourrait contenir un fichier MY_THEME.info.yml :

name: My Theme 
type: theme 
description: 'A custom Drupal theme.' 
core_version_requirement: '^9.4 || ^10' 
'base theme': classy 
libraries: 
  - my_theme/global-styling 
regions: 
  header: Header 
  content: Content 
  footer: Footer

name : c’est le nom de votre thème dans Drupal. Ce nom est utilisé dans l’interface administrateur pour identifier le thème. Il doit être unique parmi tous les thèmes installés.
type : cela spécifie que le paquet est un thème. Dans Drupal, cela pourrait également être un module ou un profil, mais ici vous définissez spécifiquement qu’il s’agit d’un thème.
description : il fournit une brève description de ce que fait le thème ou de ses caractéristiques.
core_version_requirement : cela définit les versions de Drupal avec lesquelles le thème est compatible. Ce thème est compatible avec Drupal 9.4 et ultérieur, ainsi qu’avec toutes les versions de Drupal 10. C’est une directive importante pour s’assurer que le thème fonctionnera avec la version spécifique de Drupal utilisée.
base theme : cela spécifie que ce thème est un sous-thème, basé sur le thème « classy ». Ce dernier est un thème de base fourni par Drupal, et en l’utilisant comme thème de base, « My Theme » hérite de tous...

Personnaliser le thème

Cette section aborde des techniques essentielles pour personnaliser votre thème dans Drupal, depuis l’activation du mode debug jusqu’à la création de nouvelles régions en passant par la surcharge de template Twig.

1. Activer le mode debug

Activer le mode debug du thème dans Drupal facilite grandement la personnalisation de votre thème en vous permettant de voir quels templates sont utilisés sur chaque page et quels sont les noms des templates suggérés pour les surcharges.

Dupliquez le fichier default.services.yml dans le dossier web/sites/default et renommez-le services.yml.

Éditez ensuite le fichier services.yml afin de pouvoir activer le mode debug.

Trouvez les paramètres de Twig suivants et ajustez les valeurs comme suit :

parameters: 
  twig.config: 
    debug: true 
    auto_reload: true 
    cache: false

debug: true active le mode debug, affichant des commentaires HTML dans votre navigateur avec des informations sur les templates utilisés.
auto_reload: true assure que toute modification des templates est immédiatement reflétée sans avoir besoin de vider manuellement le cache.
cache: false désactive la mise en cache des templates, ce qui facilite le test et le développement.

Dupliquez maintenant le fichier web/sites/example.settings.local.php dans le dossier web/sites/default/ et renommez-le settings.local.php. Ce fichier désactive l’agrégation des fichiers JavaScript et CSS.

$config['system.performance']['css']['preprocess'] = FALSE; 
$config['system.performance']['js']['preprocess'] = FALSE;

Modifiez le fichier settings.local.php en décommentant les sections suivantes pour désactiver les fonctionnalités de mise en cache Drupal :

$settings['cache']['bins']['render'] = 'cache.backend.null'; 
$settings['cache']['bins']['page'] = 'cache.backend.null'; 
$settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';

Modifiez maintenant le fichier settings.php si besoin, en vous assurant que ces lignes en fin de fichier...

Thème personnalisé