Guide Drupal 6 - Épisode 4 : Créer un thème original pour Drupal

Normalement, si vous vous débrouillez bien, vous allez pouvoir vous en sortir uniquement avec du CSS. Dans certaines situations, vous pourrez avoir besoin de manipuler du PHP -- dont la maîtrise un est réel plus avec Drupal. J'adopterai volontairement dans cet article une approche pragmatique, centrée sur le "comment faire" avec un souci d'économie de programmation assumé, le but étant de ne pas toucher une ligne de PHP et de tout faire avec des modules et des CSS. C'est en effet ainsi que je conçois la force de Drupal.

Déterminer l'emplacement des fichiers de thème

Les thèmes standard livrés avec Drupal, notamment le thème système fondamental Garland (qu'il faut toujours réactiver pendant une mise à jour et qu'il est possible de définir comme thème d'administration), se trouvent dans /themes, chacun dans son dossier propre. Dans ce même répertoire, on trouve aussi un sous-répertoire engines/, qui contient les moteurs de thèmes (le plus courant est PHPTemplate). Mais attention, pour créer un thème original personnel, il ne pas utiliser ce chemin, qui doit rester réservé aux thèmes par défaut livrés avec le système. Tous les fichiers de thèmes que vous allez créer doivent être placés dans le répertoire /sites/themes, à l'intérieur de votre propre dossier de thème. Il y a toutefois 3 emplacements possibles :

  • /sites/all/themes/votre-theme/ pour que le thème soit disponible pour tous les sites sur une installation multi-sites
  • /sites/nom-du-domaine.fr/themes/votre-theme/ pour que le thème soit disponible uniquement pour tel site donné d'une installation multi-sites
  • /sites/default/themes/votre-theme/ pour que le thème soit disponible uniquement pour le site par défaut dans le cas d'une installation uni-site.

La première chose à faire est donc de choisir l'un des 3 emplacements ci-dessus en fonction de vos besoins et de créer ensuite votre dossier de thème en créant d'abord un dossier /themes puis votre dossier de thème proprement dit (ici, votre-theme). Attention : il ne faut jamais modifier un fichier de thème situé ailleurs que dans /sites. En effet, lors d'une mise à jour de Drupal, les thèmes système par défaut du répertoire /themes peuvent être mis à niveau ; en outre, pour la sauvegarde de votre site, c'est plus simple, tout est dans /sites (et dans la base de données !).

Créer les fichiers de thèmes de base

Pour être fonctionnel et pratique d'utilisation, votre thème doit contenir certains fichiers fondamentaux :

Un fichier .info

Fichier obligatoire pour être détecté par Drupal (depuis 6.x), qui regroupe les métadonnées du thème comme le nom du thème, sa description, sa version, etc. Il s'agit d'un simple fichier texte dont la syntaxe est très simple et constituée sur le modèle du fichier par défaut situé dans /themes/garland/garland.info. Le nom de ce fichier doit être celui de votre thème, imaginons ici qu'il s'agit de lektum.info. Voici un modèle simple et efficace de fichier nommé lektum.info, basé sur le starting theme Basic (voir plus bas), que vous pouvez adapter et modifier à votre guise :

name = Atelier LEKTUM
description = Thème graphique original pour le site web de l'Atelier LEKTUM, créé et réalisé par l'Atelier LEKTUM
screenshot = lektum.png
engine = phptemplate
version = 6.x-1.0
core = 6.x
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content_top] = Content Top
regions[content_bottom] = Content Bottom
regions[header] = Header
regions[footer_block] = Footer
features[] = logo
features[] = name
features[] = slogan
features[] = mission
features[] = node_user_picture
features[] = comment_user_picture
features[] = search
features[] = favicon
features[] = primary_links
features[] = secondary_links
stylesheets[all][] = style.css
stylesheets[all][] = css/tabs.css
stylesheets[all][] = css/layout.css
stylesheets[all][] = css/main.css
stylesheets[print][] = css/print.css
scripts[] = script.js

