Même si la justification de texte sur WordPress n'est pas très 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 cette option. 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. Sur internet, en revanche, on trouve plus fréquemment 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.
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. La plupart des navigateurs la prennent en charge (source : CanIUse).
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 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
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 WordPress 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 directement dans le code HTML
Insérer du code CSS directement dans le code HTML 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, 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
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 .