Créer un article bien structuré et agréable à lire sur WordPress ne repose pas seulement sur l’inspiration ou le style. Cela dépend aussi de votre capacité à utiliser efficacement la console d’outils de base que WordPress met à votre disposition. Située juste au-dessus de l’éditeur de texte dans l’interface classique ou l’éditeur visuel (notamment si vous utilisez Classic Editor), cette barre d’outils vous permet de structurer, formater, styliser et enrichir votre contenu (par exemple votre premier article WP) en quelques clics.
La barre d’outils WP, votre meilleure alliée pour vos articles
La barre d’outils WordPress est placée juste au-dessus de votre zone de rédaction. Elle fonctionne comme les menus d’un logiciel de traitement de texte classique (comme Word ou Google Docs) et vous offre de nombreuses options pour mettre en forme votre contenu. Chaque icône a une fonction spécifique, que nous allons détailler ci-dessous pour vous aider à optimiser vos écrits.
| Icône / Fonction sous WP | Description détaillée |
|---|---|
| 1. Gras | Permet de mettre en évidence un mot ou une expression importante. En HTML, cela correspond à la balise <strong>. Exemple : important. |
| 2. Italique | Utilisé pour les citations, les mots étrangers ou pour donner du style à votre texte. Cela correspond à <em>. Exemple : stylisé. |
| 3. Texte barré | Affiche un mot barré, souvent pour montrer une correction ou une modification. Exemple : |
| 4. Listes à puces et numérotées | Organisez vos idées ou vos étapes à l’aide de listes claires, soit sous forme de puces, soit numérotées. |
| 5. Bloc de citation | Permet d’intégrer une citation mise en forme, utile pour mettre en valeur un extrait d’auteur ou une source. Exemple :
|
| 6. Ligne horizontale | Insère une séparation graphique dans votre article. Très pratique pour changer de partie ou aérer la lecture. Génère la balise <hr />. |
| 7. Alignement du texte | Aligne le texte à gauche, au centre ou à droite. Utile pour la mise en page d’éléments spécifiques comme des citations ou des images accompagnées de légendes. |
| 8. Insérer / Supprimer un lien | Ajoute un lien hypertexte sur un mot ou une phrase. Vous pouvez également supprimer un lien existant avec cette option. Exemple : Vers notre blog. |
| 9. Lire la suite | Insère une balise qui tronque l’article sur la page d’accueil ou de catégorie. Le lecteur devra cliquer sur « Lire la suite » pour accéder à l’intégralité du contenu. |
| 10. Basculer la barre d’outils | Affiche ou masque la seconde ligne d’icônes. Cette ligne contient des options plus avancées (couleurs, justification, caractères spéciaux…) |
| 11. Choix des titres et paragraphes | Permet de structurer votre texte en titres hiérarchisés (H2, H3, etc.) pour améliorer la lisibilité et le référencement naturel. |
| 12. Souligner | Ajoute un soulignement à un mot ou une phrase. À utiliser avec modération pour ne pas alourdir la mise en forme. |
| 13. Justifier le texte | Distribue votre texte de manière homogène sur toute la largeur, comme dans un journal. Attention, cet effet peut ne pas s’afficher parfaitement sur tous les écrans. |
| 14. Couleur du texte | Permet de changer la couleur d’un mot ou d’un paragraphe pour le mettre en valeur. Attention à la lisibilité selon le fond de votre thème. |
| 15. Coller en texte brut | Évite de conserver le style d’un texte copié depuis Word, Google Docs ou une page web. Cela permet de garder une mise en page propre. |
| 16. Effacer la mise en forme | Supprime les styles appliqués (gras, italique, couleurs…) sur le texte sélectionné. Idéal pour repartir de zéro. |
| 17. Caractères spéciaux | Affiche une bibliothèque de symboles utiles : € © ™ → ♥, etc. Très pratique pour enrichir vos contenus sans taper de code. |
| 18. Augmenter / Diminuer la tabulation | Indente ou désindente un paragraphe, pratique pour structurer une liste ou un bloc de contenu hiérarchisé. |
| 19. Annuler / Rétablir | Annule la dernière action effectuée ou refait une action annulée. Très utile pour tester différentes mises en page sans crainte. |
| 20. Raccourcis clavier | Affiche une fenêtre avec tous les raccourcis clavier disponibles, pour les utilisateurs avancés souhaitant gagner du temps. |
| 21. Mode d’écriture sans distraction | Masque les menus WordPress pour ne laisser visible que la zone de rédaction. Un excellent outil pour se concentrer pleinement sur la création de contenu. |
En apprenant à bien utiliser la barre d’outils de WordPress, vous gagnerez non seulement en efficacité, mais aussi en qualité de présentation de vos articles. C’est un passage obligé pour produire un contenu clair, bien structuré, et agréable à lire — autant pour vos lecteurs que pour les moteurs de recherche.
Comment personnaliser l’éditeur de texte de WP pour aller plus loin
Si la barre d’outils de base de WordPress est déjà très utile pour structurer vos articles, il est tout à fait possible de la personnaliser et l’enrichir selon vos besoins. Cela vous permet de gagner du temps, de simplifier votre interface ou au contraire d’y ajouter des fonctionnalités plus avancées.
L’une des extensions les plus populaires pour cela est Advanced Editor Tools, anciennement connue sous le nom de TinyMCE Advanced. Ce plugin gratuit vous permet de modifier la barre d’outils à votre convenance : vous pouvez réorganiser les boutons, en ajouter d’autres (comme les tableaux, les ancres, les styles personnalisés…), ou masquer ceux que vous n’utilisez jamais. Il vous suffit de faire glisser les icônes dans l’interface d’administration intuitive proposée par le plugin.
Cette extension fonctionne aussi bien avec l’éditeur Classique (via le plugin Classic Editor) qu’avec Gutenberg, où elle peut enrichir les blocs classiques de texte. Vous pouvez également y activer ou désactiver certaines options comme les sauts de ligne automatiques, la gestion des polices, ou encore les formats personnalisés prédéfinis pour vos paragraphes (titres stylisés, citations encadrées, etc.).
Du côté de Gutenberg, si vous préférez rester dans l’écosystème natif, vous pouvez également ajouter des fonctionnalités à l’éditeur via des extensions comme Kadence Blocks, Stackable ou encore Ultimate Addons for Gutenberg. Ces plugins n’agissent pas directement sur la barre d’outils, mais ils ajoutent une variété de blocs personnalisés (boutons stylés, grilles, compteurs, accordéons…) qui enrichissent considérablement votre mise en page.
Enfin, que vous utilisiez Gutenberg ou l’éditeur classique, il peut être judicieux de définir une configuration adaptée à votre workflow. Par exemple, masquer certaines options inutiles permet de simplifier l’interface pour les contributeurs occasionnels, tandis qu’un rédacteur ou un éditeur expérimenté préférera avoir accès à tous les outils de mise en page avancée.
Personnaliser l’éditeur WordPress sans plugin : Pour les utilisateurs avancés
Si vous préférez garder un site WordPress léger, sans dépendre de plugins supplémentaires, sachez qu’il est tout à fait possible de personnaliser manuellement la barre d’outils de l’éditeur classique (TinyMCE) grâce à quelques fonctions PHP. Cela demande un minimum de connaissances techniques, mais offre un contrôle total sur les options affichées dans l’éditeur.
Pour cela, vous pouvez intervenir dans le fichier functions.php de votre thème (ou de votre thème enfant). Voici un exemple de code pour ajouter des boutons personnalisés à la barre d’outils :
// Ajouter des boutons personnalisés à la barre d'outils
function custom_mce_buttons($buttons) {
// Exemple : ajouter le bouton "justify" (justifier) et "underline" (souligner)
array_push($buttons, 'justify', 'underline');
return $buttons;
}
add_filter('mce_buttons', 'custom_mce_buttons');
Vous pouvez également supprimer certains boutons que vous n’utilisez jamais, ou réorganiser leur ordre. D’autres filtres comme mce_buttons_2 vous permettent de modifier la seconde ligne d’icônes, si elle est visible.
Et ce n’est pas tout : vous pouvez aussi ajouter vos propres styles prédéfinis dans un menu déroulant pour les appliquer à des blocs de texte. Cela se fait via un filtre JavaScript combiné à un peu de CSS. Voici un exemple pour ajouter un style de paragraphe encadré :
// Ajouter un style personnalisé au menu déroulant "Formats"
function custom_mce_styles($init_array) {
$style_formats = array(
array(
'title' => 'Encadré gris',
'block' => 'div',
'classes' => 'encadre-gris',
'wrapper' => true,
),
);
$init_array['style_formats'] = json_encode($style_formats);
return $init_array;
}
add_filter('tiny_mce_before_init', 'custom_mce_styles');
Il vous faudra ensuite ajouter une règle CSS dans votre thème pour styliser l’encadré :
.encadre-gris {
border: 1px solid #ccc;
background: #f9f9f9;
padding: 15px;
margin: 10px 0;
}
Ces manipulations ne concernent que l’éditeur classique (TinyMCE), utilisé notamment avec l’extension Classic Editor. Pour personnaliser Gutenberg sans plugin, la démarche est plus complexe et repose sur l’utilisation de blocs personnalisés en JavaScript via l’API registerBlockType(), ce qui sort du cadre d’une simple personnalisation rapide.
Conseil : si vous effectuez ces modifications à la main, veillez à le faire dans un thème enfant ou à utiliser un plugin de snippets pour éviter la perte de vos personnalisations lors des mises à jour du thème.
0 commentaires