Après la conférence F8 de Facebook, plusieurs dizaines de milliers d’éditeurs de blogs se sont empressés d’ajouter un bouton Like ou Recommend dans l’espoir de créer le buzz sur Facebook. Je n’ai pas fait exception à cette règle. Toutefois — sans remettre en question la pertinence de l’affichage de ce bouton dans certains cas — je n’ai pas constaté de résultat en 15 jours d’utilisation. C’est en supprimant ce gadget, qu’une citation de Jean Cocteau m’est revenu à l’esprit : Il n’y pas d’amour, il n’y a que des preuves d’amour ! J’ai ensuite cherché un moyen de concrétiser ce sentiment autrement que par un J’aime ou J’aime pas.

Ouvrir un compte Paypal

Dans un premier temps, il est nécessaire d’ouvrir un compte sur Paypal. C’est simple, rapide et ça ne coûte rien. J’utilise ce service depuis plusieurs années sans problème pour régler mes achats sur eBay, à l’origine, mais aussi pour la plupart de mes pérégrinations consuméristes et réticulaires quand c’est possible.

Créer votre bouton Faire un don

Une fois connecté à votre compte Paypal, cliquez sur l’onglet Solutions e-commerce puis sur Paiements sur site marchand dans le menu situé sur la gauche. Sous les icônes de cartes bancaires, vous trouverez des exemples de boutons de paiement à installer. Choisissez Acceptez des dons en ligne puis Créer un bouton.

Choisissez un type de bouton et saisissez les détails de votre paiement

A cet étape, le plus important est de Personnaliser le bouton. Par défaut, le bouton Faire un don est sélectionné mais rien ne vous empêche d’utiliser votre propre image pour faire office de bouton, comme je l’ai fait sur ce blog avec l’image située à droite du logo. Pour cela, vous devrez créer votre visuel ou utiliser une image existante. Dans les deux cas, il faudra fournir son URL.

Enregistrez vos boutons (facultatif)

Cocher cette case est toujours utile : qui ne voudrait pas protéger ses boutons des modifications frauduleuses ?

Fonctions de paiement (facultatif)

Choisissez les options permettant à vos gentils donateurs de vous laisser un mot ou Diriger vos clients vers cette URL s’ils annulent leur paiement ou encore Diriger vos clients vers cette URL lorsqu’ils terminent leur paiement. L’ajout des variables avancées permettra de mettre en place un tracking pour affiner vos statistiques dans votre outil de mesure d’audience préféré.

Il ne vous reste plus qu’à Créer le bouton et à copier-coller le code HTML du formulaire dans votre template WordPress ou dans un Widget Text à l’endroit où vous voulez faire apparaitre votre bouton Paypal.

Créer des zones de Widgets dans WordPress

Si votre thème ne dispose pas de zones widgétisables, voici quelques tutoriels qui devraient vous aider dans cette tâche :

• Les widgets dans WordPress avec widgétisator ;)
• Tutoriel WordPress : la sidebar à la loupe, comprendre les widgets
• [Résolu] Problème de duplication et décalage des widgets dans WordPress

Il a bon dos, Cocteau…

Oui, je le reconnais bien volontiers : citer Jean Cocteau pour justifier une tentative de monétisation est un peu décalé, mais j’assume ;)

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• Soyez « ♥ Basics »
• BAW Auto Shortener — Raccourcisseur d’URL pour WordPress
• WordPress — archives "Reloaded" avec Calendarchives
• Danse avec les loops #1 : un thème WordPress mis à nu

Si vous n’aimez pas le widget Calendrier proposé par WordPress pour montrer votre activité mensuelle, vous serez peut-être séduit par cette nouvelle manière de présenter les archives : les années en ordonnée et les mois en abscisse.

Actuellement disponible sous forme de code à copier-coller, ne doutons pas que Manu continuera à travailler du chapeau pour ajouter quelques fonctions et à nous offrir son travail sous la forme d’un widget ;)

Articles sur le même sujet

• Ajouter un bouton Paypal «Faire un don» dans WordPress
• Plugin WordPress — Calendarchives
• Danse avec les loops #1 : un thème WordPress mis à nu
• Les widgets dans WordPress 2.5 avec widgétisator ;)
• Optimiser et styler les catégories WordPress avec les CSS

Après le thème Agrumz et après avoir mis en place un thème provisoire en attendant, voici SquaryBluevie, le nouveau thème bleu et carré (et un peu vert aussi) pour css4design. Il ne s’agit pas vraiment d’un thème destiné à transformer ce blog en magazine, mais plutôt d’en faire un magazine qui ressemble à un blog, nuance, nuance… Un blogzine ? Oui, oui, c’est presque ça ! Comme promis, voici donc le premier volet de la série Danse avec les loops pour montrer ce qu’il y a sous le capot.

Une ligne éditoriale moins linéaire

Je ne m’étendrai pas trop sur les interrogations existentielles qui m’ont poussé à changer le design et la structure de ce blog. La première chose, c’est que la succession simple des billets dans l’ordre chronologique inverse ne correspond plus vraiment à mes aspirations et aux différentes rubriques qui composent ce blog.

En effet, si le coeur de la ligne éditoriale est consacré à la création de site web en général en mettant l’accent sur les problématiques liées à l’intégration HTML et CSS et à la structuration des contenus, j’aborde d’autres sujets comme le Web 2.0, le e-commerce et il m’arrive de publier des billets d’humeur sur l’actualité du web.

Si ces sujets peuvent très bien s’accommoder d’une structure de blog classique, j’avais envie de mieux distinguer les articles de fond des billets plutôt brefs, tout en mettant en avant mes billets d’humeur. Le problème du blog « classique », c’est que les billets disparaissent vite de la page d’accueil et perdent rapidement en visibilité, même si l’ami américain Google est là pour les faire remonter à la surface.

Il me fallait donc un système pour conserver une certaine unité dans la liste des articles en rapport avec les thèmes principaux abordés sur le blog tout en autorisant la publication de billets brefs et d’humeur. Un blogzine, en fait ;)

Voici pour les explications éditoriales. Jetons maintenant un oeil sous le capot !

Hiérarchie des Templates

Grâce à WordPress, il est possible de construire un thème en utilisant uniquement le fichier index.php. Chaque requête — le fait de cliquer sur une catégorie, une page d’archive, le titre d’un billet, un tag, etc. — crée un contexte de variables qui pointera vers ce fichier.

