Article en plusieurs parties : 1 2 3
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 ? »
Article en plusieurs parties : Page suivante
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.
Afin de satisfaire le plus grand nombre, j'ai ajouté
un bouton Flattr parce que vous le valez bien ;)
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 !
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.
@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 dutype id="text-3" class="widget-text"tout simplement ;)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
@guizm0w — Je crois que c’est surtout une syntaxe PHP courante quand on utilise la fonction
sprintfqui permet de caster les variables avant l’affichage tout en réservant les emplacements dans une chaine de caractère.Merci pour cette précision.
Bonne continuation :).
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.