Vous êtes ici : Accueil | Tutoriels WordPress | Qu’est-ce qu’une sidebar dans WordPress ?

Qu’est-ce qu’une sidebar dans WordPress ?

sidebar-wordpress

Lorsque l’on commence à prendre WordPress en main, on est rapidement confronté à une ou plusieurs sidebars.

Pour vous en dire un peu plus, la Marmite va vous présenter ce concept en détail et vous montrer quelques exemples d’utilisation.

Une sidebar, que l’on peut franciser par le terme « barre latérale », est une zone d’un thème WordPress dans laquelle il est possible d’insérer des widgets.

Dans les thèmes de type blog, la sidebar correspond généralement à la colonne de droite (c’est le cas pour WP Marmite).

On peut y retrouver la liste des derniers articles, des formulaires d’inscription à une newsletter, un champ de recherche, des publicités mais aussi des catégories, des boutons vers ses réseaux sociaux, etc.

Bref, il est possible d’y placer toutes sortes de choses.

Afin de mieux visualiser ce dont nous parlons, voici un schéma qui vous présente où situe la sidebar dans la plupart des thèmes WordPress:

Sidebar WordPress - La maquette

Dans d’autres cas, les concepteurs de thèmes peuvent aller plus loin et proposer plusieurs sidebars.

Par exemple, il est possible d’en avoir une de chaque coté du contenu principal (ou uniquement sur la gauche). Dans beaucoup de thèmes on retrouve aussi une sidebar dans le pied de page.

Jusqu’à présent, nous sommes resté dans le théorique. Passons à la pratique en découvrant…

5 Exemples d’utilisation de sidebars

Les thèmes WordPress ci-dessous utilisent tous des sidebars de manière différentes. Je me suis même amusé à vous les montrer en action avec des gif animés !

Note : Cet article contient des liens affiliés. Cela signifie que je toucherai une petite commission si vous vous procurez certains de ces thèmes ci-dessous. Merci de votre soutien 🙂

La sidebar positionnée à droite (le cas classique)

Sidebar WordPress Toutatis

J’avoue que je n’ai pas eu a chercher bien loin pour vous donner un exemple de sidebar classique 🙂