Si l’on veut afficher les contenus différemment sur le billet seul, par exemple, deux solutions s’offrent à nous : les marqueurs conditionnels (Conditional Tags) comme is_single() ou la création d’un fichier single.php.

S’il s’agit de modifier une largeur de colonne au passage du billet seul, le marqueur conditionnel suffit. En revanche, si les modifications sont plus profondes, le fichier single.php sera sans doute plus adapté sachant que dans la plupart des cas, la solution passe par un mélange des deux techniques.

La première chose à prendre en compte est le nombre de maquettes dont on dispose pour afficher tous les contextes possibles, même si dans la plupart des cas, il n’est pas nécessaire de mettre en place tous les Templates possibles.

Pour y voir un peu plus clair, voici une table des correspondances entre les marqueurs, les templates et la hiérarchie qui leur est associée (Template Hierarchy) :

Pour SquaryBluevie par exemple, je voulais tout faire en utilisant uniquement le fichier index.php, mais bien que cela soit possible, le risque est grand de se mélanger les pinceaux entre la multitude des conditions…

J’ai donc ajouté à index.php, les fichiers home.php, page.php et single.php. Le reste étant composé de fichiers inclus de manière conditionnelle ou en fonction du Template. C’est le cas pour header.php, footer.php, tutoriels.php, sidebar0.php, sidebar1.php, sidebar2.php, etc.

Un découpage en 7 grandes zones

1 L’en-tête

Le fichier header.php est composé de deux grandes parties. La première contient les éléments qui apparaissent sur l’ensemble du blog. C’est la partie header :

• Sommaire en haut à gauche,
• Classement Wikio en haut à droite,
• Texte de présentation de l’auteur,
• Logo,
• Texte de présentation du blog,
• Liste des pages statiques en dessous.

La deuxième partie header2 est située juste en dessous :

• Photo de l’auteur,
• Icône du flux RSS,
• Texte situé entre les deux.

C’est ce texte qui affichera un contenu différent selon le contexte :

• Dans une catégorie (<?php if ( is_category() ) : ?>), j’affiche la description de la catégorie
• Dans la page affichant l’article seul (<?php if ( is_single() ) : ?>), j’affiche une introduction générale pour les articles,
• Ni dans une page d’article ni dans une page statique ni dans une catégorie (<?php if ( !is_single() && !is_page() && !is_category() ) : ?>), j’affiche le dernier billet dans la rubrique « Editorial ».

La description du blog est celle que l’on renseigne habituellement dans Réglages -> Options générales -> Slogan du panneau d’administration. L’appel du texte se faisant avec la fonction <?php bloginfo('description'); ?>. Comme il s’agit — avec la présentation de l’auteur — d’une zone de widgets, il est possible de remplacer aisément la description du blog par un texte libre (notamment si la description est trop courte) en utilisant un widget texte.

Ceci est possible grâce à la fonction suivante (voir ce billet consacré à la création de zones widget dans WordPress) :

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('header2') ) : ?>
<div>
    <h2>Description du blog</h2>
    <div><?php bloginfo('description'); ?></div>
</div>
<?php endif; ?>

<?php $my_query = new WP_Query('category_name=editorial&showposts=1');
while ($my_query->have_posts()) : $my_query->the_post();?>
    Votre boucle ici
<?php endwhile; ?>

A l’affichage d’une catégorie, cet édito est remplacé par la description de la catégorie idoine. Cette description est accessible dans l’administration via Gérer -> Catégories -> Description. Le code à utiliser dans le Template est <?php echo category_description(); ?>. Enfin, lorsqu’on affiche l’article seul, cette description est remplacée par un texte libre (widget texte).

2 Billet « C’est vite dit ! » (En bref)

Sous le header, la deuxième zone se compose d’un billet « En bref » (cet intitulé — comme d’autres sur le blog — est modifiable dans le fichier functions.php) surmonté d’un visuel optionnel géré par les champs personnalisés (Customs fields).

Cette rubrique n’est ni plus ni moins que la catégorie 1 (uncategorized à l’origine) dont j’ai modifié l’intitulé. L’avantage est de pouvoir compter sur l’identifiant présent dès l’installation du blog, ce qui évite d’avoir à mettre les mains dans le code pour masquer cette catégorie dans les autres boucles. Par ailleurs, cette catégorie « originelle » est cochée par défaut, ce qui permet de gagner du temps lorsqu’on veut rédiger un billet court ;)

Note : pour afficher une seule rubrique, il est possible de se servir de son nom, mais pour l’exclure, il semble nécessaire de passer par l’identifiant numérique (à moins qu’une option m’ait échappée).

Voici le code pour cette boucle :

<?php if(!is_paged()) : ?>
    <?php $my_query = new WP_Query('cat=1&showposts=1');
    while ($my_query->have_posts()) : $my_query->the_post();
    $do_not_duplicate = $post->ID;?>
        Contenu de la boucle
    <?php endwhile; ?>
<?php endif; ?><!-- end !is_paged -->

Pour cela, en plus d’initialiser la variable $do_not_duplicate dans la première boucle, il faut exclure le billet en question de la deuxième boucle :

<?php $my_query = new WP_Query('cat=1&showposts=6'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post();
    if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>
        Contenu de la boucle
<?php endwhile; ?>

La fonction update_post_caches() est là pour pallier le fait que certains plugins ne fonctionnent pas correctement lorsque plusieurs boucles sont présentes sur la même page. Cette fonction réinitialise le cache des billets pour éviter d’éventuels problèmes.

3 Les articles du blogzine proprement dit

Cette zone est suivie de la liste des billets publiés au fil de l’eau sur le blog à l’exception de l’édito et des billets « En bref ». Toutefois, je voulais que ces deux rubriques puissent apparaitre lorsque les visiteurs cliquent sur les Articles plus anciens car si la redondance est gênante sur la première page, elle l’est moins sur les autres :

<?php if(!is_paged()) : ?>
    <?php query_posts("$query_string&cat=-1,-16&showposts=10");
    /* Affichage des articles sauf featured et édito */?>
<?php else : ?>
    <?php query_posts("$query_string&showposts=15"); ?>
<?php endif; ?>
<?php while (have_posts()) : the_post(); ?>
        Contenu de la boucle
<?php endwhile; ?>

Il ne faut pas oublier le paramètre $query_string qui permet de recréer le contexte de la requête (ici is_paged() ) car la fonction query_posts() est un peu l’auberge espagnole : seules les variables précisées en paramètres sont disponibles sur votre page.

4 Le menu à onglets sur la droite

Ce pavé inaugure la barre latérale et est en quelque sorte le pivot du blog, la boussole qui sert de point de repère dans ce qui pourrait apparaitre comme une cacophonie de textes :

• Catégories — le moins mauvais des systèmes pour se repérer dans un blog ;
• Derniers articles publiés afin que le lecteur ait une vision « applatie » des parutions sur le blog. En effet, l’édito ou le billet « En bref » peuvent rester un certain temps avant d’être remplacés, même si le contenu du blog proprement dit (la quatrième zone) peut évoluer plus rapidement ; à moins que l’inverse se produise car il est tout à fait possible de publier plusieurs billets courts dans « En bref » ou de prendre un coup de sang quotidien avec l’édito !
• Articles les plus commentés. Si les derniers commentaires (voir plus bas) permettent aux visiteurs de se faire une idée sur les dernières discussions en cours, la liste des articles les plus commentés permet de faire remonter certains articles anciens qui ont, en leur temps, fais parler d’eux ;)
• Derniers commentaires avec le gravatar, l’URL du commentateur et l’adresse du billet commenté. Pratique, pour donner au visiteur un aperçu des sujets qui suscitent actuellement le plus d’intérêt.
• Nuage de tags pour donner un aperçu des thèmes abordés sur le blog au visiteur de passage (qui représente quand même plus de la moitié des visites).

