alainericgauthier.com

Drupal 7 et HTML5 -- Le fichier page.tpl.php

Dans les articles précédents, j'ai déjà mentionné l'existence des fichiers tpl.php. Dans le processus habituel de création d'un thème, le premier fichier à modifer serait html.tpl.php. Grâce aux modules HTML5 et Elements que nous avons installés, nous n'avons pas besoin de créer ce fichier pour l'instant.

Le premier fichier que nous allons créer est page.tpl.php, c'est un fichier modèle utilisé par Drupal pour structurer la partie du code qui se trouve à l'intérieur de l'élément <body>. Comme tous les fichiers modèles (template files en anglais), il contient un mélange de HTML et de PHP.

Comment l'installer

Pour installer le document, il est préférable de créer un dossier nommé templates à l'intérieur du dossier minimi. À l'intérieur de ce nouveau dossier, nous allons déposer le document page.tpl.php.

Comment ça fonctionne

Le concept des pages modèle dans Drupal est assez simple, tout ce qui ne change pas est du HTML. Par exemple, l'entête de la page se trouve toujours au même endroit et les balises qui délimitent l'entête sont toujours les mêmes.

Voici un entête de site très ordinaire en HTML5

<header role="banner" class="clearfix">
  <a href="home.html"><img src="logo.png"></a>
  <h1>Mon Site</h1><h2>Mon slogan</h2>
</header>

Voici le même entête en version Drupal

<header role="banner" class="clearfix">
  <?php if ($logo): ?>
    <!-- #logo -->
    <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
    <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
    </a>
    <!-- End of #logo -->
  <?php endif; ?>
  <?php if ($site_name): ?>
    <h1 id="site-name">
    <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
    </h1>
  <?php endif; ?>
  <?php if ($site_slogan): ?>
    <h2 id="site-slogan"><?php print $site_slogan; ?></h2>
  <?php endif; ?>
  <?php print render($page['header']); ?>
</header>

Le contenu du site est remplacé par des variables PHP, les variables PHP se reconnaissent facilement car elles commencent par le symbole $. Dans l'extrait précédent, la première variables est $logo et elle fait référence au fichier "logo.png".

Autre aspect intéressant de cet extrait de code, chaque partie de l'entête commence par une commande conditionnelle du genre <?php if ($logo): ?>. Ceci permet simplement d'exécuter le code qui suit si la variable contient quelque chose (dans ce cas-ci un logo) et de ne pas exécuter le code si la variable ne contient rien. Si vous décidez que votre site n'aura pas de logo, le code n'est tout simplement pas généré.

Un peu plus de détails

Les autres variables de la version par défaut du fichier page.tpl.php sont décrites dans l'API de Drupal. En plus des variables que nous avons dans notre document pour le thème minimi, d'autres variables sont disponibles.

L'avant dernière ligne <?php print render($page['header']); ?>, mérite quelques explications.

La variable $page fait référence à la page qui est générée par Drupal. La partie ['header'] fait référence à la région que nous avons nommé "header" dans le document minimi.info. Cette ligne indique à Drupal qu'il faut afficher tous les blocs qui ont été assignés à la section "header".

Et pour la suite

Les mêmes principes s'appliquent au reste du document. Ceci dit, si on regarde de près le code HTML, nous n'utilisons pas encore tous les éléments que nous offre HTML5. Les exemples les plus évidents sont l'élément aside pour notre section "sidebar" et l'élément footer pour notre section "footer".

À l'aide d'autres documents tpl.php, nous pourrons contrôler comment ces sections s'affichent dans la source de la page. Dans la suite de la série nous verrons ce que peut contenir chacun de ces fichiers.

Vous voulez en apprendre encore plus?

Obtenez le guide Comment créer un thème sous Drupal 7 maintenant.

Je veux ce guide.