Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment mettre en évidence les nouvelles publications pour les internautes qui reviennent dans WordPress

Vous vous demandez comment mettre en évidence les nouvelles publications pour les internautes qui reviennent sur le site de WordPress ?

Afficher les publications qui viennent d’être publiées sur votre site est une façon de souhaiter la bienvenue à vos fidèles lecteurs, de les tenir au courant et de vous assurer qu’ils ne manquent pas votre dernier contenu.

Dans ce guide étape par étape, nous allons vous afficher comment mettre en évidence les nouvelles publications pour les visiteurs qui reviennent sur WordPress.

How to Highlight New Posts for Returning Visitors in WordPress

Pourquoi mettre en évidence les nouvelles publications sur votre site WordPress ?

La mise en évidence des nouvelles publications sur votre site WordPress aide les internautes qui reviennent à découvrir facilement votre nouveau contenu. Ainsi, ils ne manqueront pas les informations fraîches ou les mises à jour que vous avez ajoutées à votre blog.

Libeller les nouvelles publications améliore l’expérience des utilisateurs/utilisatrices sur votre site WordPress. Lorsqu’un internaute arrive sur votre site, il peut facilement repérer les publications qu’il n’a pas encore lues, ce qui lui permet de gagner du temps et d’augmenter le nombre de pages vues.

Une bonne expérience utilisateur sur votre site permet uniquement de garder les internautes heureux, mais aide également au référencement de WordPress. Lorsque votre site est facile à utiliser, il améliore vos classements dans les moteurs de recherche et augmente la probabilité que les internautes trouvent votre contenu.

Dans cette optique, voyons comment mettre en avant les nouvelles publications pour les internautes qui reviennent sur le site de WordPress.

Nous allons vous afficher deux méthodes : l’une avec une extension WordPress et l’autre avec du code. Vous pouvez passer à une méthode spécifique en utilisant les liens rapides ci-dessous :

Méthode 1 : Mettre en évidence les nouvelles publications WordPress à l’aide d’une extension WordPress

Cette première méthode utilise l’extension Mark New Posts. Nous le recommandons aux blogueurs débutants car il est très simple. Cette extension ajoutera un libellé pour afficher les publications de blog que les visiteurs de votre site n’ont pas encore vues.

Tout d’abord, vous devez installer et activer l’extension Mark New Posts. Si vous avez besoin de conseils, consultez notre guide étape par étape sur l’installation d’un plugin WordPress.

Après cela, allez dans Réglages  » Marquer les nouvelles publications depuis la zone d’administration de WordPress. Vous verrez maintenant la page des réglages de l’extension.

Vous devez maintenant sélectionner l’endroit où le libellé « Nouvelle » doit être affiché. Vous pouvez sélectionner Après le titre de la publication, Avant le titre de la publication ou Avant et après le titre de la publication.

Nous trouvons que l’ajout du libellé après le titre de la publication ressemble à une notification et attire le plus l’attention des utilisateurs/utilisatrices, c’est donc ce que nous avons choisi.

Selecting the new post marker placement in Mark New Posts plugin

Ensuite, vous devez choisir l’aspect du marqueur dans le réglage du type de marqueur. Les options sont les suivantes : texte « nouveau », texte « ancien », cercle orange, drapeau, image ou aucun.

Confirmez les différentes options pour voir laquelle s’intègre le mieux à la conception de votre site.

Selecting a new post marker type in Mark New Posts plugin

Un autre réglage que vous pouvez définir est la couleur d’arrière-plan du titre de la nouvelle publication. Si vous activez ce paramètre, lorsqu’un lecteur visite une nouvelle publication, il verra que la section du titre de la publication a une couleur d’arrière-plan. Nous n’avons pas trouvé ce réglage nécessaire et l’avons donc désactivé.

Dans le réglage « Considérer un message comme lu », vous pouvez choisir le moment où le libellé du nouveau message doit être inactif : après l’ouverture du message, après son affichage dans la liste ou après l’ouverture de n’importe quelle page web du blog.

Nous suggérons d’opter pour « après son ouverture ». Cela signifie que si un internaute n’a pas lu plusieurs publications et qu’il en ouvre une, le libellé de la nouvelle publication pour les autres articles ne disparaîtra pas.

Outil personnalisé de personnalisation. Vous pouvez sélectionner le nombre de jours pendant lesquels la publication doit rester mise en évidence comme nouvelle, afficher toutes les publications existantes comme nouvelles pour les nouveaux clients/clientes et désactiver le nouveau libellé pour les types de publication personnalisés.

The Mark New Posts plugin settings page

Les deux derniers réglages sont assez avancés.

L’une d’entre elles consiste à « Permettre en dehors de la liste des publications », ce qui vous permet de mettre en évidence les publications en dehors de la boucle, par exemple dans les zones de la colonne latérale prêtes à recevoir des widgets. Soyez prudent lorsque vous activez ce Réglage, car il peut créer des erreurs WordPress indésirables.

L’autre paramètre est « Utiliser JavaScript pour afficher les marqueurs », qui est uniquement recommandé si l’extension n’est pas compatible avec le thème ou les autres extensions utilisées sur votre blog. Dans la plupart des cas, il est préférable de désactiver ce réglage.

