Atelier Drupal 7

Dans cet exemple, vous allez mettre toutes les balises h2 (titre des pages et des blocs) en petites majuscules grâce à la propriété CSS font-variant.

-> Éditez le fichier sites/all/themes/orange/orange/css/style.css

Avec Windows, vous pouvez utiliser Notepad++ pour éditer les fichiers CSS.

-> Recherchez le code suivant (ligne 87) :

h2,
h2 a {
    color: #222;
    font-size: 1.5em;
    text-decoration: none;
}

-> Modifiez-le en ajoutant une ligne :

h2,
h2 a {
    color: #222;
    font-size: 1.5em;
    text-decoration: none;
    font-variant: small-caps;
}

-> Sauvegardez le fichier.

-> Rechargez votre page

Pour vous aider à situer les styles que vous voulez modifier dans Drupal, il existe une extension pour Firefox qui s'avère rapidement indispensable : Firebug.

Installation

-> Si Firefox n'est pas sur votre machine, installez-le immédiatement !

-> Menu de Firefox Modules complémentaires.

-> Dans la zone de recherche, entrez firebug

-> Cliquez sur le bouton Installer.

-> Redémarrer Firefox.

Vous devriez voir apparaître un cafard (bug) à droite de la barre de navigation.

Utilisation

-> Rechargez la page d'accueil du site avec le thème Orange.

-> Cliquez sur le bouton Firebug (le cafard).

Un volet s'ouvre alors en bas de Firefox, dans la partie gauche se trouve le code HTML de votre page et dans la partie droite le code CSS appliqué à l'élément HTML sélectionné.

