Article en plusieurs parties : 1 2 3
…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 »
Article en plusieurs parties : Page précédentePage suivante
Je crois que tu vas avoir des backlinks en plus :)
Allez, je croise les doigts pour que l’intendance suive :)
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 !
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++
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 !
La seule vraie question est : l’auteur est-il fan de la série The IT Crowd et en particulier du S1E02 !?
ZeuBeuBeu > J’ai cherché sur hdtv.unotherblog.net/ mais je n’ai rien trouvé sur The IT Crowd ;)
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…
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 &#…
ZeuBeubeu > Comment ça, me "procurer" la première saison ;)
Génial ! merci beaucoup, c’est dont j’avais besoin …
Super article, merci beaucoup.
A tout hasard tu ne saurais pas comment récuperer le nom de la function de chaque widget ?
@kenny > je crois que tu peux trouver ça dans le fichier functions.php qui fait partie du thème.
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.
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).
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.
@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 ;)
Merci je v jeter un oeil à tout ca :)
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
Merci pour ces infos utiles, en particulier celles sur les widgets… et bravo pour ce site!
ouch la ça envoi du lourd!
je pense avoir saisi l’essentiel…mais il faudra que je le relise après avoir dormis :D
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
@Jay > Je n’ai pas bien compris ce que tu entendais par « design des widgets, et non pas le contenu » ?
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.
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 ;)
D’acc Bruno, merci beaucoup, je me suis incris a ton RSS pour être sur de pas louper tes tutos ! ;-)
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.
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
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) ;)
@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 commesingle.php,page.phpsearch.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"; }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 ;)
@AjT > on doit pouvoir s’en sortir en utilisant le numéro identifiant le billet : post-< ?php the_ID(); ?> 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 ;)
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 ?
@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.
merci a vous pour cette réponse !!! ;)
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 …
@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"avecclass="widget widget_recent_entries". Pour attendre la liste elle-même puis les éléments de la liste, il faudra donc utiliser :Pour le titre
H2, on pourra utiliser la classe .widgettitle pour uniformiser ce titre avec les autres, ou bien utiliser :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 ;)
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 !
Super, merci, bravo !