Makina Blog
Démarrer un thème Drupal 8 en 10 minutes
Un thème Drupal 8 à télécharger pour être opérationnel immédiatement.
Drupal 8 intègre désormais le moteur de templates Twig pour sa couche de thème. Mais d'autres choses ont changé également. Cet article vise à vous aider à démarrer le plus efficacement possible. Cela correspond (en partie, bien sûr) à ce que nous présentons durant notre formation au développement Drupal 8.
Attention : nous ne présentons pas Twig dans cet article, mais juste son intégration à Drupal.
Préparez votre environnement de développement
Un des challenges pour les débutants en Drupal est d'identifier rapidement le fichier de template utilisé ou celui à modifier pour obtenir le rendu souhaité. Heureusement, Drupal permet d'automatiser le processus d'identification.
Pour cela, vous pouvez modifier le fichier sites/default/services.yml (s'il n'existe pas, renommez le fichier default.services.yml en services.yml) :
parameters: twig.config: debug: true
Une alternative si la console Drupal est installée est de passer le site en mode développement :
drupal site:mode dev
Créez votre thème
L'adage en vogue dans la communauté Drupal est "si vous hackez un fichier, vous tuez un chaton". Ce qui concrètement s'interprète en "on ne modifie jamais directement un fichier du cœur". Drupal a en effet des mécanismes qui permettent de surcharger le comportement du cœur.
Cela passe pour la couche graphique par la création d'un thème dédié.
Dans le dossier /themes, créez un nouveau dossier du nom que vous souhaitez (par exemple, le nom de votre client ou du site). Et créez ans ce dossier un fichier du même nom avec l'extension .info.yml dont voici un exemple de contenu :
name: Makina Corpus description: Thème de base du site Makina Corpus core: 8.x type: theme base theme: classy
La dernière ligne mérite une explication. Il est en effet possible d'hériter de n'importe quel thème. D'ailleurs, si vous n'héritez de rien, c'est comme si vous héritiez du thème stable de Drupal. Pour les débutants, nous recommandons d'utiliser plutôt le thème du cœur classy, qui est une "amélioration" de stable incluant des classes automatiques en fonction du type de contenu, de la page courante, …
Votre thème est désormais déclaré, vous devriez pouvoir le voir en cliquant sur "Apparence" dans le back-office Drupal. Vous pouvez l'activer dès maintenant, mais attendez un peu.
Créez votre mise en page
Une des choses fondamentales à faire lors de la création d'un thème Drupal est la mise en page générale de votre site, permettant ensuite d'organiser les blocs Drupal. Pour cela, il est nécessaire de faire deux choses :
- Déclarer les régions de votre thème. Cela se fait directement dans le .info.yml de votre thème :
regions: header: 'Top Bar' navigation: 'Navigation' breadcrumb: 'Breadcrumb' content: 'Content' sidebar_first: 'Primary' sidebar_second: 'Secondary' footer: 'Footer' page_top: 'Page top' page_bottom: 'Page bottom'
- Mettre en page ces régions en modifiant le fichier de template page.html.twig (en copiant celui du thème classy). Ici, il suffit d'écrire le contenu de votre <BODY> directement en HTML (la balise BODY elle-même est contenu, ainsi que la HEAD, dans le fichier html.html.twig), et de remplacer les zones où vous voulez positionner des blocs Drupal par un simple
{{ page.navigation }}
(correspondant bien sûr aux régions que vous avez déclaré ci-dessus). Vous trouverez un fichier theme.info.yml et un fichier page.html.twig complet avec les régions mentionnées précédemment dans l'archive accompagnant cet article.
Ajoutez une bibliothèque
Contrairement à Drupal 7, vous ne pouvez pas inclure directement une feuille de style (CSS) dans votre thème, tout fonctionne par des bibliothèques.
Vous devez donc déclarer une bibliothèque (fichier nom_theme.library.yml) contenant cette ou ces feuille(s) de style :
styles:
css:
theme:
css/styles.css: {}
css/print.css: { media: print }
Ensuite, vous devez inclure cette bibliothèque dans votre thème (grâce au fichier .info.yml) :
libraries: - 'makinacorpus/styles'
Vous pouvez dorénavant inclure des règles CSS dans le fichier en question, et votre thème est opérationnel. Il est temps de l'activer, à vous de jouer !
Enrichissez votre thème
Votre thème est fonctionnel. Dorénavant, si vous souhaitez modifier le balisage HTML d'une partie de votre page, inspectez l'élément (ou affichez la source). Vous devriez alors voir en commentaire le fichier utilisé par Drupal (c'est le résultat de notre première étape) :
<!-- THEME DEBUG --> <!-- THEME HOOK: 'html' --> <!-- FILE NAME SUGGESTIONS: * html--front.html.twig * html--.html.twig x html.html.twig --> <!-- BEGIN OUTPUT from 'core/themes/classy/templates/layout/html.html.twig' -->
Copiez le fichier mentionné à la dernière ligne dans votre thème (peu importe où), et modifiez-le. Vous pouvez éventuellement le renommer en suivant les suggestions indiquées dans le commentaire pour cibler plus précisément votre surcharge (le x indique celui utilisé actuellement, vous devez en prendre un au-dessus pour cibler plus précisément).
Voilà, vous surchargez le comportement de Drupal.
En cas de problème
Avant de vous laisser, voici 2 astuces de développement de votre thème Drupal.
D'abord, Drupal met beaucoup de choses en cache, donc si vous faites des modifications et qu'elles ne vous semblent pas prises en compte, commencez par vider les caches, soit dans le back-office (Configuration / Développement / Performance / Effacer tous les caches), soit en utilisant l'outil Drush (DRUpal SHell) via sa commande drush cr (cr comme cache-rebuild).
Ensuite, il peut vous arriver de souhaiter savoir ce que Twig peut vous fournir comme variables à utiliser. Dans ce cas, insérez dans votre template la ligne {{ dump(_context|keys) }}, qui vous affichera l'intégralité de ce que vous pouvez utiliser (utilisez ensuite plus précisément {{ dump(variable) }} pour chaque variable du contexte d'exécution).
Pour aller plus loin
Ici, nous avons simplifié à l'extrême pour vous permettre de démarrer le plus vite possible. Pour aller plus loin, il faudrait bien sûr jouer avec Gulp, Less, Bootstrap, …
Drupal-SEO-IA
Formations associées
Formations Drupal
Formation Drupal Développeur
À distance (FOAD) Du 2 au 4 avril 2025
Voir la formationActualités en lien
Migration d'un site Drupal 7 en Drupal 11
Trucs, astuces et "bouts" de code pour migrer votre site web de Drupal 7 à Drupal 11. Compte-rendu d'une conférence donnée au Drupalcamp Rennes 2024.
Du nouveau dans notre gamme de formations Drupal
Maîtrisez le CMS Drupal de bout en bout avec notre panel complet de formations couvrant la migration (notre petite dernière), l’administration, le développement et l’intégration Drupal. Pour devenir expert, plongez dans l’univers Drupal !
Makina Corpus, partenaire du DrupalCamp 2024
Nous sommes fiers d’annoncer que Makina Corpus est le sponsor du DrupalCamp à Rennes. Notre expert vous y propose une conférence « migrer de Drupal 7 à Drupal 10 ».