Voici un problème relativement simple à formuler, mais dont la solution ne saute pas aux yeux. Après avoir parcouru en vain les arcanes du Web francophone puis anglophone, nous avons développé notre propre technique, que nous présentons ici.

Nota. Dans notre présentation, par commodité, O désignera une image, tandis que X désignera une espace. (C’est notre modeste contribution à l’Ascii Art !) Nous partirons aussi du postulat qu’une galerie correspond à des images de petites tailles alignées les unes avec les autres sur une page, dont leur largeur (et, idéalement, leur hauteur !) est équivalente.

Ainsi, pour cinq images, l’affichage sur une colonne s’effectue ainsi…

OXOXOXOXO

Pour les images restantes, le navigateur renvoie logiquement, sauf instruction contraire, les images restantes les unes à la suite des autres…

S’il reste quatre images…

OXOXOXOXX

S’il reste trois images…

OXOXOXXXX

S’il reste deux images…

OXOXXXXXX

S’il reste une image…

OXXXXXXXX

Or, ce résultat ne nous semble pas satisfaisant sur le plan visuel, car nous avons une fâcheuse tendance à cultiver la symétrie (… qui peut expliquer certains choix esthétiques… étonnants !).

Nous voulons obtenir l’affichage suivant…

S’il reste quatre images…

XOXOXOXOX

S’il reste trois images…

XXOXOXOXX

S’il reste deux images…

XXXOXOXXX

S’il reste une image…

XXXXOXXXX

Ainsi l’affichage nous semblera harmonieux, puisque les espaces seront équilibrés. Il ressemblera à :

OXOXOXOXO
XOXOXOXOX
XXOXOXOXX
XXXOXOXXX
XXXXOXXXX

Autrement posé, il s’agit de styler différemment les lignes complètes et la ligne incomplète, orpheline.

Aussi allons-nous motoriser les images. Nous utilisons Php, mais le raisonnement peut être transposé à d’autres langages de programmation.

Programmons les images

Retournons à l’école pour un raisonnement arithmétique simple… Le nombre d’images à afficher (inconnu à l’avance – sinon, l’effort serait inutile !) est-il divisible par 3, dans l’ensemble des nombres entiers Z ? Dans l’affirmative, des lignes pleines s’afficheront. Dans la négative, quel sera le reste de la division ? 2 ou 1.

Ainsi…

• … pour 58 images, 58/3 = 19 images, reste 1 image ;
• … pour 104 images, 104/3 = 34 images, restent 2 images.

(Pour une ligne de cinq images, le même raisonnement conduirait à avoir cinq cas possibles.)

Voici un exemple de code…

<?php
$images = array('paris.jpg', 'marseille.jpg', 'lyon.jpg', 'lille.jpg', 'strasbourg.jpg');
$result = count($images);
$target = 3;
/* La "cible" (c'est-à-dire une ligne "pleine") est de trois images */
$orphans = fmod($result, $target); // "orphans" comme "orphelines"
/* 'fmod' retourne le reste d'une division */
$total = ($result - $orphans); // "total" pour une ligne pleine
foreach($images as $key => $image)
/* Nous utilisons la deuxième forme d'une boucle 'foreach' qui permet d'utiliser la valeur $key utile dans les calculs. */
{
  if (($key + 1) <= $total) // Pour trois images
/* La valeur + 1 permet d'éviter que le résultat soit égal à zéro à la fin de la boucle. Nous aurions pu assigner la valeur au début des instructions... pour ne pas avoir à la ré-écrire ensuite dans les deux conditions suivantes ! Tant que le total n'est pas dépassé, l'instruction s'applique. */
    {
      echo '<dl class="gallery_c">'; // On créée la liste de définition "gallery_c" (voir ci-dessous)
    }
  else
    {
    if ((($key + 1) > $total) && ($orphans == 2)) // Pour deux images
/* La première condition permet de vérifier que le total est dépassé. S'il ne reste plus de lignes pleines et que le nombre d'images restantes est de deux, l'instruction s'applique. */
      {
        echo '<dl class="gallery_b">'; // On créée la liste de définition "gallery_b", (voir ci-dessous)
      }
    if ((($key + 1) > $total) && ($orphans == 1)) // Pour une image
/* La première condition permet de vérifier que le total est dépassé. S'il ne reste plus de lignes pleines et que le nombre d'image restante est de une, l'instruction s'applique. */
      {
        echo '<dl class="gallery_a">'; // On créée la liste de définition "gallery_a" (voir ci-dessous)
      }
  }
  echo $image;
/* La boucle 'foreach' affiche ensuite chaque image tour à tour. */
  echo '</dl>'; // On ferme la liste de définitions
}
?>

