Construction d'un thème Drupal 7 : un aperçu de quelques changements importants (part 1)

Un aperçu de quelques changements importants à prendre en compte pour la construction d'un thème sous Drupal 7 et/ou de la conversion D6 vers D7. Cet article reprend les éléments de la documentation officielle sur drupal.org : Converting 6.x themes to 7.x.

La liste des changements est longue, je n'aborde pas tous les éléments et tâcherai de mettre à jour cet article au fur et à mesure de mes découvertes :-) et de la finalisation de la documentation officielle.

Les menus Primary links et Secondary links changent de noms

Dans Drupal 7, les menus Primary links et Secondary links changent et deviennent respectivement Main menu ($main_menu) et Secondary menu ($secondary_menu).
La config des ces menus se trouve dans /admin/structure/menu/settings (D7).

Dans D6, on avait ceci :
(exemple via le page.tpl.php de mon thème FuelDeLuxe)

<?php if (!empty($primary_links)): ?>
 <div id="primary">
  <div class="region-content clearfix">
   <?php echo theme('links', $primary_links, array('class' => 'links primary-links clearfix')); ?>
  </div>
 </div>
<?php endif; ?>

<?php if (!empty($secondary_links)): ?>
 <div id="secondary">
  <div class="region-content clearfix">
  <?php echo theme('links', $secondary_links, array('class' => 'links secondary-links clearfix')); ?>
 </div>
<?php endif; ?>

Maintenant dans D7:
(exemple du page.tpl.php de Bartik, theme frontend par défaut de D7)

<?php if ($main_menu): ?>
 <div id="main-menu" class="navigation">
   <?php print theme('links__system_main_menu', array(
    'links' => $main_menu,
    'attributes' => array(
     'id' => 'main-menu-links',
     'class' => array('links', 'clearfix'),
     ),
    'heading' => array(
     'text' => t('Main menu'),
     'level' => 'h2',
     'class' => array('element-invisible'),
     ),
   )); ?>
 </div> <!-- /#main-menu -->
<?php endif; ?>

<?php if ($secondary_menu): ?>
 <div id="secondary-menu" class="navigation">
  <?php print theme('links__system_secondary_menu', array(
   'links' => $secondary_menu,
   'attributes' => array(
    'id' => 'secondary-menu-links',
    'class' => array('links', 'clearfix'),
    ),
   'heading' => array(
    'text' => t('Secondary menu'),
    'level' => 'h2',
    'class' => array('element-invisible'),
    ),
  )); ?>
 </div> <!-- /#secondary-menu -->
<?php endif; ?>

