Tutoriel WordPress : la sidebar à la loupe, comprendre les widgets et déclarer une "WAR"

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Tutoriel WordPress : la sidebar à la loupe, comprendre les widgets et déclarer une "WAR"

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>
Cette balise li est une des rares balises HTML de deuxième niveau avec dd (mise à part le body évidemment) qui accepte tout type de balises en son sein. Il est même possible d’y placer du texte directement sans perdre en conformité. Ce comportement associé au fait qu’on peut justifier l’utilisation d’une liste à partir de deux ou trois élements faisant partie d’une même unité logico-sémantique, explique le succès des listes ul ou ol auprès des intégrateurs HTML.

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>'); ?>
Pour info, voici le marquage HTML des Catégories de l’exemple ci-dessus :
<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>
Pour styler ces éléments de liste, il est essentiel de garder à l’esprit l’imbrication des ul li ul li ou ul 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>',
    ));
?>
Grosso modo : si la fonction register_sidebar() existe, tous les Widgets activés se verront chapeautés par un élément de liste li et le titre sera encadré par un h2 (l’élément ul est à ajouter dans le code, comme c’est le cas dans le thème par défaut).

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>
Pour remplacer les éléments de liste de premier niveau, je supprime les balises ul situées après l’ouverture de <div id= »sidebar »> et juste avant la dernière balise fermante </div> dans sidebar.php, puis j’utilise l’élément div à la place du li dans le passage suivant du fichier functions.php vu précédemment :
'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>',
Désormais, chaque appel de Widget sera encadré par une jolie div avec le nom du module comme identifiant, accompagné de la classe générique pour les Widgets et d’une classe spécifique pour le module en question.

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>
Voici maintenant le marquage HTML affichant le contenu du Widget Texte 1 :
<div id="text-1" class="widget widget_text">
    <h2 class="widgettitle">Introduction</h2>
    <div class="textwidget">
        Bla bla bla...
    </div>
</div>
Arrgh ! Mais que vois-je ? Et la sémantique, alors, elle est où ? Lorsqu’on ne saisie que du texte, il faut se contenter d’une pauvre div sans signification pour encadrer notre prose ? Pas très sémantique tout ça. Je vais réparer tout celà efficacement à défaut de le faire proprement… Je vais modifier le fichier /wp-includes/widgets.php à la ligne 502 pour remplaçer les éléments div de la fonction wp_widget_text($args, $number = 1) par des éléments p plus parlant !

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); ?>
Notez le « s » à register_sidebars(…) qui a son importance. Je me suis inspiré de ce qui existe dans le thème sandbox :

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>
Si tout se passe bien, la page d’adminitration des Widgets devrait proposer « Colonnes latérales 1″ et « Colonnes latérales 2″ pour accueillir les modules.

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);
?>
Puis :
<?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'));
?>
Pour continuer dans les améliorations, je cherche comment obtenir un formatage différent selon la WAR utilisée. Pour l’instant, j’ai l’impression que seul un modèle peut s’appliquer. Si vous avez une idée sur la question, n’hésitez pas à vous manifester :)

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

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