Ou sans les commentaires…

<?php
$images = array('paris.jpg', 'marseille.jpg', 'lyon.jpg', 'lille.jpg', 'strasbourg.jpg');
$result = count($images);
$target = 3;
$orphans = fmod($result, $target);
$total = ($result - $orphans);
foreach($images as $key => $image)
{
  if (($key + 1) <= $total)
    {
      echo '<dl class="gallery_c">';
    }
  else
    {
    if ((($key + 1) > $total) && ($orphans == 2))
      {
      echo '<dl class="gallery_b">';
    }
      }
    if ((($key + 1) > $total) && ($orphans == 1))
      {
        echo '<dl class="gallery_a">';
      }
  }
  echo $image;
  echo '</dl>';
}
?>

Les images ont été placées dans un tableau à titre didactique. Naturellement, en production, il faudra recourir à une méthode plus simple.

C’est pourquoi, nous présentons le code utilisé avec WordPress, mais qui peut être utilisé dans n’importe quel environnement…

<?php
$gallery_bottom = get_post_meta($post->ID, 'gallery_bottom', false);
/* Avec WordPress, 'get_post_meta' permet de récupérer le(s) enregistrements correspondant dans une table MySql. Ensuite, on retrouve l'interaction habituelle entre Php et MySql. Les enregistrements des images sont enregistrées dans une table sous la forme : source, titre, légende (optionnel), Copyright (optionnel)...
http://www.monsite.com/uploads/france.jpg,france,photo de la France,© Wikimedia Commons
http://www.monsite.com/uploads/suisse.jpg,suisse,photo de la Suisse,© Wikimedia Commons
http://www.monsite.com/uploads/portugal.jpg,portugal,photo du Portugal,© Wikimedia Commons
http://www.monsite.com/uploads/danemark.jpg,danemark,photo du Danemark,© Wikimedia Commons
*/
if ($gallery_bottom)
{
  $resulttgb = count($gallery_bottom); // "tgb" comme "Temporary Gallery Bottom" pour individualiser le processus
  $targettgb = 3;
  $orphanstgb = fmod($resulttgb, $targettgb);
  $totaltgb = ($resulttgb - $orphanstgb);
  foreach($gallery_bottom as $key => $tgb)
  {
    list($fulltgb, $alttgb, $txtatgb, $txtbtgb) = explode(",", $tgb);
    /* On coupe la chaîne en segments pour récupérer chaque élément. */
    $extfull = array(".jpg", ".jpeg", ".png", ".gif");
    $extthumb = array("-100x100.jpg", "-100x100.jpeg", "-100x100.png", "-100x100.gif");
    /* Chaque élément est remplacé dans l'ordre des deux tableaux. On convertit le nom de l'image pour afficher le nom de sa vignette, et éviter une double saisie de l'utilisateur. Naturellement, les images "-100x100.jpg" sont déjà stockées ! Ainsi, 'france.jpg' devient 'france-100x100.jpg'. */
    $srctgb = str_ireplace($extfull, $extthumb, $fulltgb);
    /* 'str_ireplace' n'est pas sensible à la casse, et permet, par exemple, de transformer ".GIF" en ".gif". */
    {
      if (($key + 1) <= $totaltgb)
      {
        echo '<dl class="gallery_c">';
      }
      else
      {
        if ((($key + 1) > $totaltgb) && ($orphanstgb == 2))
        {
          echo '<dl class="gallery_b">';
        }
        if ((($key + 1) > $totaltgb) && ($orphanstgb == 1))
        {
          echo '<dl class="gallery_a">';
        }
      }
      echo '<dt><a href="'.$fulltgb.'" title="'.$alttgb.'"><img src="'.$srctgb.'" alt="'.$alttgb.'" title="'.$alttgb.'" /></a></dt>';
      /* On concatène chaque élément récupéré tout à l'heure avec 'explode' dans une chaîne Html pour provoquer l'affichage de la vignette et du lien vers l'image. Par commodité, on utilise la même valeur pour les champs 'alt' et 'title'.*/
      if ($txtatgb) // Puisque le champ est optionnel
      {
        echo '<dd>'.$txtatgb.'</dd>';
      }
      if ($txtbtgb) // Puisque le champ est optionnel
      {
        echo '<dd>'.$txtbtgb.'</dd>';
      }
      echo '</dl>';
    }
  }
  echo '<div class="spacer"></div>'; // Pour éviter le flottement d'un élément adjacent avec la propriété Css 'clear: both;' chère à Mark Newhouse
}
?>

