alainericgauthier.com

Drupal 7 et HTML5 -- Les fichiers region.tpl.php

Dans l'article précédent de cette série, nous avons vu comment créer un document page.tpl.php. Nous avons aussi vu ce qu'il contient et quels sont les liens avec le code source des pages générées par Drupal.

HTML5 et les nouveaux éléments plus sémantiques

Loin de moi l'idée de vous présenter tous les nouveaux éléments ou encore de débattre de l'aspect sémantique (ou pas) de ces nouveaux éléments. Je suis les bons conseils qu'on peut trouver sur le site de html5 doctor pour décider quels sont les éléments les mieux adapté à mon projet.

Donc, pour arriver à un thème minimaliste qui profite des améliorations propres à la norme HTML5, il faut utiliser plusieurs éléments qui ont une valeur sémantique spécifique. L'élément <aside> est utilisé pour les barres latérales, nous allons donc l'utiliser pour notre barre latérale. L'élément <footer> est utilisé pour les pieds de page et l'élément <section> est utilisé pour séparer une partie d'une page du reste; cet élément est le mieux adapté pour la zone de contenu des pages générées par Drupal.

L'élément <section>

Pour intégrer l'élément <section> à notre thème, nous allons modifier légèrement le document page.tpl.php. Si vous regardez le code source, vous verrez que la seule chose qui change est l'élément <div> dont l'attribut role est "main". Nous remplaçons cet élément <div> par l'élément <section>, il faut évidemment fermer l'élement à l'endroit approprié.

Les éléments <footer> et <aside>

Drupal permet de bien contrôler le code généré pour chaque région telle qu'elles sont définies dans le fichier .info. Pour ce faire, il faut créer un document dont le nom suit la structure region--[nom de la region].tpl.php. Pour notre thème, nous allons donc créer trois documents :

Lisez le code, ça dit tout!

Si vous regardez le code des ces trois documents, il est très simple mais il permet de faire deux choses. La première est que, dans la page générée, le code de la région ne s'affiche que si la région contient au moins un bloc. La deuxième chose est que nous pouvons choisir pour chacune des régions, à l'aide du code HTML, les balises appropriées de même que des attributs si cela est pertinent.

Transformation  avant et après

Anciennement (HTML4), un pied de page se codait comme suit :

 <div class="footer">
 <!-- contenu du pied de page -->
 </div> <!-- #footer -->

Avec HTML5, nous pouvons maintenant coder ce même pied de page de la manière suivante :

 <footer>
 <!-- contenu du pied de page -->
 </footer>

Maintenant que nous avons ces nouvelles pages modèles installées dans le dossier minimi, notre code source pour toutes les pages devrait utiliser ces nouveaux éléments. Vous pouvez télécharger le thème minimi ici. Dans un prochain article, nous verrons comment ajouter d'autres éléments propres à HTML5 (<nav>, <article>, etc.).

Vous voulez en apprendre encore plus?

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

Je veux ce guide.