A noter que lorsqu’on se trouve sur les pages single.php (affichage des billets seuls) et page.php (affichage des pages « statiques »), ce menu ne propose que les 3 premiers onglets afin de laisser plus de place pour l’article. Voici le code :

<?php if ( !is_single() && !is_page()) : ?>
    <div id="menu-wide">
<?php else : ?>
    <div id="menu-narrow">
<?php endif; ?>

5 Tutoriels aléatoires

Sous le menu à onglets, j’affiche un article aléatoire parmi ceux qui sont tagués « tutoriel ». Ca tombe bien car c’est un des rares tags que j’ai employé à bon escient depuis de début ! Ca permet de faire « remonter » des billets rédigés il y a plus de deux ans et sur lesquels j’ai le plus transpiré ;) La boucle est relativement similaire aux autres :

<?php /* Affichage des tous les billets tagué "tutoriels" */
query_posts('tag=tutoriel&showposts=1&orderby=rand');
while (have_posts()) : the_post(); ?>
    Contenu de votre boucle
<?php endwhile; ?>

Cette zone peut être précédée ou suivie d’une zone widgétisable pour placer une éventuelle publicité (actuellement des vidéos virales de unrulymedia) ou tout autre élément à la mode. Une zone est même prévue au-dessus du menu à onglets pour la même chose. Bon, rassurez-vous, une publicité placée au-dessus du menu principal vaut son pesant de cacaouettes : le jour où ça arrive, je vous invite à boire un café sur Lyon :D

6 Deux barres latérales pour le prix d’une !

C’est le moment de diviser la barre latérale en deux afin d’accueillir d’autres types de contenus. Pour le moment la première sidebar accueille la suite des billets « En bref » suivie d’une petite publicité virale (oui, j’essaie de trouver des alternative à Google Adsense… pas si facile non plus ;) )

La deuxième barre latérale est destinée à accueillir des liens externes comme les liens sponsorisés (saymal, mais saybon quand même :D ), les flux RSS externes, etc.

A noter que sous cette double sidebar, il est possible d’afficher du contenu à l’aide d’une zone widgétisée sur la largeur des deux colonnes.

7 Le footer

Ce footer est lui-même divisé en deux : un big footer (inactif pour l’instant) et le footer proprement dit qui affiche quelques informations classiques comme les droits réservés, l’adresse des différents flux RSS, le lien vers le formulaire de contact, etc.

Les widgets

Ce thème est truffé de zones widgets ready pour permettre une certaine souplesse dans l’administration du blog en minimisant les allers-retours dans le code. Pour information, SquaryBluevie ne compte pas moins de de 19 zones de widgets, certaines actives et d’autres pouvant être activées sur un claquement de souris.

Voici la liste des différentes zones de widget et leur utilisation actuelle ou prochaine :

1. header1 – présentation de l’auteur (widget Texte),
2. header2 – présentation du blog (inactive pour l’instant),
3. article – texte de remplacement de l’édito et de la description de la catégorie quand on est sur l’article seul,
4. tab1 — contenu du premier onglet dans le pavé de droite. Actuellement les catégories,
5. tab2 — derniers billets publiés,
6. tab3 — articles les plus commentés par les visiteurs,
7. tab4 — derniers commentaires des visiteurs
8. tab5 — listes des tags les plus utilisés
9. sidebar-top — zone située au-dessus du menu à onglets (inactive pour l’instant),
10. sidebar-middle — zone située sous le menu à onglets (Actuellement une vidéo publicitaire),
11. sidebar-middle2 — zone située sous le tutoriel aléatoire (inactive pour l’instant),
12. sidebars-bottom –zone située sous les deux colonnes latérales,
13. sidebar1-top — zone placée au-dessus de la première barre latérale étroite,
14. sidebar1-bottom — zone placée en dessous,
15. sidebar2 — l’ensemble de la deuxième barre latérale étroite est gérée par cette zone. Principalement pour des liens externes et/ou publicitaires (flux RSS, liens sponsorisés, blogroll, etc.),
16. bigfooter – si le besoin s’en fait sentir, une zone big footer est diponible sur toute la largeur de la page en 2, 3, 4 ou 5 colonnes en fonction des besoins. (inactive pour l’instant),
17. footer – zone disponible au début du footer (inactive pour l’instant),
18. adz — affichage des publicités AdSense à la fin du billet seul et sous le billet « En bref » présent sur la Home.
19. sidebar-single – permet d’afficher des élément sous le menu à onglets lorsqu’on lit un billet seul.

Grille de mise en page, feuilles de styles CSS et Javascript

Je ne m’étendrai pas trop sur ces questions qui feront l’objet d’un autre article : ce design est provisoire (ce qui n’est pas le cas de cet article) et je ne suis pas sûr de vouloir garder la même approche. Mais pour ceux qui sont curieux et qui n’ont pas envie de regarder le code source, voici quelques informations.

Pour ce thème, j’ai utilisé le framework CSS Blueprint en redéfinissant totalement la grille horizontale proposée par défaut en utilisant l’excellent Blueprint Generator pour générer automatiquement le fichier grids.css : il suffit de préciser quelques informations. J’ai opté pour une grille en 14 colonnes de 52 pixels chacune, séparées par une gouttière de 18 pixels, pour une largeur totale de 962 pixels.

