Drupal 6 – les bonnes pratiques pour créer un thème pour drupal 6.x
Dans un article précédent, on avait une méthode simple, efficace mais finalement assez risquée de créer un thème sur Drupal en détournant un thème existant. Deux raisons à cela :
- Vous ne savez pas grand chose du code que vous allez trouver, la question qui vous viendra à l’esprit est bien evidemment “est-ce la façon dont vous auriez procéder ?”
- En créant votre thème, vous produirez un thème maigre livré sans matière grasse, sans poudre aux yeux, sans chichi et sans fichier inutile… Bref, vous saurez intervenir en cas de pépin comme dirait Francis Heaulmes !
NDLR: Ainsi, comme dit ma grand-mère, “un petit chez soi vaut mieux qu’un grand chez les autres”. Le principe s’applque pour le logement comme pour le thème Drupal.
Leveraging Drupal: Getting Your Site Done Right
Un excellent livre sur le CMS Drupal, qui prend vraiment le partie d'une approche pragmatique et efficace. Rien n'est laissé de côté sur la compréhension de Drupal (thème, module...etc) mais il n'y a rien de superflu non plus. Par ailleurs, une chose rare qui mérite d'être signalée c'est une application concrète de la méthode Agile avec "User storie", "Acceptance Test" pour mener à bien le développement d'un site sous Drupal. Un livre très complet.
Genre(s) : Agile, Agile Scrum, Ajax, API, APIs, Applications, CMS, Development, Direction de projet, Drupal, Javascript, jQuery, jQuery UI, Open Source, PHP, PHP Applications, Theme, User stories, WebsiteAuteur(s) : Victor Kane
Edition(s) : John Wiley & Sons
A faire ou à ne pas faire…
Pour répertorier et se rappeler ces mauvaises pratiques, je vous invite tout de même jeter un œil sur cet article.
Comprendre en 5 minutes les principes du thème drupal
Tout d’abord, il vaut mieux ne pas déplier son thème dans le répertoire usuel de publication. Pour résumer, cette prartique dans un dilemme simple et inquisiteur de ce qu’il faut faire ou pas. Schématiquement, le choix du répertoire pour votre thème est le suivant :
1. BON drupal >> sites >> all >> themes >> lenomdemontheme
2. PAS BON drupal >> themes
Dans le scénario “1. BON”, vous devrez créer le répertoire themes car il n’existe pas.
Créer un fichier .info
Dans un “theme” drupal 6.x, on va créer un fichier .info. Ce fichier recèle les informations indispensable au CMS Drupal sur la nature du thème et de son fonctionnement.
name, le nom, il s’agit du nom du thème (majuscule ou minuscule, avec ou sans accent)description, une description un peu à la manières des themes wordpresscore, la version de drupal sur lequel cela marcheengine, très souvent “phtemplate”, c’est devenu quasiment un standardregions [left] = Left sidebar, il s’agit de la colonne de gauche de votre futur template. Vous disposez d’autres positions commeright,content,header,footer,content. En général, il en existe un certain nombre par défaut : right, content, header, footer.
Le découpage en regions
Ce découpage a pur but de vous permettre ultérieurement de faire appel à l’aide de la variable $left directement dans un fichier .tpl.php. Fichir dont on verra la création plus loin dans l’article.
Apres le découpage, où enfouir le .info
Il faut enregistrer ce fichier .infoavec le nom de votre thème lenomdemontheme.info
Un modèle de fichier .info
name = Un thème de plus dans l'univers description = un magnifique thème multi colonne, inspiré par cobra, tout désigné pur un blog. screenshot = screenshot.png core = 6.x engine = phptemplate regions[left] = Left sidebar regions[right] = Right sidebar regions[content] = Content regions[header] = Header regions[footer] = Footer |
Vous pouvez ajouter une image dans ce même répertoire , c’est plus fun… La taille est de 150 pixels de large par 90 pixels de hauteur.
screenshot = screenshot.png
A NOTER : le fichier doit avoir le même nom que votre répertoire situé dans themes. Ainsi, on enregistrera le fichier au nom de lenomdemontheme.info dans le repertoire drupal >> sites >> all >> themes >> lenomdemontheme
Créer un fichier page.tpl.php
Il est certain que la création d’un fichier page.tpl.php dans Drupal 6.x est loin d’être une obligation mais c’est fortement recommandé car cela vous offre un contrôle sur votre thème. On se cantonnera pour créer ce fichier à un assortiment de xhtml/CSS, qui donnera l’apparence de votre site. Dans cette page, il n’ ya aura plus qu’à imprimer des variables Drupal à l’intérieur de la page.
Variables drupal ?
Pour mémoire, nous sommes dans le moteur phptemplate, ainsi donc on va pouvoir passer des “pseudo-variables” qui sont souvent la marque de fabrique et le propre des moteur de templates (template engine). Pour information, c’est une notion qui existe par exemple dans des frameworks comme CodeIgniter ou Smarty.
A la différence du CMS Drupal, dans CodeIgniter, il ne s’agit pas de véritables variables mais plus d’éléments en “plain text” facilement imprimables et manipulables. Éléments qui s’impriment dans les vues de votre site MVC. Cela élimine du même coup la complexité de PHP. On peut par exemple confier la construction de ces vues à un graphique même ou un intégrateur html.
- CodeIgniter User Guide – Template Parser Class
http://codeigniter.com/user_guide/libraries/parser.html - Smarty : Why Use Smarty
http://www.smarty.net/
Quelques exemples de variables Drupal
Quelques-unes de ces variables sont vraiment indispensables.
$head_title, le nom du site
$head, ce que contient la balise head du site
$styles, cette variable insère la feuille de style du site
$scripts, cette variable insère les scripts javascript du site
$closure, cette variable clôt les scripts exécutés dans votre thème Drupal. Il est vivement recommandé de la mettre avant </body>
Lire son template Drupal 6.x
Il existe 3 choses importantes dont il faut se souvenir pour analyser et constituer un thème Drupal.
Pour comprendre ce mode d’affichage de votre thème grâce au code ci-dessous, il faut lire “si il existe une $sidebar_left alors imprime le contenu de cette colonne de gauche définie dans notre fichier .info”
1. Affichage ou non – imprime le contenu de la colonne de gauche
<?php if ($left) { ?><div id="sidebar-left"> <?php print $left ?> </div><?php } ?> |
2. le plat de résistance – imprime la variable $content
Cette variable va contenir le contenu principal de vos pages.
<?php print $content ?> |
3. rappel des autres variables importantes à faire figure dans votre fichier page.tpl.php
<?php print $messages; print $help; print $content; print $footer; // à faire figurer toujours en bas de votre template print $closure; ?> |
En gardant en mémoire ces 3 points, il vous faudra compléter votre thème afin. Là encore, deux façons de faire, vous pouvez lister toutes ces variables puis injecter votre code xhtml/css ou vous inspirer d’un thème existant pour isoler les variables.
NB : Un bon article sur les « must-have » d’un thème drupal. ” Anatomy of a Drupal 6 theme ”
http://drupal.org/node/171194
un exemple de code source du fichier page.tpl.php du thème ZEN
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="<?php print $language ?>" xml:lang="<?php print $language ?>"> <head> <title><?php print $head_title ?></title> <?php print $head ?> <?php print $styles ?> <?php print $scripts ?> <script type="text/javascript"><?php /* Needed to avoid Flash of Unstyle Content in IE */ ?> </script> </head> <body> <table border="0" cellpadding="0" cellspacing="0" id="header"> <tr> <td id="logo"> <?php if ($logo) { ?><a href="<?php print $base_path ?>" title="<?php print t('Home') ?>"><img src="<?php print $logo ?>" alt="<?php print t('Home') ?>" /></a><?php } ?> <?php if ($site_name) { ?><h1 class='site-name'><a href="<?php print $base_path ?>" title="<?php print t('Home') ?>"><?php print $site_name ?></a></h1><?php } ?> <?php if ($site_slogan) { ?><div class='site-slogan'><?php print $site_slogan ?></div><?php } ?> </td> <td id="menu"> <?php if (isset($secondary_links)) { ?><?php print theme('links', $secondary_links, array('class' =>'links', 'id' => 'subnavlist')) ?><?php } ?> <?php if (isset($primary_links)) { ?><?php print theme('links', $primary_links, array('class' =>'links', 'id' => 'navlist')) ?><?php } ?> <?php print $search_box ?> </td> </tr> <tr> <td colspan="2"><div><?php print $header ?></div></td> </tr> </table> <!-- to be continued --> <?php if ($closure_region): ?> <div id="closure-blocks"><?php print $closure_region; ?></div> <?php endif; ?> <?php print $closure; ?> </div></div> <!-- /#page-inner, /#page --> </body> </html><?php if ($closure_region): ?> |
Créer un fichier CSS style.css
Il vous restera à créer un fichier CSS dans votre répertoire de thème pour peaufiner l’affichage. Pour information, voici un extrait de la css du thème zen
/* $Id: zen.css,v 1.1.2.27 2008/09/14 09:28:14 johnalbin Exp $ */ /* * ZEN STYLES * * This is an example stylesheet. Sub-themes should NOT include the zen/zen.css * file, but instead copy this CSS to their own stylesheets. * * In this stylesheet, we have included all of the classes and IDs from this * theme's tpl.php files. We have also included many of the useful Drupal core * styles to make it easier for theme developers to see them. * * Many of these styles are over-riding Drupal's core stylesheets, so if you * remove a declaration from here, the styles may still not be what you want * since Drupal's core stylesheets are still styling the element. See the * drupal5-reference.css file for a list of all Drupal 5.x core styles. * * In addition to the style declarations in this file, other Drupal styles that * you might want to override or augment are those for: * * Book Navigation See line 74 of Zen's drupal5-reference.css file * Forum See line 197 of Zen's drupal5-reference.css file * Menus See line 667 of Zen's drupal5-reference.css file * News Aggregator See line 20 of Zen's drupal5-reference.css file * Polls See line 287 of Zen's drupal5-reference.css file * Search See line 320 of Zen's drupal5-reference.css file * User Profiles See line 945 of Zen's drupal5-reference.css file */ /** body **/ body { margin: 0; padding: 10px; } #page { } #page-inner { } /** header **/ #header { } #header-inner { } #logo-title /* Wrapper for logo, website name, and slogan */ { } /* to be continued */ |
Pour aller plus loin
- Un très bonne article sur la mise à jour des themes drupal quant on passe de 5 à 6.
Converting 5.x themes to 6.x
http://drupal.org/node/132442 - Structure of the .info file
http://drupal.org/node/171205 - Cobra / Exubérance / Férocité
L’image qui apparaît en fond sous le logo drupal
Les principaux artistes du mouvement Cobra sont Karel Appel. Asger Jorn. Pierre Alechinsky. Corneille. Constant. Nyholm. Egill Jacobsen. Christian Dotremont. Noiret. Pederson. Ejler Bille.
http://gilbert-arts.blogspot.com/2006/12/cobra-exubrance-frocit.html
