skip to Main Content

Comment ajouter un fil d’actualité similaire à Facebook sur WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Le fil d’actualité de Facebook à fait beaucoup d’adeptes durant les dernières années, à tel point qu’un bon nombre de développeurs ont créé des thèmes utilisant un fil d’actualité identique à celui de Facebook.

Cette manière d’afficher les articles a déjà fait ses preuves. Elle a pour principal objectif de simplifier la lecture des articles.

Dans cet article, je vous montrerai comment rendre cela possible sur votre blog, mais plutôt avec un plugin.

ultimate-landing-page-banniere

La première chose à faire est de télécharger et d’installer le plugin « Timeline Ultimate » ou de l’installer en effectuant une recherche directement depuis votre tableau de bord.

Après avoir installé et activé le plugin, vous remarquerez un nouveau menu disponible sur le menu latéral gauche du tableau de bord nommé « Timeline Ultimate ». Nous allons commencer par créer un nouveau timeline, en accédant au sous-menu « New Timeline Ultimate ».

A chaque nouveau timeline, un identifiant unique sera attribué à ce dernier, dans un shortcode que l’on peut retrouver dans le champ « Shortcode » de la section « Timeline Ultimate Options » sur cette nouvelle page.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

comment-creer-un-nouveau-timeline

Plus bas sur l’onglet « Timeline Options« , nous allons choisir le nombre d’articles à afficher sur ce timeline « Number of post to display. », ensuite la taille des miniatures « Thumbnail Size » (aucun, aperçu, moyen, large, taille normale) et la hauteur de ces derniers exprimée en pixel (px) « Thumbnail max hieght(px) ».

timeline-options

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Sur l’onglet suivant, nous allons déterminer le style du thème, c’est-à-dire les couleurs d’arrière-plan (background-image), la couleur du cercle d’ancrage « Middle Circle Background Color », la couleur du fil d’actualité « Middle Line Background Color », la couleur du titre de l’article « Post Title Color », la taille de la police du titre « Post Title Font Size », la couleur de l’arrière-plan du contenu « Post Content Color » et la taille du texte de ce dernier.

modification-du-style-du-timeline

Sur l’onglet « Timeline Content », nous allons définir les éléments qui seront intégrés au Timeline. Nous pouvons choisir d’afficher le résumer « Display Excerpt » ou le contenu complet de chaque article « Display Full Content ». En choisissant d’afficher le résumé, nous devons également définir le nombre de mots à afficher, ensuite le texte qui incite à lire la suite, généralement « En savoir plus », « Lire la suite ».

En ce qui concerne l’option « Timeline Content Posttype », je vous recommande de cocher la case « post » pour n’afficher que les articles. Pour intégrer les pages dans le fil d’actualité, vous pouvez cocher l’option « page », bien que cela ne soit pas recommandé.

Plus bas, nous allons déterminer le filtre qui s’applique au fil d’actualité :

  • Commencer à afficher les articles récents « Display from Latest Published »
  • Commencer à afficher les anciens articles « Display from Older Published »
  • Commencer par afficher les meilleurs articles « Display from Featured Post »
  • Commencer par afficher les meilleurs articles de l’année « Display from Only Year »
  • Commencer par afficher les meilleurs articles du mois « Display from Month »
  • Commencer par afficher « Display from Taxonomy & Categories »
  • Commencer par afficher les articles en fonction de leurs identifiants

Une fois que c’est fait, copiez le shortcode du timeline et publiez-le. Nous allons utiliser ce shortcode sur une nouvelle page, que nous allons également publier.

fil-d-actualité-presentation

Vous remarquerez que chaque post du fil d’actualité possède des liens de partage vers les réseaux sociaux.

Avant de nous quitter

La gestion des différents fils d’actualité se fait à l’emplacement « Timeline Ultimag >> Timeline Ultimate ».

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

timeline-ultimate

Vous pourrez gérer vos Timelines exactement comme les articles. Il est également possible d’utiliser plusieurs Timelines différents.

C’est tout pour ce tutoriel, j’espère qu’il vous aidera à créer des superbes Timelines sur votre blog. N’hésitez pas à laisser un commentaire ou à partager l’article avec vos amis.

Cet article comporte 3 commentaires
  1. Bonjour,

    Mais ces timelines tu les mets ou exactement dans ton blog, dans les widget ? et ils
    remplacent tous les autres plugin comme top 10, most commented widget etc….
    Désolée question de blonde 😉

    1. Bonjour Marie-Do,

      Tu peux en principe aussi bien les mettre dans les widgets que dans les articles. Pour cela, il suffit d’utiliser des shortcodes.

      Rassures-toi, tu n’est pas si blonde que ça? 😉 Tout le monde a été « blond » un jour.

  2. Salut Thierry,

    Cette extension a l’air intéressante pour changer un peu de style, alors je pense que je vais la tester sur un de mes blogs collaboratifs.
    Par contre ce que je regrette, c’est qu’elle n’a pas été préparée pour être traduite.

    Amicalement,

    Bruno

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
1 Partages
Partagez
Tweetez
Enregistrer1