L’avantage du framework Blueprint est de pouvoir tester rapidement plusieurs mises en page à partir de la même grille. La prise en main est relativement facile si l’on possède des bonnes notions de CSS et si l’on si sait à quel moment il faut rétablir le flux après les flottants : lorsqu’on détermine une largeur à l’aide de Blueprint, on utilise un float: left en même temps !

J’ai utilisé également le script ie7.js de Dean Edwards pour faire en sorte que Internet Explorer 6 se comporte comme IE7. Je vous invite à lire l’article Quelques notes sur la bibliothèque Javascript IE7 qui vous permettra d’en savoir plus sur les comportements ajoutés à Internet Explorer pour le rendre plus friendly ;)

Conclusion

Dans ce billet, je n’ai pas abordé les aspects graphiques : comme je l’ai déjà évoqué, ce thème est pour moi un saut dans l’inconnu car je n’ai pas l’habitude de travailler le bleu, les blocs carrés ou encore les designs symétriques ! Tout celà donne un aspect institutionnel qui n’était pas recherché au départ mais qui peut faire son petit effet ;)

Rassurez-vous toutefois, mon objectif n’était pas d’obtenir des backlinks d’un site se terminant par .gouv, mais simplement de mieux structurer le blog et d’utiliser une palette de couleur tendant vers la monochromie (deux couleurs froides) afin que le regard du lecteur ne se disperse pas trop : plus les contenus sont nombreux et variés et plus la sobriété est importante.

Par ailleurs, le graphisme de ce blog est destiné à évoluer régulièrement pendant quelques temps, le temps de trouver un rythme de croisière entre l’édito, les brèves, les articles de fond, les tutoriels, etc…

Stay tuned and mind the gap!

Articles sur le même sujet

• WordPress — Gérer les images avec les champs personnalisés (Customs fields)
• WordPress 2.6 — Mes news carburent à "Press This" (chaine inside)
• Les widgets dans WordPress 2.5 avec widgétisator ;)
• WordPress 2.6 — un nouveau "tag" conditionnel avec has_tag()
• Quelques notes sur un thème magazine de A à Z — E comme épure

La mise-à-jour vers WordPress 2.5 ne se limite pas seulement à des améliorations ergonomiques et cosmétiques au niveau de l’interface d’administration. Prenons les widgets : la page elle-même est profondément remaniée, et toute la partie destinée au choix du nombre de widgets (texte, RSS, catégorie, etc.) disparait, puisque avec cette version, le nombre de certains widgets n’est plus limité. Et comme vous êtes sympa, je vous donne les éléments nécessaires pour nommer et personnaliser vos zones widgétisables dans votre template WordPress.

L’est passé où, le glissé-déposé ?

Conséquence directe sur l’interface, il n’est plus possible d’utiliser le glissé-déposé des widgets vers les différentes « sidebars ». En effet, cette fonction n’était déjà pas très pratique lorsqu’on déclarait quatre zones widgétisables (improprement appelées « sidebars »), alors vous imaginez le dawa avec plus ;)

A la place, nous avons une interface robuste avec à gauche, les différents widgets disponibles, et à droite, les zones widgétisables et les widgets associés, avec les options disponibles pour chacun d’eux.

A noter qu’il est préférable de bien nommer vos zones widgétisables pour vous y retrouver car le choix de ces dernières s’effectue désormais au dans un menu select.

Modifier l’intitulé des zones widgétisables

Dans un précédent article sur les widgets dans WordPress, je n’étais pas parvenu à modifier l’intitulé des zones widgétisables, cette fois, c’est réglé : à la place de sidebar1, sidebar2, etc. voici le code à mettre dans le fichier functions.php pour donner un nom explicite à chaque zone, avec en prime, la possibilité de spécifier pour chacune les balises HTML enveloppantes qui vont bien :

Widgétisator

<?php
// A mettre dans le fichier functions.php de votre thème
if ( function_exists('register_sidebar') )
register_sidebar(array('name'=>'header',
'before_widget' => '<p id="%1$s" class="widget-header %2$s">',
'after_widget' => '</p>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));
register_sidebar(array('name'=>'sidebar',
'before_widget' => '<li id="%1$s" class="widget-sidebar %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));
register_sidebar(array('name'=>'content',
'before_widget' => '<div id="%1$s" class="widget-content %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));
register_sidebar(array('name'=>'footer',
'before_widget' => '<div id="%1$s" class="widget-footer %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
));
?>

L’idée est de déclarer individuellement chaque zone, de manière à controler :

• le nom de la zone (header, sidebar, content, footer),
• la balise html servant à encadrer le code fournit par le widget avec une class CSS spécifique (widget-header, widget-sidebar, widget-content, widget-footer),
• la balise de titre avec sa classe CSS spécifique (widgettitle).

Sinon, il reste toujours la possibilité de déclarer plusieurs zones d’un seul coup avec le code :

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

Dans les deux cas, pour terminer, il est nécessaire de définir votre zone widgétisable dans votre template à l’aide des lignes suivantes :

<?php
// A mettre dans votre template là où vous voulez déclarer une WAR
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('header') ) : ?>


/*
Placez ici le code qui doit s'afficher si la zone
n'est pas remplie avec des widgets -- facultatif
*/

<?php endif; ?>

En bref

Vous l’aurez compris, je suis conquis par cette nouvelle version de WordPress, et vous n’avez pas fini d’en entendre parler ;) Pour avoir d’autres informations sur cette version, n’hésitez pas à faire un tour sur WordPress francophone, chez nicolargo ou encore chez Here With Me.

Stay tuned!

Articles sur le même sujet

• Danse avec les loops #1 : un thème WordPress mis à nu
• Tutoriel WordPress : la sidebar à la loupe, comprendre les widgets et déclarer une "WAR"
• WordPress de A à Z — A comme Allons-y ! (on s’organise)
• Créer son site web avec WordPress de A à Z… avec le Codex
• Quel tarif pour un thème WordPress ?

C’est grâce à Alexis que j’ai découvert rollSense. Je m’attendais à un Criteo de plus, mais passé le stade de la découverte, rollSense me parait plus attractif, plus fun à utiliser. Alors que Criteo propose à vos visiteurs des sites qui ont un rapport avec le vôtre, rollSense recommande à vos lecteurs des articles en relation avec le thème de vos pages. Une fois le widget installé, chaque fois qu’un lecteur cliquera sur un de vos billets pour le lire, rollSense fournira ses recommandations. Il est possible de sélectionner soi-même les sources d’information dans lesquelles le service puisera pour afficher ses résultats et ne mettre que son site ou son réseau de sites. Et pourquoi pas, créer un réseau de liens réciproques comme Google les aime tant ;)

Cerise sur le gâteau, des liens sponsorisés et ciblés (tiens ça ne vous rappelle rien ?) fournis par Yahoo! Search Marketing peuvent contribuer à la monétisation de votre blog, ce qui ne peut pas lui faire de mal :)

rollSense en bref

• Vous décidez d’où viennent les articles recommandés,
• Les articles recommandés le sont par rapport au billet que parcoure votre lecteur,
• Facile à activer, rollSense ne demande que l’adresse de votre blog et votre blogroll ou OPML,
• Installation simple sur le blog, vous copiez et collez un bout de code HTML,
• Vous pourrez suivre les visites en provenance d’autres sites, comme celles générées vers votre blogroll,
• rollSense peut aussi être utilisé pour simplement afficher les billets les plus récents de votre blogroll, éventuellement filtrés par vos mots clés

Allez, hop ! je m’inscris

5 champs à remplir, plus la case concernant les conditions d’utilisation à cocher et je reçois le mail d’activation qui me renvoie curieusement sur une page m’indiquant que mon « canal » n’est pas valide… Demander le minimum d’information à l’inscription c’est bien, mais ils auraient pu demander l’adresse du flux dès le départ et nous faire économiser un clic ! Je clique néanmoins sur « OK » et j’arrive sur la page pour initialiser mon canal rollSense.

Je regrette (comme souvent) le choix restreint des intitulés de rubriques pour classer mon blog : je n’ai rien trouvé de mieux que « Ordinateurs & Internet »… triste, non ?

Monétiser son blog ?

Voilà, c’est fini ! mon inscription est en attente d’approbation. En attendant, je définis mes options de paiement qui peut s’effectuer par chèque (à partir de 100€ d’avoir) ou par PayPal (à partir de 60€). Hum… si les montants ressemblent à ceux de Google Adsense, je pourrais offrir une figurine de Grendizer à mon fils de 4 ans pour ses 7 ans ;) Je vais donc attendre un peu avant de donner mes informations personnelles.

Vous pouvez admirer ensuite votre widget personnalisable – dont la langue utilisée – en largeur (de 150px à 450px) et en couleur à l’image de ce qui se fait habituellement. Pour un meilleur contrôle, je vous conseille quand même de modifier les valeurs directement dans le code, c’est pas sorcier ;)

