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 quoi au juste ce concours ?

Il s’agissait de proposer un thème pour WordPress en utilisant l’intendance fournie par Sandbox. Je vous renvoie sur l’un des billets que j’ai déjà écris sur ce thème Sandbox. Grosso modo, ce thème a deux particularités. D’une part, il offre l’intégration des microformats dans un écrin xhtml CHIC, donc classe… D’autre part, il utilise le fichier functions.php pour générer des classes à gogo en fonction du contexte dans lequel s’affiche la page dont voici quelques exemples :

 <body class="wordpress y2007 m05 d31 h18 home loggedin"> <body class="wordpress y2007 m05 d31 h18 archive category category-action-citoyenne loggedin"> <div id="post-1" class="hentry p1 post publish author-admin category-uncategorized y2007 m05 d16 h09"> <li id="comment-550" class="comment c1 byuser comment-author-admin bypostauthor c-y2007 c-m05 c-d31 c-h20">

Et quand on sait que Sandbox fera probablement partie un jour ou l’autre de la distribution WordPress, vous conviendrez qu’il est urgent d’aller jeter un oeil chez l’ami Scott !

46 designs — Mes impressions « à chaud »

La suite de ce billet contient mes notes de lecture prises durant la phase de sélection des designs. Ces notes, destinées à guider mes choix pour désigner les trois meilleurs thèmes accompagnés de leur chalengers, sont à peines réécrites pour les besoins de cet article. A la relecture, je m’aperçois que je n’ai pas été particulièrement tendre : que voulez-vous, c’est pas de ma faute si j’ai pris mon rôle de judge au sérieux ;) En, même temps, je me dis que ça ne sert à rien d’embellir les résultats après coup pour éviter de froisser les susceptibilités. Car en fait, si les résultats parlent d’eux-mêmes, ils ne disent finalement pas grand chose sur les designs qui n’ont pas été retenus.

Ca va sans dire mais mieux en le disant, il s’agit essentiellement d’impressions personnelles et subjectives, même si ça et là, quelques justifications techniques ou ergononiques donnent l’impression du contraire ^_^. Lorsque je n’ai pas pu me prononcer franchement « pour » un design, j’ai joué la carte de l’honnêteté en précisant « N/A » pour « Non Applicable » au moment où j’ai rédigé ma note. En revanche, je me suis appliqué à justifier mes impressions « contre ».

Les 46 designs »

Articles sur le même sujet

• 390 ressources Javascript & jQuery
• Devenez Alpha testeurs pour Vanilla : un thème WordPress basé sur SandBox et Yahoo! User Interface CSS
• Améliorations cosmétiques et ergonomiques sur ce blog
• Sont taquins chez WordPress ;)
• 1000 ressources pour le développement web et WordPress

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 !