Les widgets sont des modules qui affichent : des photos, des vidéos, des formulaires d’inscription, des liens vers des articles du site ou vers des sites extérieurs…

WordPress offre une gestion très simple et efficace pour ajouter et paramétrer les widgets, sans nécessiter de connaissance en informatique.

Les widgets côté visiteurs du site

Positionnement des widgets

Les widgets apparaissent dans des zones spécifiques : les barres latérales (sidebars). Les barres latérales sont installées par le  créateur du thème.

Par exemple, le thème « twentyfourteen » propose trois barres latérales :

1. à gauche,
2. à droite,
3. en bas.

Les widgets utilisés peuvent être différents dans chaque barre latérale.

Un même widget peut apparaître dans plusieurs barres latérales, éventuellement avec des paramétrages différents.

Gérer les barres latérales dans un thème

Cet article décrit la gestion des barres latérales (nécessite des connaissances en programmation) :

Les sidebars (barres latérales de widgets)

Exemples de widgets

1. recherche des articles et des pages du site contenant le texte saisi dans la zone de widget  par le visiteur,
2. affichage des titres des derniers articles publiés sur le site; cliquer sur un titre permet d’afficher l’article correspondant,
3. affichage des noms des catégories d’articles; cliquer sur une catégorie permet d’afficher la liste des articles associés à cette catégorie,
4. affichage de liens particuliers : connexion au site, accès aux flux « rss » du site, adresse du site de la communauté WordPress francophone…

L’aspect visuel des barres latérales avec leurs widgets dépend du thème actif.
Voici deux exemples des mêmes widgets s’affichant en fonction du thème :

Le thème de droite est un thème enfant de celui de gauche, c’est à dire que les deux thèmes sont identiques… sauf pour ce qui est redéfini explicitement dans le thème enfant, comme les couleurs dans notre exemple.

Comment trouver des widgets

Certains widgets sont disponibles par défaut :  catégories, étiquettes, recherche, flux rss… et le widget texte qui permet d’afficher du code HTML.

D’autres widgets peuvent être ajoutés au thème ou provenir d’extensions (plugins).

Il est possible de se programmer ses propres widgets en les ajoutant via le fichier « functions.php » du thème actif ou une extension (plugin ou mu-plugin »).

Accéder à la gestion des widgets

Les widgets peuvent être ajoutés, déplacés, retirés dans les barres latérales depuis les pages de gestion des widgets dans l’administration avec deux options : « Apparence » ou « Personnaliseur ».

Accès depuis le menu « Apparence »

Se connecter à l’administration, puis cliquer sur « Apparence » puis « Widgets » :

WordPress affiche la page d’administration des widgets :

Accéder depuis le personnaliseur

Le personnaliseur est une interface qui permet de prévisualiser les modifications que l’on souhaite apporter au site, avant de les installer.

Se connecter à l’administration, puis cliquer sur « Apparence » puis « Personnaliser » :

Cliquer sur « Widgets » :

WordPress propose de choisir une des barres latérales disponibles dans le thème actif :

À tout moment, la croix en haut et à gauche de la fenêtre d’administration permet de revenir au menu « Apparence » sans sauvegarder les éventuelles modifications testées :

Ajouter des widgets dans une barre latérale

Ajouter depuis le menu Apparence

Rappel : accès depuis l’administration : Apparence ⇒ Widgets.

Ajouter par glisser / déposer

1. cliquer tout en appuyant sur le bouton gauche de la souris sur un rectangle symbolisant un widget :

   

2. tout en gardant le bouton de la souris enfoncé, déplacer le widget vers une des barres latérales proposées; quand on survole la zone représentant la barre latérale, celle-ci se modifie et affiche une zone en pointillé matérialisant la position du widget dans la barre latérale :

   

3. relâcher le bouton de la souris; le widget s’affiche dans la barre latérale avec ses réglages :

   

Ajouter par sélection dans un menu

1. cliquer avec le bouton gauche de la souris sur une zone de sélection d’un widget,
2. choisir une barre latérale dans le menu qui apparaît,
3. cliquer sur le bouton « Ajouter le widget :

1. le widget apparaît,
2. dans le bas de la barre latérale préalablement sélectionnée,
3. avec possibilité de le paramétrer (réglages) :

À noter : le même widget peut être inséré plusieurs fois dans une ou plusieurs barres latérales.

Ajouter depuis le personnaliseur

Rappel : accès depuis l’administration : Apparence ⇒ Personnaliser ⇒ Widgets.

Cliquer sur une des barres latérales proposées (celles disponibles sur le thème actif) :

1. les widgets déjà installés apparaissent  dans la barre latérale,
2. ajouter un widget déjà installé sur le site :

   

Si on choisit d’ajouter un widget, WordPress affiche une barre avec la liste des widgets disponibles; cliquer sur une zone représentant un widget :

Le widget sélectionné s’affiche :

1. dans la colonne de personnalisation avec ses réglages,
2. dans la prévisualisation du site, tel qu’il sera vu par les visiteurs.

Pour que les modifications apportées aux widgets apparaissent côté visiteur, il faut cliquer sur le bouton :

Modifier les réglages d’un widget

La plupart des widgets proposent des paramètres, appelés « réglages ». Ceux-ci peuvent être définis dans les pages de gestion des widgets.

