Comment justifier votre texte sur WordPress

Si vous utilisez WordPress, vous n’aurez probablement pas manqué l’arrivée du nouvel éditeur appelé Gutenberg dans la dernière version 5.0 du CMS.

D’une manière générale, je n’ai jamais eu de difficultés par le passé sur les mises à jour de WordPress. Généralement, les évolutions sont assez minimes. De ce fait, il est facile de s’y préparer et de tester petit à petit avant de passer son site dans la toute dernière version.

Mais je dois avouer que depuis que j’ai créé ce site (en 2006), c’est la première fois que je vois une fonctionnalité déconcertante. Même après quelques mois d’utilisation, je reste peu convaincu par ce nouveau mode d’édition et je trouve l’expérience utilisateur associée peu plaisante.

Il n’est plus possible de personnaliser le texte dans vos articles – même en utilisant une extension telle que TinyMCE Advanced. Et si vous disposez de plusieurs/nombreuses extensions, on se retrouve rapidement à défiler de manière indéfinie dans le panneau latéral droit (Document, Bloc). Certes, on peut le personnaliser…

D’ailleurs, si vous avez déjà consulté de précédents articles, vous aurez peut-être remarqué qu’il m’était déjà arrivé de rédiger des articles en justifiant mon texte… même s’il semble que ce ne soit pas recommandé d’un point de vue HTML pour la lecture.

Je vous propose de voir ensemble comment justifier votre texte pour tout ou partie de votre article. Cette méthode fonctionnera probablement peu importe le thème WordPress que vous utilisez.

Etape 1 – Définir une nouvelle classe CSS dans votre thème

L’objectif est de définir une classe CSS personnalisée qui permettra de justifier votre texte. Mais si vous utilisez un thème enfant et que vous souhaitez conserver la possibilité de mettre à jour votre thème facilement, nous allons définir cette classe directement dans la configuration de votre thème (et non pas en modifiant simplement votre fichier style.css – même si ça fonctionnerait également).

En effet, la plupart des thèmes modernes vous offrent une possibilité de définir du code personnalisé. Si votre thème ne le propose pas, vous pouvez également le faire depuis WordPress en allant dans les options suivantes : Apparences, Personnaliser, puis CSS additionnel.

Vous pouvez définir le code suivant :

.text_justify {
    text-align: justify;
}

Etape 2 – Utilisation de votre classe

Ensuite, il ne reste plus qu’à appeler votre classe CSS au moment où vous rédigez votre article. Pour ce faire, nous allons utilisez le bloc Avancé puis dans Classe CSS additionnelle, appelez simplement votre classe text_justify. Indiquez simplement le nom de votre classe sans le point devant.

Comme vous le voyez, en faisant cela, j’ai pu très simplement justifier le paragraphe ci-dessus. C’est certes un peu moins pratique que d’avoir simplement un bouton Justifié dans l’éditeur de texte mais ça fonctionne. 😉

L’avantage de cette méthode c’est que vous n’aurez pas besoin d’ajouter une extension pour ce besoin et elle ne vous empêchera pas de mettre à jour votre thème WordPress. 🙂

Enfin, n’oubliez pas que si vous avez besoin de formater de manière spécifique du texte. Vous pouvez choisir dans les blocs disponibles celui qui s’appelle Classique.

Vous retrouverez alors un bandeau d’édition un peu plus complet. Sans pour autant disposer d’un bouton Justifier. 😉