Une fois que vous avez défini les réglages de l’extension, cliquez sur « Enregistrer ».

Clicking the Save button in Mark New Posts plugin

Et le tour est joué ! En direct, visitez votre site en mode incognito pour voir si les nouveaux libellés des publications récentes sont en ligne.

Voici ce que cela donne sur notre site de démonstration :

Example of the new post marker made by Mark New Posts plugin

Méthode 2 : Mettre en évidence les nouvelles publicités en ajoutant du code personnalisé

Vous n’êtes pas satisfait des nouvelles options de libellés de publication offertes par l’extension précédente ? Si oui, alors vous pouvez mettre en évidence les nouvelles publications en utilisant un code personnalisé à la place.

Pour les débutants, cette méthode peut sembler intimidante. Mais ne vous inquiétez pas car nous utiliserons l’extension WPCode pour insérer en toute sécurité des extraits de code dans WordPress sans casser votre site.

WPCode permet également de gérer facilement plusieurs extraits de code personnalisés, ce qui sera pratique dans notre cas puisque nous en utiliserons plusieurs.

WPCode - Best WordPress Code Snippets Plugin

Note : Bien qu’il existe une version gratuite de WPCode, nous utiliserons WPCode Pro car il vous permet d’insérer les extraits de code aux endroits appropriés pour ce tutoriel.

La première chose à faire est d’installer WPCode dans WordPress. Pour les instructions de configuration, consultez notre article sur l ‘installation d’un plugin WordPress.

Ensuite, allez dans  » Code Snippets  » +  » Add Snippet  » à partir de votre tableau de bord WordPress. Après cela, sélectionnez  » Ajouter votre code personnalisé (nouvel extrait)  » et cliquez sur le bouton  » Utiliser l’extrait « .

Adding custom code in WPCode

Maintenant, ajoutons un module à votre extrait de code afin qu’il soit plus facile de le trouver ultérieurement si nécessaire. Pour cela, vous pouvez l’appeler quelque chose comme « WordPress Dernier Visit Title Modifier ».

Sélectionnez ensuite « PHP Snippet » dans le menu déroulant « Code Type ».

Giving the custom code snippet a title and selecting the PHP code type in WPCode

Ensuite, vous pouvez copier et coller l’extrait de code ci-dessous :

// Define a function to modify post titles based on the last visit
function wpb_lastvisit_the_title($title, $id) {

    // Check if not in the loop, a singular page, or a page post type; if true, return the original title
    if (!in_the_loop() || is_singular() || get_post_type($id) == 'page') return $title;

    // Check if no 'lastvisit' cookie is set or if it is empty; if true, set the cookie with the current timestamp
    if (!isset($_COOKIE['lastvisit']) || $_COOKIE['lastvisit'] == '') {
        $current = current_time('timestamp', 1);
        setcookie('lastvisit', $current, time() + 60 * 60 * 24 * 7, COOKIEPATH, COOKIE_DOMAIN);
    }

    // Retrieve the 'lastvisit' cookie value
    $lastvisit = $_COOKIE['lastvisit'];

    // Get the publish date of the post (in Unix timestamp format)
    $publish_date = get_post_time('U', true, $id);

    // If the post was published after the last visit, append a new span to the title
    if ($publish_date > $lastvisit) $title .= '<span class="new-article">New</span>';

    // Return the modified or original title
    return $title;
}

// Add a filter to apply the 'wpb_lastvisit_the_title' function to 'the_title' hook with priority 10 and 2 parameters
add_filter('the_title', 'wpb_lastvisit_the_title', 10, 2);

Cet extrait permet de modifier les titres des publications WordPress en fonction de la dernière visite d’un compte.

Il vérifie si la page est une publication de blog ou non, et si ce n’est pas le cas, il affichera le titre original tel quel. Mais s’il s’agit d’une publication de blog, le titre sera modifié.

Ensuite, l’extrait s’assure que le cookie de dernière visite existe. Si ce n’est pas le cas, le code le crée et le définit à l’heure actuelle. La fonction compare ensuite l’heure de la dernière visite avec la date de publication de la publication et ajoute un libellé « Nouveau » au titre si la publication est plus récente que la dernière visite.

Une fois l’extrait de code inséré, défilez vers le bas et sélectionnez « Insertion automatique » pour la méthode d’insertion.

Confirmez également que vous avez choisi l’option ‘Interface publique uniquement’ pour l’Emplacement. Cela signifie que le code s’exécutera uniquement sur la partie de votre blog WordPress avec laquelle les internautes interagissent et non dans votre panneau d’administration ou à d’autres endroits.

Modifying the insertion settings in WPCode and activating and publishing the code

Une fois cela activé, vous pouvez rendre le code « actif » et cliquer sur « Enregistrer l’extrait ».

Répétez l’étape pour ajouter un nouvel extrait de code personnalisé. Cette fois, le code va styliser le libellé « Nouvelle » qui est ajouté aux titres des publications récentes en fonction de la dernière visite d’un utilisateur/utilisatrice.

