Francis Chouquet Lettering + Logo Design

Création Thème WordPress | Tutorial #13: Widgetisez votre sidebar pour WordPress 2.2

0

Ce tutoriel est le treizième d’une série d’articles sur la création d’un thème pour WordPress de A à Z. Si vous prenez le train en cours et si vous souhaitez créer votre propre thème de A à Z, je vous conseille fortement de commencer par le premier tutoriel de la série. Si vous souhaitez uniquement mettre votre thème aux normes de WordPress 2.2, ce tutoriel sera parfait pour vous aider !!

Avec l’arrivée de la version 2.2 de WordPress, arrive aussi « en série » les Sidebar Widgets. Les Sidebar Widgets vous permettent de modifier votre sidebar comme vous le souhaitez, sans avoir à toucher au code dans les templates. Mais rapidement, un problème se pose: tous les thèmes ne sont pas « widget ready ». Alors que vous ayez un de ces thèmes qui ne supporte pas les widgets ou que vous avez vous-même créé votre thème et que vous aimeriez le widgetiser, je vais vous expliquer la marche à suivre.

1. Création du template functions.php

Pour commencer, vous allez devoir créer un nouveau fichier, sous le dossier de votre thème. Ce fichier s’appelle functions.php. Dans ce template, vous allez y ajouter le code suivant:

1 2 3 4 
<?php if ( function_exists('register_sidebar') ) register_sidebar(); ?>

Si vous avez plus d’une colonne dans votre sidebar, entrez le chiffre correspondant au nombre de colonnes dans la dernière ligne de php. Par exemple, si vous avez deux colonnes, vous devez avoir le code suivant:

1 2 3 4 
<?php if ( function_exists('register_sidebar') ) register_sidebar(2); ?>

Enregistrez votre fichier et fermez-le. Vous n’en aurez plus besoin.

2. Modifications du template sidebar.php

Maintenant, nous allons ajouter quelques lignes de code dans le template sidebar.php pour permettre aux widgets de s’afficher correctement. Placez la ligne de code suivante directement sous l' »ouverture » de la liste de la sidebar, sous la balise UL:

1 
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

Comme c’est une requête php « if », il nous faut refermer cette requête par une « endif ». Pour cela, juste avant la balise UL qui referme la liste de la sidebar, ajoutez la ligne de code suivante:

1 
<?php endif; ?>

Ca devrait donner quelque chose comme ça:

1 2 3 4 5 6 7 
<ul> <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>   CONTENU DE LA SIDEBAR   <?php endif; ?> </ul>

Enregistrez votre fichier. Allez maintenant dans l’administration de votre blog et vous devriez voir apparaître l’onglet pour gérer les widgets ! Vous pouvez maintenant bouger chaque module de votre sidebar comme vous le souhaitez ! Quoi qu’il en soit, il faut savoir qu’utiliser les Sidebar Widgets va « supprimer » de votre sidebar tout ce qui y était auparavant. Je dis « supprimer » mais ce n’est pas totalement vrai. Vos infos sont toujours stockés dans le fichier sidebar.php mais n’apparaîtront plus sur l’écran. WordPress passera désormais uniquement par les Sidebar Widgets pour l’affichage de la sidebar. Tenez compte aussi du fait qu’un certain nombre de plugins ne sont pas encore disponibles en widgets. Si vous les utilisez aujourd’hui, vous ne pourrez peut-être plus le faire avec les widgets !

Pour plus d’informations sur l’utilisation des widgets dans votre sidebar, n’hésitez pas à aller voir sur ce site, tout y est clairement expliqué !

Et si vous avez 2 ou plus de colonnes dans votre sidebar, je vous conseille cet excellent article de Br1o. Je vous préviens que c’est assez technique alors n’hésitez pas à poser vos questions ici ou chez lui s’il y a quelque chose que vous ne comprenez pas ! 😉

Tutoriel n°14: « le footer »

Et si ça vous intéresse, avec des amis, on a créé notre boutique de ventes de thèmes WordPress, Peaxl. Venez jetez un oeil ! 😉

Fran6

