Dans WordPress, il est désormais possible d’ajouter des Widgets dans quatre zones :

• l’en-tête,
• le contenu,
• la colonne latérale,
• le pied de page.

Le nombre de zones n’est pas limité : on peut très bien imaginer un thème avec deux colonnes latérales de Widgets et un pied de page avec trois zones de Widgets !

La plupart des thèmes disponibles se contente de proposer une ou plusieurs colonnes latérales Widget Ready. Or, pour des raisons esthétiques ou de séméiologie (!), on peut vouloir afficher WordPress sur une colonne, avec les informations complémentaires dans le pied de page.

Nous allons donc voir ici, à travers quelques codes simples que nous avons développés (nous préfèrerons ici la pratique à la théorie, car c’est en forgeant qu’on devient forgeron), comment ajouter des Widgets à un thème dans une colonne ou dans un pied de page. Leur adaptation demandera un minimum d’effort, nous en sommes persuadé…

Dans notre premier thème, nous nous contenterons d’afficher une deuxième colonne latérale dans le corps de la page affichant des Widgets ; dans le deuxième, nous créerons un pied de page développé, qui comprendra trois zones de Widgets.

Précisions au préalable que la widgetization d’un thème demande la modification de trois fichiers :

• le fichier functions.php,
• la feuille de style que nous appellerons par commodité styles.css,
• le fichier de destination, sidebar.php ou footer.php, selon la zone de destination des widgets dans nos exemples présentés ici.

Le fichier functions.php

Le fichier functions.php comportera l’instruction suivante pour notre thème à la deuxième colonne :

<?php
if (function_exists('register_sidebar'))
register_sidebar(array('name'=>'barre',
  'before_widget' => '<div id="%1$s" class="widget_sidebar %2$s">',
  'after_widget' => '</div>',
  'before_title' => '<h2 class="widgettitle">',
  'after_title' => '</h2>',
));
?>

Ici, sidebar a été utilisé au singulier, car nous demandons la création d’une seule zone.

Pour notre pied de page développé, nous écrirons :

<?php
if (function_exists('register_sidebar'))
register_sidebars(3,array(
  'before_widget' => '<div id="%1$s" class="widget_sidebar %2$s">',
  'after_widget' => '</div>',
  'before_title' => '<h2 class="widgettitle">',
  'after_title' => '</h2>',
));

Ici, la déclaration est la même que précédemment, à l’exception du chiffre 3 qui précise le nombre de Sidebars attendu et de l’ajout de la marque du pluriel à sidebar.

Cette solution présente un inconvénient ergonomique : aucun nom ne sera donné à la zone, au risque de créer une confusion dans l’esprit de l’utilisateur. Aussi vaut-il mieux déclarer un par un chaque widget, en leur attribuant un nom significatif : par exemple, pied_gauche, pied_centre et pied_droit.

Le fichier style.css

Après avoir déclaré les Widgets et le formatage attendu, nous pouvons les styliser dans le fichier style.css comme suit dans notre thème à la colonne :

#sidebar {
/* 8 juin 2010. La syntaxe de cette feuille de style est laide comme les suivantes dans l'article, car nous avons progressé depuis la rédaction de l'article. Cependant, nous laissons l'article en l'état... qui pourra peut-être éclairer les débutants. */
  float: left;
  margin: 0 0 0 20px;
  padding: 0
  width: 320px
}
#sidebar ul {
  margin-bottom: 20px
}
#sidebar a {
  color: #000
}
.widget_sidebar {
  display: block;
  float: left;
  font-size:1em;
  margin: 0 0 5px 0;
  padding: 0;
  width: 320px
}
.widget_sidebar h1, .widget_sidebar h2, .widget_sidebar h3 {
  background: #ffe6e6;
  border-bottom: 1px solid #000;
  border-top: 1px solid #000;
  color: #fff;
  margin: 0;
  padding : 2px 0px 2px 5px
}
.widget_sidebar ul h2 {
  border-bottom: dashed 1px #000;
  font-size: 1.5em;
  padding-bottom: 10px
}
.widget_sidebar ul li {
  border-bottom: dashed 1px #000;
  font-size: 1.1em;
  line-height: 1.6em;
  list-style: none
}
.widget_sidebar ul ul li {
  border-bottom: dashed 1px #000
}
#sidebar a:hover {
  text-decoration: underline
}
.widget_sidebar p {
  font-size: 1em;
  padding: 10px;
  text-align: center
}
/*--------------Widgets--------------*/
li.widget h2 {
  color: #000;
}
/*-------------Calendar-----------------*/
#wp-calendar {
  margin-top: 5px;
  text-align: left;
  width: 180px
}
#wp-calendar th {
  margin-top: 5px
}
#wp-calendar caption {
  margin-top: 5px;
  font-size: 1.2em