Vous pouvez donc le nommer « Post Title New Label Style » et le type de code doit être « CSS Snippet ».

Creating a CSS code to customize the new post label in WPCode

Vous pouvez ensuite copier et coller les lignes de code suivantes dans la boîte de Prévisualisation du code :

/* CSS to style the "New" label in blog post titles */
.new-article {
    background-color: #4CAF50; /* Green background color */
    color: #ffffff; /* White text color */
    padding: 2px 5px; /* Padding around the label */
    margin-left: 5px; /* Adjust the margin to your preference */
    border-radius: 3px; /* Rounded corners for the label */
    font-size: 12px; /* Adjust the font size to your preference */
}

Cet extrait de code personnalise essentiellement le libellé de la publication « Nouvelle » à l’aide d’une couleur d’arrière-plan, d’une couleur de texte, d’une marge externe, d’un rayon de la bordure et d’une taille de police personnalisés.

N’hésitez pas à adapter ces éléments à vos préférences au fur et à mesure. Confirmez simplement que vous utilisez des codes de couleur hexagonaux ou des valeurs RVB pour les couleurs de l’arrière-plan et du texte.

Dans la section Insertion, sélectionnez ‘Site Wide Header’ comme Emplacement. Ensuite, rendez le code « Actif » et cliquez sur « Enregistrer l’extrait ».

Choosing Site Wide Header as the code location in WPCode

Et le tour est joué ! Pour voir si le code fonctionne, vous pouvez publier un nouvel article de blog et voir la publication sur mobile ou ordinateur de bureau en mode incognito.

Si le code est bien exécuté, vous devriez voir un libellé « Nouvelle » à côté des titres de vos publications récentes.

Example of the new post label made with WPCode

Outre la mise en évidence des nouvelles publications pour les internautes qui reviennent sur votre site, il existe d’autres moyens d’améliorer votre blog et d’inciter les internautes à rester plus longtemps sur votre site.

Par exemple, vous pouvez afficher des publications similaires à celle que l’internaute est en train de lire. De cette façon, vous pouvez maintenir l’intérêt des visiteurs en leur présentant un contenu qui correspond à leurs centres d’intérêt.

Vous pouvez également créer une barre de pied de page flottante et épinglée pour recueillir les adresses e-mail ou promouvoir des offres spéciales. Cette barre reste visible lorsque les internautes défilent vers le bas de la page. Vous pouvez l’utiliser pour rappeler constamment aux visiteurs de s’abonner/abonner ou de profiter de votre offre, ce qui permet d’évaluer le taux de conversion.

Vous pouvez également ajouter un redimensionneur de police à des fins d’accessibilité. Vous permettez ainsi aux internautes d’adapter la taille des caractères de votre site à leurs préférences, ce qui facilite la lecture de votre contenu.

Si vous avez beaucoup de contenu de blog, vous pouvez créer des pages personnalisées qui affichent les publications de blog si elles disposent d’un champ personnalisé spécifique.

Imaginons que vous disposiez d’un champ personnalisé intitulé « Difficulté de la recette ». Vous pouvez créer une page qui affiche toutes les publications de blog identifiées par  » Recette  » et dont le champ personnalisé a pour valeur  » Facile « . Ainsi, les internautes à la recherche de recettes faciles pourront les trouver en un seul endroit.

Voici d’autres astuces que vous pouvez consulter pour optimiser davantage votre blog WordPress :

Nous espérons que cet article vous a aidé à apprendre comment mettre en évidence les nouvelles publications pour les visiteurs qui reviennent sur WordPress. Vous pouvez également consulter nos choix d’experts des meilleurs plugins de constructeur de page WordPress par glisser-déposer et notre guide ultime sur la façon de modifier un site WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

13 commentairesLaisser une réponse

  1. keramzyt

    Is any way to set this cookie and functionality to different subpages on website?

  2. Peter

    Hi
    I use WP for a static website and show posts in a sidebar using the Recent Posts widget.

    I would like visitors to the site to be able to see new posts by highlighting them in some way in the sidebar e.g. showing « New » against the title of the post.

    Is there any plugin that will support this? The Mark New Posts widget only shows that the item is new once you have opened the post from the sidebar.

    Many thanks

    Peter

  3. محمود

    it didn’t work in my site…
    please help.

  4. S

    Forgot to mention, as mentioned above, most websites have more than one theme per post/page, so this may not work in that instance. Have a wonderful day.

  5. S

    Thank you for all your help. However, this needs to be in a short video and explained in slow detail. This is complicated and for developers that are used to coding, not for the average joe building a website. I always appreciate your emails so much

  6. simpson

    Hello
    this tutorial not works for me can u help me?

  7. sam

    Hi

    This is awesome but doesn’t work for me on wordpress multisite

    Thanks

  8. Sam

    This does not work for multisite network. Can you please advise. I appreciate your help by adding a tutorial for multisite.

    Thanks

  9. mthcsn

    Great stuff! Thanks!
    Although, I think the cookie is expiring rather fast. I think it was meant to be ‘time()+(60*60*24*7)’ so it expires after a week. Otherwise, it expires only after slightly less than 3 hours.

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.