Une introduction à la réalisation de thèmes

Drupal est reconnu pour sa puissance et sa flexibilité, il est ainsi parfois difficile de comprendre comment interagissent les différents éléments qui compose l’application. Même s’il existe de nombreuses façons de réaliser un thème toutes ne sont pas forcément recommandées. Avoir connaissance des bonnes pratiques permet de minimiser les erreurs et de faciliter la maintenance. Même, si vous choisissez de ne pas respecter les règles et de mettre en œuvre votre propre méthode vous aurez de meilleurs chances de succès en en ayant connaissance.

Cela ne veut pas dire que vous devez comprendre Drupal dans les moindres détails pour être capable de créer votre propre thème. En fonctions de la complexité du résultat recherché il vous faudra plus ou moins maîtriser les spécificités du système de thème de Drupal.

Le but de ce manuel est d'introduire les notions qui vous permettront de mieux appréhender le fonctionnement de la couche graphique d’une application Drupal. Certains paragraphes nécessiteront des compétences techniques tandis que d'autres seront plus basiques. La complexité des sujets présentés dans les pages suivantes évoluera progressivement : depuis une présentation des concepts que tous les créateurs de thèmes devront maîtriser jusqu’à des sujets plus spécifiques et parfois plus techniques.

Afin de tirer parti de ce manuel vous devrez maîtriser les concepts suivants :

• xHMTL et CSS
• JavaScript et jQuery (si votre thème nécessite l’utilisation de script)
• La terminologie utilisée dans Drupal

Une connaissance de PHP sera nécessaire pour certains chapitres mais il est possible de s’en sortir sans expertise aucune avec des thèmes purement CSS.

Selon la complexité du cahier des charges de votre thème, la création d'un thème peut être simple ou terriblement complexe. Drupal est très ouvert, il est donc nécessaire d’être prudent sur ce que vous allez tenter de réaliser. Vous devez d’abord penser au cahier des charges du site. Il est beaucoup plus facile de de réaliser un thème en ayant des objectifs très précis et spécifiques que de réaliser un thème flexible et généraliste.

Enfin si vous êtes bloqués, lisez la page de dépannage, demandez dans le forum sur les thèmes ou sur IRC @ #drupal-themes. Voyez comment utilisez l’IRC ici.

Les thèmes : vue d'ensemble

Une pratique courante dans le monde du développement web est de séparer le code et le graphisme d’un site. Il existe de nombreuses bonnes raisons pour agir de la sorte, la plus évidente étant que l’expertise nécessaire pour programmer l’application est très différente de celle nécessaire pour créer une interface belle et efficace.
En tant que créateur de Thème, vous pouvez contrôler uniquement l'affichage et la présentation. Seul le cœur de l’application et ses modules peuvent travailler avec les données d’entrée. Par exemple, un module peut mettre en place un formulaire qui aura un aspect standard et qui va traiter les données rentrées par l’utilisateur avant de les sauver dans la base de donnée. Le rôle d’un thème sera « seulement » d'intercepter l'affichage du formulaire afin de le modifier pour l’adapter à la charte graphique du site.

Ce mécanisme d’abstraction est accomplie par la fonction « theme » de Drupal. Elle dirige vers le sous-système de thème. Elle permet aux moteurs de thèmes de fournir une couche optionnelle intermédiaire pour des langages de tags comme PHPTAL ou Smarty. Elle permet aussi aux thèmes de contrôler tout le marquage de présentation. Les moteurs de thèmes sont optionnels, tout comme les langages de tags. PHPTemplate est le moteur par défaut. Comme son nom le suggère, il utilise PHP comme langage pour afficher les variables qu’il associe au marquage xHTML.

Depuis Drupal 6, les contraintes pour la réalisation d’un moteur de thème ont été considérablement réduites.

Les moteurs de thèmes peuvent modifier une sortie venant de l’application ou de l’un de ses modules tandis que les thèmes peuvent intercepter n’importe quelle sortie. Notez que le moteur PHPTemplate ne peux pas intercepter de sorties au contraire des autres moteurs. Il y a cependant un cas spécial ou les modules peuvent influencer l’affichage d’une sortie ou intercepter cette sortie mais il s’agit de cas vraiment très spécifiques et ils ne devraient pas impacter l’affichage dans la grande majorité des situations. Par exemple, le module devel le fait dans le but d'aider et assister les développeurs de thème. Plus de détails à venir dans un chapitre séparé.