Yahoo! Search Marketing ?

Je ne sais pas si vous êtes comme moi, mais j’avais presque fini par oublier qu’il y avait une vie en dehors de Google dans le domaine de la publicité contextuelle d’envergure. Je me dit que c’est assez bien vu de la part de Yahoo! de s’associer avec rollSense pour tenter de tailler des croupières à Google sur son terrain de jeux par le biais d’un widget qui a tout pour plaire.

Je suis emballé

Pour commencer, je me servirai certainement de rollSense pour faire des liens croisés entre les articles publiés sur Notorious Blog et celui-ci, en indiquant pour chacun d’eux le flux de l’autre. Sinon, il est possible de faire les choses en grand en ajoutant n’importe quel fichier OPML : pourquoi pas la liste de vos blogmarks favoris ?

Installé par simple curiosité au début, ce widget vient déjà de prendre sa place dans la page des billets et a même remplacé la liste des derniers billets publiés. Le fait de spécifier soi-même les flux pris en compte – et uniquement ceux-ci – est un plus indéniable qui permet d’envisager autrement la notion d’échange de liens, un peu has been, il faut bien le dire, malgré son efficacité redoutable ;)

Articles sur le même sujet

• 7 étapes pour demander une prime de risque en qualité de trafiquant de PageRank !
• Le prêt-à-bloguer bride-t-il la créativité ?
• Sites de contenus vs sites commerciaux ?
• Intéressés par la monétisation de votre contenu ? Jettez un oeil sur Google AdSense
• Journalistes vs Blogueurs (Gladiators inside)

Suite à la migration de mon blog, j’en ai profité pour réorganiser les catégories en utilisant les sous-catégories qui me semblent un excellent moyen pour structurer l’information sur un blog. Curieusement, j’ai remarqué que les catégories sont souvent traitées par-dessus la jambe : soit il s’agit d’une longue liste tellement exhaustive qu’on ne sait plus de quoi parle le blog, soit les catégories sont placées à un endroit peu visible. Le pire étant évidemment le cumul des deux, ce qui n’est pas si rare…

Optimiser les catégories

La première chose à considérer, c’est de limiter le nombre de rubriques principales : une dizaine me semble un maximum pour permettre au visiteur de se faire rapidement une idée sur le contenu du blog. Maintenant, voyons concrètement comment afficher ces catégories et sous-catégories avec les CSS et les classes mises à notre disposition dans WordPress.

Pour commencer, j’ai créé la catégorie Développement web qui servira de catégorie parente pour les sous-catégories design-graphisme, ergonomie-accessibilité, javascript-php et bien sûr xhtml-css.

Pour afficher ces catégories, je me suis contenté d’utiliser le widget catégorie qui permet de modifier le nom de la rubrique, d’afficher la liste avec un menu déroulant, d’afficher la hiérarchie et enfin de préciser le nombre de billets présents dans une catégorie ou une sous-catégorie.

Les options disponibles dans le widget catégorie de WordPress devraient suffir à la majorité des utilisateurs !

Styler les catégories avec les CSS

Reste à styler ce menu avec les CSS. Pour celà, WordPress met à notre disposition une classe .current-cat lorsqu’une catégorie est sélectionnée et .current-cat-parent lorsqu’ils s’agit d’une catégorie parente. Notez q’une classe .children est associée aux sous-catégories, ce qui est bien utile ;)

Pour l’instant, je me suis contenté de mettre en gras les éléments sélectionnés par l’utilisateur en attendant mieux. Dans ce cas, il faut prendre garde à la cascade, car la règle :

.current-cat-parent {
    font-weight: bold;
}

.children {
    font-weight: normal;
}

.children .current-cat {
    font-weight: bold;
}

N’oublions pas non plus de préciser comment doivent se comporter les catégories cliquées qui ne sont pas des catégories parentes :

.current-cat {
    font-weight: bold;
}

Voici l’exemple des catégories avec ci-contre, la sortie dans Firefox et plus bas, le code html vu par Firebug. Admirez donc les différentes classes disponibles pour vos CSS ;)