Ou sans les commentaires…

<?php
$gallery_bottom = get_post_meta($post->ID, 'gallery_bottom', false);
if ($gallery_bottom)
{
  $resulttgb = count($gallery_bottom);
  $targettgb = 3;
  $orphanstgb = fmod($resulttgb, $targettgb);
  $totaltgb = ($resulttgb - $orphanstgb);
  foreach($gallery_bottom as $key => $tgb)
  {
     list($fulltgb, $alttgb, $txtatgb, $txtbtgb) = explode(",", $tgb);
    $extfull = array(".jpg", ".jpeg", ".png", ".gif");
    $extthumb = array("-100x100.jpg", "-100x100.jpeg",     "-100x100.png", "-100x100.gif");
    $srctgb = str_ireplace($extfull, $extthumb, $fulltgb);
    {
      if (($key + 1) <= $totaltgb)
      {
        echo '<dl class="gallery_c">';
      }
      else
      {
        if ((($key + 1) > $totaltgb) && ($orphanstgb == 2))
        {
          echo '<dl class="gallery_b">';
        }
        if ((($key + 1) > $totaltgb) && ($orphanstgb == 1))
        {
          echo '<dl class="gallery_a">';
        }
      }
      echo '<dt><a href="'.$fulltgb.'" title="'.$alttgb.'"><img src="'.$srctgb.'" alt="'.$alttgb.'" title="'.$alttgb.'" /></a></dt>';
      if ($txtatgb)
      {
        echo '<dd>'.$txtatgb.'</dd>';
      }
      if ($txtbtgb)
      {
        echo '<dd>'.$txtbtgb.'</dd>';
      }
        echo '</dl>';
      }
 }
 echo '<div class="spacer"></div>';
}
?>

Nota. Depuis que WordPress intègre la gestion des vignettes, nous n’utilisons plus les champs personnalisés !

Stylons les images

Nous avons utilisé les listes de définition pour afficher les images. La structure de ces listes est commode, grâce à l’attribut <dd>, optionnel, qui permet ou non d’ajouter une légende, en restant compatible Xhtml Strict. Un exemple d’utilisation est donné dans l’excellent article Les listes de définitions : mal utilisées ou mal comprises ?

Si une ligne est complète, c’est-à-dire comporte trois images, l’attribut gallery_c est utilisé pour les images. Si une ligne est incomplète et comporte deux images, l’attribut gallery_b est utilisé pour les images. Si une ligne est incomplète et comporte une image, l’attribut gallery_c est utilisé pour l’image.

dl.gallery_a, dl.gallery_b {
  float: left /* Inutile de provoquer le flottement de la dernière galerie, puisqu'il n'y a qu'une image ! */
}
dl.gallery_a dt, dl.gallery_b dt, dl.gallery_c dt, dl.gallery_a dd, dl.gallery_b dd, dl.gallery_c dd {
  text-align: center
}
dl.gallery_a dd, dl.gallery_b dd, dl.gallery_c dd {
  font-weight: bold
}
dl.gallery_a {
  width: 33.33% /* Nous fûmes longtemps persuadé que la version 5.5 d'Internet Explorer interprétait mal les décimales, à tort ! */
}
dl.gallery_b {
  width: 50%
}
dl.gallery_c {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%
}


Avec les largeurs fixes, il devient plus délicat d’aligner correctement les images, et le code est nettement moins élégant.

Ainsi, soit une feuille de style qui comporte les propriétés suivantes, sachant que la largeur du conteneur est de 625 pixels et celle d’une image est de 129 pixels avec ses bordures et ses marges…