Exemple des réglages du widget d’archives.

Les réglages associés sont les suivants :

1. Titre
2. mode d’affichage de la liste des articles (en liste ou menu déroulant),
3. affichage du nombre d’articles,
4. enregistrement des réglages pour que la modification prenne effet.

Voici comment s’affiche le widget côté visiteur du site avec les réglages ci-dessus :

Affichage des réglages

Nous avons vu que les réglages associés à un widget s’affichent lorsqu’on l’installe dans une barre latérale.

Il est possible de modifier les réglages existant en cliquant en haut des zones matérialisant les widgets (pas forcément sur la flèche), que ce soit à partir du menu « Apparence ⇒ Widgets » ou du menu « Apparence ⇒ Personnaliser ⇒ Widgets »  :

Cacher les réglages d’un widget

Il est possible de cacher (replier) la zone d’affichage des réglages d’un widget afin de libérer de l’espace dans la zone de travail :

1. en cliquant en haut de la zone du widget (la flèche indique l’action possible : vers le bas pour déplier, vers le haut pour replier),
2. en cliquant sur le lien « Fermer » en bas de la zone du widget.

Retirer un widget

Retirer depuis le menu Apparence

Rappel : accès depuis l’administration : Apparence ⇒ Widgets.

Retirer en utilisant le bouton « Supprimer »

1. Cliquer sur le bouton « Supprimer » situé en bas d’une zone de widget dans les barres latérales :

   

2. le widget disparaît de la barre latérale :

   

Retirer par glisser / déposer

Cette méthode met en attente (désactive) les widgets, tout en conservant la possibilité de les réutiliser ultérieurement en récupérant les réglages tels qu’ils étaient avant la désactivation.

1. Cliquer sur une zone représentant un widget tout en maintenant le bouton gauche de la souris enfoncé :

   

2. Déplacer le widget jusqu’à la zone des widgets désactivés située sous la liste des widgets (garder le bouton de la souris enfoncé) :

   

    

3. Relâcher le bouton gauche de la souris :

   

   À noter : les widgets désactivés ne s’affichent plus sur le site, mais si on les replace de nouveau dans une barre latérale, ils vont s’afficher en respectant les réglages tels qu’ils étaient avant la désactivation.

4. il est possible de supprimer un widget désactivé en cliquant sur le bouton « Supprimer » situé en bas et à gauche d’un widget désactivé :

   

   Seul le widget désactivé est supprimé, il est toujours possible d’ajouter le widget dans une ou plusieurs barres latérales en ajoutant un widget comme vu précédemment. Dans ce cas, ce sont les réglages standards du widget qui sont proposés.

5. il est possible de supprimer tous les widgets désactivés en cliquant sur le bouton

   

Retirer depuis le Personnaliseur

Rappel : accès depuis l’administration : Apparence ⇒ Personnaliser ⇒ Widgets ⇒ choix d’une barre latérale.

1. retirer le widget d’une barre où il a été inséré

   

2. le widget n’apparaît plus

   

Déplacer les widgets dans la même barre latérale

Déplacer depuis le menu Apparence

Rappel : accès depuis l’administration : Apparence ⇒ Widgets.

Cliquer sur une zone définissant un widget en gardant le bouton gauche de la souris enfoncé puis relâcher lorsque le widget est positionné à l’endroit souhaité dans la barre latérale :

Déplacer depuis le personnaliseur

Rappel : accès depuis l’administration : Apparence ⇒ Personnaliser ⇒ Widgets ⇒ choix d’une barre latérale.

Déplacer par glisser / déposer

Cliquer sur une zone définissant un widget en gardant le bouton gauche de la souris enfoncé puis relâcher lorsque le widget est positionné à l’endroit souhaité dans la barre latérale :

Monter ou descendre d’un niveau

1. Cliquer sur le bouton « Réarranger » situé en bas à droite de la barre latérale sélectionnée :

   

2. cliquer sur l’une des flèches montantes ou descendantes apparaissant dans la zone définissant le widget que l’on souhaite déplacer

   

3. l’ordre des widgets est modifié dans le sens choisi

   

    

4. cliquer sur le lien « Terminé » pour continuer à travailler sur les widgets de la barre latérale sélectionnée, ou sur le bouton  pour que les changements apparaissent aux visiteurs du site :

   

Déplacer les widgets entre les barres latérales

Déplacer depuis le menu Apparence

Rappel : accès depuis l’administration : Apparence ⇒ Widgets.

Cliquer en haut d’une zone de widget et, tout en conservant le bouton gauche de la souris enfoncé, déplacer vers la zone latérale où on veut positionner le widget :

À noter : les réglages du widget sont conservés dans la barre latérale cible.

Déplacer depuis le personnaliseur

Rappel : accès depuis l’administration : Apparence ⇒ Personnaliser ⇒ Widgets ⇒ choix d’une barre latérale.

1. cliquer sur le bouton « Réarranger » :

   

2. une icône apparaît en haut de chaque zone de widget :

   

3.  choisir la barre latérale cible
   1) cliquer sur l’icône
   2) choisir la barre latérale cible
   3) cliquer sur le bouton « Déplacer »

   

4. le widget apparaît dans la barre latérale cible

   

5. Enregistrer les modifications, sinon le site ne sera pas modifié :

   

   Haut de page