Une PME du secteur textile m’a contacté après avoir signé un partenariat de distribution avec un revendeur basé aux Émirats arabes unis. Le site vitrine existant, en français uniquement, devait recevoir une version arabe complète. Le client s’attendait à ce qu’un simple plugin de traduction règle le problème, sans se douter que l’arabe se lit de droite à gauche et que cela change concrètement la disposition visuelle du thème, pas seulement les chaînes de texte.
Ce tutoriel couvre exclusivement la partie thème : comment WordPress gère le RTL au niveau du rendu, comment produire un fichier rtl.css correct et quels pièges de maintenance surviennent une fois les deux feuilles de style en place. La traduction du contenu lui-même relève d’un plugin dédié, hors sujet ici.
Comment WordPress détecte qu’il faut du RTL
Le sens de lecture dépend de la langue installée sur le site, définie dans wp-config.php via la constante WPLANG ou choisie dans les réglages généraux. WordPress connaît la direction associée à chaque langue disponible dans son catalogue de traductions ; l’arabe, l’hébreu, le persan et quelques autres sont marqués RTL nativement, sans configuration supplémentaire côté thème.
La fonction is_rtl() renvoie un booléen basé sur cette détection. Elle est utilisable partout, dans les templates comme dans functions.php, pour adapter un comportement sans dépendre uniquement de CSS.
if ( is_rtl() ) {
$icon_position = 'right';
} else {
$icon_position = 'left';
}
Le chargement automatique de rtl.css
C’est le mécanisme le moins connu : si un fichier nommé rtl.css existe à la racine du thème (ou dans le même dossier qu’une feuille de style enregistrée), WordPress le charge automatiquement à la suite de la feuille principale, sans qu’aucun code supplémentaire ne soit nécessaire, à condition d’utiliser wp_enqueue_style() normalement. Le cœur ajoute lui-même un lien vers {handle}-rtl.css quand is_rtl() est vrai et que le fichier existe.
function pme_enqueue_styles() {
wp_enqueue_style(
'pme-style',
get_stylesheet_uri(),
array(),
wp_get_theme()->get( 'Version' )
);
}
add_action( 'wp_enqueue_scripts', 'pme_enqueue_styles' );
Avec ce code, si rtl.css existe à la racine du thème, WordPress l’enregistre automatiquement en tant que pme-style-rtl et le charge après style.css pour les visiteurs en langue RTL. Aucune condition supplémentaire n’est à écrire dans functions.php.
Générer rtl.css : l’automatisation plutôt que la copie manuelle
Écrire rtl.css à la main en dupliquant style.css et en inversant chaque propriété de marge ou de position est source d’erreurs et de désynchronisation rapide. J’utilise un outil de conversion automatique, RTLCSS, disponible en paquet Node, qui inverse les propriétés directionnelles (margin-left devient margin-right, float: left devient float: right, etc.) sans toucher aux propriétés neutres.
npm install -g rtlcss
rtlcss style.css rtl.css
Ce script s’intègre facilement à une tâche de build existante, déclenchée à chaque modification de style.css. Sur le projet textile, je l’ai branché sur un script npm dédié plutôt que sur un outil de build lourd, le thème restant par ailleurs classique et sans bundler.
Les pièges de maintenance à deux feuilles de style
Le vrai risque n’est pas de générer rtl.css une première fois, mais d’oublier de le régénérer après chaque modification de style.css. J’ai vu des thèmes où rtl.css datait de plusieurs mois : le site arabe affichait alors un mélange de règles à jour et de règles inversées obsolètes, avec des marges qui ne correspondaient plus à rien.
- Ne jamais modifier
rtl.cssà la main : toute correction doit passer par une régénération complète depuisstyle.css. - Ajouter la génération de
rtl.cssà la checklist de déploiement, au même titre que la minification. - Tester visuellement les deux sens de lecture après chaque changement de mise en page, pas seulement le sens par défaut du développeur.
Certaines propriétés ne se laissent pas inverser correctement par un outil automatique : les icônes directionnelles (flèches, chevrons) ou les images contenant du texte doivent être gérées manuellement, généralement via une classe conditionnelle ajoutée en PHP grâce à is_rtl() plutôt que par CSS pur.
<span class="nav-arrow <?php echo is_rtl() ? 'is-rtl' : 'is-ltr'; ?>">→</span>
Cas des sous-thèmes et thèmes enfants
Un thème enfant peut fournir son propre rtl.css, chargé de la même façon automatique tant que la feuille de style enfant est enregistrée avec wp_enqueue_style(). Sur le projet textile, j’ai gardé le rtl.css du thème parent intact et ajouté un rtl.css spécifique au thème enfant pour les quelques composants personnalisés, évitant ainsi de toucher au thème parent partagé avec d’autres sites du même client.
En résumé
Le support RTL d’un thème WordPress repose sur un mécanisme de chargement automatique simple, à condition d’enregistrer ses styles proprement avec wp_enqueue_style() et de fournir un fichier rtl.css à jour. La vraie difficulté n’est pas technique mais organisationnelle : garder les deux feuilles de style synchronisées dans la durée, en s’appuyant sur un outil de génération automatique plutôt que sur une maintenance manuelle vouée à diverger.
