You are currently viewing Comment rendre sa barre latérale (sidebar) WordPress plus attirante
Comment rendre sa barre latérale WordPress plus attirante

Comment rendre sa barre latérale (sidebar) WordPress plus attirante

Il faut le dire, la barre latérale WordPress n’est pas très sexy (certains l’appellent ausi sidebar). D’ailleurs, je suis surpris que celle-ci n’a jamais été améliorée lors d’une mise à jour. Nous allons arranger cela en utilisant le plugin Recent Posts Widget Extended. Les blogueurs vont adorer ce qui va suivre.

Voyons ce que cela donne en image :

Barre latérale WordPress : Sans le plugin Recent Posts Widget Extended
Barre latérale WordPress : Sans le plugin Recent Posts Widget Extended
Barre latérale WordPress : L'une des possibilités avec le plugin Recent Posts Widget Extended
Barre latérale WordPress : L'une des possibilités avec le plugin Recent Posts Widget Extended

Afficher la barre latérale WordPress

Pour l’exemple qui va suivre, j’utilise le thème Astra, Tu pourras utiliser un autre thème si tu en as envie.

Ajoutez une page et des articles pour la barre latérale WordPress

Pour commencer, on va créer une page Blog, et cinq articles avec par exemple du Lorem Ipsum pour le test. IMPORTANT, à chaque article, mets une image mise en avant. Pour se faire, va dans l’un des articles (là où tu écris ton texte) :

  1. Tout d’abord, clic sur Article
  2. Ensuite, sélectionne image mise en avant
  3. Enfin, appuie sur le rectangle gris pour choisir ton image
Mettre une image en avant dans un article
Mettre une image en avant dans un article

Nous avons de jolis articles, c’est cool ça.

Ensuite, reproduits la même action pour les autres article. Tu pourras mettre une image différente pour chaque article : le rendu sera meilleur.

Régler la lecture

Maintenant, nous allons définir notre site comme un blog, comme ça, lorsqu’on cliquera sur l’onglet blog, nous verrons les derniers article publiés :

  1. Pour commencer, survol Réglage
  2. Ensuite, clic sur Lecture
  3. Sélectionne le bouton radio Une page statique (choisir ci-dessous)
  4. Ensuite, choisies Blog
  5. Enfin, enregistrer les modifications
Régler la lecture du blog
Régler la lecture du blog

Prochaine étape, on s’assurer que notre sidebar (barre latérale) et bien présente

Découverte des widgets de la barre latérale WordPress

En faite, il y a qu’un seul widget qui nous intéresse pour le moment, celui des Articles récents, voyons s’il est présent :

  1. Pour commencer, survol Apparence
  2. Ensuite, clic sur Widgets
  3. Enfin, vérifie ça présence 
Widget des article les plus récents
Widget des article les plus récents

Si, tu ne trouves pas le widget Articles récents, fais un glissé-déposé Articles récents de gauche et dépose-le dans Colonne latérale principale

Barre latérale WordPress : Installation du plugin

Voilà, nous allons enfin découvrir cette extension. Le plugin Recent Posts Widget Extanded est bien noté, il est installé sur 100 000 site c’est assez rassurant. En revanche, il n’a pas été mis à jour depuis un moment : 5 mois :

Barre latérale WordPress : Plugin recent posts widget extended
Barre latérale WordPress : Plugin recent posts widget extended

Après l’avoir téléchargé et installé on va voir ce qu’il nous cache.

Découverte de la nouvelle barre latérale WordPress

Maintenant, nous allons ajouter notre super widget très design :

  1. Pour commencer, survol Apparence
  2. Ensuite, clic sur Widgets
  3. Enfin, Drag and drop le nouveau widget Recent Posts Extended dans la Colonne latérale principale
Barre latérale WordPress : Glisser et déposer le widget recent posts extended
Barre latérale WordPress : Glisser et déposer le widget recent posts extended

Après avoir fait, le glisser et déposer, les réglages de ton nouveau widget vont s’afficher.

Comme tu peux le voir, il y a beaucoup de champs à remplir. Il n’est pas nécessaire d’indiquer tous les champs.

Barre latérale WordPress : Réglage de la colonne une

Commençons par le commencement : 

  1. Tout d’abord, mettons un titre en français
  2. Ensuite, si l’on souhaite transformer son titre en lien
  3. Pour les amateurs de CSS, tu vas pouvoir personnaliser ta sidebar
  4. Entre le titre et les derniers articles, tu peux afficher le texte que tu veux
  5. Enfin, à la fin des derniers articles, tu vas pouvoir mettre du texte
1er colonne du plugin recent posts extended
1er colonne du plugin recent posts extended

Enregistre, et n’oublie pas d’aller voir le résultat :

Le résultat sur le site
Le résultat sur le site

Réglage de la colonne deux