NB: A noter l'utilisation, dans Bartik, de la Class CSS .element-invisible intégrée au Core D7.
Elle permet ici de cacher les titres des menus (= les valeurs des heading dans l'array), tout en restant "SEO friendly".

.element-invisible {
        clip:rect(1px, 1px, 1px, 1px);
        position:absolute !important;
        }

N'hésitez pas à explorer les templates de référence dans l'API :

• modules/system/page.tpl.php : http://api.drupal.org/api/drupal/modules--system--page.tpl.php/7
• themes/bartik/templates/page.tpl.php : http://api.drupal.org/api/drupal/modules--system--page.tpl.php/7/source

De nouveaux ID pour les blocs Core

Les blocs fournis par défaut ont de nouveaux ID plus "évocateurs" :

Recent blog posts
Old CSS ID (Drupal 6): block-blog-0
New CSS ID (Drupal 7): block-blog-recent

Book navigation
Old CSS ID (Drupal 6): block-book-0
New CSS ID (Drupal 7): block-book-navigation

Recent comments
Old CSS ID (Drupal 6): block-comment-0
New CSS ID (Drupal 7): block-comment-recent

Active forum topics
Old CSS ID (Drupal 6): block-forum-0
New CSS ID (Drupal 7): block-forum-active

New forum topics
Old CSS ID (Drupal 6): block-forum-1
New CSS ID (Drupal 7): block-forum-new

Language switcher
Old CSS ID (Drupal 6): block-locale-0
New CSS ID (Drupal 7): block-locale-language-switcher

Syndicate
Old CSS ID (Drupal 6): block-node-0
New CSS ID (Drupal 7): block-node-syndicate

Most recent poll
Old CSS ID (Drupal 6): block-poll-0
New CSS ID (Drupal 7): block-poll-recent

Author information
Old CSS ID (Drupal 6): block-profile-0
New CSS ID (Drupal 7): block-profile-author-information

Search form
Old CSS ID (Drupal 6): block-search-0
New CSS ID (Drupal 7): block-search-form

Popular content
Old CSS ID (Drupal 6): block-statistics-0
New CSS ID (Drupal 7): block-statistics-popular

Powered by Drupal
Old CSS ID (Drupal 6): block-system-0
New CSS ID (Drupal 7): block-system-powered-by

User login
Old CSS ID (Drupal 6): block-user-0
New CSS ID (Drupal 7): block-user-login

Navigation
Old CSS ID (Drupal 6): block-user-1
New CSS ID (Drupal 7): block-system-navigation

Who's new
Old CSS ID (Drupal 6): block-user-2
New CSS ID (Drupal 7): block-user-new

Who's online
Old CSS ID (Drupal 6): block-user-3
New CSS ID (Drupal 7): block-user-online

Infos : http://drupal.org/node/778884

La class .clear-block devient .clearfix

La class CSS .clear-block de D6 devient .clearfix, une nouvelle appelation bien connue des thèmeurs...

Voici ce qu'elle nous donne :
(voir dans /modules/system/system.css, ligne 400, tout en bas)

/*
** Markup free clearing
** Details: http://perishablepress.com/press/2009/12/06/new-clearfix-hack
*/
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* IE6 */
* html .clearfix {
  height: 1%;
}
/* IE7 */
*:first-child + html .clearfix {
  min-height: 1%;
}

Je vous donne, pour info, la version "clearfix" qui j'utilise personnellement :

/** Clear Floats Without Structural Markup: 
---------------------------------
*  http://www.positioniseverything.net/easyclearing.html
*/
.clearfix {
        display: inline-block;
}

.clearfix:after {
        clear: both;
        display: block;
        font-size: 0;
        content: " ";
        height: 0;
        visibility: hidden;
}

/* Hides from IE-mac \*/
* html .clearfix {
        height: 1%;
}

.clearfix {
        display: block;
}
/* End hide from IE-mac */

Une région pour l'affichage de la "Mission"

L'affichage de la "Mission du site"" doit désormais être propulsée via une région et la variable $mission de D6 disparaît.

Dans D6 on avait :

// dans le .info du thème
features[] = mission
      
// dans page.tpl.php
<?php print $mission; ?>     

Dans D7, il est conseillé de créer une region nommée Highlighted et de l'utiliser pour afficher la mission du site.
C'est donc à vous de créer tout ceci et de créer un bloc assigné à cette region. A vous donc de placer cette region selon votre souhait dans le template de page :
(exemple dans le page.tpl.php de Bartik)

// dans le .info, on déclare la region
regions[highlighted] = Highlighted

// dans page.tpl.php
<?php if ($page['highlighted']): ?>
 <div id="highlighted">
  <?php print render($page['highlighted']); ?>
 </div>
<?php endif; ?>

Infos : http://drupal.org/node/779016

Une region pour l'affichage des textes d'aides

L'affichage des textes d'aides ne se fait plus dans D7 via la variable $help.
Une region est désormais implantée dans le core pour cela, il vous suffit de déclarer cette region dans votre .info. A vous ensuite de placer cette region selon votre souhait dans le template de page :

// dans le .info du thème, on déclare la region
regions[help] = Help
      
// dans le page.tpl.php, exemple de Bartik
<?php print render($page['help']); ?>     

Une fois ceci fait, rendez-vous sur la page de config des blocks admin/structure/block, et assignez le block System help à la region Help :

Infos : http://drupal.org/node/448784

Supresssion du "Message de pied de page"

Le Message de pied de page, à configurer sur D6 dans admin/settings/site-information est supprimé.

Dans D7, il n'y a donc plus de variable $footer_message, c'est pas plus mal, ça servait à rien du tout ...

Le contenu principal d'une page est propulsé par une region

Voilà qui est Good. Au début, ça fait bizarre, mais on s'y fait vite : le contenu principal d'une page est désormais affiché par une region à part entière

Dans D6, on avait simplement dans le template de page :

<?php print $content; ?>     

Maintennant dans D7 :

// dans le .info du thème, on déclare la region, IMPORTANT !
regions[content] = Content
      
// dans le page.tpl.php, exemple de Bartik
<?php print render($page['content']); ?>    

Une fois ceci fait, rendez-vous sur la page de config des blocks admin/structure/block, et assignez le block Main page content à la region Content :

Vous noterez que le block Main page content est le seul qui doit être obligatoirement assigné à une region.
Info/issue : http://drupal.org/node/428744

Les "Box" disparaissent

Les templates de "box", utilisés dans D6 dans les commentaires et les résultats de recherche, disparaissent. Adieu box.tpl.php

The search results listings are now themed with a theme_search_results_listing() theme function and the comment form box is themed with a theme_comment_form_box() theme function.

Infos : http://drupal.org/node/779002

Une variable $classes pour les classes CSS dynamiques

Dans D6, on connaissait la fameuse $body_classes, disponible dans les templates de pages.
Si on voulait faire pareil pour les templates de node, il fallait créer soi-même une variable (ex : $node_classes) dans un prepocess_node, etc ...

// $body_classes: A set of CSS classes for the BODY tag. This contains flags
// indicating the current layout (multiple columns, single column), the current
// path, whether the user is logged in, and so on.
<body class="<?php echo $body_classes; ?>">
...

Dans Drupal 7 on a maintenant une variable $classes disponible dans tous les templates et qui génère différentes classes CSS produites par les modules core. On va pouvoir, via différents preprocess de notre choix, "alimenter" cette variable avec des classes custom supplémentaires. On utilisera toujours la même procédure, D7 se chargeant par la suite de "réorganiser" toutes les classes comme il faut :-) :

