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

  • Orangebudd > Tu bosses en local ?

  • j’ai solutionné le problème sans vraiment m’en rendre compte. A un moment pouf ça marchait.

    d’après ce que j’ai compris, ça ne fonctionnait plus dès que function.php était en UTF 8. donc je l’ai mis en ANSI (j’ai pas touché aux autres fichiers php qui sont restés en UTF8) et depuis ca marche nickel.

    Le pourquoi du comment me passe complètement au dessus de la tête (si ça se trouve ça à rien à voir)…

    voilà c’est tout ce que je peux dire

  • Personnellement, j’ai entendu pas mal de monde avoir des soucis avec le fichier functions.php, moi-même d’ailleurs et pour m’être renseigné ici et là, pas vraiment de réponse édifiante…

  • Orangebudd

    Bon bah je vais tester ta solution Sushi.

    Sinon Fran6, oui je suis en local! 🙂

    Merci a vous deux, je vais voir ce que ca donne!

  • hanjy

    Bonjour bonjour ^^

    comme beaucoup de personnes je me fait un petit chemin dans ce tutorial que je trouve très bien.

    Voila donc j’ai un problème avec l’onglet widget (Surprise !) j’ai bien mon onglet widget (dans la rubrique thème c’est bien celà?) mais quand je clique dessus, il m’affiche le message suivant :

    Aucune barre latérale définie.
    Vous lisez ce message parce que le thème que vous utilisez n’est pas conçu pour les widgets, ce qui signifie que vous ne pouvez pas modifier sa barre latérale. Pour obtenir des informations sur la manière de rendre votre thème compatible avec les widgets, lisez ces informations (en anglais).

    Voila, j’espère que je ne poste pas ce message trop tard ^^

    en espérant une réponse, bonne continuation ! ;D

  • Bonjour,
    J’avais déjà parcouru cet excellent tuto, et j’ai décidé de changer mon thème pour passer à du 2 colonnes. C’est ainsi que j’ai trouvé une petite erreur :

    est faux et devrait être remplacé par :

    Avec un « S »… aussi bizarre que cela puisse paraître.

    @hanjy : as-tu bien nommé et placé ton fichier functions.php ? (je dis ça parce que ça me l’a fait 😉 )

  • oups la boulette… désolé.

    « register_sidebar(2); »
    est faux et devrait être remplacé par :
    « register_sidebars(2); »

    (j’avais laissé les balises php dans mon précédent commentaire)

  • Oui « sidebars » avec un « s » quand il y en a plus d’une il faut employer le pluriel : logique (je l’avais signalé plus haut après avoir longtemps galèré).

  • Effectivement, il faut mettre un S quand on a 2 sidebars, mais dans ce tuto je ne parlais que d’un exemple avec une sidebar, alors… 😉 Par contre, vous êtes allés voir sur l’article que je mentionne à la fin du tuto pour les X sidebars ?

  • Oui, je suis aller lire l’article en question qui est vraiment complet (il est d’ailleurs désormais dans mes signets).

    Mais pour être honnête, comme je cherchais avant tout une méthode simplifiée pour cette fois-ci, j’ai surtout trouvé la réponse en quelques mots dans l’autre article d’automattic.com :

    « I have a theme with more than one sidebar. How do I make them all dynamic ? »
    « Oh, that’s easy. Instead of register_sidebar() you should use register_sidebars(n) where n is the number of sidebars. Then place the appropriate number in the dynamic_sidebar() function, starting with 1. »

    @Monachus : pas si logique que ça je trouve, puisque ça fait appeler une fonction php différente et qu’on a pas souvent l’habitude d’accorder les fonctions… Mais bon, c’est le coup de trouver. 😉

  • fabien

    salut à tous!
    I send an SOS!!!
    Bon jusqu’ici tout allait bien et puis je bloque sur cette leçon.
    J’utilise WordPress 2.5 et mon problème est que le contenu de ma sidebar n’a pas disparu de l’écran.
    Dans l’admin j’ai bien la gestion des widgets.

    Où est ce que je me suis planté ?

  • merci, je cherchais justement cela dans les pages precedentes, ca tombe donc a pic!

  • Salut!

    Super le tuto, clair et digeste. Je viens de Joomla… donc les css ne me font pas souci, mais heureusement qu’il y a des tutos comme celui-là pour accéder à un « squelette » de blog! Donc merci.

    Ma question:

    Après avoir ajouté le code pour le système de widget dans la sidebar, j’ai cette ligne qui apparaît au sommet de ma page d’administation:

    Warning: array_merge() [function.array-merge]: Argument #2 is not an array in /home/httpd/vhosts/passagealest.ch/subdomains/pascal/httpdocs/wp-includes/widgets.php on line 60

    Je comprends pas!

    Je suis sur WordPress 2.5.1.

    Merci pour le coup de main. A+

  • Encore une chose… j’ai des points d’interrogationst (sous Firefox) ou des carrés avec un point d’interrogation dedans (sous Safari). Y en a plein dans la sidebar et dans les postmetadatas. C’est sûrement un caractère qui est mal interprété, mais je sais ni lequel, ni pourquoi.

    Merci du coup de main.

  • jmini

    la nouvelle adresse de l’article mentionné à la fin de l’article :

    http://www.css4design.com/blog.....er-une-war

  • Bonjour,
    Tout d’abord, une grand merci pour ce fabuleux tuto !

    J’ai néanmoins un problème avec l’affichage des widgets.
    J’aimerais un sidebar en 2 colonnes et pour le moment ça ne fonctionne pas. Je ne m’inquiète pas trop, je m’occuperai de ça par la suite.

    Le problème est que quand je place un widget, il apparait bien, MAIS il n’y a plus qu’un seul article qui s’affiche sur la page. Alors que quand je n’ai aucun widget il y en a une dizaine.

    J’ai loupé quelque chose ?

    Merci 🙂

  • Rebonjour,
    J’ai trouvé la source du problème. C’était une mauvaise manipulation …

  • Bonjour Francis et merci pour vos tutos excellents.
    Je suis en train de suivre cette série pour créer mon propre thème mais arrivé à la widgetisation, je me pose une question : ce tuto est il valable pour un thème sous wp 2.5.1 ?
    Merci d’avance

  • theau87 > Oui, normalement, pas de soucis ! 😉

  • OK merci, continuez comme ça !

  • dyspho

    jai updaté avec la 2.5 et jai le meme message d’erreur, et j’ai un ta de message semblable quand je post un commentaire…..je crois aussi que si je me délog et que je me reconecte j’ai ces message d’erreur également.

    J’ai pourtant viré la base et tout réinstallé mais ca fait la meme chose….*sigh*

  • jean

    je n’arrive pas a lirele code dans le paragraphe « 2. Modifications du template sidebar.php »
    Visiblement, c’est tout a fait ce qu’il me faut… Y a t’il eut des modifs d’affichage récement qui expliquerait que je semble le seul à ne pas pouvoir lire !!

  • jean > Effectivement, il semblerait qu’il y ait un bug sur l’ensemble du blog au niveau des lignes de code insérées dans les articles. J’essaie de réparer ça demain ! Désolé !

  • jean

    Merci pour ce tuto mais marche t’il avec 2.6.2 ? j’ai beaucoup d’erreurs…

  • jean > Normalement, ça ne devrait pas poser de problèmes… Est-ce que tu peux me donner tes erreurs pour voir ?

  • J’ai voulu rajouter une sidebar sur mon thème et ton tuto m’a grandement servi, merci Francis 😉
    Par contre j’ai aussi une « colonnes latérale 3 » qui est apparue dans mon sélecteur dans le panneau admin Oo, pourtant je n’en ai pas rajouté …
    Faut que je fasses ma M.A.J 2.6.2 pour voir si c’est également ok.

    Encore merci 😉

  • jean

    Excuse moi, tout marche nikel avec 2.6.2, par contre comment peut-on faire pour changer le style des choses affichés dans les widgets (notamment le style des catégories) ? Merci encore…

  • Salut Fran6,

    J’ai suivi ton tuto pour créer son propre thème WordPress de A à Z! Validation acceptée, je suis contente.
    Pour le moment, il est vraiment laid. Mais, je m’apprête à commencer le tuto pour le design avec Photoshop. J’ai hâte.
    Mon problème: J’ai découvert que je peux installer « Falbum » pour publier mes photos Flickr (http://www.flickr.com/photos/prendslapose). J’ai bien installé le plugin mais quand je vais dans l’admin, on me dit que le thème n’est pas conçu pour les widgets. Pourtant arrivé à cette étape du tuto, je suis persuadée que ça marchait! Je pouvais voir la liste des widgets et là non.

    Je ne sais donc pas quoi faire pour résoudre ce problème. Si tu as le temps de m’aider 😉
    Merci d’avance.

  • super !
    trouvé chez Daria, et en même temps sur Auttomatic, le seul qui fasse l’affaire pour une brêle comme moi, c’est ton tutorial. Il me manquait la balise de fermeture du code php…

    sauvé !

  • bonjour fran6
    j’ai un probleme avec la widgetisation du sidebar.
    j’obtiens ce message d’erreur lorsque je clique sur l’onglet « widget » en temps qu’administrateur :

    « Aucune barre latérale définie

    Vous lisez ce message parce que le thème que vous utilisez n’est pas conçu pour les widgets, ce qui signifie que vous ne pouvez pas modifier sa barre latérale. Pour obtenir des informations sur la manière de rendre votre thème compatible avec les widgets, lisez ces informations (en anglais). »

    pourtant il me semble avoir tout fait bien comme il faut depuis le début du tutoriel.

    voici mon code de sidebar.php :

    niouz RSS

    <a href= » » title= »Flux RSS des articles »>Flux RSS des articles

    <?php wp_list_pages(‘title_li=Pages’); ?>

    Categories

    Archives

    Calendrier

    et voici mon code de fonction.php :

    merci d’avance.
    Amaury.

    PS : si tu pouvais me répondre par e-mail se serait plus pratique pour moi, merci.

  • Amaury > Est-ce que tu as créé le fichier functions.php ?

  • Oups, j’ai craqué le copier/collé
    je sais pas comment afficher le code :/
    une solus ?

  • Orchidée

    Bonjour,

    En premier lieu un grand merci pour ces heures de travail passées à réaliser les super tutos. Je m’y suis attaquée ce matin trés tôt et suis arrivée à la fin sans problème. Je vais maintenant me concentrer sur la « customisation » de mon blog.

    J’ai quand même 2 petits soucis que je n’arrive pas à régler malgré moult vérifications:

    – J’ai bien remplacé « the content » par « the excerpt » dans le template archive pour n’afficher que les premières lignes des articles….sans succés, ça ne veut pas fonctionner.

    – Plus embêtant, j’ai bien widgetiser la sidebar, le bouton apparaît dans mon espace admin mais les différentes catégories de ma sidebar n’ont pas disparues. Du coup, dans mon espace admin, il est écrit qu’aucun widget n’est présent sur mon blog alors qu’il y en a 4 ou 5 qui ne veulent pas partir…

    Auriez-vous une solution à ces problèmes?
    Merci beaucoup par avance.

  • Женя

    Супер статья! Подписался на RSS, буду следить =)

  • Xarez

    Salut,

    Je ne comprends comment

    « Remplacez “content” par “excerpt”: » dans l’index.php, car à ce stade mon index.php ne contient que

     »

     »

    Aurais-je sauté une étape ?

  • Xarez

    que

  • Xarez

    arf le texte en php ne passe pas :/

    Bref, je n’ai que

    php get_header
    php get_sidebar
    php get_footer

    dans mon index….

  • Bon, bon, bon
    Comme plusieurs personnes dont j’ai lu les messages précédent, moi aussi j’ai mon problème ici…
    Le contenu de ma sidebar n’a pas disparu de l’écran, j’ai bien la gestion des widgets dans l’admin, sauf qu’il y est notifié:

     » Aucune barre 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 barre latérale que vous pouvez modifier… »

    Je suis en local sur wordpress 2.7.1, j’ai bien suivi toutes les instructions, qu’une seule sidebar, donc pas de « s » dans functions.php etc…

    D’ailleurs le fichier « functions » il doit bien être dans le même dossier que « creation theme » et non à l’intérieur de celui ci?

    whatodo?

  • hum j’ai mis functions dans le dossier creation theme et finalement j’ai accès à mes widgets, ça devait donc être ça, par contre, le contenu de ma sidebar apparaît toujours sur ma page…

  • (alors que dans la catégorie widget, wordpress me dit « Vous utilisez actuellement 0 widget dans la colonne latérale. »)

  • Problème résolu, quand j’ai choisi d’ajouter le widget « calendar » dans admin et que je suis retournée sur ma page, il n’y avait bien que le calendar!
    Voilà en fait du coup je balance 4 posts à la suite pour rien ^^

  • Pas de soucis Karine, on apprend au fur et à mesure !! 😉

  • Tiens , j’avais le même soucis que Amaury et hanjy! Car en suivant tes tutoriaux je me retrouvai aussi avec

    « Aucune barre latérale définie

    The theme you are currently using isn’t widget-aware, meaning that it has no sidebars that you are able to change. »
    En fait c’était assez bête j’avais tous simplement créé un fichier function.php au lieu de functions.php

    Si ça peut servir à quelqu’un,…

  • Salut Fran6 et tout d’abord merci pour cet excellent ttravail.

    Tout fonctionne pour le moment mais j’ai une question : dans functions.php j’ai mis

    register_sidebar(2);

    car je souhaite mettre 2 colonnes à droite, mais dans mon interface d’administration il ne me propose qu’une colonne latérale. Avant de continuer je souhaite savoir si c’est normal ?

    merci

  • Dom > Essaie avec un S à la fin de sidebar, register_sidebars(2);

  • Bingo. Je trouve la deuxième colonne en rajoutant le s

    register_sidebars(2);

    Merci pour la célérité et l’exactitude de la réponse

  • Léa

    J’ai changé aussi pour avoir deux colonnes même si je n’en veux qu’une.
    Toujours gros problème quand je ne mets pas les S j’ai qu’une sidebar comme je voudrais, mais le hic c’est qu’elle est en dessous je ne sais pas la mettre sur la droite.
    Et quand je mets les S, ben j’ai plus rien du tout…plus de sidebar, même si dans l’onglet widget il m’affiche bien les deux colonnes, aucune n’apparaît à droite sur le blog en local…

    Je suis un peu perdue !

Success, your comment is awaiting moderation.