alainericgauthier.com

Drupal 7 vers HTML5, suite et fin...

Dans la construction du thème minimi, j'ai choisi l'approche qui va du général au particulier. Les premiers articles portaient sur l'ensemble de la page et graduellement, avec l'ajout des autres fichiers, des parties de plus en plus précises du code ont été modifiées avec des fichiers modèles. Il est possible d'aller encore plus loin dans le détail. Dans Drupal, les blocs sont des morceaux du site qui peuvent se mettre dans différentes régions d'un page. Il y a aussi les nœuds, ce sont des blocs très importants puisqu'ils sont le contenu des pages. Lorsque ces nœuds sont des articles de blog, il viennent avec des commentaires. Tous ces éléments qui peuvent se trouver dans un page générée par Drupal peuvent avoir un fichier modèle.

Notez que ce thème ne tient pas compte de l'interface d'administration, si vous l'utilisez pour l'administration de votre site, vous risquez d'avoir de la difficulté à administrer votre site.

Le fichier block.tpl.php

Le fichier block.tpl.php s'applique à tous les blocs mais il est possible de viser des blocs particuliers.

Lorsqu'il n'y a pas un élément spécifique pour désigner la fonction d'un bloc, l'élément section est le plus approprié. C'est justement le cas du fichier block.tpl.php.

<section id="<?php print $block_html_id; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>&gt  
   <?php print render($title_prefix); ?>
          <?php if ($block->subject): ?>
               <h2<?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>
</section>

Remarques :

  • Les titres des blocs sont de niveau 2
  • Chaque bloc sera inclut dans un élément 'section', aura un attribut 'id' et un attribut 'class'.
  • Le contenu est inclut dans un élément 'div' pour le séparer du titre du bloc

Les menus

Comme chaque bloc d'une page web peut avoir une fonction particulière, il n'est pas raisonnable d'essayer de tous les baliser de manière sémantique. Mais il existe un type de bloc qui possède une fonction qu'on trouve sur la grande majorité des sites. Les créateurs de la norme HTML5 ont décidé de créer un élément pour le menu de navigation qui se trouve sur presque chaque page d'un site web. Le nom qui a été choisi pour cet élément est 'nav'. Pour ma part, j'ai décidé de l'appliquer au menu principal et au menu de l'usager. Le menu usager est selon moi une forme de navigation mais cette interprétation pourrait être discutable: C'est la beauté du HTML sémantique!

Les fichiers block--system--main-menu.tpl.php et block--system--user-menu.tpl.php sont traités de la même manière. Dans le  thème minimi, ces deux blocs sont particuliers car ils utilisent l'élément nav. Notez que ce ne sont pas tous les menus qui doivent utilser l'élément nav mais seulement les menus qui servent à la nagivation dans le site.

<nav id="<?php print $block_html_id; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>>
 
  <?php print render($title_prefix); ?>
<?php if ($block->subject): ?>
  <h2<?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>  </nav>

Remarques :

  • Le code est identique pour les deux fichiers.
  • Comme pour les autres blocs, les titres sont de niveaux 2.
  • Les liens du menus sont contenus dans un div, ce qui offre un bloc de plus pour contrôler la mise en forme avec CSS.

Le fichier node.tpl.php

Le fichier node.tpl.php permet de baliser le contenu des pages. La norme html5 définit l'élément article comme un conteneur pour une composition sur une page qui pourrait être distribuée indépendamment du site qui la contient.

L'élément article s'applique donc a une page d'un livre (book pour drupal), un 'post' dans un forum, un article de blog, un commentaire ou une page de base. Il faut donc penser à ce mot dans son sens le plus large possible et s'éloigner de l'analogie avec les journaux et les magasines (qui servent souvent de modèles aux sites web).

Pour être cohérent avec cette définition, les éléments articles peuvent contenir un entête (header) et un pied de page (footer). Traditionnellement, ces éléments n'étaient utilisés que pour les pages mêmes. HTML5 amène une autre façon de penser. Une page peut avoir un entête et un pied de page, de même que chaque section d'une page. C'est ce qui permet au contenu d'un page d'être diffusé sur d'autres plateformes. Prenez l'exemple du lecteur RSS, celui-ci prend le corps d'une page web mais retire la navigation, l'entête et le pied de page du site. Il ne garde que le contenu principal, cela n'empêche pas l'auteur d'ajouter des informations sur ce contenu comme les entêtes et les pieds de pages.

