Accueil / Blog / Métier / 2016 / Démarrer un thème Drupal 8 en 10 minutes

Démarrer un thème Drupal 8 en 10 minutes

Par Simon Georges — publié 09/08/2016
Un thème Drupal 8 à télécharger pour être opérationnel immédiatement.
Démarrer un thème Drupal 8 en 10 minutes

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, ...

Bonus : un thème tout prêt à télécharger !

Nous avons créé pour vous une archive des fichiers mentionnés dans cet article, il vous suffit de le télécharger pour démarrer rapidement et efficacement votre thème en Drupal. Bonne pratique !

ABONNEZ-VOUS À LA NEWSLETTER !
Voir aussi
Résolution de problèmes Drupal : construction de site (2/4) Résolution de problèmes Drupal : construction de site (2/4) 09/08/2013

Dans cette série d'articles, nous tentons de vous aider à vous sortir seuls de situations ...

Gérer sa newsletter avec Drupal Gérer sa newsletter avec Drupal 10/02/2014

Drupal offre plusieurs plusieurs possibilités pour mettre en place une newsletter.

Résolution de problèmes Drupal : Installation (1/4) Résolution de problèmes Drupal : Installation (1/4) 02/08/2013

Dans cette série d'articles, nous tentons de vous aider à vous sortir seuls de situations ...

Drupal & SEO : améliorer le référencement naturel de votre site Drupal & SEO : améliorer le référencement naturel de votre site 20/06/2016

Une vision subjective et argumentée des modules à utiliser pour améliorer le référencement ...

Mon Top 30 des modules Drupal 8 Mon Top 30 des modules Drupal 8 16/02/2019

Transcription d'une conférence donnée au Drupalcamp Paris 2019