Un mot sur ces métadonnées :

  • name = nom du thème lisible par un humain (affiché dans liste des thèmes de l'administration)
  • description = description du thème, pouvant comporter accents et balises html
  • version = version du thème (à votre guise)
  • core = version de Drupal compatible, indiquer par exemple la branche (6.x)
  • engine = le moteur de thème associé (dans le cas décrit dans ce tuto, c'est toujours phptemplate)
  • regions = blocs disponibles (basés ici sur le starting theme Basic, vois plus bas ; entièrement personnalisable)
  • features = active ou désactive des fonctionnalités disponibles avec le thème (par exemple le slogan) : si on met rien, toutes les cases à cocher par défaut apparaissent, sinon on spécifie celles qu'on veut
  • stylesheets = les fichiers CSS utilisés (voir /themes/garland/garland.info pour repérer comment différencier feuilles de style pour l'impression, pour l'écran...)
  • scripts = indique les scripts à inclure (ici on utilise la formule par défaut)

Le nom interne du thème est déduit de ce fichier. Par exemple, si il est nommé lektum.info, alors Drupal considèrera que le thème s’appelle « lektum ». Les version 5 et précédentes de Drupal utilisaient le nom du répertoire qui contenait les fichiers du thème pour en déduire le nom interne du thème. À noter : de manière assez inhabituelle mais propre à l'univers Drupal, les lignes de commentaires sont précédées ici d'un point-virgule. Par ailleurs, il existe un certain nombre de valeurs par défaut qui n'ont pas besoin d'être écrites dans ce fichier, du moins si on les respecte à la lettre : elles sont listées ici http://drupal.org/node/171206. Pour ajouter des feuilles de styles personnalisées facilement sans toucher le HTML, voir aussi ici : http://drupal.org/node/171209.

Les fichiers .tpl.php 

Ce sont les fameux fichiers PHPTemplate, utilisant à la fois HTML et PHP et permettant de contrôler ce qui est affiché par Drupal. Chaque fichier .tpl.php s'occupe de traiter l'affichage d'un élément de contenu spécifique (noeud, block, page...) en déterminant quels champs de chaque contenu vont être affichés. Ces fichiers sont optionnels et, lorsqu'un thème ne dispose pas de ses propres fichiers PHPTemplate, les versions par défaut de ces fichiers sont utilisées -- elles se trouvent à la racine de Drupal dans /modules (par exemple, le fichier comment.tpl.php par défaut se trouve dans /modules/comment et le fichier page.tpl.php par défaut se trouve dans /modules/system). Mais, là aussi, il ne faut jamais modifier un de ces fichiers par défaut : il faut les copier dans votre répertoire de thème dans /sites/all/themes/mon-theme) pour les modifier ensuite, ou bien pour créer vos propres fichiers .tpl.php (attention, il faut vider le cache lorsque ces fichiers sont modifiés). Notez bien que c'est le fichier page.tpl.php qui contient la structure HTML globale de chaque pagedu site.

Le fichier template.php

Il sert à contourner les fonctions non standard d'un thème et contient le code PHP de fonctions spécifiques au thème. Utile seulement pour ceux qui manipulent PHP. Ce fichier va gérer toute la logique conditionnelle et manipuler les données de sortie. Le fichier doit commencer par une balise d’ouverture PHP <code>< ? php</code>, par contre il est recommandé de ne pas inclure la balise de fermeture.

Des fichiers .css

C'est le coeur de ce qui nous intéresse ici ; ce sont eux, évidemment, qui contrôlent l'apparence graphique des éléments présents dans les fichiers .tpl.php et le code généré par Drupal sur une page. Ces fichiers doivent être ceux qui sont déclarés dans le fichier .info et écrasent (overriding) les feuilles de style CSS par défaut de Drupal.

Des fichiers images

Ce sont vos fichiers images résultant de l'intégration web de votre maquette graphique ; ils doivent de préférence être rangés dans un sous-dossier /sites/default/themes/votre-theme/images/

Un fichier image miniature

Il s'agit d'une une image miniature de votre thème sous la forme d'un fichier ayant obligatoirement les dimensions de 150x90 px. Par défaut, ce fichier doit s'appeler screenshot.png sauf si vous lui déclarez un autre nom, comme c'est le cas ici, dans le fichier .info. Cette miniature sera affichée dans l'interface d'administration des thèmes et dans celle de gestion des paramètres utilisateurs pour sélectionner un thème. Vous pouvez aussi créer un fichier logo.png optionnel qui sera reconnu et configurable depuis l'interface d'administration. NOTA. Drupal 7 utilise une nouvelle taille d'image pour la copie d'écran du thème : screenshot.png 294 pixels par 219 pixels.

Un fichier favicon.ico

Il permet d'afficher dans la barre d'adresse de votre navigateur une petite icône emblématique de votre site.

Dans certains projets, vous pouvez aussi créer un ou plusieurs répertoires de sous-thèmes, qui contiennent de la même manière un fichier .info et tous les autres types de fichiers possibles (.tpl.php, css, etc.). Un sous-thème partage le code de son parent mais en modifie certains éléments pour produire une nouvelle apparence et de nouvelles fonctionnalités. Créer un nouveau répertoire au sein du thème parent permet de créer un sous-thème, même s'il n'est pas nécessaire que le sous-thème soit rangé dans un sous-répertoire : pour qu'un sous-thème soit reconnu comme tel, il suffit en fait que son fichier .info mentionne le thème parent (base theme = garland). Voir par exempler minelli.info dans /themes/garland/. N'importe quel thème peut comporter des sous-thèmes, et il peut y avoir de multiples niveaux d’héritage, sans limite à cela. Pour en savoir plus, consulter le Theming Guide de Drupal. En en option facultative, on peut aussi inclure un fichier theme-settings.php afin de fournir plus d’informations de paramétrage (logo, recherche, mission, etc.). De même, on peut aussi inclure, comme dans /themes/garland/, un répertoire color/ contenant au moins un fichier color.inc et quelques autres fichiers pour le support du module « color » qui permet de modifier les couleurs d'un thème depuis l'interface d'administration des thèmes, via une roue et des valeurs hexadécimales. Pour en savoir plus, consulter le Theming Guide de Drupal. À noter : un thème n'utilise pas forcément de fichiers .tpl.php. Par exemple, le thème standard Chameleon livré avec Drupal contient uniquement des images et des CSS, et aucun fichier .tpl.php. À la place du système de template, il emploie le fichier chameleon.theme qui met en oeuvre ses propres fonctions de thème (en PHP) pour fixer l'apparence. Évidemment, il est bien plus simple de travailler avec un thème utilisant un moteur de thème, sinon il faut tout coder soit-même en PHP pour personnaliser l'affichage.

Configurer les thèmes dans l'interface d'administration

C'est l'endroit où vous allez activer votre thème et ainsi indiquer à Drupal d'afficher les pages selon l'apparence que vous avez créée. Si vous activez plusieurs thèmes, les utilisateurs identifiés pourront (s'ils ont les droits requis) choisir leur thème de préférence. Attention, tous les thèmes n'implémentent pas toutes les fonctionnalités souhaitées ou souhaitables. Mais surtout, vous pouvez et vous devez "configurer" les thèmes en activant ou désactivant l'affichage de certaines options, soit de manière globale pour tout le site (Construction du site > Thèmes > Paramètres globaux) soit de manière particulière propre à votre thème (Construction du site > Thèmes > Nom de votre thème. C'est là par exemple qu'on trouve certaines options importantes comme l'affichage de l'auteur et la date des contributions selon les types de contenus, l'affichage du portrait des utilisateurs dans les commentaires, etc.

Utiliser un "starting" thème : Basic

Comme l'explique très bien Alexandre Eisenchteter, dont j'espère qu'il ne m'en voudra pas de reproduire ci-dessous certains de ses propos, il y a trois méthodes pour concevoir un thème original :

  • adapter un thème Drupal existant
  • transformer un gabarit XHTML/CSS en un thème pour Drupal
  • partir de zéro et bâtir de A à Z votre propre XHTML / CSS

J'écarte d'emblée la première méthode : outre qu'elle est fastidieuse, elle ne permet pas de créer un thème réellement original, ce qui est l'objet même de cet article (pour ceux qui veulent quand même l'utiliser, il suffit d'utiliser la méthode des sous-thèmes ou de faire une copie, puis de renommer le thème ; attention ne jamais modifier directement Garland ou Minelli parce qu’ils sont utilisés pour les processus d’installation et de mise à jour). J'écarte aussi la troisième méthode car j'ai déjà pas mal donné dans la conception XHTML/CSS et, si j'utilise Drupal, c'est pour me simplifier la vie tout donnant à mes projets plus d'efficacité. Il reste donc la deuxième méthode. Celle-ci consiste à utiliser un "starting thème", c'est-à-dire un thème existant mais ultra-dépouillé, dont la mise en page est déjà parfaitement fonctionnelle, compatible Drupal 6, sémantiquement correcte, valide selon les standards W3C et testée sur tous les navigateurs (ce qui n'empêche pas de vérifier lesquels). Comme vous le devinez, un tel starting thème permet de gagner un temps fou : il permet de consacrer ses efforts uniquement à la mise en forme graphique (styles CSS) sans se préoccuper des problématiques liées au layout (mise en page, disposition). Le plus connu des starting thèmes, c'est Zen (en hommage à CSS Zen Garden), bien meilleur que Garland ou BlueMarine pour démarrer la réalisation de son propre thème. Il dispose par ailleurs d'une importante documentation en ligne. Il permet des mises en page très faciles sur 1, 2  ou 3 colonnes, en largeur fixe ou fluide. Pour améliorer le référencement, les contenus sont disposés dans le code HTML avant les menus et la navigation. Le principe : créer un sous-thème, rajouter seulement les fichiers indispensables et voilà, le reste est repris du thème principal Zen. L'avantage c'est que vous pouvez mettre à jour Zen en écrasant les anciens fichiers sans compromettre vos modifications. L'inconvénient, c'est qu'on se retrouve avec 2 thèmes, Zen et votre sous-thème, et avec des fonctions complexes pour gérer les sous-thèmes . Mais un autre "starting thème" a fait son apparition et semble encore meilleur, à savoir : Basic, une version allégée de Zen qui comprend "just the essential". Comme Zen, il offre une structure HTML propre, des classes CSS pour des possibilités de theming infinies, et également une disposition HTML favorable au référencement, pour une largeur de page fixe ou fluide. Après avoir pris le temps de comprendre un peu comment il est fait, tout ira plus vite. À utiliser systématiquement pour toute mise en page en 1, 2 ou 3 colonnes, qui est devenue le Saint Graal du Webdesign (colonne fluide au centre pour le contenu principal, colonnes de largeur fixes pour les sidebars, apparition de la colonne centrale au début du code source de la page  HTML, un code HTML/CSS simple et clair...). Le principe de Basic est simple : il propose par défaut les "régions" suivantes : Left sidebar, Right sidebar, Content Top, Content Bottom, Header, Footer. C'est modeste mais suffisant pour de nombreux projets, avec un peu d'inventivité CSS. Sinon, il y a d'autres thèmes qui proposent bien plus de régions. Vous pouvez aussi créer les vôtres, si vous connaissez PHP. Il ne vous reste donc qu'à installer Basic et modifier ses fichiers : le fichier.info et tous les fichiers de thème décrits plus haut. Le plus gros travail consistera évidemment à personnaliser les fichiers CSS pour pouvoir intégrer votre maquette graphique originale. Dans la version 1 de Basic, il suffit de modifier et personnaliser les fichiers css/layout.css et surtout css/main.css, dans lequel vous allez pouvoir placer vos propres styles CSS.Pour mieux vous repérer, voici une petite explication des différents fichiers CSS déjà existants dans Basic et de leur rôle. Ils sont présentés ici dans l'ordre où ils sont chargés :

  • style.css : styles qui font des réglages pratiques et globaux transversaux (initiatialisation globale des padding et margin, styles utiles pour faire des "clear" sur les float, etc.). À noter : contient un style (#skip-nav) pour un lien d'évitement (Aller au contenu) qui peut être utilisé sur certains sites, sinon il est désactivé par défaut (display:none).
  • tabs.css : styles des liens de mise à jour pour les admins et contributeurs (voir, modifier, structure, révisions, etc.) : à faire à la fin pour les adapter au design de votre site.
  • layout.css : positionnement général selon la méthode du Holy Grail : c'est ici que l'on définit la question sensible des largeurs (fixes ou fluides), dimensions et positionnements des différentes parties de la page (page, header, footer, sidebar, etc.) ; enfin, c'est dans ce fichier que se trouvent les couleurs par défaut proposées par Basic afin de vous aider à comprendre le thème.
  • main.css : ici, on trouve un certain nombre de styles généraux par défaut proposés par Basic ; c'est là que vous allez hacker tout ce que vous voulez et ajouter vos propres directives et règles styles ; main.css, c'est votre fichier CSS à vous !
  • print.css : utilisé évidemment pour la version imprimable

À noter : Attention, la version 2 a un peu changé. Ce tuto est basé sur la version 1. Prenez le temps de vérifier la composition des fichiers avant d'appliquer tout ce qui est dit ici à la lettre. Pour télécharger Basic, c'est ici : http://drupal.org/project/basic.

Générer et modifier le rendu HTML (overriding themeable output)

Le plus simple est de se contenter de modifier uniquement le fichier page.tpl.php. Cela me permet de réorganiser le code HTML global de chaque page comme on veut, en particulier pour le <header>. Le seul souci, c'est que chaque module de Drupal, natif ou contributif, va générer du HTML selon sa propre logique. Pour contrôler complètement le code HTML, il vous faudra donc aller plus loin que ce tuto dans la compréhension du Theming afin d'apporter, via du PHP, les modifications de votre choix. Pour en savoir plus, consulter le Theming Guide de Drupal.

Utiliser des "modules de theming"

Il existe des modules très intéressants qui vont faire pour vous la moitié du travail, par exemple pour personnaliser la page d'accueil de manière très avancée ou pour personnaliser l'apparence du site par sections. Plus de précisions dans le futur article de cette série consacré aux meilleurs modules Drupal. :)

Problème fréquent : personnaliser l'apparence du site par sections

Pour personnaliser l'apparence du site par sections, le thème Basic génère pour chaque page sa propre class CSS pour l'élément <body>. Mais il existe aussi un moyen intéressant d'y parvenir par le nommage, en utilisant des fichiers .tpl.php personnalisés selon l'URL (je reprends cela d'un commentaire sur ineation.com) : sur une URL de type "www.monsite.fr/produit/12/afficher", phpEngine va chercher dans l'ordre les templates suivants :

  1. page-produit-12-afficher.tpl.php
  2. page-produit-afficher.tpl.php
  3. page-produit.tpl.php
  4. page.tpl.php

C'est le même principe que pour le node type, pour un node de type "story", il cherchera :

  1. node-story.tpl.php
  2. node.tpl.php

Voir la liste exhaustive est ici : http://drupal.org/node/190815

Commentaires

Bonjour,
Je débute tout juste dans la prise en main du CMS Drupal.
Merci pour cet article (malgré sa date de publication) qui me permet d'avoir une bien meilleure vue d'ensemble du CMS.
Je file naviguer sur le reste de votre site ;)

Symptoms Of Ear Infections In Adults

Portrait de Stéphane Vial
Stéphane Vial