Quelques notes au sujet des catégories pour conclure

Le plus fastidieux quand on se lance dans la réorganisation des catégories est de déterminer le degré de granularité des informations qui doivent apparaitre. J’ai choisi des intitulés de rubriques parentes relativement génériques pour offrir une certaine souplesse à l’usage.

En revanche, pour les sous-catégories, j’ai essayé d’être le plus précis possible sans pour autant multiplier le nombre d’éléments. Si dans mon cas, je peux facilement regrouper Javascript et php, il en ira autrement pour un blog spécialisé dans la programmation : il sera sans doute judicieux de faire une distinction entre les langages côtés serveur et ceux côté client ;)

Articles sur le même sujet

• Avec Spongestats 3.0, mes stats ont la patate !
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Le petit journal du web — WordPress, développement web, etc.
• WordPress — Menus «funky» avec wp_list_bookmarks()
• Danse avec les loops #1 : un thème WordPress mis à nu

Pour mesurer vos statistiques, vous êtes plutôt moderne et web 2.0 ? Après des Release Candidate sorties au pas de course par l’équipe de développement, Spongestats 3.0 l’outil de mesure d’audience en temps réel pour votre site web ou votre blog vient de sortir en version stable. Le tout à la sauce web 2.0 dans ce qu’il a de meilleur : support des fils RSS, interface xhtml/css boostée avec jQuery, notamment pour la partie Ajax.

Du bon, du beau du bobe ! (et du Samy aussi)

Vous voulez un outil rapide, beau et fiable ? C’est Spongestats qu’il vous faut. Et pour le prix en moins en plus on a quoi ? Parmi les fonctionnalités nous trouvons principalement :

• les statistiques quotidiennes, mensuelles et annuelles présentées sous forme de diagramme
• le détail des statistiques pour un jour donné (nombre de visiteurs, plages horaires, mots clés, pages d’entrée, sites et pages référents, etc…)
• le classement mensuel des pages les plus vues
• le classement des IP et des noms d’hôtes des visiteurs
• la classement des pages et des domaines ayant des liens vers le site
• la liste des plateformes clientes : systèmes d’exploitation, navigateurs web et agrégateurs
• la liste des mots clés utilisés pour arriver sur le site
• la liste et le détails des derniers visiteurs ayant parcouru le site
• l’historique des visiteurs (première et dernières visites, site referent pour chacune de ses visites, etc…)
• les statistiques des fils RSS ainsi que les agrégateurs utilisés pour les consulter

L’installation, c’est pas trop galère ?

Non, absolument pas : il suffit de télécharger la dernière version, de dézipper le fichier et de copier le dossier spongestats ainsi obtenu à la racine de votre site. Il ne reste plus qu’à vous rendre à l’url idoine http://www.votresite.com/spongestats pour être dirigé vers la page d’installation. Le script vous demandera alors de saisir les paramètres liés à votre base de données, puis cliquez sur le bouton pour créer la base. C’est Presque fini. La dernière chose à faire est évidemment d’insérer le script dans toutes les pages à mesurer : un include_once et c’est parti ;)

Ouais… mais là, je suis sûr que tu as paraphrasé la documentation de spongestats, non ?

Oui, c’est vrai. Pour me faire pardonner, je faire reprendre sous vos yeux l’installation pas à pas, d’accord ?

1. Je télécharge la dernière version de Spongestats sur Sourceforge Tout va bieng ! Je dézippe le fichier SpongeStats-3.0.zip pour obtenir le dossier spongestats
2. Je tranfère le dossier spongestatsà la racine de mon blog sur mon serveur avec FileZilla et pendant ce temps, je vérifie que j’ai toutes les informations nécessaires pour établir le dialogue avec la base de données (Serveur MySQL, Nom d’utilisateur, Mot de passe et Nom de la base).
3. Je me rends à l’adresse http://www.mon-site.com/spongestats/ et je remplis les champs requis. En plus des éléments relatifs à la connexion avec la base de données, vous devrez préciser deux choses : le Préfixe des tables pour identifier les tables spécifiques à Spongestats si vous l’installez sur la même base que votre blog et le Mot de passe administrateur pour vous loguer dans l’espace d’administration. Cerise sur le gâteau, vous pourrez tester les paramètres pour vous assurer que tout fonctionne. Vite, je clique sur le bouton Installer Spongestats Pour la création des 4 tables nécessaires au bon fonctionnement de l’application : sps_archives, sps_config, sps_statistiques du mois et sps_stats_2007_09 pour le mois en cours, d’autres tables seront créées pour les mois suivants.
4. Je supprime le dossier install pour plus de sécurité.
5. Je place la ligne de code <?php include_once(« ../spongestats/stats.php »); ?> dans mon template
6. Je commence à regarder mes statistiques de la journée sans que l’ombre d’une pétouille ne vienne gâcher mon plaisir !

The La Lène Touch!

Quand on a pris l’habitude de l’interface de phpMyVisites pour prendre son bol d’air de stats bien frais, le thème par défaut de Spongestats est vivifiant : vos visiteurs sont tout de suite plus beaux ;) Bref, je suis conquis. Merci à Hélène d’avoir pris du temps entre Au joli popotin, Arthur et Bastien pour nous offrir le thème Citron-vert.

Je vous laisse car j’ai d’autres installations à faire, notamment pour Notorious Blog.

Stay tuned, I’ll be back!

Articles sur le même sujet

• Optimiser et styler les catégories WordPress avec les CSS
• Le petit journal du web — Les fruits de la veille ont gardé toute leur fraicheur
• Le petit journal du web — WordPress, développement web, etc.
• WordPress — Menus «funky» avec wp_list_bookmarks()
• Danse avec les loops #1 : un thème WordPress mis à nu

Delphine Dumont lance un appel à la bonne volonté des développeurs pour créer un Widget qui relaierait l’alerte enlèvement diffusée généralement à la télévision, sur les signalisations autoroutières, dans les villes, etc. L’idée de faire se servir de la popularité des blogs pour étendre encore la couverture des alertes.

Le principe

Un widget « Alerte-Enlèvement » permettrait d’afficher immédiatement et automatiquement l’alerte dès qu’elle est donnée et de la supprimer dès que l’enfant est retrouvé. Vu le nombre de blogs qui existent, ce serait un relais énorme, instantané, permanent (contrairement aux diffusions espacées à la télé ou la radio) et qui comblerait le manque pour ceux qui n’ont pas accès à la télé ou à la radio. Bref, ce serait du tout bon.

