Tu gères un site associatif, un blog collaboratif ou un site d’entreprise ? Tu veux que des contributeurs puissent publier sans se connecter à WordPress ?
Avec le plugin Postie, ils envoient un simple email, et l’article se crée automatiquement. Toi, tu reçois une notification et tu publies en un clic.
Comment ça marche ?
Voici le parcours d’un article, de l’email à la mise en ligne :
Étape
Ce qui se passe
1
Le contributeur rédige son article dans sa messagerie habituelle (Gmail, Outlook…)
2
Il envoie l’email à une adresse dédiée (ex : articles@ton-site.com)
3
Postie relève cette boîte mail (toutes les 30 min par exemple)
4
L’email devient un brouillon : sujet → titre, corps → contenu, 1ère photo → image à la une
5
Tu reçois une notification « Nouvel article en attente »
6
Tu vérifies, tu corriges si besoin, tu cliques sur Publier
Ce qu’il te faut
Les liens vers les extensions sont indiqués en bas de cet article.
Une adresse email dédiée (ex : articles@ton-domaine.com) avec ses paramètres IMAP
L’extension Clean Image Filenames (recommandée) pour éviter les problèmes d’accents dans les noms de fichiers
Configuration pas à pas
1. Crée une adresse email dédiée
Chez ton hébergeur (OVH, Gandi, o2switch…), crée une adresse comme articles@ton-domaine.com.
Note bien les paramètres IMAP :
Serveur : ssl0.ovh.net (exemple pour OVH)
Port : 993
Protocole : IMAP-SSL
2. Installe et configure Postie
Installe l’extension Postie depuis WordPress, puis configure ces onglets :
Onglet Mailserver (connexion à la boîte mail)
Paramètre
Valeur
Protocole
IMAP-SSL (pas IMAP seul !)
Port
993
Serveur
ssl0.ovh.net (ou celui de ton hébergeur)
Nom d’utilisateur
L’adresse complète : articles@ton-domaine.com
Mot de passe
Le mot de passe de cette adresse
Check for mail every
30 minutes
Supprimer l’e-mail après publication
Yes (IMPORTANT, sinon les articles s’accumulent)
Onglet User (sécurité)
Paramètre
Valeur
Authorized Addresses
Yes – seuls les utilisateurs autorisés peuvent publier
Allow Anyone To Post
Non – très important pour éviter le spam !
💡 Ajoute les adresses email autorisées dans les réglages de Postie. Si quelqu’un d’autre envoie un mail, tu recevras une alerte et pourras l’autoriser ou non.
Onglet Message (contenu)
Paramètre
Valeur
État par défaut
Pending (En attente de relecture)
Format
HTML (pour conserver gras et italique)
Onglet Image
Paramètre
Valeur
Use First Image as Featured Image
Yes
3. Installe Clean Image Filenames (recommandé)
Cette extension transforme automatiquement Hélène à la mer.jpg en helene-a-la-mer.jpg.
Sans elle, les accents et espaces dans les noms de fichiers peuvent causer des bugs d’affichage.
💡 Dans les réglages, active la correction pour tous les types de fichiers (pas seulement les images).
4. Configure un modèle Divi (si tu utilises Divi)
Pour éviter d’activer manuellement le constructeur sur chaque article reçu :
Va dans Divi → Theme Builder
Crée un modèle appliqué à Tous les articles
Dans le corps personnalisé, ajoute :
Un module Titre du poste (avec l’image à la une)
Un module Contenu de la publication (obligatoire : c’est là que s’affiche le texte)
Ainsi, chaque article reçu par email s’affiche automatiquement avec ta mise en page.
5. Teste le système
Dans les réglages Postie, clique sur Traiter les emails
Envoie un email de test depuis une adresse autorisée
Vérifie qu’un brouillon apparaît dans Articles → En attente
Guide pour tes contributeurs
Envoie ce mode d’emploi à ceux qui vont écrire :
Comment envoyer un article sur le site ?
Ouvre ton application email habituelle
Destinataire : articles@ton-site.com
Sujet : écris le titre de ton article
Corps du mail : rédige ton texte (tu peux utiliser gras et italique)
Photos : ajoute-les en pièces jointes
⚠️ La première photo sera l’image de couverture
Les suivantes apparaîtront dans l’article
À la fin de ton texte, ajoute cette ligne : -- ou ---
Tout ce qui suit (signature, logo…) sera supprimé
Envoie ! L’équipe validera et publiera ton article.
Guide pour les administrateurs
Procédure de validation
Tu reçois un email « New Post created by Postie… »
Connecte-toi à l’admin WordPress
Va dans Articles → En attente
Ouvre l’article et vérifie :
Les fautes éventuelles
L’image à la une (colonne de droite)
Clique sur Publier
C’est en ligne !
En résumé
Ce que tu configures
Pourquoi
Adresse email dédiée
Recevoir les articles des contributeurs
Postie
Transformer les emails en brouillons WordPress
Brevo
Recevoir les notifications « nouvel article »
Clean Image Filenames
Éviter les bugs avec les accents
Modèle Divi
Mise en page automatique des articles
Dépannage
Je ne reçois pas la notification « nouvel article » → Vérifie que Brevo est bien configuré pour les emails transactionnels
L’article se crée mais les images ne s’affichent pas → Installe Clean Image Filenames et vérifie les noms de fichiers
Un inconnu a envoyé un email à l’adresse Postie → Tu reçois une alerte. L’article est créé en brouillon mais tu peux le supprimer et ne pas autoriser l’expéditeur.
Tes notifications WordPress n’arrivent jamais ? Tes formulaires de contact finissent en spam ? C’est normal : WordPress utilise une méthode d’envoi (PHP mail) que Gmail, Outlook et Yahoo bloquent systématiquement.
La solution : passer par Brevo, un service d’emailing gratuit qui sert de relais SMTP fiable.
Pourquoi ça ne marche pas sans Brevo ?
Par défaut, WordPress envoie ses emails « en direct » depuis ton hébergeur. Problème : sans authentification, ces messages ressemblent à du spam pour les grandes messageries.
Avec Brevo, tes emails passent par des serveurs reconnus et authentifiés. Résultat : ils arrivent dans la boîte de réception, pas dans les indésirables.
Étape 1 – Crée ton compte Brevo et génère une clé API
Clique sur ton profil (en haut à droite) → SMTP et API
Dans l’onglet « Clés API », clique sur + Générer une nouvelle clé API
Donne-lui un nom (ex : « Site WordPress »)
Copie immédiatement la clé – elle ne sera plus visible ensuite !
Étape 2 – Connecte l’extension WordPress
Dans WordPress, installe et active l’extension Brevo
Va dans Réglages → Brevo (tout en bas du menu)
Colle ta clé API dans le champ prévu
Clique sur Login ou Connect
Ton compte est maintenant lié.
Étape 3 – Active l’envoi d’emails transactionnels
C’est le réglage crucial qui fait tout fonctionner.
Dans les réglages Brevo, trouve la section Transactional Email
Coche « Yes, use Brevo to send WordPress emails »
Choisis un expéditeur par défaut (ex : contact@ton-domaine.com)
Sauvegarde
À partir de maintenant, tous les emails de WordPress (notifications, formulaires, réinitialisations de mot de passe…) passent par Brevo.
Étape 4 – Authentifie ton domaine (SPF, DKIM, DMARC)
Pour que tes emails soient vraiment fiables, tu dois prouver aux messageries que Brevo a le droit d’envoyer des emails en ton nom. si tu n’as jamais fait, je t’ai mis le lien vers deux articles que j’ai créé sur ce sujet tout en bas de cet article.
Ce que tu dois faire :
Dans Brevo, va dans Expéditeurs & Domaines
Ajoute ton domaine et suis les instructions
Brevo te donne des enregistrements DNS à ajouter chez ton hébergeur (OVH, Gandi, etc.)
Points importants :
⚠️ Un seul champ SPF et un seul champ DMARC par domaine ! Si tu en as déjà, il faut les fusionner, pas en créer de nouveaux.
Vous publiez régulièrement sur votre site WordPress et aimeriez que vos abonnés reçoivent automatiquement vos nouveaux articles ? Ce guide vous accompagne étape par étape pour connecter votre flux RSS à Brevo et mettre votre newsletter en pilote automatique.
Étape 1 : Récupérer votre flux RSS
Puisque vous êtes sur WordPress, votre flux est natif. Votre URL de flux est : https://parcours-performance.com/feed/ (Copiez cette adresse, vous en aurez besoin tout de suite).
Étape 2 : Créer l’intégration RSS dans Brevo
Connectez-vous à Brevo.
Cliquez sur votre nom en haut à droite > Intégrations (ou « Plugins et Intégrations »).
Dans la barre de recherche, tapez « RSS ».
Cliquez sur « Campagne RSS » et choisir l’intégration « RSS campaign » :
Donnez un nom à l’intégration (ex: » Newsletter PP hebdo »).
Cliquez sur Créer une intégration.
Étape 3 : Configurer le flux
URL du flux RSS : Collez https://parcours-performance.com/feed/
Cliquez sur Charger le flux RSS.
Si tout va bien, vos derniers articles s’affichent en prévisualisation. Cliquez sur Continuer.
Étape 4 : Le Design (Appliquer vos couleurs)
C’est ici qu’on va personnaliser le modèle pour qu’il ressemble à votre image jointe et utilise votre charte graphique.
Choix du template : Choisissez le modèle » Template par défaut » (c’est le plus simple à modifier).
Dans l’éditeur, vous allez voir des blocs avec du code bizarre ({feed.ITEMS…}). Ne touchez pas à ce code, c’est ce qui fait venir les articles.
Modifier le contenu et le design.
Une fois le design à votre goût, cliquez sur Continuer.
Étape 5 : Les destinataires
Retourner dans l’intégration
Brevo va vous demander à qui envoyer. Sélectionnez une liste.
Vous ne pouvez sélectionner qu’une seule liste de contacts par intégration de campagne RSS créée. Si vous souhaitez envoyer vos campagnes RSS à plusieurs listes de contact, vous devrez créer plusieurs intégrations de campagnes RSS.
Cliquez sur Continuer.
Étape 6 : La Fréquence (L’astuce pour le « toutes les 2 semaines »)
Brevo propose « Tous les jours », « Toutes les semaines » ou « Tous les mois ». Il n’y a pas de bouton « Toutes les 2 semaines ».
La stratégie à adopter : Choisissez « Toutes les semaines » (Weekly).
Sélectionnez le jour (ex: Mardi) et l’heure (ex: 09:00).
La newsletter ne sera envoyée que s’il y a du nouveau contenu depuis la dernière date d’envoi (le mardi précédent dans notre exemple).
Étape 7 : Valider et Activer
Vérifiez le résumé.
Cliquez sur Enregistrer et Activer.
C’est fini ! Votre newsletter est maintenant en pilote automatique. Dès que vous publierez sur votre site, Brevo s’occupera du reste la semaine suivante.
J’ai écrit un article contenant des émojis récemment et il était impossible de l’enregistrer. Il y avait un message disant « impossible de mettre à jour la publication dans la base de données ». A force de supprimer des éléments de l’article pour déterminer ce qui bloquait, j’ai compris que mon site, et celui-ci, ne supportaient pas les émojis. J’y ai perdu beaucoup de temps 😠. Alors je documente la solution pour me permettre de la retrouver si nécessaire, et pour aider d’autres internautes si nécessaire.
Pour déterminer la solution, je me suis appuyée sur cet excellent article, dont j’ai validé le processus par un bref echange avec Gemini 2.5 Flash.
Un InterClassement trop ancien !
Comme on le voit dans cette copie d’écran, certaines de mes tables utilisent utf8mb3_general_ci et d’autres utf8mb4_unicode_520_ci. Selon Gemini, « L’interclassement, ou « collation » en anglais, est un ensemble de règles qui définit comment les chaînes de caractères sont triées et comparées dans une base de données. Il détermine l’ordre alphabétique des caractères, la sensibilité à la casse (majuscules/minuscules) et aux accents, ce qui est crucial pour le tri des résultats de recherche ou le filtrage de données. »
Tous les interclassements que j’utilise sont basés sur UTF-8, encodage bien adapté. Mais utf8mb3 n’utilise que 3 octets par caractères et ne convient pas pour certains caractères spéciaux comme les emojis. Et il traite aussi les caractères accentués comme s’ils ne l’étaient pas, ce qui le rend moins précis.
utf8mb4_unicode_ci semble être le standard recommandé actuellement. Il convient à une gamme très large de caractères, y compris les emojis et caractères asiatiques. Il respecte les règles de tri d’Unicode, ce qui le rend bien adapté à la plupart des langues. utf8mb4_unicode_520_ci est encore plus récent.
Quelles solutions ?
Après analyse de l’article et consultation de Gemini, j’ai décidé de procéder en trois étapes :
Etape 1 : sauvegarder la base de données
Ca se fait dans l’interface de l’hébergeur (Infomaniak par exemple) ou avec l’interface phpMyAdmin.
Etape 2 : Modifier wp-config.php
Il vaut mieux en télécharger la version actuelle au cas où avant de le modifier. Dans ce fichier je vois :
define('DB_CHARSET', 'utf8');
Je me modifie en :
define('DB_CHARSET', 'utf8mb4');
Et je vois qu’il n’y a pas besoin de changer la ligne
define('DB_COLLATE', '');
Et je sauvegarde le fichier wp-config.php ainsi modifié.
Etape 3 : migrer la base de données
Je vais migrer l’ensemble de la base de données vers utf8mb4_unicode_ci.
Dans phpMyAdmin, sélectionnez votre base de données.
Cliquez sur l’onglet « Opérations » en haut.
Dans la section « Interclassement », sélectionnez utf8mb4_unicode_ci dans la liste déroulante.
Cochez la case « Changer l’interclassement de toutes les tables » puis la case « Changer les interclassements de toutes les colonnes de toutes les tables »
cliquer sur « Exécuter » :
Une fois l’opération terminée, vous verrez un message de succès.
Notez Que si on clique sur « information schema » ça reste toujours le vieil interclassement ; mais ce schéma ne sert à rien (pour le site lui-même). Donc pas de problème !
Et maintenant ?
Je peux mettre autant d’emojis que je veux dans mes articles. Est-ce que c’est mieux ou pas, je ne sais pas !
Dans cet article, je note rapidement ce que j’ai choisi comme nouveau moyen de faire du « syntax highlighting » (mise en évidence de la syntaxe) du code que je partage dans ce site ou d’autres.
L’extension utilisée jusqu’à présent
J’utilisais Crayon Syntax Highlighter, mais malheureusement l’extension ne fonctionnait plus depuis le passage de WordPress en version 5.0, avec l’éditeur Gutenberg et les blocs.
Sur le site WordPress.org de l’extension, on voit que l’extension, malgré 50 000 installations actives, n’est plus mise à jour depuis 3 ans. Il faut donc que je cesse de l’utiliser.
Comment remplacer Crayon Syntax Highlighter ?
Ce qui a déclenché cette recherche, et cet article, c’est la lecture d’un très bon article du blog d’Elegant Themes, le créateur du thème Divi. L’article s’intitule « How to Share and Style Code Snippets in Divi (3 Methods)« . Il contient des informations concrètes sur :
créer des boîtes Divi pour code, avec ajout manuel de code ou utilisation d’une extension
encodage de code HTML pour l’afficher dans une page wordpress
utilisation de Gist
utilisation d’extensions dédiées à la mise en évidence de code
Pour ma part, j’ai décidé de remplacer Crayon Syntax Highlighter par l’extension proposée dans l’article d’Elegant Themes. Et pour écrire cet article j’ai utilisé l’encodage de code HTML qui est aussi présenté dans l’article des créateurs du thème Divi.
encodage de code HTML
WordPress transforme le code HTML saisi directement dans un bloc paragraphe classique, et le sépare même en autant de blocs. Ci-dessous j’ai juste mis les trois premières lignes :
<!– Code collé dans un bloc paragraphe –>
<!DOCTYPE
html>
<html>
Si je place le code dans un bloc « code » classique, toutes les lignes sont dans un même bloc.
<!-- Code collé dans un bloc paragraphe -->
<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Et maintenant j’encode l’HTML avec Code Beautify, puis je le place dans un bloc « paragraphe » classique, le code se présente correctement :
<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Mais tout ceci est compliqué. Et on n’a pas de mise en évidence de la syntaxe, et c’est difficile à analyser puis copier-coller pour l’internaute.
Utilisation de l’extension Code Prettify
Utilisation de l’extension Code Prettify. C’est une très bonne extension, très simple. Par exemple, elle fait du « syntax highlighting » automatiquement de ce code Processing (java) :
L’inconvénient est qu’il faut que j’aille modifier le style des blocs de code pour par exemple faire des retours à la ligne (word-wrap je crois).
L’extension SyntaxHighlighter Evolved
SyntaxHighlighter Evolved est également citée dans l’article de Elegant Themes, et c’est finalement le choix que j’ai fait. Je n’ai fait aucun réglage, j’ai simplement installé l’extension.
On peut utiliser des shortcodes mais je préfère choisir le bon bloc d’édition.
Maintenant dans l’éditeur, je peux trouver un bloc de mise en page, intitulé « SyntaxHighlighter Code » :
Bloc SyntaxHighlighter Code de l’extension SyntaxHighlighter Evolved
Si je place le code HTML vu précédemment dans deux blocs successifs, le premier sans spécifier que le langage est HTML, le deuxième en le spécifiant, voici ce que j’obtiens :
SyntaxHighlighter Evolved comme syntax highlighter
L’extension ne reconnait pas automatiquement le langage mais la mise en page est vraiment réussie.
Et l’ancien code ???
Est-ce qu’il faut que j’aille corriger tout le code partagé ces dernières années ?
Dans ce site, de nombreux articles contiennent du code partagé. Il faut continuer à le partager mais pas question d’aller corriger chaque article ! Par exemple, l’article https://knowledge.parcours-performance.com/processing-video-ou-gif-anime/ contient du code défini avec l’ancienne extension Crayon Syntax Highlighter. Le code se présentait ainsi :
Crayon Syntax Highlighter sur du code java
Avec la nouvelle extension, il est toujours lisible, et copiable, mais plus rien ne met en évidence la syntaxe. Il faudra donc que je fasse des corrections si je met à jour des articles.
Dès maintenant je supprime Crayon Syntax Highlighter.
Commentaires récents