Francis Chouquet Graphiste Lettering

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

  • lowess

    Bonjour,
    je suis novice sous wordpress, jusque là je dois avoué que votre tutoriel est super bien rédigé. Tout de même j’ai une préoccupation, j’aimerais savoir comment faire pour avoir des widgets par exemple sur la home page je voudrais dire sur la content du genre à avoir des posts spécifiques à certaines subdivisions de mon « content  » chez d’autres cms on appelle cela « position » ou encore « vue » sur d’autres, je ne sais alors si dans ce genre de situation mon content doit avoir un loop?

    Merci bien de me dire d’avantage sur cette situation, afin d’éclairer ma lanterne.

    Cordialement,

  • Maxime

    Bonjour, vos tuto sont très bien rédigés mais j’ai un petit soucis au niveau des widgets, je ne vois pas où placer les:
    et

    Merci de m’éclaircir sur ce point 🙂

  • Pour que les widgets maison disparaissent lorsque l’on ajoute les widget depuis l’admin, il faut bien placer le « end if » apres le dernier !

    Voilou !

  • apres le dernier -ul-

  • ceed

    Bonjour, j’ai réalisé le template comme vous l’avez montré, j’ai testé la widgetisation, cependant cela ne me plait pas je voudrais revenir en arrière et modifier mon sidebar.php dans le code. Malheureusement depuis Qui j’ai fait l’opération de widget plus moyen de gérer le code de mon sidebar.php, d’ailleurs si je supprime ce fichier, c’est comme si il existait encore, comment faire pour que wordpress reconnaisse à nouveau mon sidebar.php plutot que les widget ?
    j’ai essayer en supprimant function.php mais rien y fait… ou se trouve le sidebar de remplacement comprenant les widget ? que je le supprime ! …bref pour revenir à wordpress sans widget je dois le réinstaller ?

    merci d’avance,

    ced

  • Et bien en principe tu supprimes juste via ton admin, les widgets de la « colonne latérale 1 », et le tour est joué ! Autrement…

  • ceed

    ce serait trop simple ma colonne latérale est vide… et pourtant wordpress affiche des catégories et un moteur de recherche (ce que j’avais décidé de mettre avant de widgetiser mon template, mais ça n’est pas le contenu de sidebar.php qui a été modifié depuis)..il y a bien la technique du texte vide dans la colonne latérale, mais cela rajoute du code html pour rien et cela n’affiche pas mon sidebar.php de départ..

  • ceed

    mon erreur vient d’un template de page spécial que j’avais mis en accueil, j’avais modifié l’index mais pas la page qui le remplace… donc à présent les widgets sont oubliés et tout fonctionne parfaitement 😉 déso pour le dérangement

  • Licha

    Donc si je comprends bien on peut tout supprimer de notre sidebar (je veux dire par là, calendrier, barre de recherche, que le contenu en fait), et laisser uniquement ces deux magnifiques lignes de codes ? 😀

  • Tonib

    Voui 🙂 !

  • noixdecoco

    J’ai toujours les widgets qui s’affichent sur mon site en local même quand je les sort de la colonne latérale 1 dans mon admin, c’est normal ?

  • Marina

    Bonjour,

    J’ai tout suivis à la lettre… et j’ai ce message d’erreur.

    Warning: Cannot modify header information – headers already sent by (output started at /homez.41/bluesite/www/new/wp-content/themes/bluesite/functions.php:8) in /homez.41/bluesite/www/new/wp-includes/option.php on line 563

    Warning: Cannot modify header information – headers already sent by (output started at /homez.41/bluesite/www/new/wp-content/themes/bluesite/functions.php:8) in /homez.41/bluesite/www/new/wp-includes/option.php on line 564

    J’ai bien vérifier le code dans functions.php… et y aucun espace tout semble OK.

    Je ne sais pas quoi faire.

  • Michaël

    Salut,

    j’ai le même problème que Marina donc si vous avez une solution je suis preneur.

    Merci.

  • RM

    Merci pour ce tuto.

  • Marie

    Bonjour,
    Merci pour ces tutos très intéressant.
    Je voudrais savoir si c’est normal que ma sidebar soit toujours sous mes articles.
    J’en voudrais 1 et qui soit à droite.
    Merci de votre aide

  • Opte

    Bonjour,
    tout d’abord merci pour ce gros travail de tout expliquer en détail. C’est précieux.
    J’ai suivi jusqu’ici, mais ma sidebar (widgetisée) s’affiche à gauche, entre le header et le début de l’article. Je n’arrive pas à trouver l’erreur. Pouvez-vous m’aider s’il vous plaît ?
    Merci.

  • Rhavl

    Bonjour!
    Jolie travail, merci pour ce tuto. En ce moment je ne fais que lire et suivre le cours en pratiquant sur mon local et pour moi j’ai un problème au niveau du sidebar, le blogroll ne s’affiche pas, qu’est ce qu’il doit d’afficher par defaut ?
    Merci de votre aide

  • GJK

    Salut Rhavl,

    La gestion des liens et le blogroll ont été désactivés par défaut depuis la version 3.5 de WP.
    Pour remédier au problème facilement, installe l’extension Link Manager.

Success, your comment is awaiting moderation.