Un flux RSS sera bientôt disponible pour les partenaires, ce qui fournira la matière première du Widget. Parmi les questions soulevées, le dimensionnement du serveur pour éviter les problèmes de saturation est crucial. En bref, Delphine à besoin d’un ou plusieurs experts pour faire des estimations projectives et des spécialistes en équipement réseaux en France afin de lister les partenaires éventuels.

Voilà, à vous de jouer coder et/ou de relayer ;)

Mise-à-jour : Je me demande dans quelle mesure on pourrait utiliser l’API XML-RPC disponible sur la majorité des systèmes de blog (enfin je suppose) et de s’en servir pour publier automatiquement un billet concernant l’alerte en cours. Il suffirait pour celà de fournir ses informations de connexion de manière anonyme et le système se contenterait de publier un billet sur l’ensemble des blogs volontaires.

Articles sur le même sujet

• Ajouter un bouton Paypal «Faire un don» dans WordPress
• WordPress — archives "Reloaded" avec Calendarchives
• Danse avec les loops #1 : un thème WordPress mis à nu
• Les widgets dans WordPress 2.5 avec widgétisator ;)
• rollSense : Google Adsense du contenu ou révolution dans l'échange de lien ?

A l’installation de WordPress 2.2, le thème par défaut propose une barre latérale contenant le champs de recherche, les catégories, les pages ou encore la blogoliste. Le tout, affichés via une liste non ordonnée contenant elle-même d’autres listes. C’est pratique en plus d’avoir du sens. Mais si je voulais séparer ces éléments pour respecter une charte graphique allant au-delà de la présentation habituelle, je devrais modifier le code HTML en plus de modifier la feuille de style CSS. Dans ce tutoriel, j’aborde la transformation de cette liste globale en plusieurs blocs transpositionnables, en enfilant des gants pour commencer, puis avec les Widgets qui ont fait leur apparition. Je termine en ajoutant une deuxième zone widgétisable à un thème qui n’en comportait qu’une au départ. J’en ai profité pour rendre le code du Widget Texte 1 plus sémantique en remplaçant une div par un p (c’est élégant, tiens…) ;)

Note : bien qu’écrit lors de la sortie de la version 2.2, cet article est toujours d’actualité ;)

Les mains dans le cambouis…

L’affichage des fonctionnalités est réalisé de plusieurs manières. Il s’agit parfois d’inclure un fichier qui fournit tout le code HTML nécessaire ou d’utiliser une fonction précédée ou non de balises li. Tout au long de ce tutoriel, j’ai choisi d’expliciter le parti-pris du thème par défaut concernant le balisage HTML de la sidebar en particulier, sachant que la zone de contenu principal ne présente pas de difficultés particulières.

L’affichage du champ de recherche

Le champs de recherche est appelé via la commande PHP include. Pour l’insérer dans la liste non ordonnée, le concepteur du thème default a simplement ajouté des balises li puisque la balise parente ul est présente dès le début de sidebar.php.

 <li><?php include (TEMPLATEPATH . '/searchform.php'); ?> </li>

ll est intéressant de noter l’usage de la contante TEMPLATEPATH qui donne le chemin absolu vers le dossier du thème activé depuis l’interface d’administration. Il s’agit d’ailleurs de la méthode recommandée pour inclure des fichiers dans vos templates.

L’affichage des Pages, de la Blogoliste et des Catégories

Par défaut, ces fonctions génèrent des éléments de liste li qui sont habillées par la balise ul présente au début de sidebar.php. A noter que le titre h2 est précisé en tant qu’option :

 <?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>

 <?php wp_list_bookmarks(); ?>

 <?php wp_list_categories('show_count=1&title_li=<h2>Catégories</h2>'); ?>

<li class="categories">
    <h2>Catégories</h2>
    <ul>
        <li><a href="#">contines</a></li>
        <li><a href="#">nouvelles</a></li>
        <li><a href="#">pensées</a></li>
    </ul>
</li>

L’affichage des Archives

Les Archives nécessitent plus d’attention car la fonction ne produit qu’une suite de li, qu’il faut bien évidemment encadrer par une balise parente ul. Mais ça ne suffit pas : comme elle ne possède pas l’option pour afficher le titre, il faut le rajouter dans le code HTML. Ce qui demande d’ajouter une balise li au-dessus afin de respecter la structure du HTML qui n’autorise pas l’élément ul à être directement suivi d’un élément h2 ^^

<li>
    <h2>Archives</h2>
    <ul>
        <?php wp_get_archives('type=monthly'); ?>
    </ul>
</li>

Transportabiliser ces éléments

Si je voulais déplacer certains éléments de cette sidebar pour mettre le champs de recherche dans le header et transformer les Catégories en menu horizontal placé juste au-dessus des billets, je devrais placer chaque appel de fonction dans une balise div « transportable » ou « positionnable » si vous préférez. Pour celà, il suffirait de remplacer les balises li des deux exemples précédents par des div et le tour est joué.

…ou avec les Widgets ?

Je dois dire qu’au début, l’arrivée des Widgets ne m’a fait ni chaud ni froid : ils existaient déjà en tant que plugin. Par ailleurs, je préfère placer le code moi-même. Toutefois, dans une optique blog d’entreprise, ces modules sont une bénédiction pour donner aux clients qui veulent « prendre la main » sur leur outil de blog, la possibilité de le faire sans trop de casse.

Pour paraphraser une publicité bien connue : si c’est bon pour le confort de mon client, alors c’est bon pour mon confort ! Je me suis donc penché sur la question : on peut vraiment se simplifier la vie – et le code – en utilisant les Widgets. Le principe est simple : le sous-menu Widgets dans le menu Thèmes de l’administration permet de faire glisser les équivalents Widgets des fonctionnalités abordées plus haut (plus quelques autres qui étaient disponibles auparavant sous forme de plugin, comme : Commentaires récents, Articles récents et le très pratique module Texte) sur l’emplacement réservé Colonne latérale 1.

Comment ça marche ?

Par défaut, les fonctionnalités de la barre latérale sont gérées « en dur » dans le fichier sidebar.php qui attend que l’on glisse un Widget dans l’emplacement prévu pour passer en mode Dynamic Sidebar. Ce qui explique la présence de functions.php dans le dossier themes. Ce fichier est automatiquement reconnu par le moteur de WordPress dès sa création (au cas où je voudrais widgétiser un thème plus ancien) : il est destiné à contenir toutes mes fonctions PHP en plus des lignes suivantes :

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