dl.gallery_a, dl.gallery_b, dl.gallery_c {
  float: left
}
dl.gallery_a {
  margin: 15px 248px /* 248 pixels + 129 pixels + 248 pixels = 625 pixels */
}
dl.gallery_b {
  margin: 15px 91px /* 91 pixels + 129 pixels + 91 pixels + 91 pixels + 129 pixels + 91 pixels = 622 pixels - on doit se contenter de cette approximation - 91 pixels + 91 pixels, puisque les marges se juxtaposent */
}
dl.gallery_c {
  margin: 15px 39px; /* 39 pixels + 129 pixels + 39 pixels + 39 pixels + 129 pixels + 39 pixels + 39 pixels + 129 pixels + 39 pixels = 621 pixels - on doit se contenter de cette approximation - 39 pixels + 39 pixels, puisque les marges se juxtaposent */
}


Nota. Pour déterminer facilement, la largeur des espaces entre les images, il suffit d’appliquer le calcul :

(((largeur du conteneur ou de la page - (nombre d'images x largeur de chaque image))/((nombre d'images + 1) x 2)))

Par exemple, la largeur d’un conteneur est de 618 pixels (cette valeur simple est arbitraire !). Nous voulons y placer trois images de 150 pixels.

• Largeur du conteneur ou de la page : 618 pixels.
• Nombre d’images : 3.
• Largeur de chaque image : 150 pixels.
• 150 pixels x 3 images = 450 pixels.
• Nombre d’espaces nécessaires : 3 images + 1.
• Soient (((618 – (3 x 150))/((3 + 1) x 2))) = 21.
• Soient (((618 pixels – (3 images x 150 pixels))/((3 espaces + 1) x 2))) = 21 pixels.

Nous avons utilisé des listes de définitions pour centrer nos images, mais notre solution peut s’adapter à d’autres types de balises et de contenu.

Lors de nos débuts avec WordPress, nous avions essayé divers plugicels, comme Image Manager ou Nextgen Gallery, mais ces solutions semblaient lourdes à mettre en œuvre au quotidien. Aussi avions-nous décidé de nous passer d’images dans nos articles, d’autant que la production de photographies est coûteuse… à moins de les voler !

Or, voilà quelques jours, nous avons décidé de réaliser pour un photographe amateur un Photoblog sous WordPress. Comme nous détestons la facilité (!), nous avons décidé de ne pas recourir à une solution prête à l’emploi… Nous ne mesurions pas l’ampleur de la tâche !

Nous ne nous appesantirons pas ici sur la mise au point, somme toute complexe, du thème. En revanche, nous détaillerons comment gérer spécifiquement les images dans un thème. Le processus passe par :

• la modification de la feuille de style,
• l’ajout de fichiers spécifiques au thème,
• l’ajout d’une extension pour gérer correctement, sur le plan de l’affichage comme de la sémantique, les galeries,
• la syntaxe permettant de gérer les images.

Modification de la feuille de style

Le code permettant de gérer l’affichage des images dans un thème est largement diffusé. Pour mémoire, la syntaxe standard (mais dont la syntaxe Css est invalide !) à incorporer dans la feuille de style est :

