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

  • Salut Fran6,

    J’ai essayé et suivi aux pieds de la lettre des instructions mais en vain. Dans l’admin aucun onglet « Widget » est apparu ?

    Est-ce que tu peux m’aider et surtout voir si mon thème est compatible avec ton Super Truc ? Merci Fran6

  • C’est quoi ton thème ? Un standard ou un que tu as créé toi-même ? Envoies-moi le tout par email (fran6art(at)gmail.com) et je regarde ça dans la journée ! 😉

  • oops ! faut départ, j’avais pas fait attention à ce qu’il y avait avant le suite et fin de l’aant dernier tutorial :p
    le post à été remis au placard en attendant de le sortir le jour J
    Faut vraiement que je fasse attention avant de poster n’importe quoi 😉
    Alors ces vacances ?

  • Pas de soucis Amine !! 😉 Quelques jours de vacances sympa en famille dans les Alpes Suisses….

  • trés bon tuto ca fonctionne parfaitement. en revanche je necomprend paspourquoi le premier élément de ma sidebar est a droite et éclaté ? any ideas ?

    merci

  • Salut Jean-Laurent, je viens de passer sur ton blog et je n’ai rien vu 😉 Tu peux le remettre pour voir ou m’envoyer une copie d’écran ? Tu as essayé de le placer ailleurs dans la sidebar pour voir ?

  • J’ai solutionné le soucis, j’avais palcé le code avant le div…..boulet que je suis !

  • Muy bien !! 😉

  • Seb

    Salut Francis
    Merci beaucoup pour ces tutos pour WordPress.
    Pour ma part je les trouve clairs et bien expliqués.
    En tous cas vive la suite…

  • Merci Seb pour ton soutien ! 😉

  • Hello francis,
    J’ai tout de meme un petit soucis avec mon template, jusque là tout marchait bien mais je ne vois pas d’onglet widget dans l’admin. J’ai tout lu et relu mais je ne m’en sors pas, as-tu une idée ?
    Voici un lien vers mes fichiers : http://www.artoria.net/creationTheme.zip

  • C’est bon j’ai trouvé l’onglet widget … 😉
    Merci pour la série de tutoriels … c’est génial pour un designer qui n’y connait rien 😉
    Merci merci merci

  • De rien Ricain !! 😉

  • Mickael G

    Hello Fran6,
    Jusqu’ici … » Tout va bien », par contre , dans l’onglet Widgets, je n’arrive pas à déplacer les Widgets disponibles dans Colonne latérale par défaut (je les « glisse », mais ils ne se « déposent » pas )
    ??? As tu une piste ???
    Mer6 d’avance.

  • Hum, j’ai ceci comme erreur…

    Warning: Cannot modify header information – headers already sent by (output started at C:\xampplite\htdocs\wordpress\wp-content\themes\Fred\functions.php:11) in C:\xampplite\htdocs\wordpress\wp-includes\pluggable.php on line 329

    http://www.fredwashere.com/div/Fred.rar

    Si quelqu’un peut m’aider… Je dois avoir laissé traîner une crasse quelque part, mais je n’arrive pas à voir où 🙁

    Thx

    Fred

  • Mickael G > Je pense que c’est uniquement dû à un problème de syntaxe, à moins que tu es plus d’une colonne à ta sidebar.

    Fred > J’ai testé ton thème che moi en local et ça fonctionne très bien… Tout est bien codé… Réessaies pour voir…

  • Mickael G

    Hello Fran6
    Tu as vu juste… 1 sidebar donc : register_sidebar();
    et non : register_sidebar(1);
    Voila ca qui arrive quand on n’écoute pas
    😉

  • Fran6 Merci.

    Je vais refaire l’installation de wordpress en local et voir ce que cela donne.

  • bonsoir, suis tombé sur ton tutoriel super efficace…mais suis incapable de personaliser en DEUX colones mes widgets…y’a un truc que je comprends pas…si tu peux m’aider…reconnaissance éternelle !!!

  • entropik > Effectivement, c’est plus compliqué quand on a 2 colonnes. Je vais modifier le tutoriel dans la journée avec un lien vers un article qui présente la solution pour 2 colonnes et plus. Je te tiens au courant par email, ok ?

  • MERCI!!! j’ai bien activé la double fonction des widgets (register_sidebar(2);) amis c’est l’affichage dans la sidebar qui coince…et tu as peut être vu que j’ai placé ma sidebar…en footer…histoire de prévilégier l’image dans mon template…merci pour tes infos par avance!

  • C’est bon entropik, j’ai modifié l’article (dernières lignes) et y ai ajouté le lien vers l’article en question… a

  • J’ai le même probleme que Fred. Le blog s’affiche et impossible de se logger.

  • raindrop > Tu entends quoi par « impossible de se logger » ?

  • salut,
    quand je consulte simplement le blog, il s’affiche correctement.
    quand je passe en mode admin, j’ai des msg d’erreur du type de fred sur la page de connexion admin. Quand je fais fis de ces msgs et que je tente quand même d’entre mes user et pwd, j’ai d’autres msg d’erreur.

    J’espère que c’est plus compréhensible.

  • raindrop > J’ai l’impression que le problème provient plus de la base de données que du thème… Tu peux laisser en commentaire les messages d’erreur que tu as ? Essaies de te logger en utilisant un autre thème pour voir…

  • merci pour ta réponse rapide.

    Ce sont des erreurs de ce genre là:
    […] C:\xampplite\htdocs\wordpressfr\wp-content\themes\creation theme\functions.php […]

    Je retenterai ce soir (chui au taff, là) et le cas écéhance collerai les msg d’erreur.
    bonne journée.

  • Alors,
    j’ai effacé mon dossier wordpressfr.
    J’ai purgé la base de données sous http://localhost/phpmyadmin/
    j’ai recommencé à partir du milieu du tuto 1.

    Et je ne reproduis plus mon bug.

    L’informatique n’est pas une science exacte.
    bonne continuation.

  • bon ben voilà, je reproduis:

    voici mon wp-config (edité selon l’install windows):

    // ** reglages MySQL ** define(‘DB_NAME’, ‘wordpress’); define(‘DB_USER’, ‘root’); define(‘DB_PASSWORD’,  »); define(‘DB_HOST’, ‘localhost’);

    quand je vais à : http://localhost/wordpressfr/wp-login.php

    j’obtiens:

    Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\wordpressfr\wp-content\themes\creation theme\functions.php:2) in C:\xampp\htdocs\wordpressfr\wp-login.php on line 12

    Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\wordpressfr\wp-content\themes\creation theme\functions.php:2) in C:\xampp\htdocs\wordpressfr\wp-includes\pluggable.php on line 331

    autrement à http://localhost/wordpressfr/
    le blog s’affiche correctement.

  • oué ben nan.

    après l’install j’avais accès à tout mais quand je quitte tout et que je reviens en admin, même topo.

    modification du header impossible etc.
    (j’avais tapé un comm hier mais il a disparu, j’avais collé les msg d’erreur…)

  • Non non raindrop, rien n’est perdu. Il était juste en attente de modération. Perso, je pense que ça vient d’une erreur de code quelque part ou alors de l’installation en local… T’as donné ton code à valider sur w3c pour voir s’il y a des erreurs. Tu peux aussi utiliser Firebug, l’extension de Firefox…

  • hello,
    j’ai effectivement donné mon code à valider sur w3c.
    Obtenant 7 erreurs, j’ai donc utilisé le index.php que tu mettais à disposition: j’en obtenais plus que 6.

    Faut-il nécessairement avoir 0 erreur?

    Je vais vérifier lequel j’utilise, ce soir.

    ce sera mon dernier recours avant de sombrer dans l’alcool. XD

  • raindrop > Ca dépend des erreurs… Mais normalement, tu ne devrais en avoir aucune. Ces erreurs peuvent être à l’origine de tes soucis et aussi tu risques d’en avoir d’autres par la suite avec les CSS…

  • vol_max

    Salut Fran6,

    Parti de zéro, j’ai suivi tes tutoriels et réussi à customiser un blog en local qui me satisfait bien.
    Avant de le mettre en ligne, j’ai un dernier truc à régler :

    Les articles de mon blog étant classés par catégories, je ne sais pas comment faire pour afficher des liens spécifiques à chaque catégorie dans un widget texte de la sidebar.

    exemple :

    – Pour tous mes articles classés dans la catégorie « tarte aux pruneaux »
    > Afficher des liens sur les pruneaux dans le widget texte de la sidebar

    – Pour tous mes articles classés dans la catégorie « Crumble aux pommes »
    > Afficher des liens sur les pommes dans le widget texte de la sidebar

    Ma configuration WP actuelle
    – Version de WordPress : 2,2,1
    – Thème utilisé : Cutline 3-Column Split 1.1 (css trafiqués)
    – Plugins en place : 0
    – Hébergé en local sur MAMP

    Comment faire ? Si tu as un tuyau…

    vol_max

  • raindrop est de retour.

    ban, comme l’activité aoutiste est au ralenti, j’ai pu faire les tuto au taff et t: ça fonctionne.

    seules différences:
    – j’ai installé la version lite de xamp (mais bon ça m’étonnerait que mon pb vienne de ça)
    – j’ai skippé toutes tes explications qui ont peut être contribuer à me faire perdre la vue globale du projet précédemment

    torché en 3 heures.

  • Recoucou francis …

    J’ai un probleme, lorsque je vais dans le panneau de personalisation des WIDGETS je peu les bougers mais je ne peu pas personalisé le contenu par exemple ( de plus il me laisse une boite avec DEFAUT SIDEBAR et les explications de notés…)

    As tu une idée … j’ai verifié le code et tout me semble correct

    J’ai la version 2..2.1 de WP

  • Ca va j’ai trouvé, j’avai mit un commentaire dans FUNCTION.PHP et cela fesait tout deconner

    MErci encore

  • vol_max > Je crois qu’il y a un plugin qui fait ça… va donc faire un tour du côté des plugins WordPress, tu trouveras sûrement ton bonheur ! 😉

  • Bonjour,

    J’ai un petit souci au niveau des widgets et peut être que quelqu’un ici pourrait m’aider. J’ai laissé un message sur le support WordPress mais je n’ai pour l’instant aucune réponse. Je vois met le lien pour éviter de surcharger ce commentaire : http://www.wordpress-fr.net/su.....odelicious

    En gros je n’ai pas d’onglet widget qui apparait dans l’admin lors de l’utilisation de ce thème et je ne vois pas ce que je dois modifier pour ça.

    Merci d’avance pour vos réponses 🙂

  • Ok j’ai suivi jusqu’à maintenant.

    J’ai bien l’onglet pour gérer les widgets, mais en haut, j’ai ce message d’erreur :

    Warning: array_merge() [function.array-merge]: Argument #2 is not an array in /opt/lampp/htdocs/Sites/wordpress/wp-includes/widgets.php on line 53

    C’est sur un serveur de test en local.

    Sinon, bravo, je cherchai cela depuis un moment, cela va grandement me faciliter la tache.

  • Fulcanelli > Tu utilises quelle version de WP ?

  • Emmanuel

    Bonjour,
    J’ai suivi depuis le début les tutos pour apprendre à créer son propre thème. Bravo pour le travail.
    En revanche, une question. Concernant le fameux onglet widget qui est censé apparaitre. Celui ci n’apparait pas, ou du moins je ne le trouve pas. Je ne suis pas le premier à rencontrer ce problème de ce que je lis dans les commentaires. Certains ont trouvé… mais personne n’a donné la réponse.
    Serait il possible de m’envoyer par mail ou il se trouve et/ou la solution pour l’afficher ET l’indiquer dans la suite des commentaires pour les suivants 😉
    Merci

  • Bonjour,

    J’ai réussi à régler ce problème en faisant une mise à jour de WordPress (2.3.1 au lieu de 2.2 où j’avais l’erreur), depuis plus de soucis, l’onglet widget apparait bien. Le seul truc que je n’ai pas compris, c’est que j’utilise une version 2.2 sur un autre blog et j’avais bien cet onglet…

  • Bonsoir,
    J’arrive bien tard, mais après avoir galéré pour ajouter une deuxième sidebar (comme d’autres ici), je me suis aperçu d’une erreur toute simple dans le code fourni plus haut : s’il y a plusieurs colonnes latérales il faut mettre sidebar au pluriel donc sidebars ce qui donne :

    Voilà mon humble contribution après des heures de difficulté (je suis un grand débutant).
    En tous cas, grand merci à Francis pour ces tutoriels si lumineux dans leur exposition.
    Bonne année à tous.

  • moi qui cherchais de la matière diantre pour le coup j’en ai trouvé.

    Merci de tout ce travail !

    Allez zou au taf 😛

  • Sushi_destroy

    Bonjour Fran6

    J’ai exactement le même problème que raindrop et fred

    des messages d’erreurs du type : « Warning: Cannot modify header information – headers already sent by (output started at… »

    Ces messages ont lieu dès que j’essaye d’acceder à la base de donnée. et pourtant, le premier article se charge. Notons également qu’en local, il n’y a aucun problème.

    Avec les autre thèmes il n’y a aucun soucis.

    Je me demandais comment Fred et et Raindrop avaient solutionné leur problème ?

  • cecilaki

    Fichier sidebar.php VIDE .. Je commence par quoi avant d’insérer les lignes de code que tu recommandes ici ?
    J’ai le theme PhotoWP qui n’est pas widget compatible et j’essaye donc d’y inserer une sidebar . Il y a un fichier modifiable appelé sidebar.php mais quand je suis dans l’admin WP et que je l’édite il est vide et je ne sais pas par quoi commencer pour bien le coder… Any tips ?

  • Orangebudd

    Salut Francis!

    Moi aussi j’ai le même problème que Sushi et Fred… ^^

    Apparemment le problème vient du fichier functions.php…

    En fait, le jour ou j’ai créé ce template, puis actualisé ma page, tout marchait très bien. C’est seulement après fermé le tout, puis repris mon boulot le lendemain que tout a foiré.

    Donc j’ai 3 erreurs de ce type… Pourtant je n’ai fait aucune erreur au niveau du code. Je suis allé voir dans les .php les lignes à problème, en vain…

    Plz help!

    Et merci pour les tutos!

    Sushi fait tourner si tu trouves la réponse svp! Bye

Success, your comment is awaiting moderation.