Pour lire la 1ère partie, c'est ici

  1. Créer ou adapter le gabarit page.tpl.php

Ce fichier, qui doit être présent dans le dossier "templates" de votre thème, contient le code "html-php" de la page du site.
Dans cette partie, je vais documenter le fichier "page.tpl.php" de mon site.

  1. la section <header>

Elle se traduit par l'affichage de l'entête de chaque page du site.
On pourrait se contenter de cette ligne de code :

<?php print render($page); ?>

qui affiche tous les blocs que vous placez dans cette région.

Mais on peut faire mieux ...

<header role="banner" class="branding clearfix">
  <!-- #logo -->
  ?php if ($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> 
      <?php endif; ?>
<!-- End of #logo -->
<!--  #le nom et le slogan -->
 <?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; ?>
<!-- End of #lle nom et le slogan -->
       <!-- / afficher tous les menus" -->
        <nav role="menu-principal">
        <?php if ($primary_nav): print $primary_nav; endif; ?>
        </nav>
        <nav role="menu-secondaire">
        <?php if ($secondary_nav): print $secondary_nav; endif; ?>
        </nav>
     <!-- / afficher tous les blocs qui ont été assignés à la section "header" -->
      <?php print render($page); ?>    </header>

Entre les éléments #logo et en dof #logo figure le code html ( et le php embarqué) qui gère l'affichage du logo ( variable $logo). Si le logo est défini (case logo cochée dans les paramètres globaux d'appparence du site), il sera affiché sous la forme d'une image cliquable  balise : <a href> <img src>. Notons la génération de l' identifiant pour la feuille  CSS (id ="logo").

Entre les éléments #le nom_et le_slogan et endof ##le nom_et le_slogan figure le code  qui gère, s'il est défini, l'affichage du titre ( variable $site-name) ( style titre : balise <h1> et sous forme d'un lien hypertexte) et du slogan (variable $site_slogan) ( style sous-titre : balise <h2>). Remarquez les identifiants CSS générés.

Entre les balises <nav> et </nav> figure le code  qui affiche le menu principal (variable $primary-nav) et le menu-secondaire (variable $secondary_nav).

  1. la section <section "role contenu">

Cette section se décompose en 3 parties ( une pour chacune des colonnes qui forme le contenu de la page)..

    <section role="contenu">
    <!-- voir la section colonne gauche ci-dessous -->
    <!-- voir la section article role="main" ci-dessous -->
    <!-- voir la section colonne droite ci-dessous -->
    </section> <!-- /contenu -->

Ce balisage n'a d'intérêt que pour la CSS et permettra d'assurer l'affichage de la colonne gauche comme 1er bloc à gauche de la page.

  1.    la colonne gauche

<!-- /colonne-gauche ( region--sidebar-first )-->
       <?php print render($page); ?>
     <!-- / fin colonne-gauche ( region--sidebar-first) -->

Ce code affiche la code de la région "colonne gauche". Celui-ci est décrit dans le gabarit region--sidebar-first.tpl.php. Cliquez_ici pour en voir le détail.

  1. la section <article role="main">

Cette section se décompose en trois sous-sections:

  • la section <nav role="les-tabulations"> qui affiche le chapeau de l' article ( et la navigation intégrée pour les utilisateurs autorisés) ;
  • la section role ="info-admin" qui affiche certains informations pour un administrateur du site ;
  • la section role="contenu-article" qui affiche le corps de l'article.

La section <nav role="les-tabulations"> débute par l'affichage du fil d'ariane ( variable $breadcrumb) et poursuit par l'affichage du titre de l'article (variable $title) et ses préfixe, suffixe.

S"il ya des onglets ( variable $tabs), on les affiche.

      <article role="main">
           <a id="main-content"></a>       
           <nav role="les-tabulations">
           <?php print $breadcrumb; ?>
           <!-- ???  highlihted ?????????? -->
           <!-- Page title -->
           <?php print render($title_prefix); ?>
           <?php if ($title): ?>
                  <h1 class="title" id="page-title">
                  <?php print $title; ?>
                  </h1>
           <?php endif; ?>
           <?php print render($title_suffix); ?>
          <!-- les onglets ----- -->
           <?php if ($tabs): ?>
                  <div class="tabs">
                  <?php print render($tabs); ?>
                  </div>
           <?php endif; ?>
          <?php if ($action_links): ?>
                <ul class="action-links">
                <?php print render($action_links); ?>
                </ul>
         <?php endif; ?>      
        </nav>  <!-- les tabulations -->
         <!-- Informations adminstratives -->
        <?php print $messages; ?>
        <!-- Help text for admin page -->
        <?php print render($page); ?>
        <section role="contenu-article">
        <?php print render($page); ?>
        </section> <!-- /contenu-article -->
     </article> <!-- /main -->

  1. la section <colonne droite>

     <!-- /colonne-droite ( region--sidebar-second) -->
      <?php print render($page); ?>
       <!-- / fin colonne-droite ( region--sidebar-second) -->

Ce code affiche la code de la région "colonne droite". Celui-ci est décrit dans le gabarit region--sidebar-second.tpl.php. Cliquez_ici pour en voir le détail.

  1. la section <footer>

<footer role="pied-de-page">
    <?php print render($page); ?>
    </footer>

Ce code affiche les éléments du pied de page.