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 !

• les listes non-ordonnées,
• les listes ordonnées,
• les listes de définitions.

Les balises utilisées dans les listes ont les significations suivantes dans la langue de Shakespeare :

ul

Unordered Lists

ol

Ordered Lists

li

List items

dl

Definition Lists

dt

Definition Term

dl

Definition Description

Les listes ordonnées permettent une énumération simple. Les listes ordonnées appliquent un chiffre devant chaque item. Contrairement à leur nom, les listes de définition peuvent être aussi utilisées pour relier des élements entre eux.

Les listes débutent toujours le conteneur <ul> et finissent par </ul> pour une liste non-ordonnée ou <ol> et </ol>pour une liste ordonnée. À l’intérieur, on utilise les balises <li> et </li> . Les listes de définition se comportent différemment.

Les listes ordonnées

Exemple…

<ul>
<li>papier,</li>
<li>ciseaux,</li>
<li>cailloux.</li>
</ul>

Affichera…

• papier,
• ciseaux,
• cailloux.

La feuille de style gère le retrait du paragraphe et l’aspect de la puce.

Les listes non-ordonnées

Exemple…

<ol>
<li>papier,</li>
<li>ciseaux,</li>
<li>cailloux.</li>
</ol>

Affichera…

1. papier,
2. ciseaux,
3. cailloux.

La feuille de style gère le retrait de paragraphe et l’aspect de la numérotation. Pour des raisons esthétiques, on peut supprimer la numérotation et afficher normalement le texte. Pour autant, cette liste numérotée conserva sa valeur sémantique !

Imbrication de listes

Il est possible d’imbriquer des listes à l’infini pour des raisons logiques.

Exemple…

<ul>
<li>Aquitaine
<ul>
<li>Dordogne,</li>
<li>Gironde,</li>
<li>Landes,</li>
<li>Lot-et-Garonne,</li>
<li>Pyrénées-Atlantiques.</li>
</ul>
</li>
<li>Languedoc-Roussillon
<ul>
<li>Aude,</li>
<li>Gard,</li>
<li>Hérault,</li>
<li>Lozère,</li>
<li>Pyrénées-Orientales.</li>
</ul>
</li>
</ul>

Affichera…

• Aquitaine
  • Dordogne,
  • Gironde,
  • Landes,
  • Lot-et-Garonne,
  • Pyrénées-Atlantiques.
• Languedoc-Roussillon
  • Aude,
  • Gard,
  • Hérault,
  • Lozère,
  • Pyrénées-Orientales.

Pour simplifier la gestion des balises, la méthode consiste à indenter le code, car le risque d’erreur est grand.

De même, peut-on placer entre <li> et </li> des paragraphes, des images…

Exemple…

<ul>
<li>Papiers
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
</p>
</li>
<li>Ciseaux</li>
<li>Cailloux</li>
</ul>

Affichera

• Papiers

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.

• Ciseaux
• Cailloux

Listes de définition

Les listes de définition débutent toujours le conteneur <dl> et finissent par </dl>. À l’ntérieur, on utilise les balises <dt> et </dt> qui indique le terme à définir, puis <dd> et </dd> pour donner la définition.

Dans une même listes de définitions, il peut y avoir plusieurs balises <dt> et </dt> et plusieurs balises <dd> et </dd> qui peuvent être mélangées, mais évidemment une seule balise <dl> et </dl>.

Par exemple, pour définir les mois de janvier et de février, on écrira…

<dl>
<dt>Janvier</dt>
<dd>Premier mois de l'année.</dd>
<dt>Février</dt>
<dd>Deuxième mois de l'année.</dd>
</dl>

Qui affichera

Janvier

Premier mois de l’année.

Février

Deuxième mois de l’année.

L’affichage des listes de définition est différent entre Firefox et Msie. Le premier navigateur reconnaît notamment la propriété dd:before dans une feuille de style.

Les listes de définition peuvent avoir un usage varié. Imaginons que nous soyons écrivain ; nous voulons informer les lecteurs de nos séances de dédicace. Nous pourrions écrire au kilomètre…

Jeudi 21 août 2008, de 17 h 00 à 18 h 30, présentation puis dédicace d’« En quête » de lecteurs à la Bibliothèque Municipale et, à partir de 18 h 30, à la Librairie Alphabétique de Bordeaux (Gironde).

En réorganisant et en factorisant l’information (c’est l’un des défis les plus intéressants d’Xhtml selon nous !), nous pourrions recourir à la présentation suivante…

<dl>
<dt>Jeudi 21 août 2008</dt>
<dd>Bordeaux (Gironde)</dd>
<dt>de 17 h 00 à 18 h 30</dt>
<dd>Bibliothèque Municipale</dd>
<dt>de 18 h 30 à 19 h 00</dt>
<dd>Librairie Alphabétique</dd>
<dd>Présentation puis dédicace d<strong><em>« En Quête » de lecteurs</em></strong>.</dd>
</dl>

Qui affichera…

Jeudi 21 août 2008

Bordeaux (Gironde)

de 17 h 00 à 18 h 30

