Widgets WordPress : en ajouter à son site

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 :

Affichage du thème twentyfour avec trois zones de widgets
Exemple de thème avec trois zones de widgets
  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

Affichage de 4 exemples 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 :

 

Affichage des widgets avec le thème 2014
Widgets pour le thème twentyfourteen
Affichage des widgets dans un thème enfant
Widgets pour un thème enfant du thème twentyfourteen

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 »).

Haut de page

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 » :

Dans l'administration, cliquer sur Apparence puis Widgets
Accès depuis Apparence puis Widgets

WordPress affiche la page d’administration des widgets :

Affichage de la page permettant de gérer les widgets depuis l'administration du site
Exemple de page de gestion 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 » :

Dans l'administration, choisir le sous-menu "Personnaliser" du menu "Apparence"
Accès au personnaliseur

Cliquer sur « Widgets » :

Après avoir cliquer sur le menu "Personnaliser", des options s'affichent dans un menu déroulant dont l'option "Widgets"
Cliquer sur l’option « Widgets » dans le personnaliseur

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

Affichage des barres latérales (sidebars) pour sélection
Affichage des barres latérales (sidebars)

À 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 :

La croix permet de revenir au menu "Apparence"
Demande de revenir au menu « Apparence »
Affichage de l'option Widgets du menu Apparence"
Retour au menu « Apparence », option « Widgets »
Haut de page

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 :

    Cliquer gauche sur un des widgets proposés
    Sélection d’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 :

    Déplacement du widgt dans la zone représentant la barre latérale cible
    Déplacer le widget pour le positionner 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 :

    les pointillés matérialisant le widget disparaissent, les réglages du widget apparaît dans la barre latérale
    Widget positionné dans la barre latérale avec saisie des 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 :
Cliquer sur un widget fait apparaître un menu avec la liste des barres latérales sélectionnée
Ajouter un widget dans la barre latérale

 

  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) :
Affichage du widget dans la collonne des barres latérales avec ses réglages
Le widget avec ses réglages apparaissent dans la description de la barre latérale

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

Le fait d’ajouter un widget dans une barre latérale via le menu « Apparence ⇒ Widgets » a un effet immédiat : si on se rend sur le site côté visiteur, on peut constater que le widget est affiché.

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) :

Choisir l'une des barres latérales s'affichant dans la colonne de gauche
Choix d’une barre latérale dans le personnaliseur de widgets
  1. les widgets déjà installés apparaissent  dans la barre latérale,
  2. ajouter un widget déjà installé sur le site :

    Cliquer sur le bouton "Ajouter un widget" pour faire apparaître les widgets disponibles
    Faire apparaître les widgets disponibles

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 :

Cliquer sur une zone représentant un widget dans la barre qui s'est affichée à droite de la colonne de personnalissation
Sélectionner 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.
Affichage du widget sélectionné
Affichage d’un widget

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

Le bouton "Enregistrer et publier" situé en haut dans la colonne de gauche permet de rendre les modifications visibles par les utilisateurs
Enregistrer les modifications sur les widgets

À la différence du menu « Apparence » tant que l’administrateur n’a pas cliqué sur le bouton « Enregistrer et publier », les modifications n’apparaissent pas sur le site. C’est l’intérêt du personnaliseur : permettre de faire des essais avant de modifier son site.

Haut de page

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.

Affichage des zones de saisie des réglages du widget "Archives"
Réglages du widget « 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 du widget "Archives" avec le titre modifié, les mois en menu déroulant et le nombre d'articles par mois
Affichage du widget côté visiteur

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 »  :

Flèche pour faire apparaître le paramétrage d'un widget en haut et à droite d'une zone de widgets située dans une barre latérale
Demander l’affichage des réglages d’un widget depuis le menu « Apparence »
Flèche pour faire apparaître les réglages d'un widget en haut et à droite d'une zone de widgets située dans la barre latérale sélectionnée
Affichage des réglages d’un widget depuis le menu « Personnaliser »

Cacher les réglages d’un widget

Possibilités de cacher les réglages d'un widget
Replier la zone des 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.


Haut de page

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 :

    Le bouton "Suppriemr" est situé en bas d'une zone de définition d'un widget
    Retirer un widget d’une barre latérale
  2. le widget disparaît de la barre latérale :

    Le widget supprimé n'apparaît plus dans la barre latérale
    Widget retiré 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é :

    Sélectionner et déplacer un widget depuis sa barre latérale
    Sélectionner un widget et le déplacer
  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é) :
    Déplacer le widget jusqu'à la zone des widgets désactivés
    Désactiver un widget

     

  3. Relâcher le bouton gauche de la souris :
    Le widget est ajouté à laliste des widgets désactivés
    Widget désactivé

    À 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é :
    Le bouton "Suppriemr" se trouve en bas à gauche du widget désactivé
    Supprimer 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

    Le bouton "Vider les widgets désactivés" se situe en bas de la zone des widgets désactivés
    Supprimer les widgets déjà désactivés

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é

      Le bouton "Retirer" dans une zone de widget du personnaliseur permet de retirer un widget de la barre latérale où il avait été positionné
      Retirer un widget depuis le personnaliseur
    2. le widget n’apparaît plus

      Le widget n'apparaît plus dans la barre latérale
      Widget retiré d’une barre latérale
Haut de page

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 :

Cliquer / déposer le widget dans la barre latérale
Déplacer le widget 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 :

Glisser le widget à l'intérieur de la barre et relâcher le bouton de la souris
Widget déplacé dans sa 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 :

    Le bouton Réarranger se situe en bas à droite de la barre latérale sur laquelle on travaille
    Cliquer sur le bouton « Réarranger »
  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

    Cliquer sur une flèche pour faire monter ou descendre le widget
    Cliquer sur une flèche montante ou descendante
  3. l’ordre des widgets est modifié dans le sens choisi
    Les widgets s'affichent en tentant compte du déplacement demandé
    Le widget est descendu d’un niveau

     

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

    Choisir de continuer les modifications ou de valider celles-ci pour les visiteurs
    Sortir du déplacement des widgets
Haut de page

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 :

Glisser / déposer un widget vers une autre barre latérale
Déplacer un widget vers une autre barre latérale

À 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 » :

    Cliquer sur le bouton "Réarranger" situé en bas de la zone d'un widget
    Bouton « Réarranger »
  2. une icône apparaît en haut de chaque zone de widget :

    Affichage d'icônes de lien en haut des zones de widget
    Icônes permettant de changer de barre latérale
  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 »

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

    WordPress affiche la barre latérale cible avec le widget déplacé
    Widget déplacé
  5. Enregistrer les modifications, sinon le site ne sera pas modifié :
    Cliquer sur le bouton "Enregistrer et publier" pour que les modifications apparaissent sur le site
    Enregistrer les modifications

    Haut de page

Laisser un commentaire

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