56 commentaires pour “Tutoriel WordPress : la sidebar à la loupe, comprendre les widgets et déclarer une "WAR"”

  1. Alexandre dit :

    Je crois que tu vas avoir des backlinks en plus :)

  2. br1o dit :

    Allez, je croise les doigts pour que l’intendance suive :)

  3. Fran6 dit :

    Très bon article Br1o. Pas forcément facile d’accès pour le commun des mortels ;-) mais important pour la widgetisation de plusieurs colonnes !

  4. br1o dit :

    Merci Fran6. J’ai essayé d’être précis sur certains aspects du code du thème par défaut, par exemple, le pourquoi du comment de l’ajout de balises li dans un cas et pas dans un autre, ce qui me semble relativement abordable pour un débutant qui suivrait avec le code sous le coude ;)

    En revanche, je n’ai pas abordé les possibilités pour personnaliser les appels de fonctions. D’abord parce que le codex n’est pas si mal fait que ça ;) et ensuite, vu les possibilités, c’est sans limite (ou presque).

    Tu disais : – "Pas forcément facile d’accès pour le commun des mortels"

    Je dirais (mode je m’la pète) : – "après la lecture du billet les mortels seront un peu moins communs :p "

    a++

  5. Fran6 dit :

    L’article est en tout cas très clair et c’est pas forcément facile de le rendre plus accessible, étant donné le sujet à la base ;-) C’est très technique en même temps… Tu as l’avantage de bien expliquer les choses, donc ça rend la pilule plus facile à avaler !! :D En tout cas, j’avais écrit un tuto pour la widgétisation des thèmes mais j’ai zappé le fait d’avoir plusieurs colonnes…zut! Ben, j’en ferai un autre en envoyant vers ton article ! ;-) En tout cas, ton blog est très intéressant !

  6. ZeuBeuBeu dit :

    La seule vraie question est : l’auteur est-il fan de la série The IT Crowd et en particulier du S1E02 !?

  7. br1o dit :

    ZeuBeuBeu > J’ai cherché sur hdtv.unotherblog.net/ mais je n’ai rien trouvé sur The IT Crowd ;)

  8. ZeuBeuBeu dit :

    Oula tu ne connais pas (encore) !? La saison 2 est en cours de tournage et tu devrais te "procurer" la première (courte, 6 épisodes) saison fabuleuse de cette série de geeks pour les geeks…

  9. burningHat dit :

    WordPress 2.2 – Modifier les widgets originaux Lors de la conception du thème “NewBurn” pour ce blog, j’ai été confronté à un sérieux problème de conception. Je voulais qu’il soit “widget ready” MAIS les widgets d’origine (et notamment les widgets &#…

  10. br1o dit :

    ZeuBeubeu > Comment ça, me "procurer" la première saison ;)

  11. la Pensine dit :

    Génial ! merci beaucoup, c’est dont j’avais besoin …

  12. kenny dit :

    Super article, merci beaucoup.

    A tout hasard tu ne saurais pas comment récuperer le nom de la function de chaque widget ?

  13. Bruno Bichet dit :

    @kenny > je crois que tu peux trouver ça dans le fichier functions.php qui fait partie du thème.

  14. kenny dit :

    Je me suis mal exprimé en fait j’ai le widget pour afficher un flux rss dans ma sidebar (celui de base fourni par wordpress) je l’ai mis en tant que widget dans ma sidebar mais j’aimerai récuperer le code de la fonction pour pouvoir l’integrer dans mon footer. Vu que c un widget de base il est pas dans le fichier fonction du theme.

  15. Bruno Bichet dit :

    ok, a priori, c’est justement le sujet du billet ;) En fait, il faut que tu déclare une nouvelle zone widgetisable (WAR dans mon jargon) pour pouvoir ajouter ensuite le widget flux RSS (il est possible d’avoir plusieurs instances des flux, qui est correspond à ton cas).

  16. kenny dit :

    Oui j’avais bien compris ça merci, mais le truc c’est que je ne veux pas passer par la sidebar car j’aimerai changer l’adresse du flux dynamiquement avec la variable de titre du billet… c’est un peu flou vu comme ça mais j’aurais juste besoin du nom de la fonction pour le faire.

    J’ai déjà galerer avec pas mal de plugins pour retrouver les noms de leurs fonction sur certains c’est indiqué mais pour d’autres c’est vraiment galere:/

    Enfin c’est pas grave merci quand même pour ton aide bonne journée et encore bravo pour ton blog.

  17. Bruno Bichet dit :

    @kenny > oki, je pense que tu trouveras ton bonheur à l’adresse http://codex.wordpress.org/Customizing_Feeds ou alors à l’adresse http://codex.wordpress.org/WordPress_Feeds Merci et à bientôt ;)

  18. kenny dit :

    Merci je v jeter un oeil à tout ca :)

  19. burningHat dit :

    Tous les codes des widgets sont dans /wp-includes/widgets.php

    Sinon, pourquoi ne pas déclarer une sidebar que tu afficherais en tant que contenu du footer ? histoire de pouvoir : 1. la gérer avec les widgets 2. pas t’emmerder à recopier du code pré-existant

  20. pozowebs dit :

    Merci pour ces infos utiles, en particulier celles sur les widgets… et bravo pour ce site!

  21. antoine dit :

    ouch la ça envoi du lourd!

    je pense avoir saisi l’essentiel…mais il faudra que je le relise après avoir dormis :D

  22. Jay dit :

    Super instructif, mais je suis un petit peu déçu de ne voir qu’aucun blog ne propose d’explications pour personnaliser le design des widgets, et non pas le contenu. C’est dommage car je suis sur qu’un petit tuto pourrait en réjouir plus d’un (dont moi evidemment!) :-D

  23. Bruno Bichet dit :

    @Jay > Je n’ai pas bien compris ce que tu entendais par « design des widgets, et non pas le contenu » ?

  24. Jay dit :

    Par exemple, intégrer les widgets dans un cadre (exemple iTheme), changer le background, avoir des icones differentes en fonction des widgets. Pour ma part, je trouve mes widgets trop simples et je voudrais les intégrer dans une « boite » de couleur, aux bords arrondis.

  25. bruno bichet dit :

    oki, je vois mieux ce que tu veux dire maintenant. Bon, je ferais un tuto dans ce sens lorsque j’aurais installé wordpress 2.5 : j’ai encore un bout de billet sur les widgets qui trainent dans les placards et je pense que je pourrais caser quelques conseils pour stylisationner les widgets ;)

  26. Jay dit :

    D’acc Bruno, merci beaucoup, je me suis incris a ton RSS pour être sur de pas louper tes tutos ! ;-)

  27. Li-An dit :

    Mon dieu, du boulot en perspective… Rajoutez un élément de sidebar et bientôt les widgets avec un look différent… Bon, je m’abonne au flux, tant pis.

  28. Nemico dit :

    Moi ce que je repproche au WordPress c’est qu’il faut, si j’ai bien compris, pour installer des plugin’s, faire des formulerais de contact, utiliser forcément un hébergeur …

    Tout le monde n’a pas les connaissances pour utiliser ce genre de chose … ou n’a pas envie d’aller chercher un hébergeur, de le payer, de se prendre la tete avec un ftp …

    J’aimerai bien savoir s’il exciste un moyen de créer un formulaire en n’utilisant pas d’hébergeur et de ftp. Si oui je suis prenneur ! Merci loll

  29. AjT dit :

    Voilà qui est complet on sait tout sur la sidebar ou presque :P

    Est il possible de gérer plusieurs sidebar en fonction du contexte (page, article, recherche…) ?

    Merci et bravo ! (et réciproquement) ;)

  30. Bruno Bichet dit :

    @Nemico > il est tout à faire possible d’utiliser wordpress sans hébergeur en ouvrant un compte sur http://wordpress.com ;)

    @AjT > tout à fait, oui, ça se fait même assez simplement en utilisant les fontions prévues à cet effet (is_single() is_page(), is_search() etc. ou en créant les pages kivonbien comme single.php, page.php search.php, etc. dans le premier cas, il suffit de vérifier une condition du genre : if ( is_page() ) { include "sidebar-page.php"; } else { include "sidebar-passe-partout.php"; }

  31. AjT dit :

    Superbe il me semblait bien qu’on avait ce genre d’alternative. Pour pousser le bouchon un peu plus loin (Maurice..) peut on également le faire en fonction de la longueur des articles par ex c’est à dir eune sidebar attitrée à l’article 59,etc ?

    Merci de cette promptitude ;)

  32. Bruno Bichet dit :

    @AjT > on doit pouvoir s’en sortir en utilisant le numéro identifiant le billet : post- if ( ‘post-‘ . the_ID() == post-18 ) { etc.

    Bon, là, je n’ai pas testé et il y a peut-être des restrictions quant à l’utilisation de la fonction the_ID() en dehors de la boucle. A tester, donc ;)

  33. artfaks dit :

    Salut, tout d’abord je tient à vous félicitez pour votre blog qui est une vrai mine d’or, en plus un débutant comme peut aisément comprendre et mettre les mains dans le cambouis comme vous dites souvent ;) !!!

    Une fois de plus je cherchais à faire quelque chose de bien spécifique sur ma sidebar de droite et en cherchant sur mon ami GG j’ai encore atterri ici ;) !!!

    Je suis débutant et je comprend un peu ce tuto mais pas en totalité, je cherche à gérer le widget « texte » pour qu’il affiche un texte différent dans chaque page de mon blog (que je tient à transformer en site) !!! j’ai donc repris ce tuto mais étant débutant en php, j’ai un peu de mal, donc j’ai ouvert mon fichier fonctions.php de mon thème et j’ai rajouter ces lignes : [code] function widget_mon_theme_Texte() { wp_list_Texte(‘exclude=jeux,geek,133&title_li=Infos’); }

    if ( function_exists(‘register_sidebar_widget’) ){ register_sidebar_widget(‘Texte’, ‘widget_mon_theme_Texte’); } [/code]

    Mais je ne parviens pas à ce que je veut faire !!!

    Pourriez vous me donner quelques pistes s’il vous plait ?

  34. Bruno Bichet dit :

    @artfaks > Pour avoir un texte différent sur chaque page à l’aide du widget texte, on peut créer autant de zones widgétisables qu’il y a de textes différents. Voir ce billet sur les widgets dans WordPress 2.5 pour mieux gérer l’intitulé des zones.

  35. artfaks dit :

    merci a vous pour cette réponse !!! ;)

  36. Mike974 dit :

    Bonjour et merci pour vos articles si intéresants !

    je suis en train de mettre en place mon 1er Blog WordPress et j’aurais une questio très simple (pour vous) dans mon widget « Les derniers articles » je voudrais modifier le style des balises et

    quelle feuille css dois-je modifier et dois-je modifier sidebar.php ?

    merci de votre réponse à cette (première) question …

  37. Bruno Bichet dit :

    @Mike > le widget en question génère une liste imbriquée dans la liste principale de la sidebar. L’élément de liste est identifié par id="recent-posts" avec class="widget widget_recent_entries". Pour attendre la liste elle-même puis les éléments de la liste, il faudra donc utiliser :

    #recent-posts ul { ... } #recent-posts ul li { ... }

    Pour le titre H2, on pourra utiliser la classe .widgettitle pour uniformiser ce titre avec les autres, ou bien utiliser :

    #recent-posts h2 { ... }

    pour lui donner un style particulier.

    Je n’ai pas regardé la feuille de style, mais en ajoutant les déclarations indiquées plus haut à la fin de style.css, ça ne devrait pas poser de problème ;)

  38. Mike974 dit :

    merci pour la réponse rapide et efficace !

    en effet, en appliquant exactement tes instructions, c’est nickel !!

    maintenant, je comprends mieux l’imbrication des listes et sous-listes dans le sidebar et je vais pouvoir appliquer le design voulu.

    Vive le css !

  39. Kadjin dit :

    Super, merci, bravo !

  40. guizm0w dit :

    Bonjour et merci pour ce ticket très enrichissant. J’espère qu’il est toujours d’actualité malgré sa date :p

    En fait je me posais quelques questions lors de la création d’un thème wordpress, nous sommes confrontés à deux choix pour la sidebar. Soit de coder directement dans le template avec les fonctions wordpress sans utiliser de widgets (donc on est assez limités en fait) soit utiliser les widgets qui prennent le dessus sur notre code.

    D’après ton billet la deuxième solution semble la plus préférable. Cependant je n’ai pas compris la syntaxe que tu utilise pour redefinir les id et classes des widgets dans le fichier functions.php

    « ‘before_widget’ =>  », » Y’a t’il une doc pour expliquer le %1$s ou le %2$s ?

    Merci.

  41. Bruno Bichet dit :

    @guizm0w — les %1$ et %2$ servent uniquement pour l’affichage des id et des classes. Par exemple, dans le cas d’un widget « Text », l’id sera du type id="text-3" class="widget-text" tout simplement ;)

  42. guizm0w dit :

    D’accord merci, et donc cette syntaxe %1$ et %2$ est uniquement spécifique à WordPress je suppose. Mais en tout cas c’est très pratique c’est pile poil ce qu’il me faut pour mettre en style mes widgets.

    Merci encore

  43. Bruno Bichet dit :

    @guizm0w — Je crois que c’est surtout une syntaxe PHP courante quand on utilise la fonction sprintf qui permet de caster les variables avant l’affichage tout en réservant les emplacements dans une chaine de caractère.

  44. guizm0w dit :

    Merci pour cette précision.

    Bonne continuation :).

  45. lolo dit :

    Bonjour,

    j’ai créé une deuxième colonne en créant une nouveau fichier (sidebar_droite.php), j’ai donc une colonne de chaque côté de mon site. Et j’aimerai savoir si tu sais comment modifier WordPress lui même pour qu’il reconnaisse ma deuxième colonne dans l’administration. Ou sinon avec ta méthode qui est de déclarer le deux colonnes dans ton fichier sidebar.php, est ce qu’il est possible d’afficher correctement la deuxième à droite du contenu principal, sans que ça soit tout chambouler au niveau du html et css.

    Merci d’avance.

  46. Charlotte dit :

    Bonjour,

    Je me permet de poster ici car j’aimerai savoir comment vous avez fait pour que l’arrivée de votre sous-menu de l’onglet « rubrique » soit comme sa. J’aimerai obtenir la même chose mais ne trouve pas de réponse sur les forums. Merci d’avance Cordialement

    Charlotte

    • br1o dit :

      Bonjour,

      Pour cela, j’utilise le code suivant :

      <!--li&gt;&lt;a id=&quot;accueil&quot; title=&quot;Retour vers la page d'accueil&quot; href=&quot;/"&gt;Accueil</a>&lt;/li-->

                  &lt;a title="Cliquez pour afficher tous les articles par catégories" href="/categories" rel="nofollow"&gt;RUBRIQUES&lt;/a&gt;
      
                   cat_ID) != "") {
                            echo "&lt;ul&gt;";
                            wp_list_categories('orderby=id&amp;amp;show_count=0&amp;amp;title_li=
                            &amp;amp;use_desc_for_title=0&amp;amp;child_of='.$this_category-&amp;gt;cat_ID);
                            echo "&lt;/ul&gt;";
                        }
                  ?&amp;gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;a href="http://twitter.com/br1o" title="Le compte Twitter de l'intégrateur web" rel="nofollow"&gt;TWTTR&lt;/a&gt;&lt;/li&gt;
              &lt;a href="http://feeds.feedburner.com/css4design" title="Abonnez-vous au flux RSS" rel="nofollow"&gt;RSS&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      

      • Charlotte dit :

        bonjour,

        Je vous remercie pour votre réponse. Concernant le code vous le mettez dans le header du thème? En attendant je vais tester ça. Merci encore

      • Charlotte dit :

        Bonjour,

        J’ai fait plusieurs test sans résultats pourriez-vous m’indiquer où vous avez mis ce code car je ne sais pas du tout dans quel « page » de l’éditeur le mettre. J’utilise le thème twenty ten.

        Merci d’avance.

        Charlotte

        • Christopher Hennuyez dit :

          Le code est correct Charlotte, Il faut évidemment que tu mette tout ça en style sous CSS…

          Si utilise twenty-ten, vérifie bien la hiérachisation du menu et leur lien avec le CSS (Class, id, structure) ensuite essaye de faire correspondre le code ci-dessus avec le CSS de twenty-ten. Rajoute de nouvelles « class » au besoin…

          • Charlotte dit :

            Merci pour votre réponse je vais tester essayer, même si je l’avoue, je n’ai pas tout compris ce que vous m’avez dit. Et oui le j’utilise bien twenty ten. Merci encore

  47. Christophe Hennuyez dit :

    Essaye de nommé avec ‘name’ => sprintf(__(‘Sidebar %d’), $i ),

  48. Christophe Hennuyez dit :

    Essaye de nommé avec ‘name’ => sprintf(__(‘Sidebar %d’), $i ),



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site