/*-------------Images-----------------*/
p img {
  padding: 0;
  max-width: 100%
}
img.centered {
  display: block;
  margin-left: auto;
  margin-right: auto
}
img.alignright {
  padding: 4px;
  margin: 0 0 2px 7px;
  display: inline
}
img.alignleft {
  padding: 4px;
  margin: 0 7px 2px 0;
  display: inline
}
.alignright {
  float: right
}
.alignleft {
  float: left
}
/* Begin Images */
p img {
  padding: 0;
  max-width: 100%
}
img.centered {
  display: block;
  margin-left: auto;
  margin-right: auto
}
img.alignright {
  padding: 4px;
  margin: 0 0 2px 7px;
  display: inline
}
img.alignleft {
  padding: 4px;
  margin: 0 7px 2px 0;
  display: inline
}
.alignright {
  float: right
}
.alignleft {
  float: left
}
/* End Images */
/* Captions */
.aligncenter, div.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto
}
.wp-caption {
  border: 1px solid #ddd;
  text-align: center;
  background-color: #f3f3f3;
  color: #000;/**/
  padding-top: 4px;
  margin: 10px;
  -moz-border-radius: 3px;
  -khtml-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px
}
.wp-caption img {
  margin: 0;
  padding: 0;
  border: 0 none
}
.wp-caption p.wp-caption-text {
  font-size: 11px;
  line-height: 17px;
  padding: 0 4px 5px;
  margin: 0
/* End captions */


En dépit de ce formatage, nous nous retrouvions avec un bogue : lorsque l’image d’un article était située après le texte, avec un alignement à gauche ou à droite, elle chevauchait les méta données gérées par la classe postemetada ainsi que l’article suivant. Eurêka ! Il suffisait d’appliquer un spacer, doté de la propriété clear, pour empêcher l’image d’être adjacente. En d’autres termes, il fallait écrire :

.postmetadata {
  clear: both


Ajout de fichiers spécifiques

Trois fichiers permettent de gérer les images dans un thème :

• image.php.
• attachment.php,
• index.php.

Dans la hiérarchie des modèles, WordPress va d’abord utiliser image.php, puis attachment.php et enfin index.php.

Faute d’avoir trouvé la documentation nécessaire, y compris en anglais, nous sommes parti de la dernière version de Kubrick pour ajouter et personnaliser les deux fichiers en fonction des caractéristiques de notre thème. : cette opération est plus fastidieuse que complexe et nous ne la détaillerons pas.

Emmanuel Gorgeon a écrit un article théorique fort intéressant sur la gestion des pièces jointes par WordPress.

Dans le fichier functions.php du thème, on peut limiter la taille des images à téléverser avec cette syntaxe :

<?php
// Uploads
$GLOBALS['content_width'] = 640;
?>

Ajouts d’une extension pour gérer une galerie

Nous nous sommes ensuite intéressé à l’ajout d’une galerie d’images dans un article… Nous avons été surpris : WordPress se présente comme un Sgc nativement respectueux des standards, mais l’affichage d’une galerie rend la page non valide Xhtml Strict !

Cependant, nous avons déniché une extension écrite par le célèbre Justin Tadlock, Cleaner WordPress Gallery Plugin. Ce plugiciel, d’une taille colossale de 3 Kilo-octets (!), permet d’afficher une galerie Xhtml Strict et d’ajouter un effet Lightbox (ou Slimbox) à ces images.

Il est surprenant que cette fonctionnalité ne soit pas incluse dans WordPress par défaut.

Syntaxe pour gérer les images

Il existe une syntaxe spécifique pour gérer les images, sous forme de code abrégée (shortcode pour les anglicistes !), comme l’enseigne le Codex. Les exemples présentés sont nombreux et devraient convenir aux novices comme aux chevronnés.

15/09/2009.

Nous laissons cet article en l’état cet article, pour mémoire : à l’usage, les services de 000webhost constituent une anarque, et fonctionnent plutôt mal, mais ils sont idéals pour héberger des sites expérimentaux ou poubelles. En cas de problème, les services payants de Hosting24 sont proposés, mais il ne valent guère mieux. Autant être prévenu !

</addendum>

Avec 000webhost, nous pensons avoir trouvé l’hébergeur idéal :

• 350 Mega-octets d’espace disque,
• 100 Giga-octets de bande passante,
• Php et MySql en version 5,
• activation immédiate du compte, y compris de l’accès Ftp et de la base MySql,
• hébergement en nom de domaine, ou en sous domaine avec une adresse comme http://chezmoi.site40.net,
• installation en un clic des plates-formes de weblogue (WordPress, Nucleus, b2evolution…), de Sgc (Drupal, Joomla, Typo3…) et cetera pour les moins chevronnés,
• haute disponibilité,
• sans publicité,
• serveur de mel,
• gratuit.

Autrement dit, ce service propose l’ensemble des fonctionnalités d’un hébergeur classique, mais il est gratuit. Le modèle économique repose sur les dons et, essentiellement, sur les souscriptions payantes à des services supplémentaires.

Les serveurs sont situés aux États-Unis d’Amérique, mais les temps de réponse sont comparables à ceux d’un hébergeur situé (au hasard…) en Allemagne !

L’assistance technique est limitée à un forum de discussion, mais semble aussi réactive que les hotliners des hébergements classiques à l’entendement parfois limité.

Cette offre est idéale pour débutants, par exemple sous WordPress : plutôt qu’installer une version du weblogue en local au risque de ne pas savoir exporter la base de données avec la mise en production, il est plus utile d’utiliser un serveur dès ses premiers pas.

Sont parfois à déplorer certaines sautes du serveur, qui durent le plus souvent quelques secondes. Cet écueil n’est guère gênant pour les sites amateurs.

Désormais, nous ne connaissons plus d’erreur 500 sur nos sites ni de problème d’allocation de mémoire Php. Notre vie de concepteur de sites a changé grâce à 000webhost !

De même, voulons-nous utiliser l’extension l’extension MCE Comments, qui propose une interface enrichie pour les commentaires des visiteurs. Internationalisation oblige, le correcteur d’orthographe activé par défaut pour la langue de Shakespeare.

Or, comme l’indique un débat non résolu récent sur le support francophone de WordPress, le correcteur d’orthographe de WordPress corrige par défaut la langue anglaise : comment y remédier ?

La solution que nous allons présenté ici fonctionne avec la version 2.6.1 de WordPress. Nous ne sommes pas partisan des modifications en dur des fichiers de WordPress, mais parfois nécessité fait loi !

Les fichiers à modifier sont :

• ../wp-includes/js/tinymce/tiny-mce-config.php,
• ../wp-includes/js/tinymce/Plugins/spellchecker/editor-Plugin.js.

Modifications à apporter dans tiny_mce_config.php

Dans tiny_mce_config.php, il convient de remplacer ligne no 67…

$mce_spellchecker_languages =
apply_filters('mce_spellchecker_languages','+English=en,Danish=da,
Dutch=nl,Finnish=fi,French=fr,German=de,Italian=it,
Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv');

par

$mce_spellchecker_languages =
apply_filters('mce_spellchecker_languages','English=en,Danish=da,
Dutch=nl,Finnish=fi,+French=fr,German=de,Italian=it,
Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv');

Autrement dit, il suffit juste de déplacer le symbole + devant French=FR.

Ces deux fichiers sont à remplacer dans l’installation de WordPress par Ftp.

Modifications à apporter dans editor-Plugin.js

Dans editor-Plugin.js, il convient de remplacer lignes no 78 et suivantes…

each(ed.getParam('spellchecker_languages', '+English=en,Danish=da,
Dutch=nl,Finnish=fi,French=fr, German=de,Italian=it,
Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv',
'hash'), function(v, k) {
if (k.indexOf('+') === 0) {
  k = k.substring(1);
  t.selectedLang = v;
}
t.languages[k] = v;
});

par

each(ed.getParam('spellchecker_languages','English=en,Danish=da,
Dutch=nl,Finnish=fi,+French=fr,German=de,Italian=it,
Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv',
'hash'), function(v, k) {
  if (k.indexOf('+') === 0) {
  k = k.substring(1);
  t.selectedLang = v;
}
t.languages[k] = v;
});

Là encore, il suffit juste de déplacer le symbole + devant French=FR.

Modifications à apporter dans l’extension TinyMce Comments

Dans TinyMCEComments.php, il suffit de remplacer la ligne 215…

$mcecomment_options['language'] = 'en';

par

$mcecomment_options['language'] = 'fr';

c’est-à-dire en par fr.

Ensuite, et pour être parfaitement exhaustif afin de satisfaire Jean-Yves (!), il faut transférer le fichier par Ftp, à moins d’effectuer la modification depuis l’éditeur d’extension de WordPress.

Si ces modifications sont faciles, il reste cependant un défaut auquel nous n’avons pas remédier. Le correcteur d’orthographe propose parfois certains équivalents accentués dans des caractères étranges, dont l’encodage n’est pas conforme.

Enfin, la traduction française sur l’icône du Spellchecker laisse à désirer. L’équipe française de traduction a pris le parti récemment de culbuter les apostrophes, qui ne sont pas correctement prises en charge par JavaScript ! (On retrouve le même écueil dans l’ajout d’image). Pour obtenir un résultat optimal, il convient donc aussi de remanier la traduction française.

• 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 !)