Dans le fichier sidebar.php, je trouve, juste après l’ouverture de la balise ul, le code qui affiche ou non les fonctionnalités par défaut si le thème n’est pas Widget-Ready ou s’ils n’ont pas été activés. Autrement, ce sont les Widgets activés dans le panneau d’administration qui s’affichent.

<div id="sidebar">
    <ul>
        <?php   /* Widgetized sidebar, if you have the plugin installed. */
            if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
                [ le code pour afficher votre sidebar si votre thème n'est pas
                widget ready ou si les widgets ne sont pas activés ]
            <?php endif; ?>
    </ul>
</div>

'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>',

Pour info et pour comparer avec le premier exemple, voici le marquage HTML des Catégories:

<div id="categories" class="widget widget_categories">
    <h2 class="widgettitle">Catégories</h2>
    <ul>
        <li><a href="#">contines</a></li>
        <li><a href="#">nouvelles</a></li>
        <li><a href="#">pensées</a></li>
    </ul>
</div>

<div id="text-1" class="widget widget_text">
    <h2 class="widgettitle">Introduction</h2>
    <div class="textwidget">
        Bla bla bla...
    </div>
</div>

Il existe certainement un moyen pour arriver au même résultat en ne modifiant que le fichier functions.php du dossier themes, ce qui serait bien plus propre. Mais bon, la modif est minime et le résultat en vaut la peine ;) Et puis, je garde une trace des modifications apportées à mon code (enfin, je crois ;) ).

Heureusement, il est possible de saisir du code HTML dans le widget Texte qui accepte toutes les balises, de sorte que si l’on saisit le texte entre deux balises p, le « problème » est résolu ;) Mais bon, quand ce texte tient sur un seul paragraphe (ce qui est souvent le cas dans les présentations de blogs ou d’auteurs) ou que l’administrateur du blog ne connait pas le HTML (ce qui arrive lorsqu’on livre un blog clés en main), ce petit détour vers widget.php peut présenter un intérêt.

MàJ : La solution de burningHat pour modifier les widgets originaux proprement

La modification du moteur de WordPress n’est jamais une bonne idée : les concepteurs ont fait moult effort pour qu’on l’évite. Encore faut-il s’y connaitre un peu. C’est le cas de burningHat qui s’est creusé la tête pour trouver une solution dans l’esprit WordPress : élégance et efficacité.

L’idée est de redéfinir les fonctions des widgets dans le fichiers functions.php qui est attaché au thème et non au moteur. Voici un extrait de l’article original : WordPress 2.2 – Modifier les widgets originaux que je vous invite à lire sans tarder :

Nous allons utiliser cette méthode afin de faire en sorte que le widget “pages” exclu certaines des pages de notre blog de son listing. Je voulais exclure les liens vers “Archives”, “Liens” et “Nuage de tags” afin de de les séparer dans une rubrique à part. Ces pages sont identifiées respectivement par les n°131, 132 et 133. Le code dans une sidebar classique serait donc :

 <?php wp_list_pages('exclude=131,132,133&title_li='); ?>

Je vous renvoie à la page du codex pour détails de la fonction “wp_list_pages“. Nous allons donc définir un widget pour notre thème qui renverra le même affichage. Pour cela ouvrons le fichier “functions.php” situé à la racine de notre thème et ajoutons une fonction “widget_montheme_pages” :

function widget_newburn_pages() {
  wp_list_pages('exclude=131,132,133&title_li=<h2>Et encore...</h2>');
}

Et pour que WordPress en tienne compte en lieu et place du widget “Pages” normal, ajoutons également la condition suivante :

 if ( function_exists('register_sidebar_widget') ){   register_sidebar_widget('pages', 'widget_newburn_pages'); }

Cette dernière va simplement dire à WordPress que le widget “pages” à utiliser n’est pas celui d’origine mais celui que nous venons de définir avec la fonction “widget_newburn_pages“.

Widgets Area Ready ou comment gérer plusieurs « barres latérales » avec les Widgets

Certains thèmes sont prévus pour fonctionner avec deux « barres latérales », bien que ce terme est réducteur puisqu’il s’agit simplement d’une zone que l’on peut placer n’importe où avec les CSS du moment que la structure du code HTML le permet… C’est pourquoi je préfère parler de Widgets Area Ready ou WAR pour les intimes :)

Pour mettre en place plusieurs WAR, il faut apporter des modifications à functions.php :

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

J’ajoute ensuite le numéro d’ordre dans la fonction dynamic_sidebar() : 1 puis 2 et ainsi de suite pour chaque déclaration de WAR dans les fichiers où j’ai prévu d’afficher des Widgets :

<div id="sidebar">
    <ul>
        <?php   /* Widgetized sidebar, if you have the plugin installed. /
            if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(1) ) : ?>
                [ Les widgets glissés dans "Colonne latérale 1" s'afficheront ici  ]
            <?php endif; ?>
    </ul> </div> <div id="header-bis">
    <ul>
        <?php   / Widgetized sidebar, if you have the plugin installed. */
            if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar(2) ) : ?>
                [ Les widgets glissés dans "Colonne latérale 2" s'afficheront là ]
            <?php endif; ?>
    </ul>
</div>

Pour aller plus loin

Oups ! j’ai dit « Colonnes latérales » et non pas WAR ! Et pour cause : l’emplacement est désigné de cette manière dans la page d’administration. Qu’à celà ne tienne, il est possible de modifier l’intitulé des emplacements en suivant les explications données par automattic.

Sauf qu’après quelques essais, l’intitulé est bien modifié mais le %d s’affiche à la place des chiffres. J’ai pourtant essayé deux méthodes :

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

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

En guise de conclusion express

Comme la peinture de Stupeflip, WordPress est un outil de blog aux possibilités stupéfiantes que je teste sur différents terrains de jeux que je dévoilerais en temps voulu… Dotclear n’est pas en reste puisque j’ai un billet en cours de finalisation dans les cartons concernant la version 2 bêta 6 (tiens, manquerais plus qu’une version stable sorte avant que je publie mon billet. Pas taper, pas taper ;) )

Stay tuned and mind the gap!

Articles sur le même sujet

• Danse avec les loops #1 : un thème WordPress mis à nu
• Les widgets dans WordPress 2.5 avec widgétisator ;)
• Ecrire sur son blog WordPress avec Live Writer
• Optimiser et styler les catégories WordPress avec les CSS
• Avec Spongestats 3.0, mes stats ont la patate !