Thématique : Blog | Niveau : Débutant
Objectif de cette astuce
Comprendre ce qu’est un article épinglé et quand l’utiliser, savoir l’activer depuis l’éditeur Gutenberg, configurer le bloc Query Loop en thème FSE pour que l’épinglage soit pris en compte, styliser l’article épinglé en thème classique, et connaître les bonnes pratiques pour en tirer le meilleur parti.
Qu’est-ce qu’un article épinglé
Un article épinglé (sticky post en anglais) reste affiché en tête de la liste des articles, indépendamment de sa date de publication. Même quand de nouveaux articles sont publiés, l’article épinglé reste en première position.
C’est un outil de mise en avant simple et natif dans WordPress — aucune extension n’est nécessaire. Il est particulièrement utile pour les guides de référence, les annonces importantes ou tout contenu qu’on souhaite rendre visible en priorité aux nouveaux visiteurs.
Épingler un article depuis l’éditeur Gutenberg
Capture 1 — L’option dans le panneau de l’éditeur
Dans l’éditeur Gutenberg, ouvrir le panneau latéral droit sur l’onglet Article. Faire défiler jusqu’à la section Statut et visibilité. L’option “Épingler en haut du blog” apparaît sous forme de case à cocher — la cocher suffit à épingler l’article.
Enregistrer ou mettre à jour l’article pour que l’épinglage soit effectif.
Pour désépingler, décocher la même option et mettre à jour l’article.
Il est également possible d’épingler un article directement depuis la liste des articles sans ouvrir l’éditeur : Articles → Tous les articles → survoler l’article → cliquer sur Modification rapide → cocher “Épingler en haut du blog” → cliquer sur Mettre à jour.
Comportement en thème classique vs thème FSE
Le comportement de l’article épinglé diffère selon le type de thème utilisé.
En thème classique (Astra, GeneratePress, OceanWP…), l’épinglage fonctionne automatiquement. WordPress utilise la fonction post_class() pour ajouter la classe CSS .sticky sur l’article épinglé, ce qui permet de le styliser facilement. Aucune configuration supplémentaire n’est nécessaire.
En thème FSE (Twenty Twenty-Five et thèmes blocs), le fonctionnement est différent et nécessite une configuration dans l’éditeur de site. Le bloc Boucle de requête qui affiche les articles dans les templates FSE doit être explicitement configuré pour respecter l’épinglage — sinon l’article épinglé apparaît dans l’ordre chronologique normal sans être mis en avant.
Configurer le bloc Boucle de requête en FSE
C’est l’étape indispensable pour que l’épinglage fonctionne en thème FSE.
Capture 4 —
Aller dans Apparence → Éditeur puis ouvrir le template qui affiche les articles — généralement le template Index ou Blog, ou archives. Utiliser la Vue en liste (icône liste en haut à gauche) pour identifier le bloc Boucle de requête dans l’arborescence des blocs.
Sélectionner le bloc Boucle de requête. Dans le panneau de droite, si les options de personnalisation ne sont pas visibles, passer en mode “Boucle personnalisée” — cette option déverrouille les réglages avancés du bloc.
Une fois les réglages avancés accessibles, localiser la section “Publications épinglées” et sélectionner “Inclure” dans le menu déroulant. Ce réglage garantit que les articles épinglés apparaissent en premier dans la liste, quelle que soit leur date de publication.
Cliquer sur Enregistrer pour sauvegarder les modifications du template.
Résultat sur la page du blog
Capture 2 — La page du blog avec l’article épinglé en premier
Afficher l’image
L’article épinglé s’affiche en tête de liste, avant tous les autres articles, quelle que soit sa date de publication. Les articles suivants s’affichent dans l’ordre chronologique inverse habituel.
Sur la plupart des thèmes classiques bien codés, l’article épinglé est visuellement distingué des autres — bordure colorée, badge “À la une” ou fond différent. Ce style est appliqué via la classe CSS .sticky que WordPress ajoute automatiquement.
Styliser l’article épinglé en thème classique
En thème classique, WordPress ajoute automatiquement la classe CSS .sticky sur l’article épinglé. Il suffit de cibler cette classe pour lui appliquer un style visuel distinctif.
Exemple de code CSS à ajouter dans le fichier style.css du thème enfant ou dans Apparence → Personnaliser → CSS additionnel :
/* Encadré et fond distinctif pour l'article épinglé */
.sticky {
background-color: #f0f6fc;
border-left: 4px solid #2271b1;
padding: 16px;
}
/* Badge "À la une" affiché avant le titre */
.sticky .entry-title::before {
content: "À la une";
display: inline-block;
background: #2271b1;
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 2px 10px;
border-radius: 20px;
margin-right: 8px;
vertical-align: middle;
text-transform: uppercase;
}En thème FSE, la classe
.stickyn’est pas ajoutée automatiquement sur les articles dans le bloc Boucle de requête. Pour distinguer visuellement l’article épinglé, il est possible d’utiliser le sélecteur CSS.wp-block-post:first-childcomme substitut — mais attention, ce sélecteur cible le premier article affiché, qu’il soit épinglé ou non. C’est une limitation actuelle des thèmes FSE sur ce point précis.
/* Styliser l'article épinglé en thème FSE */
.wp-block-post:first-child {
background-color: #f0f6fc;
border-left: 4px solid #2271b1;
padding: 16px;
}
Bonnes pratiques
Un seul article épinglé à la fois. WordPress permet techniquement d’en épingler plusieurs, mais cela repousse les publications récentes vers le bas et confus la lecture de la page d’archive. Un seul article épinglé préserve l’impact et la lisibilité.
Les bons cas d’usage sont le guide de référence ou article “Commencer ici” pour orienter les nouveaux visiteurs, l’annonce importante à durée limitée (lancement, événement, promotion), le meilleur article du site ou le contenu le plus représentatif, et les informations pratiques récurrentes que les visiteurs cherchent souvent.
Ce qu’il faut éviter : épingler plusieurs articles simultanément, laisser un article épinglé indéfiniment sans le maintenir à jour, épingler un contenu daté ou événementiel après sa date de pertinence, et utiliser l’épinglage à la place d’une entrée de menu pour un contenu à rendre accessible sur toutes les pages.
La durée de vie doit correspondre à l’usage : une annonce ou une promotion se désépingle dès la fin de l’événement. Un guide de référence peut rester épinglé longtemps si son contenu est maintenu à jour. Prévoir un rappel dans l’agenda pour désépingler les contenus temporaires.
Ce qu’il faut retenir
Épingler un article est une opération simple — une case à cocher dans l’éditeur. Ce qui demande attention, c’est la configuration du bloc Boucle de requête en thème FSE, sans laquelle l’épinglage n’est pas respecté dans les templates. En thème classique tout fonctionne automatiquement, et la classe .sticky permet une stylisation CSS directe. Dans les deux cas, la règle principale reste la même : un seul article épinglé à la fois, pour un contenu qui mérite vraiment d’être mis en avant, avec une date de désépinglage prévue pour les contenus temporaires.