Comme vous pouvez le voir, la sidebar du thème Toutatis peut abriter des widgets divers (liens vers les profils sociaux, appel à l’action, vidéo et les widgets par défaut de WordPress.

En savoir plus sur Toutatis (gratuit)

La sidebar positionnée à gauche

Sidebar WordPress à gauche - Designer

Le thème WordPress Designer présenté dans l’article sur la boutique Array embarque une sidebar défilante sur la gauche.

Contrairement à l’exemple précédent, il est possible de la parcourir indépendamment du contenu principal.

En savoir plus sur Designer (69$)

La sidebar cachée

Sidebar theme WordPress - Ink

On voit de plus en plus apparaître ce genre de sidebar au sein des thèmes WordPress depuis la fin 2014.

Je ne sais pas si cette tendance est là pour durer mais cette pratique à le mérite de masquer des informations qui ne sont pas toujours indispensables.

La grande question est de savoir si les utilisateurs cliquent vraiment sur le bouton pour l’afficher.

En savoir plus sur Ink (43$)

La sidebar d’en-tête cachée

Sidebar WordPress - OM

Cette sidebar est encore moins évidente à trouver que la précédente.

Si votre thème en possède une, je vous conseille d’y placer des choses uniquement dédiées aux curieux (infos complémentaires mais non indispensables, coupon de réduction, vidéo, etc.).

Il y a pas mal de pistes à explorer afin d’exploiter ce type de sidebar pour créer du lien avec vos visiteurs.

En savoir plus sur OM (43$)

La sidebar du pied de page

Sidebar WordPress - Loft

Ce dernier type de sidebar est également très courant. Le pied de page est un endroit stratégique qui permet d’inclure des widgets pour que vos visiteurs puisse poursuivre leur navigation.

Attention tout de même à ne pas vouloir trop en mettre car cela serait contre-productif.

En savoir plus sur Loft (79$)

Maintenant que vous êtes incollable sur les différentes typologies de sidebars, intéressons-nous à leur utilisation.

Comment personnaliser les sidebars de son thème ?

J’imagine que si vous utilisez WordPress depuis un certain temps, vous savez comment ajouter du contenu à une sidebar. Continuez toutefois la lecture car j’ai une info exclusive à vous partager 😉

Pour ajouter du contenu à une des sidebars proposées par votre thème, allez simplement dans Apparence > Widgets pour arriver sur cette page :

Widgets dans votre sidebar sur WordPress

Sur la droite de l’écran se trouvent les widgets disponibles.

Ils correspondent aux widgets par défaut de WordPress ainsi que les widgets de votre thème (si vous regardez bien, vous verrez le nom du prochain thème de Thèmes de France 😉 ).

Cliquez sur le widget de votre choix, choisissez la sidebar où vous désirez l’inclure et confirmez en cliquant sur Ajouter le widget.

Ajouter un widget dans WordPress

Il est aussi possible d’ajouter des widgets grâce à un glisser déposer à partir des widgets disponibles jusqu’à la sidebar de destination.

Idem pour changer un widget de place, attrapez en un et faites le glisser à un autre endroit de la sidebar (ou sortez-le de la sidebar pour le désactiver).

Je vais en rester là en ce qui concerne l’utilisation des widgets car cela nécessite un article plus approfondi sur le sujet.

Conclusion

Dans cet article nous avons vu qu’une sidebar est en fait un emplacement dans lequel on peut ajouter des widgets. En français, les sidebars correspondent à des « zones de widgets » ou des « barres latérales ».

Il existe différentes catégories de sidebars. Certaines sont bien visibles et d’autres plus discrètes.

Concernant leur utilisation, s’il n’y avait qu’un point à retenir, ce serait le fait de ne pas trop les surcharger. Vos visiteurs pourraient ne plus savoir où donner de la tête.

Et vous, est-ce que votre thème possède une sidebar ? Quels widgets y avez-vous placés ?

Si vous avez apprécié cet article, inscrivez-vous à la newsletter

Recevez gratuitement les prochains articles et accédez à des ressources exclusives. Plus de 10000 personnes l'ont fait, pourquoi pas vous ?

C'est parti, je m'inscris !

17 commentaires Ajoutez le vôtre

  1. Bonjour Alex,

    Dommage que sur le thème Etendard, on ne puisse pas avoir la sidebar sur la page d’accueil.
    S’il existe une alternative, quelle est-elle ?
    Merci pour votre réponse.
    Bonne journée.

    Répondre
    • Bonjour Marc,

      Cela est possible mais vous ne pourrez pas bénéficier des différentes sections 🙂
      Bonne journée
      Alex

  2. L’intérêt que je vois à ces sidebars masquées est de rejoindre l’ergonomie des mobiles où la place manque.
    Ces menus doivent être placés sur des sites ou la clientèle est habituée à naviguer sur tablette ou smartphone…

    Répondre
    • Très bon point Madvic, merci pour ton commentaire 🙂
      Bien rentré depuis le WordCamp ?
      Comment va ton site ?

  3. Merci pour cette explication, Alex. J’ai commencé à faire un plan du site pour mon blog, que j’ai placé dans la barre latérale (elle est à gauche, dans mon thème, et ça me convient). J’y place des catégories, et là-dedans, les articles. pour faciliter la navigation. Mais, le lien ne se fait pas tout seul vers les articles…il faut que je le crée manuellement? (C’est ce que je fais jusqu’à présent).

    Répondre
  4. Barre latérale, oui mais…
    Bien d’accord, elle doit être pratique et discrète. J’avoue d’ailleurs avoir un faible pour celles comme « Designer » ou « Ink » (bref dissimulables), je suis d’ailleurs convaincu de leur probable pérennité et il est également probable que, la curiosité aidant, elles ne devraient pas être ignorées par l’internaute.
    J’adore ce genre de tutoriels mais attention Alex : tes illustrations animées sont trop rapides pour ne pas être fatigantes

    Répondre
  5. Bonjour
    Merci pour cet article.
    Y a til dans le menu wp un endroit pour moduler la largeur des sidebars dte ou gche?
    Merci

    Répondre
    • Bonjour,
      Sauf exception, cela se fait via le code CSS.
      Bonne continuation
      Alex

  6. Bonjour à tous et à Alex pour son aide sur WP. J’ai appris déjà des tas de choses en vous lisant.
    Je suis novice sur WP et je n’ai aucune idée comment faire pour créer un « sous-menu » dans un widget existant :
    – j’ai eu besoin de créer un nouveau « Visual Editor » dans un widget qui s’appelle « Stay in the loop » (je gère la partie française pour un site humanitaire), mais n’ai pas réussi à glisser un « visual editor » pour la langue FR dans la side-bar.
    J’ai été dans les ‘archives’ WP pour faire glisser ce « visual editor », mais je ne pense pas que ce soit la bonne procédure.

    Mille merci de votre aide !
    Nelli

    Répondre
    • Bonjour,
      Vous pouvez ajouter un widget menu personnalisé pour intégrer les liens de votre choix.
      Cet article pourra vous en dire plus.
      Bonne continuation
      Alex

  7. Merci pour vos conseils…Wordpress est parfois un peu complexepour moi…perte de temps…vos explications elles sont plutôt claires:)

    Répondre
  8. Bonjour,
    je suis en train de créer mon blog, et j’ai choisi le thème Hemlock pour mon site WP. J’aimerais insérer une sidebar sur mes pages (ou plutôt mes catégories) mais je ne sais pas comment faire? peut-être pourriez vous m’aider ?
    Merci !

    Répondre
    • Apparemment selon cette page c’est possible. Il doit y avoir une option pour l’activer dans l’administration.

  9. Merci beaucoup Alex pour ces précieux tutos pour WordPress.
    Je comprends mieux désormais le side bars.
    Je désirais charger Toutatis, mais je vois que son support est fermé.
    Auriez vous d’autres suggestions pour des thèmes classiques équivalents avec menus horizontaux déroulants en haut, possibilité insérer une photo sur la page d’accueil et side bars à droite.
    Peut être on peut y ajouter des plugin pour le menu déroulant.
    Merci pour votre attention
    Cordialement
    Sébastien

    Répondre
    • Bonjour Sébastien, Il y a beaucoup de thèmes qui pourraient faire l’affaire. Tout est question de besoin et de vos capacités à intervenir sur la modification du thème.

  10. Bonjour,

    Merci pour cet article, il mets des mots simple sur des mots pouvant paraître compliqué pour des novices en la matière…
    J’espère ne pas poster ce commentaire trop tardivement (au vue de la date de la dernière réponse en commentaire… ).
    J’aimerais intégrer les différents logo des réseaux sociaux pour que les internautes me retrouvent via d’autre plateformes sur lesquelles je suis active. Ainsi qu’insérer une zone « à propos de moi » en plus du menu, avec la petite image, histoire que les internautes puissent prendre le temps de me connaître avant de se glisser dans les articles à venir…

    Comment puis-je m’y prendre? Sauriez-vous m’aider? 🙁

    Répondre
    • Bonjour Blaise, il existe plusieurs façons de faire mais la plus simple est d’installer un plugin de partage sur les réseaux sociaux. Il en existe une mutltitude 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

La Marmite ne peut malheureusement pas fournir de support. Merci d'en tenir compte dans votre commentaire 😉

Si vous ne lui en voulez pas, donnez-lui un j'aime sur Facebook :



47 Shares
Share19
Tweet23
Share5