Pour le pied de page, nous le styliserons ainsi…

#footer_sidebar {
  display: block;
  height: 260px;
  margin-left: 25px;
  margin-right: 25px;
  padding-top: 25px
}
#footer_sidebar_1 {
  float: left;
  margin-right: 25px;
  width: 180px
}
#footer_sidebar_2 {
  float: left;
  margin-right: 25px;
  width: 180px
}
#footer_sidebar_3 {
  float: left;
  width: 180px
}
#footer ul {
  margin-bottom: 20px
}
.widget_sidebar h1, .widget_sidebar h2, .widget_sidebar h3 {
  color: #000;
  border-bottom: 1px solid #000;
  border-top: 1px solid #000;
  margin: 0;
  padding: 2px 0px 2px 0px;
  text-align: center
}
.widget_sidebar ul h2 {
  border-bottom: dashed 1px #000;
  font-size: 1.5em;
  padding-bottom: 10px
}
.widget_sidebar ul li {
  border-bottom: dashed 1px #000;
  font-size: 1.1em;
  list-style: none;
  line-height: 1.6em
}
.widget_sidebar ul ul li {
  border-bottom: dashed 1px #000
}
#sidebar a:hover {
  text-decoration: underline
}
.widget_sidebar p {
  color: #000;
  font-size: 1em;
  padding: 10px;
  text-align: center
}
/*--------------Widgets--------------*/
li.widget h2 {
  color: #000
}
/*-------------Calendar-----------------*/
#wp-calendar {
  margin-top: 5px;
  text-align: left;
  width: 180px
}
#wp-calendar th {
  margin-top: 5px
}
#wp-calendar caption {
  font-size: 1.2em;
  margin-top: 5px


(Nota. Pour les exemples, nous nous sommes contenté de la couleur noire, qui n’affichera pas grand’chose !)

Déclaration des Widgets dans les fichiers de destination

Enfin, il reste à déclarer les Widgets dans la colonne de notre premier thème. Il suffit d’ajouter à notre fichier sidebar.php la déclaration…
<?php
if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar(1) ) : ?>
<?php endif; ?>

Pour notre fichier footer.php du deuxième thème, l’instruction sera :

<div id="footer_sidebar">
  <div id="footer_sidebar_1">
  <?php if (!function_exists('dynamic_sidebar')
|| !dynamic_sidebar(1)) : ?>
  <?php endif; ?>
  </div>
  <div id="footer_sidebar_2">
  <?php if (!function_exists('dynamic_sidebar')
|| !dynamic_sidebar(2)) : ?>
  <?php endif; ?>
  </div>
  <div id="footer_sidebar_3">
  <?php if (!function_exists('dynamic_sidebar')
|| !dynamic_sidebar(3)) : ?>
  <?php endif; ?>
  </div>
</div>

Traditionnellement, cette déclaration est placée en tête du fichier, le restant étant laissé vide. Néanmoins, il est possible de coder en dur certains éléments, et d’ajouter la déclaration à la suite. Ainsi, l’ajout de Widgets dans l’interface d’administration de WordPress n’affectera pas le codage.

À l’usage, nous avons noté un dysfonctionnement. Si trois zones de widgets sont prévues dans le pied de page à gauche, au centre et à droite, la zone centrale ne peut être laissée vide : sinon, les Widgets placés dans la zone de droite occupent le centre. Pour obvier à cet inconvénient, il suffit d’ajouter un Widget texte vide dans la zone centrale, avec un espace insécable.

(Nota. Nous prions nos lecteurs de nous excuser pour les anglicismes, plus ou moins incontournables en la matière !)