DRUPAL : Création de thème

Pour démarrer dans la création de thème sur Drupal, il est toujours plus simple de commencer par un thème existant et de le retoucher ensuite. Le thème ZEN reprend l’ensemble des fichiers nécessaires pour créer un thème et les différents fichiers sont commentés.

 

Pour le télécharger : http://drupal.org/project/zen

Le répertoire des thèmes

L’ensemble des thèmes que l’on ajoute à Drupal doit se trouver dans le répertoire suivant : site/all/themes. Ensuite, le nom du dossier correspond au nom du thème.

 

Figure 1 : Répertoire des thèmes

 

Une fois le thème ajouté dans ce répertoire, il faut simplement l’activer dans la partie administration (menu apparence) pour qu’il s’affiche.

Figure 2 : Activation du thème ZEN

 

Création du fichier .info

Nous allons tout d’abord nous intéresser au fichier zen.info qui reprend les éléments essentiels du thème.

 

name        = Zen
description = Zen sub-themes are the ultimate starting themes for Drupal 7. Read the online docs or the included README-FIRST.txt on how to create a theme with Zen.
screenshot  = zen-internals/screenshot.png

core        = 7.x
engine      = phptemplate

regions[help]           = Help
regions[sidebar_first]  = First sidebar
regions[sidebar_second] = Second sidebar
regions[navigation]     = Navigation bar
regions[highlighted]    = Highlighted
regions[content]        = Content

regions[header]         = Header
regions[footer]         = Footer
regions[bottom]         = Page bottom
regions[page_top]       = Page top
regions[page_bottom]    = Page bottom

settings[zen_breadcrumb]           = yes
settings[zen_breadcrumb_separator] = ' › '
settings[zen_breadcrumb_home]      = 1
settings[zen_breadcrumb_trailing]  = 1
settings[zen_breadcrumb_title]     = 0
settings[zen_layout]               = zen-columns-liquid
settings[zen_jump_link_target]     = main-menu
settings[zen_rebuild_registry]     = 0
settings[zen_wireframes]           = 0

; Information added by drupal.org packaging script on 2011-04-25
version = "7.x-3.1"
core = "7.x"
project = "zen"
datestamp = "1303759317"

Au travers de ce fichier, nous allons pouvoir définir les paramètres principaux du thème. Nous allons aussi définir les positions qui seront présentes dans le thème. Dans chaque position, il sera possible de placer des blocs. Les autres informations présentes servent à définir les paramètres de base du thème.

 

Dans ce fichier, il est aussi possible d’ajouter des fichiers CSS ainsi que des fichiers Javascript. Il faut utiliser la syntaxe suivante :

 

stylesheets[all][] = css/style.css
scripts[] = my_script.js

Création de la page principale

La page principale qui dirige le thème est la suivante : page.tpl.php.

Figure 3 : Le fichier page.tpl.php

 

Lorsque l’on ouvre ce fichier, on comprend tout de suite l’intérêt de travailler avec le thème ZEN car les différentes variables du fichier sont toutes commentées. On retrouve ainsi les variables correspondantes aux positions définies dans le zen.info mais aussi les variables pour récupérer le menu, le titre du site ...

 

Je vous conseille de vous familiariser avec ces variables car elles vous feront gagner beaucoup de temps dans le développement de votre thème. Nous avons donc vu les aspects principaux qui caractérisent un thème. Cependant, un thème va aussi nous permettre d’influer sur la présentation des modules.

 

Création de template de node

Nous allons maintenant nous intéresser à l’ensemble des fichiers se trouvant dans le répertoire template. Nous allons prendre comme exemple le fichier node.tpl.php.

Figure 4 : Le fichier node.tpl.php

 

Ce fichier générique permet la mise en forme des différents nodes du site. Dans le fichier, les différentes variable sont aussi commentées. Il est donc très facile de retrouver n’importe quel champ d’un node. En effet, la variable objet $node contient l’ensemble des valeurs du node.

 

Cependant, il est possible d’aller encore plus loin dans les thèmes de node. En effet, il va être possible de créer un thème pour un type de node. Pour cela, il suffit de nommer son fichier de la manière suivante : node-nomdutypedenode.tpl.php.

 

Exemple : node-stories.tpl.php permet de créer un thème pour le contenu de type stories.

 

Création du fichier template.php

Ce fichier permet de créer des actions spécifiques avant le chargement de certains éléments. Dans le jargon Drupal, nous appelons cela des Hooks.

 

Nous allons donc retrouver les fonctions suivantes :

Figure 5 : Liste des fonctions présentes dans le fichier template.php

 

Le thème ZEN reprend les principales fonctions que l’on utilise couramment dans ce fichier. Il est alors très simple de rentrer une action spécifique si besoin.

Pour aller plus loin

Nous avons pu parcourir les éléments essentiels d’un thème sur Drupal au travers du thème ZEN. De part sa communauté mondiale, il existe évidemment de nombreux autres thèmes qui sont directement accessibles via le site de Drupal : http://drupal.org/project/Themes.

 

Il existe aussi une documentation complète (en anglais) qui reprend les aspects que nous avons vu en allant un peu plus loin : http://drupal.org/documentation/theme.

 

Conclusion

 

Au travers de cet article, nous avons vu qu’il est très facile de comprendre le fonctionnement d’un thème sur Drupal et de le customiser pour obtenir ce que nous souhaitons.

 

Le thème ZEN simplifie grandement la tâche car l’ensemble du code est commenté. Pour créer un thème, il est donc plus facile de partir de celui-ci plutôt que de zéro.

 

La communauté de Drupal a mis à disposition un certain nombre de thèmes mais qui reste limité. En effet, par comparaison, Wordpress et Joomla disposent d’un nombre plus conséquent de templates. Cependant, la rapidité et la simplicité pour créer un thème convaincront les intégrateurs de choisir le CMS Drupal.