En fait, il n’y a pas grand chose à faire, tout est très bien par défaut. Par contre, si tu as plusieurs catégories, tu pourras drag & drop un 2ème widget Recent Posts Extended, et sélectionner la catégorie que tu souhaites mettre en avant :

Réglage de la 2ème colonne
Réglage de la 2ème colonne

Voyons ce que ça donne :

Les derniers articles d'une catégorie
Les derniers articles d'une catégorie

Il est intéressant le résultat pas vrai ?

Réglage de la colonne trois

Revenons sur notre premier widget :

  1. Tout d’abord, on garde 5, mais on peut très bien afficher moins ou plus d’articles sur notre barre latérale en changeant le chiffre.
  2. Ensuite, la miniature, c’est l’image, c’est toute la puissance de ce plugin, laissons la case coché.
  3. Moi j’ai mis 80×80, en taille d’image, et positionné à gauche.
  4. Ensuite, en cochant cette case, on va pouvoir afficher le début du texte des articles
  5. Combien de mots souhaites-tu afficher ? pour ma part, j’ai mis 35 mots.
  6. Enfin, à la fin du texte, tu peux mettre un lire la suite, pour pousser le lecteur à lire un de tes articles. Mais tu peux très bien changer le nom de ce lien.
Réglage de la 3ème colonne
Réglage de la 3ème colonne
Les résultats sur le blog
Les résultats sur le blog

Maintenant, le résultat, je trouve les titre un peu petit, on va voir ça dans le langage CSS. Si tu ne te sens pas à l’aise avec le code, tu n’es pas obligé de mettre tes mains dans le cambouis :

Une police plus grande, pour les titres des articles avec le CSS

Tout d’abord, recherche la class .rpwe-block suivi de la balise H3. Une fois trouvé, descends quelques lignes jusqu’à celle de font-size, par défaut il y a la valeur 12, moi j’ai mis 18 en valeur, tu peux choisir une autre valeur si tu en as envie :

Le CSS de recent posts widget extended
Le CSS de recent posts widget extended

Plus haut, je te disais que tu pouvais créer plusieurs widget avec ce plugin. Si tu modifies le CSS de l’un, il faudra faire la même chose pour les autres widgets, sinon il y a un risque de conflit.

Par exemple, j’ai mis la valeur 18px au H3 du widget Les nouveaux articles, je vais devoir mettre la même valeur au CSS de mon widget catégorie

Pour finir, voyons ce que ça donne. Avec les titres plus grands, cela met les articles en valeur. Avec de bonne connaissance en CSS, tu vas pouvoir modifier encore d’avantages de choses : 

Barre latérale WordPress : L'une des possibilités avec le plugin Recent Posts Widget Extended
Barre latérale WordPress : L'une des possibilités avec le plugin Recent Posts Widget Extended

Ce qu'il faut retenir

Tout d’abord, l’avantage du plugin Recent Posts Widget Extanded, est de pouvoir afficher l’image mise en avant dans la barre latérale. Cela met en avant les articles, et donne l’envie de les lires. Enfin, nous avons vu, qu’il est possible de modifier tout un tas de détails, comme : la taille de l’image, la taille de la police, afficher le début du texte ou pas…

Tu en penses quoi de ce plugin ? N’hésite pas à t’exprimer

Si vous avez aimé l'article, vous êtes libre de le partager :-)

Cet article a 6 commentaires

  1. Nathalie

    Super bien expliqué pour une débutante comme moi.
    Je vais l installer ça tombe bien j utilise Astra.

    1. Marc

      Hello Nathalie,

      Merci pour ton commentaire, cela fait plaisir… Si tu changes de thème, tu pourras également utiliser ce plugin 😉 dû moment que le thème à une barre latérale.

      Mon dernier article devrait t’intéresser

  2. meryl

    Merci pour cet article très intéressant, il va me servir pour améliorer les pages de mon Blog ! D’ailleurs, pour la mise en page d’un article c’est la même procédure, on trouve tout dans « apparence » ? Je trouve que la mise en page de mes articles n’est pas top mais je ne sais pas comment l’améliorer sans faire de bêtises…

    1. Marc

      Hello Meryl,

      Je suis vraiment ravi que mon article te plaise. Cela va dépendre des thèmes, certains ne te permettent pas de faire beaucoup de modifications alors que d’autres si. En règle général même si « apparence » te permet de modifier beaucoup d’éléments de ton site, tout ne se fera pas dans cet onglet.

      Je te conseille de lire mon dernier article : il se lit rapidement 😉 :

      https://libreetdigitale.com/la-parole-au-lecteur/

  3. pigeontruffleoberon99567

    Super idée, je pense que ça va faire baisser mon taux de rebond et augmenter mon temps de lecture ! Merci

    1. Marc

      Hello pigeontruffleoberon99567,

      Merci pour ton commentaire, c’est tout le mal que je te souhaite.

      Si tu souhaites aller plus loin, mon article « La parole au lecteur » devrait t’intéresser

Laisser un commentaire