Bibliothèque Municipale

de 18 h 30 à 19 h 00

Librairie Alphabétique

Présentation puis dédicace d’« En Quête » de lecteurs.

De la même façon, nous pourrions nous servir d’une liste de définition pour présenter les commentaires (forcément élogieux !) de lecteurs sur notre ouvrage. Nous indiquerions comme termes l’identité du lecteur puis la date de l’avis, la description correspondant au libellé du commentaire.

Au-delà d’une présentation plus aérée, les moteurs de recherche référenceront mieux l’information présentée ainsi.

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 une amie photographe amateur un photblog 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 pour gérer
• 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 à 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.

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.

Pour contourner l’interruption de service en cas de changement d’hébergeur, quelques scripts sont disponibles, mais nous n’avions nullement envie d’investir du temps en bidouillage. Une solution pérenne et fiable nous semblait préférable.

Aussi avons-nous tenu le raisonnement suivant… Si nous copions nos données vers un hébergeur B en les laissant intact sur l’hébergeur A, nos sites ne devraient pas connaître d’interruption de service. Les serveurs de noms locaux qui auront pris en compte la modification vers B dirigeront les visiteurs vers B ; les serveurs de noms locaux qui n’auront pas pris en compte la modification vers B dirigeront les visiteurs vers A.

Se pose, certes, la question du transfert par Ftp du contenu vers le nouvel hébergeur, tant que l’adresse n’est pas résolue : au lieu d’utiliser l’adresse ftp.monsite.com, il suffit d’indiquer à titre temporaire l’adresse Ip indiquée par l’hébergeur.

Pour l’anecdote, nous avons changé d’hébergeur trois sites, durant la journée du 21 août 2008, entre 15 h 00 et 20 h 00. (Pour les amateurs de géographie, l’ancien serveur était situé à Karlsruhe, en Allemagne, le nouveau à Las Vegas, aux États-Unis d’Amérique.) Deux possédaient la Tld .info, l’autre la Tld .com. (La précision est donnée, car il semble que la vitesse de propagation des Dns soit différente selon l’extension.) Nous avons utilisé l’outil réseau Traceroute pour mesurer le temps pris par le changement d’hébergeur après déclaration des nouvelles directions Dns auprès de notre Registar :

• notre premier site en .info a demandé trois heures pour être correctement redirigé,
• notre deuxième site en .com a demandé deux heures pour être correctement redirigé,
• notre troisième site en .info a demandé deux heures pour être correctement redirigé.

(Nota. Ces mesures n’ont assurément aucune valeur, hormis informative !)

Nous sommes loin des 24 à 48 heures prévues ; cette hypothèse nous conforte dans l’idée que nous avions mal appréhendé la question.

Sur le plan chronologique, nous avons effectué la migration dans l’ordre suivant :

• copie de nos répertoires et de nos pages par Ftp;
• copie de nos bases de données Sql via phpMyAdmin ;
• déclaration des nouvelles directions Dns auprès de notre Registar.

(Sous WordPress, aucune réinstallation n’a été nécessaire.)

Nous avons choisi de ne pas modifier le contenu de nos sites pendant quelques heures pour simplifier la gestion de la procédure (le problème serait fort différent pour un vendeur en ligne !). Aucune donnée n’a été perdue, hormis quelques logs de connexion des visiteurs récupérés manuellement chez l’ancien hébergeur.

L’unique contrainte de l’opération consiste à disposer des services de son ancien hébergeur, pendant quelques jours.

En vérifiant le positionnement de l’article dans les moteurs de recherche, nous venons de nous apercevoir que Francis avait commis un article similaire, concernant WordPress !

• 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 {
width: 320px;
float: left;
margin: 0 0 0 20px;
padding: 0
}
#sidebar ul {
margin-bottom: 20px;
}
#sidebar a {
color: #000;
}
.widget_sidebar {
width: 320px;
display: block;
float: left;
margin: 0 0 5px 0;
padding: 0;
font-size:1em;
}
.widget_sidebar h1, .widget_sidebar h2, .widget_sidebar h3 {
color: #fff;
background: #ffe6e6;
padding : 2px 0px 2px 5px;
margin: 0;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
}
.widget_sidebar ul h2 {
padding-bottom: 10px;
border-bottom: dashed 1px #000;
font-size: 1.5em;
}
.widget_sidebar ul li {
list-style: none;
line-height: 1.6em;
font-size: 1.1em;
border-bottom: dashed 1px #000;
}
.widget_sidebar ul ul li {
border-bottom: dashed 1px #000;
}
#sidebar a:hover {
text-decoration: underline;
}
.widget_sidebar p {
padding: 10px;
text-align: center;
font-size: 1em;
}
/*--------------Widgets--------------*/
li.widget h2 {
color: #000;
}
/*-------------Calendar-----------------*/
#wp-calendar {
width: 180px;
text-align: left;
margin-top: 5px;
}
#wp-calendar th {
margin-top: 5px;
}
#wp-calendar caption {
font-size: 1.2em;
margin-top: 5px;
}

Pour le pied de page, nous le styliserons ainsi…

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