<?php
// exemple dans un preprocess_node
function mytheme_preprocess_node(&$vars) {
  // Add a striping class.
  $vars['classes_array'][] = 'node-' . $vars['zebra'];
}
?>

Voici quelques classes custom supplémentaires dans différents preprocess (à mettre dans un template.php à la racine de votre thème) :

<?php
//******************  _preprocess_page
function mytheme_preprocess_page(&$vars, $hook) {

  // Adding classes wether #navigation is here or not
  if (!empty($vars['main_menu']) or !empty($vars['sub_menu'])) {
    $vars['classes_array'][] = 'with-navigation';
  }
  if (!empty($vars['secondary_menu'])) {
    $vars['classes_array'][] = 'with-subnav';
  }  

} // end preprocess_page

//******************  _preprocess_node
function mytheme_preprocess_node(&$vars) {
  // Add a striping class.
  $vars['classes_array'][] = 'node-' . $vars['zebra'];

} // end preprocess_node

//******************  _preprocess_block 
function mytheme_preprocess_block(&$vars, $hook) {
  // Add a striping class.
  $vars['classes_array'][] = 'block-' . $vars['zebra'];

} // end preprocess_block

// "mytheme" est à remplacer par le nom de votre thème !
//pour rappel : pas de balise de fermeture PHP dans le template.php !!

Nommez vos fonctions correctement dans template.php

Les fonctions (relatives au moteur de template) mises dans template.php doivent désormais avoir le même nom que votre thème. Dans D6, malgré que cela soit déconseillé, on pouvait se permettre des function phptemplate_preprocess_node(&$vars, $hook).

Dans D7, il faudra désormais des function mytheme_preprocess_node(&$vars) ou des function MyThemeName_preprocess_node(&$vars).
Tout ça pour vous dire que, si vous trouvez ce genre de nomenclature sur le web, mytheme et MyThemeName sont à remplacer par le nom de votre thème (le nom machine).
Infos : http://drupal.org/node/422116

Average :

3.5

Average: 3.5 (8 votes)

Your rating : Select ratingAnnulerMauvaisMoyenBonTrès bonExcellent

Your rating: Aucun