-> Cliquez sur la flèche qui permet de sélectionner un élément de la page (deuxième bouton de la barre d'outils).

-> Placez le curseur de la souris sur un titre en petites majuscules

Et c'est ici que Firebug est magique !! :

• l'élément étudié est entouré en bleu ;
• dans le cadre de gauche de Firebug, le code HTML de l'élément étudié (<h2 class="title"...) est surligné ;
• dans le cadre de droite de Firebug, vous retrouvez le code CSS que vous avez ajouté :
  font-variant: small-caps ;
• au-dessus s'affichent le nom du fichier css (style.css) et la position du code css dans le fichier (line 87).

Si vous passez votre souris au-dessus du lien, le chemin complet du fichier CSS apparaît, chose indispensable pour savoir quels fichiers sont réellement concernés.

Il est également possible de modifier directement depuis Firebug les valeurs des propriétés CSS. L'affichage se met à jour immédiatement dans Firefox.

Lorsque vous modifiez vos propriétés dans Firebug, les fichiers CSS ne sont pas modifiés.

Utilisez flèche haut et flèche bas pour augmenter ou diminuer les valeurs numériques des propriétés CSS.

Il n'est pas toujours simple de connaître le nom du template responsable de la création d'un élément HTML de la page. La communauté Drupal a créé un outil qui devient vite indispensable au créateur de thème : Theme developer.

Installation

Le module Theme developer requiert le module Devel.

-> Téléchargez et activez les modules Devel (http://drupal.org/project/devel) - Version utilisée pour ce livre 7.x-1.2 et Theme developer (http://drupal.org/project/devel_themer) - Version utilisée pour ce livre 7.x-1.x-dev.

Lorsque le module est installé et activé, une case à cocher Themer info apparaît en bas à gauche du site.

<span thmr="thmr_2" style="display: block; outline: medium none;" thmr_curr="0">

Utilisation

-> Cochez la case Themer info

Vous pouvez alors pointer avec la souris, à la manière de Firebug, vers un élément de la page.

-> Cliquez sur le bloc Liens divers créé au chap. Création d'un nouveau menuCréation d'un nouveau menu

S'affiche alors une fenêtre popup qui donne des informations sur le template responsable de la création du code HTML sélectionné.

Voici les éléments que vous utiliserez dans ce chapitre :

• Template called : chemin et nom du fichier template utilisé ;
• Candidate template files : nom de fichiers de template pouvant être utilisé ;
• Section (Array, 25 elements) : liste des variables PHP pouvant être utilisées dans le template.

Theme developer indique que le template qui a généré le block est sites/all/themes/orange/orange/templates/block.tpl.php.

-> Éditez ce fichier block.tpl.php.

Ce fichier ressemble à region.tpl.php étudié précédemment :

<div id="<?php print $block_html_id; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
  <?php print render($title_prefix); ?>
  <?php if (!empty($block->subject)): ?>
  <h2 class="title"<?php print $title_attributes; ?>><?php print $block->subject ?></h2>
  <?php endif;?>
  <?php print render($title_suffix); ?>
  <div class="content"<?php print $content_attributes; ?>><?php print $content ?></div>
</div>

Vous allez maintenant mettre le contenu des blocs avant leur titre (chose peu judicieuse, je vous le concède).

-> Déplacez la ligne 7 avant la ligne 2.

-> Sauvegardez le fichier.

-> Rechargez la page

En modifiant le fichier block.tpl.php vous avez modifié le rendu de l'ensemble des blocs.

-> Annulez cette modification et remettez le titre au-dessus du bloc.

Il est possible de créer des templates qui vont modifier uniquement des blocs spécifiques, la ligne Candidate template files apporte des informations à ce sujet.

-> Cliquez à nouveau sur le bloc Liens divers

Cette ligne indique que différents noms de fichiers sont possibles :

Un seul template sera utilisé par Drupal.
Drupal cherche dans différents répertoires (thème, module...) si le premier template existe (ici, block--menu--menu_liens_divers.tpl.php). S'il le trouve, il l'utilise et ne cherche pas d'autres fichiers. Sinon, il cherche le fichier suivant (block--menu.tpl.php).

Lors de la rédaction de ce livre, le module Theme developer possède un bogue qui affiche des « __ » au lieu de « -- » pour les noms de template. Peut-être que celui-ci sera corrigé lorsque vous lirez ces lignes.

Vous allez créer un template qui affichera un message uniquement dans le bloc liens divers :

-> faites une copie du fichier sites/all/themes/orange/orange/templates/block.tpl.php dans le même répertoire et renommez-le en block--menu--menu_liens_divers.tpl.php ;

-> éditez le fichier créé ;

-> avant la ligne <?php print render($title_prefix); ?> ajoutez le code :

<?php print "Je suis le nouveau template !"; ?>

-> sauvegardez le fichier.

Si vous regardez la page à cet instant, votre nouveau fichier n'est pas détecté par Drupal. Pour des raisons de performances, un cache existe et répertorie les fichiers présents sur votre installation.

Pour que votre nouveau fichier soit détecté par Drupal; il faut donc vider les caches :

-> menu Configuration - lien Performance ;

-> bouton Effacer tous les caches.

Le créateur de thème réalise cette action très régulièrement, il est donc fastidieux de devoir aller sur la page performance à chaque fois.
Heureusement le module Devel propose une URL qui efface les caches : devel/cache/clear (http://localhost/drupal/?q=devel/cache/clear). Mettez cette URL en marque-page de votre navigateur pour gagner du temps.

-> Rechargez la page

Si vous ne parvenez pas à sélectionner un élément dans la page avec Theme developer, pointez vers un élément plus petit (par exemple, pour le bloc « Liens divers », un lien du bloc).
Ensuite, utilisez les liens de la ligne Parents de la fenêtre popup pour remonter vers le template qui vous intéresse.

Vous allez ajouter un nouveau template pour modifier le bloc Bienvenue, Utilisateur identifié créé au chap. Exercice : Création d'un bloc pour un rôle spécifiqueExercice : création d'un bloc pour un rôle spécifique . Vous modifierez le titre de ce bloc afin qu'il affiche le nom de l'utilisateur connecté.

-> Sélectionnez le bloc Bienvenue, Utilisateur identifié avec Theme developer.

-> Cliquez sur la dernière ligne du popup .. (Array, 25 elements).

La liste de toutes les variables PHP utilisables dans le template s'affiche alors.

-> Dans cette liste, recherchez la ligne user (Object) stdClass et cliquez dessus.

Grâce à ces informations, vous savez que c'est l'attribut name de l'objet $user qui affichera le nom de l'utilisateur connecté. En PHP, il faudra donc écrire : $user->name.

-> Faites une copie du fichier sites/all/themes/orange/orange/templates/block.tpl.php dans le même répertoire et renommez-le en block--block--2.tpl.php (nom du Candidate template files pour ce bloc).

-> Éditez le fichier créé.

-> Modifiez la ligne :

<h2 class="title"<?php print $title_attributes; ?>>
  <?php print $block->subject ?>
</h2>

en

<h2 class="title"<?php print $title_attributes; ?>>
  <?php print "Bienvenue, ".$user->name ?>
</h2>

-> Sauvegardez le fichier.

-> Effacez les caches.

-> Rechargez la page

Il est possible d'afficher la liste des variables d'un template en utilisant les fonctions de Debug du module Devel. Cela est parfois indispensable lorsque le module casse la présentation du site.
Ces fonctions sont détaillées au chap. Les fonctions de débogageLes fonctions de débogage .

Dans cet exemple, le template du thème a modifié le contenu du site.
Ce n'est pas une bonne pratique, car si un webmaster tente de modifier le titre de votre bloc avec l'interface d'administration, cela n'aura aucun effet.

Le site free CSS templates propose plusieurs centaines de design HTML/CSS sous licence Creative Commons (CCPL). L'auteur du site m'a donné son accord pour l'utilisation de ses designs dans cet ouvrage et je l'en remercie.

Pour la création de ce thème, vous allez utiliser le design culinary téléchargeable à l'adresse http://www.freecsstemplates.org/preview/culinary/.

-> Télécharger l'archive culinary.zip.

-> Extrayez son contenu dans un nouveau répertoire sites/default/all/culinary qui sera le répertoire de votre thème

Voici une description des fichiers de cette archive :

• dossier images : images utilisée dans le thème (logo, illustration, etc.) ;
• index.html : code HTML du design ;
• default.css : code CSS du design ;
• license.txt : texte de la licence CCPL.

Lors du chargement de la page Apparence, qui liste l'ensemble des thèmes de l'installation, Drupal recherche un fichier .info dans chaque sous-répertoire du répertoire themes.

-> Créez un fichier culinary.info dans le répertoire culinary

name = Culinary 
description = Theme Culinary de freecesstemplates. 
core = 7.x 
version = 7.x-dev
engine = phptemplate

Vous avez écrit ici un fichier .info minimale. Vous modifierez ce fichier à plusieurs reprises durant ce chapitre pour y ajouter de nouvelles directives de configuration.

-> Allez sur la page Apparence

Le père de tous les templates est html.tpl.php, c'est à partir de celui-ci que tous les autres seront appelés. Vous allez créer ce premier template à partir du fichier index.html du design.

-> Renommez index.html en html.tpl.php.

-> Créez un sous-répertoire templates.

-> Placez le template html.tpl.php dans ce répertoire.

Il n'est pas obligatoire de placer ses templates dans le répertoire templates, mais cela est recommandé pour ne pas surcharger la racine du thème et pour une meilleure lisibilité.

Votre thème peut dès maintenant s'afficher !!!

-> Page Apparence.

-> Choisir le lien Activer et choisir par défaut du thème Culinary.

-> Aller sur la page d'accueil du site

Forcément, il reste encore un petit peu de travail : aucun style n'est appliqué au HTML et le contenu est statique.

Commencez par informer Drupal que votre thème contient sa propre feuille de style CSS.

-> Éditez le fichier culinary.info.

-> À la fin du fichier, ajoutez la ligne

stylesheets[all][] = default.css

stylesheets[all][] = css/default.css

html.tpl.php doit maintenant charger la liste des fichiers css de Drupal. Cette liste se trouve dans la variable $styles du template.

-> Éditez le fichier html.tpl.php.

-> Remplacez la ligne

<link href="default.css" rel="stylesheet" type="text/css" />

par

<?php print $styles; ?>

• Videz le cache.

Si vous êtes bloqué sur votre site Drupal à cause du thème, entrez l'URL http://localhost/drupal-7.7/?q=admin pour afficher une page qui utilise le thème d'administration Seven.

-> Affichez à nouveau la page d'accueil du site

Le contenu est toujours statique, mais la feuille de style du thème a été ajoutée ainsi que toutes les autres feuilles de style des différents modules Drupal utilisés.

Le design Culinary ne contient pas de fichier JavaScript, il est pourtant important d'afficher la variable $script dans le template html.tpl.php pour que les fichiers .js des modules soient insérés au site.

-> Éditez le fichier html.tpl.php.

-> Ajoutez la ligne suivante sous celle des styles

<?php print $scripts; ?>

Comme son nom l'indique, le template html.tpl.php gère le code de la balise <html>. Le contenu de la page est géré dans page.tpl.php (balise <body>).

-> Créez un fichier page.tpl.php dans le répertoire templates du thème culinary.

-> Copiez le code se trouvant à l'intérieur de la balise <body> du fichier html.tpl.php (attention, il ne faut pas copier la balise <body>) et remplacez-le par le code suivant qui appellera page.tpl.php. Le code de la balise <body> devra être :

<body>
  <?php print $page ?>
</body>

-> Collez le code se trouvant à l'intérieur de <body> dans le fichier page.tpl.php.

-> Videz le cache.

L'apparence de votre thème n'est pas modifiée par ces actions, mais les variables PHP disponibles dans
page.tpl.php sont différentes de celles de html.tpl.php.

Pour ce thème, trois autres régions seront définies :

• Menu primaire : menu du haut ;
• Colonne latérale : colonne latérale de droite ;
• Pied de page.

C'est dans le .info que vous décrivez les régions de votre thème.

-> Éditez le fichier culinary.info et ajoutez les lignes suivantes :

regions[page_top] = Haut de page
regions[help] = Aide
regions[page_bottom] = Bas de page
regions[content] = Contenu
regions[menu] = Menu principal
regions[sidebar_first] = Colonne laterale
regions[footer] = Pied de page

Pour chaque région définie dans le .info, une variable est disponible dans le template page.tpl.php. Par exemple, pour la région menu, une variable $page['menu'] contenant le contenu des blocs à afficher dans cette région sera disponible. L'étiquette (Menu principal) sera utilisée pour le placement des blocs.

Drupal placera automatiquement les blocs de votre installation dans les régions de votre thème si vous utilisez des noms génériques.
Par exemple, tous les blocs que vous avez placés en Colonne latérale gauche de Bartik seront placés automatiquement en Colonne latérale de Culinary si le nom de variable de la région est sidebar_first.

Drupal définit automatiquement les régions suivantes pour tous les thèmes :
sidebar_first, sidebar_second, content, header, footer, highlighted, help, page_top, page_bottom, dashboard_main, dashboard_sidebar, dashboard_inactive.
Cependant, je vous conseille de toutes les redéfinir dans le .info pour plus de clarté.

Il s'agit maintenant d'utiliser les variables disponibles dans les templates. Vous allez commencer par afficher le contenu de la page grâce à la variable $page['content'] dans le template page.tpl.php.

-> Éditez page.tpl.php.

-> Remplacez le code à l'intérieur de la balise <div id="content"> par :

<?php print render($page['content']); ?>

-> Le code devra donc être :

<div id="content">
  <?php print render($page['content']); ?> 
</div> 
<!-- end div#content -->

La variable $page['content'] contient un tableau de différents éléments à afficher (contenu d'une node, liste des nodes). La fonction render transforme ce tableau en code HTML qui sera affiché par le navigateur.

-> Sauvegardez le fichier et rechargez la page

La variable $page['sidebar_first'] contient le code html des blocs placés dans la région Colonne latérale. Elle s'utilise de la même façon que $page['content'].

-> Éditez page.tpl.php.

-> Remplacez le code à l'intérieur de la balise <div id=»sidebar»> :

<div id="sidebar">
  <?php print render($page['sidebar_first']); ?> 
</div> 
<!-- end div#sidebar -->

-> Sauvegardez le fichier.

Vous pouvez vérifier si vos régions sont correctement configurées en allant sur la page d'Aperçu des régions des blocs :
-> menu Structure - lien Blocs ;
-> lien Aperçu des régions des blocs (Culinary)

Afficher le menu Menu principal à la place du menu du design.

Corrigé

Lors de la création d'un menu, un bloc correspondant est créé. Il suffit donc de créer une région menu et d'afficher le bloc Menu principal dans cette région.

Il faut tout d'abord afficher la variable $page['menu'] dans page.tpl.php :

-> éditez page.tpl.php

-> remplacez ainsi le code à l'intérieur de la balise <div id="menu"> :

<div id="menu">
  <?php print render($page['menu']); ?> 
</div> 
<!-- end div#menu -->

-> enregistrez le fichier.

Il faut maintenant positionner le bloc dans la région menu :

-> menu Structure - lien Blocs.

Il ne faut pas que le titre du bloc s'affiche :

-> lien configurer du bloc Menu principal ;

-> Titre du bloc : <none> ;

-> bouton Enregistrer le bloc.

Vous retournez alors sur la page de gestion des blocs :

-> choisir la région Menu principal pour le menu Menu principal

Proposez une interface au Webmaster pour modifier le texte du pied de page.

Corrigé

L'idée n'est bien sûr pas de créer un module permettant de saisir le texte du pied de page, mais de créer un bloc personnalisé (chap. Ajouter un bloc personnaliséAjouter un bloc personnalisé ) et de l'afficher en région Pied de page.

Création du bloc :

-> menu Structure - lien Blocs ;

-> lien + Ajouter un bloc ;

-> Description du bloc : Pied de page pour thème Culinary ;

-> Titre du bloc : <none> ;

-> Corps du bloc : 

Et voici le nouveau pied de page à modifier !

-> Paramètres de la région : choisir Pied de page pour le thème Culinary.

-> Bouton Enregistrer le bloc.

Il faut maintenant afficher la variable $page['footer'] dans page.tpl.php :

-> éditez page.tpl.php ;

-> remplacez ainsi le code à l'intérieur de la balise <div id="footer"> :

<div id="footer">
  <?php print render($page['footer']); ?> 
</div> 
<!-- end div#footer -->

-> enregistrez le fichier.

Il reste trois régions à définir page_top, page_bottom et help qui sont utilisées par certains modules du cœur de Drupal.

Région help

-> Éditez le fichier page.tpl.php.

-> Avant la ligne <div id="content">, insérer le code suivant :

<div id="help">
  <?php print render($page['help']); ?>
</div>
<!-- end div#help -->

-> Sauvegardez le fichier.

Les régions page_top et page_bottom

Il est possible d'insérer les variables $page['page_top'] et $page['page_bottom'] dans le template page.tpl.php comme vous l'avez fait pour les autres régions. Cependant, il est préférable de le faire dans html.tpl.php juste après la balise <body> pour être sûr qu'aucun code HTML ne s'intercale entre les deux.

Pour cela, html.tpl.php dispose de deux variables $page_top et $page_bottom.

-> Éditez le fichier html.tpl.php.

-> Modifiez le code de la balise <body> ainsi :

<body>
  <?php print $page_top ?>
  <?php print $page ?>
  <?php print $page_bottom ?>
</body>

-> Sauvegardez le fichier.

Ainsi le module Toolbar, qui utilise la région page_top fonctionne avec votre thème.

Le template node.tpl.php a accès à la valeur de tous les champs du type de contenu affiché. Pour afficher le contenu, il est donc possible de reprendre le code par défaut de node.tpl.php ou de créer du code sur mesure. C'est ce que vous allez faire, dans un premier temps, dans cette section.

Affichage du titre

• Gardez uniquement la balise <div> parente du template node--recette.tpl.php.

Le titre de la node est dans la variable $title. Ajoutez la classe « post » dans la balise parente <div> pour que la classe css de culinary s'applique et insérez-y le code suivant pour afficher le titre :

<div id="node-<?php print $node->nid; ?>" class="post <?php print $classes; ?> clearfix"<?php print $attributes; ?>>
  <h2 class="title"><a href="#"><?php print $title ?></a></h2>
</div>

Affichage du corps

Le corps de la node (body) est disponible dans la variable $body.

Pour l'afficher dans le template, il suffit donc d'ajouter le code suivant après le titre :

<?php print $body[0]['safe_value'] ?>

L'élément ['value'] est la valeur du body brute, l'élément ['safe_value'] est la valeur du body filtrée par le format d'entrée.

Vous pouvez alors modifier le code HTML pour qu'il s'adapte au design Culinary :

<div class="entry">
  <div class="intro">
    <?php print $body[0]['safe_value'] ?>
  </div>
</div>

Affichage du temps de préparation

Un champ personnalisé s'affiche de la même façon :

Il faut donc ajouter le code suivant :

<div class="temps">
  <?php print "Temps de préparation : ".$field_temps_preparation[0]['value']?>
</div>

Si votre site est multilingue, utilisez la fonction t() pour afficher vos chaînes de caractères comme avec les modules (chap. Conventions et finitionsConventions et finitions ).

Afficher la liste des ingrédients

Pour afficher les champs contenant un nombre de valeurs supérieur à un, il faut utiliser une boucle en PHP.

Il s'agit donc de parcourir le tableau $field_ingredients et d'afficher chaque valeur. L'instruction foreach() est alors utilisée :

<h3>Ingrédients</h3>
<ul class="ingredients">
  <?php foreach ($field_ingredients as $ingredient) : ?>
    <li><?php print $ingredient['safe_value'] ?></li>
  <?php endforeach; ?>
</ul>

Afficher l'image

Vous pouvez également utiliser la fonction render() pour afficher un champ que vous ne désirez pas retravailler. Cela pourrait être le cas pour le champ image (photo de la recette).

Ajoutez le code suivant au template :

<div class="image">
  <?php print render($content['field_image'])?>
</div>

L'image sera alors rendue selon les paramètres utilisés pour l'affichage du champ Photo de la recette.

Exemple de rendu

Vous pouvez continuer ainsi à afficher chaque champ de votre type de contenu.

L'exemple d'implémentation suivant contient du code PHP pour le template et un fichier recette.css qui lui applique un style spécifique.

Il faut indiquer dans le fichier .info du thème que ce fichier css est utilisé.

-> Dans le fichier culinary.info, ajoutez la ligne suivante :

stylesheets[all][] = recette.css

-> Puis créez le fichier recette.css

.infos {
    float: right;
    font-style: normal;
    margin: 0 0 1em 1em;
    border: 1px solid black;
    padding: 1em;
    color: white;
    background-color: #E14949;
}
 
ul.ingredients {
    font-style: normal;
    margin-left: 2em;
}
 
ol.etapes li{
    list-style: decimal outside none;
}
 
.image {
    float: right;
    margin: 0 0 1em 1em;
}

-> Enfin, voici le contenu du fichier node--recette.tpl.php

<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix post"<?php print $attributes; ?>>
  <h2 class="title">
    <a href="#"><?php print $title ?></a>
  </h2>
  <p class="byline">Posté par <?php print $name ?></p>
  <div class="entry">
    <div class="infos">
      <div class="temps">
        <?php print "Temps de préparation : ".$field_temps_preparation[0]['value']?> min
      </div>
      <div class="prix">
        <?php print "Prix : ".$field_prix[0]['value']?> ?
      </div>
    </div>
    <div class="intro">
      <?php print $body[0]['safe_value'] ?>
    </div>
    <h3>Ingrédients</h3>
    <ul class="ingredients">
      <?php foreach ($field_ingredients as $ingredient) : ?>
      <li><?php print $ingredient['safe_value'] ?></li>
      <?php endforeach; ?>
    </ul>
    <h3>Etapes</h3>
    <div class="image">
      <?php print render($content['field_image'])?>
    </div> 
    <ol class="etapes">
      <?php foreach ($field_etapes as $etapes) : ?>
      <li><?php print $etapes['safe_value'] ?></li>
      <?php endforeach; ?>
    </ol>
   </div>
</div>

Cette méthode de création sur mesure d'un template pour un type de node est tout indiquée si vous avez un design contenant beaucoup de code HTML spécifique. Mais ne perdez pas de vue qu'elle comporte également des défauts :

• non-utilisation de certains éléments de configuration des champs (préfixe et suffixe, ordre, format, etc.) ;
• vous devez afficher à la main les autres éléments de node.tpl.php comme les commentaires, les liens vers les termes de taxonomy, etc.

Pour la suite de ce livre, vous utiliserez des pratiques moins radicales en vous basant sur le template de Drupal par défaut.

• Copiez le contenu du fichier modules/node/node.tpl.php.
• Collez-le dans le fichier node--recette.tpl.php.

Il est également possible de se baser sur les fichiers node.tpl.php des thèmes existants (par exemple, celui de Bartik).

Dans le template node.tpl.php par défaut, la ligne print render($content); affiche l'intégralité du contenu.

Cela peut poser problème si vous désirez afficher un élément en dehors du contenu. Dans cet exemple, vous afficherez l'image (photo de la recette) tout en bas de la page, après les commentaires.

Le contenu du fichier node--recette.tpl.php utilisé est celui du template par défaut : modules/node/node.tpl.php.

La fonction render()

La fonction render() prend en paramètre un élément qui contient des instructions à traduire en code HTML. Cet élément est un tableau pouvant contenir d'autres éléments à traduire :

Il est possible de traduire un élément fils du tableau $content grâce à la fonction render :
render($content['field_image']); traduit uniquement l'élément field_image.

Pour afficher l'image en bas de page, entrez le code suivant juste avant la dernière balise </div> :

<?php print render($content['field_image']); ?>

Hide

Votre image est alors affichée deux fois : une fois en bas de page et une fois dans le contenu. Il est possible de cacher un élément fils du tableau grâce à la fonction hide(). Pour cela, entrez le code suivant juste avant la ligne print render($content); :

hide($content['field_image']);

Show

Inversement, la fonction show() permet d'afficher un élément qui ne devrait plus l'être :

-> affichez l'image en haut de la page, avant le titre en déplaçant la ligne

<?php print render($content['field_image']); ?>

L'image s'affiche alors en haut, mais elle ne s'affiche plus dans le contenu, car elle a déjà été traduite. Pour l'afficher dans le contenu, entrez le code suivant juste avant la ligne print render($content); :

show($content['field_image']);

Ainsi, l'image s'affiche également dans le contenu.

Si vous désirez modifier le code HTML d'un seul champ d'une node, cela est possible grâce à un template qui est associé à chaque champ.

Vous allez ici mettre en forme uniquement le champ « Étapes » :

-> avec Theme developper, sélectionnez le champ étapes

Ici, aucun template n'est appelé, et Drupal utilise une fonction de thème. Vous découvrirez plus tard dans cette section comment s'utilise une fonction de thème.

Le champ theme_hook_suggestions est l'équivalent de la section Candidate function names :

• field--text_long.tpl.php : le template est utilisé pour afficher les champs de type texte long ;
• node--field_etapes.tpl.php : le template est utilisé pour afficher le contenu des champs étapes ;
• node--recette.tpl.php : le template est utilisé pour afficher le contenu des champs des nodes de type recette ;
• node--field_etapes--recette.tpl.php : le template est utilisé pour afficher le contenu des champs étapes des nodes de type recette.

Il existe un fichier template field.tpl.php par défaut dans le répertoire modules/field/theme/field.tpl.php :

-> copiez le fichier modules/field/theme/field.tpl.php dans votre répertoire de thème ;

-> renommez-le en node--field_etapes.tpl.php.

Il suffit maintenant de modifier le code du template :

• ajout de balises <ol> et <li> ;
• mettre une classe etapes sur la balise <ol> 

<div class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>
  <?php if (!$label_hidden) : ?>
  <div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>:&nbsp;</div>
  <?php endif; ?>
  <ol class="etapes field-items"<?php print $content_attributes; ?>>
    <?php foreach ($items as $delta => $item) : ?>
    <li class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"<?php print $item_attributes[$delta]; ?>>
      <?php print render($item); ?>
    </li>
    <?php endforeach; ?>
  </ol>
</div>

-> videz les caches

Le fichier recette.css du chapitre précédent doit être chargé par le .info pour que la classe « etapes » s'applique.

Lorsque vous avez utilisé theme_developper, peut-être avez-vous remarqué une ligne Preprocess functions.

Avant d'interpréter le code d'un template, Drupal regarde si une fonction preprocess existe. Si elle existe, il l'exécutera. Dans l'exemple suivant, vous utiliserez une fonction de preprocess pour ajouter une variable au template node--recette.tpl.php.

-> Créez le fichier template.php à la racine de votre thème.

Attention à ne pas ajouter ce fichier dans le répertoire templates de votre thème !

-> Ajoutez-y le code suivant :

<?php 
function culinary_preprocess_node(&$variables) {
  if ($variables['type'] == "recette") {
    $variables['test'] = 'Je suis la !';
  }
}

Ce code n'est pas très compliqué. Vous devez utiliser la fonction de preprocess template_preprocess_node comme vous l'a indiqué Theme Developper. Il faut remplacer le mot template_ par le nom de votre thème (culinary_).

Cette fonction prend en argument le tableau de toutes les variables disponibles. Il suffit donc d'ajouter une variable à ce tableau pour pouvoir l'utiliser dans votre template.

L'argument $variables est passé par référence (&$variables). Ainsi, toutes les modifications faites sur ce tableau seront conservées.

-> Videz les caches.

-> Rechargez la page et pointez vers le template node--recettes.tpl.php avec Theme developper

Vous pouvez donc utiliser la variable « test » dans le template node.tpl.php.

• Calculez les variables nombre_etapes et nombre_ingrédients.
• Affichez-les dans le template node.tpl.php.

Corrigé

Dans le fichier template.php, modifiez la fonction :

function culinary_preprocess_node(&$variables) {
  if ($variables['type'] == "recette") {
    $variables['nombre_ingredients'] = count($variables['field_ingredients']);
    $variables['nombre_etapes'] = count($variables['field_etapes']);
  } 
}

Puis, dans le fichier node--recette.tpl.php, affichez les variables :

<div class="submitted">
  <?php print $submitted; ?><br/> 
  <?php print 'nombre d\'étapes : '.$nombre_etapes ?>,
  <?php print 'nombre d\'ingrédients : '.$nombre_ingredients ?>
</div>

Vous avez déjà rencontré une fonction de thème lorsque vous avez pointé vers un champ du contenu (Fonction theme_field()). Vous avez alors utilisé un template pour la surcharger.

Mais il est également possible de surcharger une fonction de thème par une autre fonction dans le fichier template.php. Par exemple, le fil d'Ariane utilise une de ces fonctions. Vous allez la modifier.

Vérifiez que le fil d'Ariane s'affiche avec votre thème. Pour cela, la ligne <?php print $breadcrumb; ?> doit se trouver juste au-dessus de la ligne <div id="content">.
Positionnez-vous ensuite sur la page d'un terme de taxonomie ayant un terme parent.

-> Pointez vers le fil d'Ariane avec Theme developper

Tout comme pour les templates, il est conseillé de reprendre le code par défaut de la fonction et de le modifier ensuite. Theme developper peut une nouvelle fois vous aider :

-> cliquez sur le lien theme_breadcrumb().

Vous arrivez alors sur la page api.drupal.org correspondant à la fonction. Copiez la section Code de la page.

Remarquez que api.drupal.org indique que la fonction est dans le fichier includes/theme.inc.

• Dans le fichier template.php de votre thème, collez le code de la fonction.
• Modifiez son nom de theme_breadcrumb en culinary_breadcrumb.

Vous pouvez maintenant modifier le code de la fonction comme bon vous semble. Vous pouvez par exemple changer le caractère de séparation. Pour cela, modifiez la ligne suivante :

$output .= '<div class="breadcrumb">' . implode(' + ', $breadcrumb) . '</div>';

-> Videz les caches