Formation « Développer un thème WordPress sur mesure »

Les sidebars et les widgets

Lecture : 3 minutes • 0

Les widgets sont des éléments interactifs que l’on retrouve général dans la barre latérale du blog, et permettant d’afficher des informations comme la liste des derniers articles, commentaires, catégories…

Que sont les Widgets et les sidebars ?

Les widgets sont des éléments dynamiques généralement présents dans le blog qui permettent, dans une barre latérale, d’afficher des informations complémentaires.

Un widget peut afficher la liste des derniers articles, des derniers commentaires, des catégories, une archive mensuelle, un texte arbitraire, une galerie, un flux RSS, un moteur de recherche…

Des extensions peuvent même ajouter les leurs, comme par exemple un formulaire d’abonnement à votre newsletter, vos derniers tweets ou encore vos derniers clichés Instagram…

Les widgets du blog Layout de Flywheel
Les widgets du blog Layout de Flywheel : abonnement, articles à la une, une image…

Dans WordPress, on place des widgets dans une zone que l’on appelle sidebar. Pour faire la liaison avec le cours précédent je dirais que :

  • Les menus vont dans des emplacements de menus ;
  • Les widgets vont dans des sidebars.

On va maintenant voir comment déclarer des sidebars, les afficher dans nos templates et y insérer des widgets.

Aparté: Widgets et Gutenberg

Les widgets natifs ont aujourd’hui été portés sous forme de blocs et disponibles dans Gutenberg. À terme, la gestion des widgets et des sidebar va être intégrée directement dans le nouvel éditeur de WordPress dans la phase 2 annoncée fin 2018. Cela pourrait entrainer des modifications dans la façon de faire.

Déclarer une sidebar et l’afficher dans le template

Pour déclarer une sidebar, c’est aussi simple que de déclarer un menu ! Pour cela on dispose d’une fonction register_sidebar() à placer dans le functions.php :

PHP
functions.php

Il faut à minima indiquer son nom et son identifiant (ou slug). Le nom est celui qui apparaitra dans l’interface d’administration de WordPress, et l’ID sera utilisé pour appeler notre sidebar.

Pour afficher notre sidebar dans le blog, on va ouvrir archive.php et ajouter la fonction dynamic_sidebar() :

PHP
archive.php

Indiquez comme seul paramètre l’identifiant défini auparavant dans functions.php.

Autres paramètres pour déclarer une sidebar

Je vous ai montré le strict minimum pour déclarer une sidebar, mais il existe quelques autres paramètres qui peuvent se montrer intéressants.

Par défaut vous devez entourer votre sidebar d’un <ul> car chaque widget est écrit avec un <li>.

HTML

Si vous n’êtes pas fan de ce fonctionnement, vous pouvez modifier cela, ainsi que les noms de classes, et le niveau hiérarchique des titres :

PHP
functions.php

En premier lieu, je change les <li> par de simples <div> comme ça je peux m’affranchir du <ul> dans ma sidebar. J’en profite pour personnaliser leur classe. Le %2$s permet à WordPress d’insérer ses autres classes (une classe spécifique par type de widget).

Ensuite je retire le titre de niveau 2 <h2> pour mettre simplement un <p>. En terme de référencement naturel, il est inutile d’appliquer des hiérarchies de titres en dehors du contenu principal.

Pour en savoir plus sur les paramètres disponibles, consultez la documentation des sidebars.

Ajouter des Widgets à notre sidebar

Maintenant que notre sidebar est créée, on va aller y ajouter quelques Widgets. Pour cela rendez-vous dans Apparence > Widgets afin de faire votre sélection :

L'interface de gestion des widgets dans WordPress
Ajoutez des widgets dans votre sidebar en les faisant glisser

Le principe est simple : faites glisser le widget désiré dans la sidebar à droite, vous pourrez ensuite le configurer via quelques réglages. J’ajoute : une recherche, un texte « À propos du blog », une galerie, la liste des articles récents et les catégories.

À tout moment vous pouvez faire glisser les éléments afin de les réorganiser.

Voici le résultat, avec un peu de CSS :

Ma sidebar affiche les widgets que j'ai définis dans l'administration de WordPress
Ma sidebar affiche les widgets que j’ai définis dans l’administration de WordPress

Certaines extensions proposeront leurs propres widgets dans vos sidebars. Pensez toutefois à ne pas trop encombrer cette barre afin de ne pas surcharger votre page.

En fait, les blogs aux designs modernes ont même tendance à ne plus utiliser les sidebars et widgets !

Vous pouvez créer autant de sidebars que vous le souhaitez dans votre thème. Par exemple la sidebar des archives peut être différente de la sidebar des singles. De cette manière vous pourrez afficher des widgets différents. C’est ce que proposent de nombreux thèmes premium.

D’ailleurs bien souvent, leur footer fonctionne sous forme de sidebar, ce qui permet de gérer les différentes colonnes du pied de page plus facilement :

Le thème Salient et son footer
Le thème Salient propose plusieurs colonnes en pied de page

Certains thèmes proposent jusqu’à 4 sidebars différentes pour le pied de page (une par colonne) et d’autres une seule, dont les widgets sont affichés horizontalement.

De plus en plus, ce sont les Page Builders qui permettent de gérer la mise en forme du pied de page (on en reparlera plus tard dans cette formation).


Vous savez maintenant utiliser les sidebars de WordPress afin d’y ajouter vos widgets, et ajouter donc encore en interactivité !

0

Questions, réponses et commentaires

    Laisser un commentaire