Même si justifier un texte sur WordPress n'est pas une pratique courante, vous pourriez en avoir besoin pour certains de vos contenus.
Gutenberg, l’éditeur de texte de WordPress, n’inclut pas d’option de justification dans sa barre d'outils. Seules les options d'alignement à gauche, au centre et à droite y sont disponibles.
L’éditeur classique, ancien éditeur par défaut de WordPress, ne propose pas non plus de bouton justifier. Il reste largement utilisé, avec plus de 10 millions d’installations de son plugin (source : WordPress.org).
Dans cet article, nous examinerons ensemble les différentes façons de justifier un texte dans ces deux éditeurs de WordPress.
Justification de texte sur le web : état des lieux
Les textes justifiés sont très fréquents dans les supports imprimés comme les livres ou les magazines. En revanche, sur un site internet, on privilégie généralement un alignement à gauche.
Cette préférence s’explique par deux principales raisons :
- Espaces irréguliers : sur un navigateur web, la justification peut créer des écarts inégaux entre les mots pour combler la largeur de la ligne.
- Repère visuel : le bord droit irrégulier sert de repère visuel, facilitant le passage des yeux d’une ligne à l’autre.
Remarque : pour atténuer le problème des espaces inégaux, vous pouvez utiliser la propriété CSS « hyphens ». Elle divise les mots à l’aide d’un trait d’union pour assurer des espaces plus réguliers.
Justifier un texte dans WordPress avec un raccourci clavier
Malheureusement, l'éditeur Gutenberg ne propose pas de raccourci pour la justification. Néanmoins, si vous utilisez l'éditeur classique, le raccourci clavier offre plusieurs avantages par rapport aux autres méthodes :
- Plus de sécurité : vous évitez de modifier directement le code. Ce qui peut être délicat si vous n'êtes pas familier avec celui-ci.
- Moins de plugins : les plugins peuvent ralentir votre site, présenter des failles de sécurité et entraîner des conflits.
Voici le raccourci clavier pour l'éditeur classique de WordPress :
- Windows : Alt + Maj + J
- Mac : Cmd + Maj + J
Gratuit : créez votre site internetgénérez du trafic qualifié
Vous bénéficierez de conseils personnalisés pour faire votre site et de 15 mots clés pour générer du trafic.
Justifier un texte WordPress avec une extension
Les plugins ou extensions WordPress permettent d’ajouter des fonctionnalités à votre site.
Malheureusement, avec l'éditeur Gutenberg, il n'existe pas de plugin spécifiquement dédié à la gestion de l'alignement du texte. Certaines extensions offrent une large gamme de fonctionnalités, mais il serait excessif de les utiliser uniquement pour la justification de texte.
Pour l'éditeur de texte classique, Advanced Editor Tools (anciennement TinyMCE Advanced) propose des options de mise en forme supplémentaires, dont la justification de texte.
Remarque : cette extension est également compatible avec Gutenberg, mais son utilisation est limitée aux blocs dits « classiques ».
Justifier un texte en HTML / CSS
Le CSS (Cascading Style Sheets) est un langage utilisé pour styliser les pages web. Il permet de contrôler les couleurs, les polices, la mise en page, etc. Les styles peuvent être définis soit dans un fichier externe, soit directement dans le code source de la page, au sein du code HTML.
Intégrer du CSS dans le code HTML
Insérer du code CSS directement dans le code HTML d’un site WordPress n’est généralement pas conseillé. Il est souvent préférable de regrouper les styles dans un fichier externe pour faciliter l’organisation et les modifications ultérieures.
Cela dit, cette méthode a un avantage : elle donne une priorité élevée à l’alignement défini. Ainsi, si un autre style d’alignement est déjà appliqué à votre élément HTML, le style que vous indiquez ici sera prioritaire (sauf si l'autre style est marqué comme !important).
Vous êtes prêt ? C’est parti ! On commence par l’éditeur Gutenberg.
Tout d’abord, localisez les trois petits points dans l’éditeur. Cliquez pour ouvrir le menu, puis choisissez l’option modifier en HTML.
Ensuite, pour justifier votre texte, ajoutez du CSS directement dans la balise HTML comme suit :
<p style="text-align: justify;">Ici, mettez le paragraphe que vous voulez justifier</p>
Pour l’éditeur classique, passez simplement à l’onglet texte et insérez le code CSS comme illustré dans l’image :
Ajouter du CSS dans une feuille de style
Avec cette méthode, vous insérez le code CSS une seule fois dans le fichier de style de votre thème WordPress, puis ajoutez le nom de la classe à chaque élément HTML à justifier.
Pour ajouter du code CSS dans votre feuille de style :
Dans le menu outils, rendez-vous dans éditeur de fichiers des thèmes. Sélectionnez style.css dans la section fichiers du thème à droite.
Ensuite, insérez le code CSS suivant dans votre fichier style.css :
.texte-justifie {
text-align: justify;
}
Vous pouvez personnaliser le nom de la classe (ici, « texte-justifie ») comme vous le souhaitez. N’oubliez pas de mettre un point au début du nom de la classe.
La manière d’ajouter le nom de la classe à votre élément HTML varie en fonction de l’éditeur de texte que vous utilisez.
Avec Gutenberg
Ouvrez l’onglet bloc situé à droite, cliquez sur avancé, puis entrez le nom de la classe (sans le point) dans le champ classe(s) CSS additionnelle(s).
Avec l’éditeur de texte classique
Passez dans l’onglet texte, puis ajoutez la classe directement dans votre balise HTML :
Pour conclure sur la justification de texte sur WordPress
Quelle que soit la méthode choisie, le résultat est le même : votre texte est justifié ! À vous de sélectionner la technique qui vous convient le mieux.
Pour ma part, je justifie rarement le texte sur WordPress. Et vous, vous êtes plutôt texte justifié ou non ?
Si vous avez besoin d’un coup de pouce pour débuter avec WordPress ou si vous avez des questions, n'hésitez pas à nous contacter pour une .