Dans le cas où votre thème sera mis en forme uniquement par l’intermédiaire de feuille de style vous pouvez ignorer ce qui vient d'être dit. Mais quand le marquage à besoin d’être modifié il est alors important de savoir comment déterminer quelle est la source de la sortie afin de pouvoir la modifier.

• Notez que le cœur de Drupal et que de nombreux modules utilisent toujours des « fonctions de thème » et des « fichiers de gabarit » pour afficher leur marquage de présentation. Ne modifiez jamais des fichiers en dehors de votre répertoire de thème, cela vous posera des problèmes dès lors qu’il s'agira de mettre à jour votre application.
  La puissance de l’open source est d’avoir une communauté qui gère les bugs et qui ajoute des nouvelles fonctions. Une fois que vous commencez à modifier le code source, vous créez un système fermé et vous perdez tous les bénéfices associés à la communauté. Drupal fourni toutes les fonctionnalités qui permettent d’intercepter et modifier l’affichage. Si vous avez besoin de modifier un fichier en dehors de ceux du thème, vous êtes soit entrain de faire une erreur soit vous avez découvert un bug. Dans le dernier cas, merci de nous fournir un rapport de bug. Ou, encore mieux, donnez nous un patch qui permet de réparer ce problème.
• Pour ceux qui sont familier avec les précédentes versions du moteur PHPTemplate, presques toutes les fonctionalités sont mieux intégrées au cœur de l’application Drupal. La fonction de PHPTemplate est maintenant de détecter les fonctions de thème et les gabarits pour les besoins du thème. Il s'éloigne de se qu'on attend classiquement d'un moteur et se rapproche plus d’un assistant à la réalisation de thème. PHPTemplate a été développé initialement par Adrian Rossouw pour la version 4.7 de Drupal. Les changements pour Drupal 6 ont été l’oeuvre de Earl Miles. Le forum de discussion donne plus de détail sur les raisons qui sont sous-jacentes à la création du moteur et la liste suivante nous éclaire sur celles qui ont présidés à la nouvelle orientation du moteur de Drupal 6.

Anatomie d’un thème Drupal

Si vous regardez le contenu du répertoire d’un thème phptemplate vous y trouverez en général les fichiers suivants :

• Un fichier .info obligatoire pour y stocker des paramètres de configuration,
• Des gabarits en .tpl.php pour contrôler ce qui est affiché,
• Des feuilles de styles pour gérer l’apparence visuelle de ce qui est affiché,
• Un fichier template.php qui contiendra le code de fonctions spécifiques au thème afin, si nécessaire, de manipuler et transformer les données,
• Divers autres fichiers : logo, miniature…

.info (requis)

Ce fichier est obligatoire pour que votre thème soit détecté par Drupal. Son rôle est de configurer certaines éléments de votre thème. Vous pouvez y définir :

• Les méta données,
• L’emplacement des feuilles de styles qui vont contrôler l’affichage,
• L’emplacement des scripts JavaScripts,
• Le nom des différentes régions de vos blocs de contenus,
• Le nom du thème « parent » dans le cas d’un sous-thème (voir plus loin)
• Et plus encore, mais tout le reste est optionnel.

Le nom interne du thème est aussi déduit de ce fichier. Par example, si il est nommé « drop.info », alors Drupal considèrera que le thème s’appelle « drop ».

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.

Les fichier info pour les thèmes sont nouveaux dans Drupal 6. Dans la version 5, les fichiers .info était seulement utilisés pour les modules.

Fichiers de gabarits (template) (.tpl.php)

Chaque élément de contenu (nœud, block, page, etc.) est contrôlé par son propre gabarit. Ce sont ces gabarits qui vont déterminer quels champs de chaque contenu vont être affichés. Pour accomplir leur rôle, ces gabarits sont principalement constitués de textes (pour le contenu statique), de variables PHP (pour le contenu dynamique) et de balises xHTML (pour la structuration du contenu).