<article id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?>"<?php print $attributes; ?>><br />

  <header>
    <!-- code pour l'entête de l'article -->
  </header>

  <div class="content clearfix"<?php print $content_attributes; ?>>
    <!-- code pour le contenu de l'article -->
  </div>

  <footer>
    <!-- code pour le pied de page de l'article -->
  </footer>

</article>

Remarques :

  • Cet extrait de code ne montre que la structure globale
  • Remarquez l'utilisation des éléments header et footer.
  • Le contenu est inclu dans un div dont la classe est content.

comment.tpl.php

Le fichier comment.tpl.php utilise aussi l'élément article. Eh oui, selon HTML5 les commentaires sont aussi des articles.

<article class="<?php print $classes; ?>" <?php print $attributes; ?>>
 
  <?php print render($title_prefix); ?>
  <?php if ($title): ?>
    <h3<?php print $title_attributes; ?>>
      <?php print $title; ?>
    </h3>
  <?php endif; ?>
  <?php print render($title_suffix); ?>
 
 
  <footer>
    <?php if ($new): ?>
      <mark><?php print $new; ?></mark>
    <?php endif; ?>
    <span class="date"><?php print t('Published'); ?> <time pubdate><?php print $created; ?></time></span><br />
    <span class="changed">(<?php print t('Changed'); ?> <time pubdate><?php print $changed; ?></time>)</span><br />
     <span class="author"><?php print t('By'); ?> <?php print $author; ?></span><br />
    <?php print $permalink; ?>
  </footer>
 
 
 
  <div class="content"<?php print $content_attributes; ?>>
    <?php
      // We hide the comments and links now so that we can render them later.
      hide($content['links']);
      print render($content);
    ?>
 
    <?php if ($signature): ?>
      <aside class="user-signature">
        <?php print $signature; ?>
      </aside>
    <?php endif; ?>
  </div>
 
 
  <?php print render($content['links']) ?>
</article>

Remarques :

  • Il n'y a pas d'élément header pour les commentaires, seulement l'élément footer
  • Dans la partie footer, remarquez l'usage de l'élément time pour les dates de créations et de modificaitons du commentaire
  • Il y a aussi un élément span avec la classe "author".

Note : la chaîne By pour l'auteur n'est pas traduite dans la version de Drupal que j'ai installée pour cette série. Pour la traduire, vous devez aller à /admin/config/regional/translate/translate, saisir le mot 'By' sans les guillemets dans le champs de recherche. Il y a beaucoup de chaîne qui commence par ce mot mais une seule contient ce mot uniquement, c'est celle-là qu'il faut modifier. 

comment-wrapper.tpl.php

Le fichier comment-wrapper.tpl.php permet de baliser la section commentaire de la section contenu d'un article. Le code pour cette partie de la page est très simple.

<section id="comments" class="<?php print $classes; ?>"<?php print $attributes; ?>>
 
  <h2><?php print t('Comments'); ?></h2>
 
  <?php print render($content['comments']); ?>
 
  <?php if ($content['comment_form']): ?>
    <h3><?php print t('Add new comment'); ?></h3>
    <?php print render($content['comment_form']); ?>
  <?php endif; ?>
 
</section>

Le thème est complet

En fait, pas vraiment puisqu'il y a toujours la possibilité d'aller plus loin dans le détail. Il serait difficile d'utiliser ce thème dans toutes les situations à cause du nombre limité de régions et le style réduit du code.

Voilà qui met fin à ma série sur la fabrication d'un thème Drupal 7 compatible avec HTML5. 

En bonus, j'inclue le fichier modèle pour le type de contenu audio que j'ai présenté dans ces deux articles.

  1. http://alainericgauthier.com/type_de_contenu_audio
  2. http://alainericgauthier.com/type_de_contenu_audio_modele

N'hésitez pas à utiliser le formulaire de contact pour me poser vos questions ou faire des suggestions.

Finalement, vous pouvez télécharger le thème minimi tel qu'il est à la fin de la série.

Vous voulez en apprendre encore plus?

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

Je veux ce guide.