On me pose souvent une question sur le blog : comment ajouter des images à son flux RSS sur WordPress, pour qu'elles soient ensuite reprises dans une newsletter par exemple ?
Beaucoup d'outils de newsletters - comme MailChimp - permettent d'envoyer une newsletter automatique qui reprend les derniers articles de votre blog. Ces newsletters prennent appui sur le flux RSS du blog, une page qui se met à jour automatiquement lorsque vous mettez en ligne de nouveaux contenus.
J'ai évoqué plus en détail le fonctionnement des flux RSS dans un autre article. Aujourd'hui, je vais vous expliquer comment ils sont paramétrés par défaut et comment vous pouvez les personnaliser en ajoutant des images, pour un rendu plus attractif.
Les paramètres par défaut des flux RSS sur WordPress
WordPress génère spontanément plusieurs flux RSS :
- Le flux principal du blog (accessible en rajoutant
/feed/
à la fin de l'adresse de votre blog) reprend les derniers articles publiés. - Le flux des commentaires (accessible en rajoutant
/comments/feed/
à la fin de l'adresse de votre blog) comporte, vous l'aurez deviné, les derniers commentaires. - Les flux de catégorie (accessibles en ajoutant
/prefixedelacategorie/nomdelacategorie/feed/
à l'URL du blog, par exemple https://www.notuxedo.com/blog/creer-un-site/feed/ pour ma rubrique "Créer un blog"), qui reprennent les derniers articles d'une catégorie précise. On peut également les obtenir grâce à l'identifiant de la catégorie de la catégorie, en ajoutant ?cat=ID&feed=rss2 à l'URL du blog et en remplaçant "ID" par l'identifiant en question. - Les flux par étiquette (accessibles en ajoutant
/prefixedetiquette/nomdeletiquette/feed/
après l'URL du blog, par exemple https://www.notuxedo.com/tag/wordpress/feed/ pour mon étiquette WordPress).
Il existe également des flux pour les autres pages d'archives (archives par date, par auteur) ainsi que des flux pour les résultats de recherche.
Par défaut, WordPress met en forme ces différents flux RSS en s'appuyant sur des templates prédéfinis, qui se trouvent dans le dossier wp-includes du blog (ils font donc partie des fichiers que vous installez lorsque vous installez WordPress et que vous ne devez pas modifier).
WordPress tient également compte des réglages que vous effectuez dans le menu Réglages > Lecture. Celui-ci vous permet de choisir deux choses :
- Le nombre d'articles qui apparaissent dans votre flux : il s'agit d'en proposer suffisamment pour donner envie... sans tomber dans l'excès ! Souvent, on cible entre 5 et 10 articles.
- Le type d'affichage du flux : vous pouvez afficher simplement un extrait de l'article dans le flux RSS (ce qui oblige à cliquer pour aller lire la suite sur votre blog, une bonne option pour utiliser le flux RSS comme un appât pour faire revenir les gens !)... ou l'article complet, ce qui est souvent moins pertinent.
Il faut savoir que vous avez la possibilité de personnaliser ces flux RSS de manière beaucoup plus poussée en créant des fonctions spécifiques dans le fichier functions.php de votre thème.
Vous pouvez également le personnaliser en retirant la mention "Cet article (titre) est apparu en premier sur (blog)" qui s'affiche par défaut sur chaque article du flux RSS. Comment supprimer ce message ?
Il est généralement créé par l'extension Yoast SEO. Allez dans le menu SEO > Réglages SEO puis dans l'onglet "RSS" et supprimez le message ou remplacez-le par le message de votre choix.
Comment ajouter des images au flux RSS de WordPress
Parlons maintenant de la personnalisation qui vous intéresse : insérer des images dans le flux RSS.
Il suffit d'ajouter ce bout de code dans le fichier functions.php de votre thème WordPress. Si vous ne savez pas comment le modifier, n'hésitez pas à lire mon tutoriel sur functions.php.
function rss_post_thumbnail($content) {
global $post;
if(has_post_thumbnail($post->ID)) {
$content = '<p>' . get_the_post_thumbnail($post->ID) .
'</p>' . get_the_excerpt();
}
return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail');
Ce code indique tout simplement que si l'article possède une image mise en avant, il faut la récupérer et l'afficher avec l'extrait dans le flux RSS.
Pourquoi mettre des images dans le flux RSS ?
Proposer des images en complément d'un extrait du post rend d'abord votre flux beaucoup plus agréable visuellement pour les personnes qui s'y abonnent via un agrégateur de flux RSS.
Regardez par exemple comment s'affichent les posts de mon blog...
Et en version compacte :
Ça trouve une autre utilité quand vous intégrez votre flux RSS à une newsletter automatique : votre outil de newsletter récupère alors automatiquement l'extrait de l'article mais aussi l'image associée, pour un rendu beaucoup plus percutant.
Pour vous donner une idée, sur mon blog voyage, j'obtiens un taux de clic moyen sur les articles de la newsletter entre 13% et 16%, alors que la moyenne "du marché" sur la thématique voyage se situe plutôt autour de 2% selon des chiffres fournis par IBM.
J'ai effectué une mise en forme très élémentaire du flux RSS sur MailChimp :
Ce qui permet d'obtenir cet affichage :
J'espère que cet article vous aidera à obtenir le même genre de résultat !
Bonjour Marlène,
Merci de tes conseils.
J’ai ajouté comme expliqué le code dans le fichier function.php. Quand je retourne dans Mailchimp et regarde la prévisualisation, l’image ne s’affiche pas correctement. Il y a simplement le nom de l’image avec un petit icône de paysage à côté. Sais-tu comment je peux résoudre le problème stp ?
Merci d’avance et bien à toi,
Thomas.
En fait, c’est bon. Problème d’affichage dans la prévisualisation sur MailChimp mais ok dans le mail test envoyé :-)
Visiblement, les images sont bloquées par un système anti-hotlinking que tu utilises (en ouvrant l’image depuis mon lecteur de flux – où elle ne s’affiche pas par défaut, je suis redirigée vers une URL en /media-ace/assets/hotlink-placeholder.png).
Hello Marlène,
J’utilise un agrégateur de flux RSS et j’ai remarqué une différence d’affichage entre les articles.
Sur certains articles mis en avant, je ne peux lire que l’introduction, ensuite c’est la mention « lire plus » qui s’affiche et qui renvoie vers le site.
Sur d’autres, c’est l’article entier qui apparaît (c’est le car pour mon site par exemple). Du coup le lecteur ne visite pas mon site mais reste sur son appli pour le consulter.
Comment modifier ce paramètre ? :-(
Merci et belle journée
Bonjour Marie, sur WordPress ça se définit dans le menu Réglages > Lecture, au niveau de la ligne « Dans chaque publication du flux, inclure ». Si ça ne fonctionne pas, ça peut aussi être défini par des lignes de code dans le thème WordPress lui-même… auquel cas ça dépend de la manière dont le thème est codé !
Bonsoir Marlène,
merci pour ce tuto aussi clair qu’agréable à lire.
Malheureusement le code proposé ne fonctionne pas dans mon cas, bien particulier : j’essaie d’intégrer le flux rss du site wordpress que j’administre à un compte mastodon. Mastodon n’a aucune difficulté à publier les images des fils que je lui rajoute ( issus de SGC très différents, dont nombreux sites wordpress) sauf avec le mien !! En l’occurrence, impossible de faire apparaître des images, ni en contenu, ni en thumbnails… j’y travaille depuis plusieurs heures (jours ;) et commence à désespérer… J’ai lu que le thème est déterminant pour la structuration du flux rss. Est-ce qu’il faut alors se résoudre à changer de thème, ou une solution peut toujours être trouvée à partir de functions.php ?
J’ai reporté pour ce cas de figure quelques complément d’information ici :
https://pad.riseup.net/p/wordpress-to-mastodon.rss
En néophyte, je suis preneur de tout conseil !
Merci d’avance !!
Hello Fabio, le flux du site est pourtant valide et affiche bien les images dans mon lecteur de flux… donc je chercherais plutôt l’explication côté Mastodon que côté WordPress.
Bonsoir Marlène,
en fait le problème ne venait pas tant du flux rss, que du référencement même des images sur mon site (et de leur lecture par les réseaux sociaux, pour la génération de vignettes). C’est apparemment un fait assez commun. Finalement, le plug-in Yoast SEO, m’a permis de résoudre ce problème. Après des heures de recherche, pour l’instant je m’accommode très bien de cette solution !!
Merci encore
Ah oui, si le problème est lié au partage des contenus, c’est effectivement autre chose et j’avais d’ailleurs cet article sur le sujet.
Bonjour MARLÈNE,
Excellent Article, très claire, !! je vous remercie.
j ai beaucoup apprécie la version compacte des images, ci-dessous. je ne sais comment le faire . pourras tu stp me fournir le template ou le code du template pour l utiliser et le personnaliser.
Merci beaucoup
Bonjour Youssef, qu’entends-tu par « version compacte des images » ?
Hello Marlène,
D’abord merci pour ce tuto, c’est rare d’avoir du contenu en Français aussi clair :)
Par ailleurs j’ai glissé ton bout de code dans le functions.php du Theme Child de mon wordpress et lorsque j’intègre les mêmes paramètres que toi sur mailchimp l’image n’apparaît pas. As tu une piste pour moi ? (wordpress 5.3.2 theme avada)
Merci :)
Hello Camille, tes images s’affichent bien dans le flux et le flux est valide donc je chercherais plus du côté des paramètres de MailChimp, n’hésite pas à regarder leur page relative aux problèmes d’images.
Tu peux aussi tester le tag
*|RSSITEM:CONTENT_FULL|*
sur MailChimp au lieu de*|RSSITEM:CONTENT|*
.Merci pour ta réponse !
J’ai cherché dans les merge tags de Mailchimp et la balise *|RSSITEM:IMAGE|* ne fonctionne pas quant au *|RSSITEM:CONTENT_FULL|* il m’affiche tout le contenu et je veux éviter.. mais en effet là l’image est présente :)
Marlène, merci de ton aide,
figure toi que ça fonctionne cette fois-ci.. ah la magie du Rss. Encore merci pour cet article !
Bonjour Marlène,
Ce code fonctionne -t-il avec WordPress 5.3.2? Je l’ai ajouté à la fin du fichier functions.php de mon thème (fichier à jour dans mon FTP), mais pas de changement pour mon flux rss. Les images n’apparaissent pas. Une idée?
Hello Mylène, je l’utilise toujours sur mes blogs sans aucun problème donc oui, ça fonctionne. D’ailleurs, pour ma part, quand j’ajoute ton flux dans mon lecteur de flux RSS (Inoreader) je vois bien tes images.
Bonjour Marlène, merci pour cette précieuse info, cependant j’ai une question :) je cherche à intégrer à mon flux RSS d’autres champs et notamment des informations issues d’un module que tu connais bien et qui est « The Events Calendar ». Sais tu ou se procurer éventuellement ces bouts de code à rajouter ou connais tu une autre soluce ? J’ai essayé ton bout de code pour l’image ça fonctionne parfaitement.
Merci et bonne journée
Hello Philippe, pour récupérer le flux des événements de The Events Calendar il faut ajouter /feed à l’URL de la page principale du calendrier. Ensuite, il y a des tutos pour combiner plusieurs flux RSS (exemple de tuto ici en php).
Merci Marlène pour la réponse, en effet passer pas du php reste la seule soluce sérieuse. Sauf que je ne suis pas développeur, vais faire appel à un presta… encore merci
Bonjour,
merci pour ce tutoriel.
Je souhaiterais savoir si cela fonctionne également avec un flux rss externe. Je m’explique : j’ai ajouté un flux rss d’inoreader sur mon site pour tester mais impossible d’afficher l’image.
Meilleures salutations
Bonjour Coline, ça ne fonctionnera malheureusement pas car le flux est « généré » par le site d’origine : si celui-ci n’y a pas inclus les images, elles ne s’afficheront pas sur ton propre site.
Bonjour et merci pour cet article :) Si l’on souhaite créer un flux RSS dédié aux images du site c’est possible ? Par exemple si je veux également mettre les autres images en RSS que celles de mes articles, types mes portfolio ou mes images sur les pages ?
Merci !
Bonjour Claire, ça doit pouvoir se faire dans la mesure où on peut créer des flux sur mesure avec WordPress. Il faudrait demander ça à un développeur car la manière de récupérer les images dépend de la façon dont le portfolio est généré dans le code du site.
Bonjour
Dans mon flux rss, j’ai du code alphanumérique qui remplace les accents dans mes titres, cela peut se corriger comment ?
merci de votre aide et de vos conseils sur ce site, j’ai déjà réglé mon souci d’image dans les flux :-)
Cap
Bonjour Jérôme, c’est le symptôme typique d’un problème d’encodage (ça empêche les accents ou caractères spéciaux d’être reconnus comme des accents). Il peut être causé par pas mal de choses différentes : encodage défini dans le fichier des paramètres de WordPress (wp-config.php), encodage modifié par un plugin ou une personnalisation… Je vous conseille de vous tourner vers les forums d’aide de WordPress si vous avez besoin d’exposer plus en détail le problème car il n’est pas lié au sujet de l’article.
J’avais installé ton code pour afficher un extrait des photos dans ma Newsletter, mais après mûre réflexion je l’ai retiré car mon blog étant principalement un blog de photos. Je servais à mes abonnés toutes les nouvelles photos sur un plateau d’argent. Et cela ne les incitait pas à venir sur mon blog.
Hello, ça ajoute une seule image dans le flux (celle qui est mise en avant) mais effectivement, si tu les postes une par une sur ton blog, ça perd de son intérêt car tu dévoiles tout :)
Merci pour ces précieux conseils sur le Flux RSS. Je suis sur Mailchimp depuis peu et j’ai paramétré en automatique ma Newsletter. J’ai ainsi rajouté ton bout de code dans fichier function de mon thème, pour avoir un extrait des photos. Mais il y a un petit détail qui me chiffonne : cela m’indique une ligne « ‘read on » au lieu de « lire la suite ». Comment corriger ce petit détail. Merci pour ta réponse
Hello, je pense que ça vient plutôt d’un réglage sur MailChimp que dans ton flux RSS, pour deux raisons : d’abord, le code que je propose n’ajoute aucune mention « Read on » ; ensuite, si tu vas regarder ton flux RSS lui-même, tu n’y trouveras aucune mention « Read on » non plus.
Jette un œil à la langue de ton template de newsletter, éventuellement aux langues associées aux contacts…
Merci Marlène pour ta réponse. Non je sais cela ne vient pas de ton code. Cela doit être un problème de langue dans Mailchimp de ma newsletter. Je vais regarder cela de plus prés. Bonne soirée à toi.