Il y a des situations où ils peuvent afficher d'autres type de données -xmls rss par exemple. Chaque fichier .tpl.php manipule l’affichage de données spécifiques au thème et dans certaines situation il peut manipuler plusieurs fichiers .tpl.php au travers du mécanisme de « suggestions ».

Faites attention à ne pas compliquer inutilement la logique et le contenu de ces fichier. Dans la plupart des cas, ils ne devraient contenir que des balises xHTML et des variables PHP. Vous pouvez utiliser le fichier template.php pour y intégrer le code plus complexe (voir ci-dessous).

Ces fichiers sont optionnels et s’il n’en existe aucun dans votre thème, l’affichage des contenus sera celui par défault. En effet, de nombreux gabarits standard existent dans les répertoires de l’application et de ses modules. Ce sont eux qui seront utilisé par défaut. En les copiant dans votre répertoire de thème vous vous assurez que Drupal prendra votre version en compte.

Note : Le « registre de thème » stocke les données de thème en cache Il doit être actualisé lorsque vous ajoutez ou modifiez des fichiers de gabarit ou des fonctions de thème.

Les feuilles de styles (.css)

Les feuilles de style CSS contrôlent l’apparence visuelle des contenus affichés par les gabarits. A l’image des fichiers de gabarit, elles sont optionnelles car les feuilles de styles standards de Drupal et de ses modules sont actives par défaut. Par contre chaque déclaration placée dans une feuille de style de votre thème interceptera la déclaration standard et sera donc prise en compte.

Le fichier template.php

Les fonctions spécifiques à votre thème, les fonctions de thème que vous interceptez et tout autres spécificités doivent être placés ici. Ce fichier va gérer toute la logique conditionnelle et manipuler les données de sortie. Cela n’est pas obligatoire, mais afin d’améliorer la lisibilité des fichiers .tpl.php vous pouvez inclure dans le fichier template.php des pré-processeurs qui vont générer des variables avant quelles soient inclues dans les balises des fichiers .tpl.php.

Le fichier doit commencer par une balise d’ouverture PHP « < ? php », par contre il est recommandé de ne pas inclure la balise de fermeture.

Les sous-thèmes

Pour faire court, on peut dire que les sous-thèmes se comportent comme n’importe quel autre thème. La seule différence est qu’ils héritent des ressources de leurs thèmes « parents ». Pour créer un sous-thème, il faut indiquer quel est son thème de base dans le fichier .info. Le sous-thème héritera alors de toutes les ressources du thème parent. Il peut y avoir de multiple niveau d’héritage car un sous-thème peut être le thème de base d’un autre sous-thème. En fait il n’y aucune limite matérielle à cela.

Drupal 5 et les versions précédentes, demandaient à ce que les sous-thèmes soient placés dans des sous-répertoires du thème parent. Ce n’est plus le cas avec drupal 6.

Autres

• Le logo et la capture d’écran ne sont pas nécessaires pour faire fonctionner le thème. Ils sont cependant recommandés, surtout si vous souhaitez partager votre thème avec la communauté. La miniature sera affiché dans l'interface d'administration des thèmes et dans celle de gestion des paramètres utilisateurs pour sélectionner un thème. Pour plus d’information voyez les conseils relatifs aux captures d’écran.
• Afin de fournir plus d’information de paramétrage (logo, recherche, mission, etc.) un fichier “ theme-settings.php" peut-être utilisé. Ceci est une fonctionalité avancée. Plus d’information dans la section Paramétrage Avancé du manuel.
• Pour le support du module « color », un répertoire « color » avec un fichier « color.inc » et quelques autres fichiers est nécessaire.

Si vous voulez baser votre travail sur un thème existant, utilisez la méthode des sous-thèmes ou faisez une copie et renommez le thème. Il fortement déconseillé de modifier directement Garland ou Minelli parce qu’ils sont utilisé pour les processus d’installation et de mise à jour.
Tous les thèmes doivent être installés dans le répertoire « sites/all/themes » afin de les séparer des fichiers standards. Lisez le chapitre sur les installation multi-site pour voir toutes les possibilités d’emplacement.

Et la suite du manuel ?

Faut-il poursuivre la traduction ? A vous de me le dire...