168 Commentaires

  • aoudjane

    slt a tous jé instalé un widget smart youtube mais je ne sais pas comment l’afficher dans mes article.coment je doit faire??

  • aoudjane

    sé bon jé trouvé l astuce le truc ses que j’est fait la méme betise que Karine.désolé.

  • Carine

    bonjour fran6
    j’ai un problème avec la widgetisation du sidebar.
    Lorsque je rajoute la ligne et comme indiqué, j’ai une erreur dans le preview de mon template de ce style : Internal Server Error
    The server encountered an internal error or misconfiguration and was unable to complete your request.
    Et lorsque je regarde le site en ligne il met enormement de temps à s’afficher, et affiche une longue ligne de pointillé verticaux au lieu de la sidebar.
    Si j’ôte cette ligne de code, tout marche, mais ce n’est pas le but.

  • Carine

    J’ai trouvé une solution en copiant le fichier sidebar.php et le fichier functions.php du theme de base. Peux-être que depuis la nouvelle version y’a un problème. Si tu veux en savoir plus, je peux refaire la manip inverse et te montrer ce que ça donne.
    A part cette partie, tout va bien, merci encore pour ce tutos gigantesque 😀

  • bonjour et merci pour ces super tutos,
    mais j’ai un petit souci à cette étape, lorsque je créé le fichier functions.php et que j’y colle le code ci dessus, lorsque je vais sur le site j’obtiens ces lignes sur la page connection à wordpress

    Warning: Cannot modify header information – headers already sent by (output started at /homepages/39/d277276539/htdocs/marionvobmann/blog/wp-content/themes/template02a/functions.php:14) in /homepages/39/d277276539/htdocs/marionvobmann/blog/wp-login.php on line 287

    Warning: Cannot modify header information – headers already sent by (output started at /homepages/39/d277276539/htdocs/marionvobmann/blog/wp-content/themes/template02a/functions.php:14) in /homepages/39/d277276539/htdocs/marionvobmann/blog/wp-login.php on line 299

    et
    sur la page du site en lui-même, bien que tout le reste s’affiche. Une solution?
    –ca fait trois fois que je réinstalle wp, et à chaque fois la même chose

    merci d’avance

  • ah ca y’est ca marche !! après plus d’une heure de recherches,
    j’ai enfin réussi. Comme je travaille directement sur le serveur (pas en local), il m’a suffit de remplacer le fichier wp-login.php original par le même en utf-8, et c’est bon

  • Juste un petit message à propos de la « widgetisation » de la sidebar.

    Une question se pose une fois la manipulation effectuée :
    Comment faire passer des arguments au widget (et donc à son template-tag) ?

    Car le problèmeest que l’on y a plus accès directement : le template-tag est généré par WP et l’administration ne permet pas de gérer les arguments éventuels que l’on voudrait y rajouter

    Je pensais que l’administration aurais permis de faire passer ces arguments avec des textbox mais non, on peut juste assigner un titre.

    Serais-je passé à côté de quelque chose ?

    Exemple pratique :
    Je souhaitais diminuer la taille des mots clé les plus grands dans le widget d’origine « Nuage de mots-clefs »

    Cela est tout à fait possible en tant normal (= sidebar pas widgetisée), voir le codex officiel pour ‘wp_tag_cloud’
    Il s’agit de faire passer l’argument ‘largest = 16’ (par exemple) au template-tag.

    Seulement, une fois la sidebar ‘wigetisée’, il n’est pas possible d’accéder directement à ce template-tag, et donc de lui faire passer un tel argument.

    La solution est donc de rajouter quelque lignes dans le fichier functions.php

    Tout est expliqué dans cette page du blog burninghat.net (solution 2)

    De rien 😉

  • Greg

    Je ne comprends pas j’ai tout essayé et toujours le pb « aucune colonne latérale définie » et malheureusement je vois que beaucoup ont posé la question mais pas de réponses.
    En tout cas, excellent travail ce tutoriel cela permet de mieux comprendre comment tout cela fonctionne ce qui n’est pas chose aisée…

  • Greg

    Finalement, j’ai réussi et je précise pour les prochains se trouvant dans le même cas. C’est tout simple, il faut que vous changiez de thèmes et que vous le réactiviez afin de pouvoir acceder aux widgets.
    Bonne chance à tous et merci encore à francis

  • Merci Greg pour la réponse… Bizarre qu’il fasse réactiver le thème pour que la widgétisation soit prise en compte… Quoi qu’il en soit, si ça marche !! 😀

  • На пике моды – женские джинсы-корсет.

  • Bonjour fran6, et merci pour ce tuto,
    Moi j’ai commencé le tuto en partant de zero comme tu le proposais au début de tes post, et la j’arrive à la widgetisation, mais la je ne sais pas ou j’ai merdé mais j’ai le meme problème que greg, mais moi en désactivant mon thème et en le réactivant ça ne change rien…
    Du coup après avoir tournée en rond pendant un moment le me suis décidé a t’envoyer un petit message au cas ou tu es la solution.

    Pour le moment dans ma fenetre des widget il me dit ça wordpress:

    Aucune colonne latérale définie

    Le thème que vous utilisez n’est pas conçu pour les widgets, ce qui signifie qu’il ne dispose pas d’une colonne latérale que vous pouvez modifier. Pour obtenir des informations sur la manière de rendre votre thème compatible avec les widgets, lisez ces instructions (en anglais).

    je sais que j’arrive un peu tard a peine 2 ans apres que tu es fait se tuto mais j’essaye d’apprendre a utiliser bien wordpress et je me disais que d’apprendre a faire le thème me permettrais par la suite pouvoir en modifier a ma guise plus facilement en sachant ou aller pour modifier les chose qui m’interesse.

  • Laura

    Bonsoir Francis, tout d’abord vraiment merci pour ces tutos ils sont canons même pour des débutants et c’est très appréciable.

    Cependant j’ai un petit souci et je viens donc chercher ton aide :

    après avoir fini les manips en suivant ce tuto tout s’affiche bien sur le blog mais je n’accède plus à la page admin

    Quand j’essaie d’aller sur http://localhost:8888/wordpress/wp-login.php j’ai une page blanche… Donc impossible d’essayer de changer de thème pour vérifier si le problème vient de là.

    Je ne vois vraiment pas où j’aurais fait une erreur donc si jamais t’avais une idée je suis toute ouïe.

    Merci très sincèrement de ton aide 🙂

  • Внутри пятиугольника спрятан шарик. На треугольнике есть зеркальце. А вершину пирамидки будет венчать большой разноцветный шар! Игрушка для детей.

  • Tout fonctionne parfaitement bien ! Merci !
    Par contre, comme il existe des widgets WP pour le calendrier, les catégories, les liens.. est-il nécessaire de les avoir dans le code du fichier sidebar.php ?

  • Emilie

    Salut, tout d’abord merci pour ces supers tutos!!!
    alors moi en lisant les coms j’ai l’impression d’être la seule grosse débile sur ce site, parceque je sais déja mm pas comment on accède a l’admin de son blog, a savoir que moi je n’y connais strictement rien a la base et que je suis pas à pas le tuto, mais au niveau des widgets je reste bloquée comme apparemment pas mal de monde, mais j’ai l’impression que le pbm chez moi vient du fait que je ne sais d’abord pas chercher au bon endroit…donc bah tant pis, je pense qu’il n’y a pas de question « conne » quand on ne sait pas… ^^ donc je me lance : comment accéder a ce fameux admin!!?
    merci pour la réponse éventuelle 🙂

  • Emilie

    Bon ben j’ai résolu mon pbm moi mm et j’ai mm trouvé l’onglet widgets!!! ^^

  • Simon

    Bonjour,

    Afin d’éviter les bugs lors de votre transfert de local à hebergeur :

    De type :

    Warning: Cannot modify header information – headers already sent by (output started at …\wp-content\themes\XXX\functions.php:11) in …\wp-includes\pluggable.php on line XXX

    Je vous conseil ce code pour la page functions.php

     »,
    ‘after_widget’ =>  »,
    ‘before_title’ =>  »,
    ‘after_title’ =>  »,
    ));
    ?>

    Sinon mis à part ce probleme, tout est nickel, merci Fran6 pour ce superbe tuto !

  • Simon

    Sorry

    Autant pour moi, Le code du message d’en haut ne passe pas.

    -> Donc ouvrez un theme classic minimal de wordpress et copiez coller le fichier functions.php présent dans ce theme.

    Attention au :
    register_sidebar(array(
    adapté a votre nbre de colonnes
    Par défaut, il n’est pas précédé d’un chiffre.

    Bon courage.

  • Oui effectivement, les choses ont un peu été améliorée depuis la rédaction de ces tutos, il faut que je pense à mettre tout ça à jour !! 😉

  • Bonjour

    je me suis mis au tutoriel voici quelques jours et l’apprécie beaucoup; par contre comme il est sorti il y a pas mal de temps, les articles vers lesquels ils renvoient ne sont plus sur les liens intégrés au texte.
    Où puis je donc trouver l’article auquel vous vous référez en fin du tutoriel ci-dessus pour ce qui concerne la mise en place et la gestion d’un side bar de 2 colonnes et plus
    merci et bon week-end
    Henri

  • Halcyon

    Bonjour,

    Un grand bravo et un aussi grand merci pour tous ces conseils, et les commentaires.
    Enfin je comprends quelque chose à PHP xD !
    Juste une question : je cherche à faire un site « classique », c’est à dire un WordPress plus site que blog… je voudrais savoir comment utiliser les fonctions blogs dans deux blocs d’actu sur ma page. En gros, comment composer une page avec deux blocs « actu/blog » au sein d’un contenu.

    Voici ma charte graphique, tu comprendras plus simplement mon problème 😉 :
    http://www.hiboox.fr/go/images.....1.jpg.html

    Encore une fois, mille mercis pour ton travail de qualité, ça fait plaisir de voir de bonnes volontés oeuvrer pour nous ^^ Tu devrais parler au site du zero de ton blog 😉

    Des bisous,
    Halcyon

  • zavou

    bonjour francis,

    voilà j’ai un gros problème, ma sidebar ne se mets pas à jour: quand j’ajoute de nouveaux widget ils n’apparaissent pas dans la sidebar. Pourtant j’ai vérifié que c’était un thème widget ready donc je ne sais pas d’ou vient le problème. As-tu un conseil à me donner?

  • quand je change de thème, les widgets activés via le panel d’administration sont bien présents, mais quand je remets le thème souhaité ils disparaissent pour laisser place à ceux de base configurer dans le thème…

  • bonjour,
    je vous remercie deja pour ce tuto complet et que je cherchais depuis un bon moment puisque j’avais l’idée de basculer mon site sur wordpress.
    toujours la meme question qui me freine encore pour migrer dessus, est ce que je peux gerer plusieurs sidebar avec chacune sa categorie et sous categorie??
    mon site est : -http://www.bladitour.fr/ et je voudrais garder la meme disposition de mes sidebar

    Merci pour votre aide

  • Yohan

    Bonjour!
    Tout d’abord merci beaucoup de prendre ce temps et de partager toutes ces connaissances par votre blog!
    Je rencontre un problème sûrement tout bête. L’utilisation de « Apparence –> Widgets »
    De base la sidebar est composée de « Pages » « Catégories » « Tags » et « Meta »
    J’aimerai faire disparaître certains de ces titres et je n’y parviens pas, bouger le Widget « Meta » via l’interface apparence, n’y fait rien, ou je ne l’utilise pas correctement… Pourriez-vous m’aider?

    Cordialement

    Yohan.

  • bonjour,
    j’ai commencé a créer mon thème et j’aimerai mettre 2 sidebar, seulement je n’en ai qu’une dans l admin-panel? je ne sais pas comment faire pour mettre la deuxième.
    Merci d’avance.
    Franck

  • resolu, dans le code à insérer, on nous propose « register_sidebars(2); » s’il est à la ligne ça ne fonctionne pas, s’il est décalé « tab » ca fonctionne.
    merci pour ce tuto.
    Franck

  • Tony Difi

    Salut

    Bon déja je te remercie pour ce super tuto ! Il est top et j’ai hate d attaquer le design wordpress avec photoshop après ! Félicitation pour ces tutaux 😉

    Pour ma petite histoire, tout se passait bien jusqu’ici et arrivé à ce tutaux, je ne sais pas si ça vient du numero 13 mais ça marche pas chez moi !!
    J’ai tout bien fait (enfin je suppose que non sinon ça fonctionnerai) ! mais il m’est impossible de déplacer les widgets dans l’admin vers la box « colonne latérale 1 » (dailleur yen a qu’une box !).

    Je souhaite faire 2 sidebar !

    Donc j’ai mit le chiffre 2 et la seconde ligne avec un ptit tab comme tu dis ! mais rien ! j’ai viré tout le contenu inséré ds le fichier sidebar précédamment mais toujours rien ! en bref je suis pomé ! Et a voir tt le monde qui rèussi ben ça me perturbe lol
    (J’ai même essayé en enlevant le petit 2 pr 2 sidebar.

    J’ai fais un tour sur le site que tu donnes mais je comprend pas plus l erreur !

    T’aurais pas une piste pour m’aider ??

    Merci pour tout en tt cas 😉

    ++

  • Matthieu

    Bonjour,
    super tuto que tu nous as fait ici, vraiment bravo !
    par contre je ne sais pas si çà vient de la dernière version de WP mais le système de widgets ne fonctionne pas. voici ce qu’il me dit : Aucune colonne latérale définie
    Peut-être que le code est à changer ?
    Merci de ton aide.

  • Matthieu

    Désolé c’est maintenant opérationnel. Sans doute le cache de Friefox qui a fait encore des siennes ! 😉

  • Matthieu

    Désolé c’est maintenant opérationnel. Sans doute le cache de Firefox qui a fait encore des siennes ! 😉

  • oxyde

    Bonjour,

    Tuto parfait !!!
    Seul problème jusqu’ici:

    Aucune colonne latérale définie

    Le thème que vous utilisez n’est pas conçu pour les widgets, ce qui signifie qu’il ne dispose pas d’une colonne latérale que vous pouvez modifier. Pour obtenir des informations sur la manière de rendre votre thème compatible avec les widgets, lisez ces instructions (en anglais).

    Alors que j’ai tout suivi a la lettre, en activant, désactivant, réactivant mon thème rien à faire

    Je suis sous WordPress 3.0.4.

    Merci de votre aide

  • Bonjour, dans l’administration, pour gérer les widgets dans l’onglet « colonne latérale 1 » quand je met un widget, les widgets cités dans « sidebar.php » ne partent pas (ou ne se suppriment pas comme vous dites :D) !

  • audrey

    Oxyde, tu n’as peut être pas mis de s à functions.php et du coup il ne connait pas le fichier, c’est l’erreur que j’avais faite et j’avais le même message que toi.

  • Bruno de Coninck

    Bonjour, je me demandais s’il est possible d’avoir une side bar différente sur certaine pages d’un site WordPress…

    Merci @ l’avance!

  • Victo

    Salut Fran6 et tout les autres !
    Tout d’abord, bravo pour ces tuto qui ont le mérites d’être simple, clair et précis.

    Je suis donc en train de créer mon thème, mais j’ai un soucis pour la widgetisation. L’onglet Widget est bien apparu dans le panneau d’administration, mais je rencontre le même problème qu’Oxyde: « Le thème que vous utilisez n’est pas conçu pour les widgets, ce qui signifie qu’il ne dispose pas d’une colonne latérale que vous pouvez modifier. »
    J’ai suivis les conseils d’audrey en vérifiant si j’avais bien un -s à functions.php, et tout était en ordre.

    Quelqu’un aurai une solution ?

  • Hello !

    Je sais pas trop si ça bouge encore, mais j’essaie 🙂

    Alors, toujours des bug avec cet sidebar…
    Tout le tuto a bien fonctionné, jusqu’à « Aucune colonne latérale définie »
    Tout est bon dans mes codes (je crois, on est jamais sûr a 100% hein !) Si je pouvais avoir un peu d’aide, j’envoie mes fichiers sans problème

    Worpress 3.2.1 et pour le thème, je le crée à partir de zéro en suivant le tuto…

    Merci d’avance!

  • Feldja

    Bonjour,

    Bon je sais pas si ce bon tuto est encore d’actualité, mais je l’ai suivi à la lettre mais dès que j’ai créé le template functions.php, mon interface d’administration n’est plus mise en page. C’est à dire j’ai comme du html sans feuilles de style, et donc sans les éléments de l’interface graphique qui permettent par exemple les glisser-déposer des widgets etc.

    Euh, le fichier functions.php doit bien être placé dans le même répertoire que les autres fichiers du thème ?

    PS : version WordPresse : 3.2.1

    Merci d’avance

  • Feldja

    RE,

    Ok j’ai trouvé : j’avais une ligne de commentaire comme dernière ligne de fichier.
    Le fichier functions.php ne doit rien avoir en début ou en fin de fichier – ni blanc, ni ligne de commentaire : que du code !

  • Johnny

    est ce que quelqu’un pourrait m’envoyer son template sidebar.php pour comparer avec le mien car j’ai pas trop saisi où il fallait placer la ligne de code selon cette phrase:

    « Placez la ligne de code suivante directement sous l’”ouverture” de la liste de la sidebar, sous la balise UL:

     »

    A quoi correspond la liste sidebar?

    merci !

  • Bonjour Johnny,

    la liste sidebar correspond à l’ensemble de ton code dans ton fichier sidebar.php
    Pour résumer tu colles la ligne de code :

    juste en dessous de ton premier

    J’espère avoir été assez claire.

    Justine

  • Sorry j’avais oublié que le code ne pouvait s’afficher ds les comment,

    tu colles la ligne du code donnée ds ce tuto, sous ta première balise ul

    Vl’a

  • Rafi-raph

    Francis, je suis un petit nouveau, et je suis tes tutoriaux depuis trois jours, c’est très simple, jusqu’ici… je ne trouve pas l’onglet pour gérer les widgets… C’est normal ?

  • Pips28

    Merci Feldja tu viens de résoudre mon problème !!

    (Ne pas mettre de commentaire dans le code de functions.php)

Success, your comment is awaiting moderation.