Formation « Développer un thème WordPress sur-mesure (Classique) »

Internationaliser et traduire son thème WordPress

Lecture : 8 minutes • 4

Afin que votre thème puisse être traduit dans d’autres langues, il va falloir l’internationaliser. Et c’est facile avec WordPress car on a à disposition plusieurs fonctions pour nous aider. On va également voir que l’internationalisation et le multilangue sont deux choses différentes.

Que ce soit en vue de créer un site multilangue, diffuser votre thème sur le répertoire officiel, ou même le vendre sur une place de marché : votre thème doit être prêt à être traduit dans d’autres langues.

Pourquoi internationaliser son thème ?

Dans un thème la plupart des textes sont affichés grâce à des fonctions comme the_title() et the_content(). Et ces textes, saisis par le rédacteur, vont pouvoir être traduits grâce des extensions multilangues comme WPML, Polylang ou encore Weglot.

Mais qu’advient-il des chaines écrites en dur dans le thème. Comme par exemple :

PHP
single.php

Le texte « Publié le » passera au travers des traductions, comme il est statique. Mais heureusement, il existe un moyen de rendre ces chaines traduisibles grâce à des fonctions natives de WordPress.

C’est ce que l’on appelle l’internationalisation, ou i18n de son petit nom (car il y a 18 lettres entre le premier i et le dernier n).

Le saviez-vous ?

WordPress ne réinvente pas la roue, et utilise une technologie très connue des développeurs qui s’appelle GetText, pour traduire des chaines.

Internationaliser ne veut pas dire multilangue !

Le multilangue et l'internationalisation ne sont pas la même chose

Maintenant, il ne faut pas confondre internationalisation et multilangue : ca reste 2 choses différentes :

  • Internationaliser un thème (ou une extension) permet de faire en sorte que n’importe qui puisse l’utiliser avec la langue de son site ;
  • Le multilangue permet de proposer plusieurs langues aux visiteurs de son site WordPress.

Concrètement, lorsque vous installez un thème ou une extension sur votre site en français, les textes s’afficheront bien en français s’il il a été traduit (que ce soit sur le site ou dans l’administration). C’est dû au fait que le thème a été internationalisé.

Et c’est grâce à une équipe de traduction française très dévouée que vous pouvez bénéficier de toutes ces traductions. Retrouvez-les sur le Slack WordPress FR, channel #traductions.

Mais ce n’est pas pour autant que vous pourrez proposer un site multilangue juste avec ça. Il faudra pour cela faire appel à une extension spécifique, car WordPress n’est pas capable de le faire nativement.

Internationaliser son thème

Pour internationaliser un thème ou une extension, c’est très facile ! La première chose à faire est de déclarer un textdomain : c’est un nom unique qui permettra d’identifier vos traductions, et potentiellement éviter des conflits avec d’autres traductions.

Déclarer le TextDomain

On va configurer le textdomain dans notre fichier functions.php qui se trouve à la racine du thème. Pour rappel, ce fichier permet de configurer les bases du thème, comme par exemple définir les tailles d’images ou encore charger les scripts et les styles.

PHP
functions.php

Le premier paramètre correspond à l’identifiant unique que vous souhaitez mettre pour votre thème. Le second est le chemin où trouver les fichiers de traduction. Par convention, on les place dans le dossier /languages/.

Pour l’instant on n’a pas encore de traduction, mais patience, on va voir ça après.

Conseil

Dans WordPress il faut penser écosystème : le coeur, les extensions, les thèmes auront chacun leurs traductions. Le textdomain permet donc d’isoler chacune d’entre-elles afin d’éviter les conflits entre 2 chaines identiques.

Les fonctions de traduction

Maintenant, on va utiliser des fonctions qui vont permettre d’utiliser la chaine de texte dans la bonne langue. Et il en existe plusieurs dans WordPress.

Afficher une chaine traduite : _e()

La première fonction permet d’afficher à l’écran une chaine traduite. C’est la fonction _e(). On va voir que toutes les fonctions de traduction commencent par un underscore.

Le e de la fonction fait référence à la fonction echo, qui permet d’afficher une information à l’écran en PHP.

PHP
single.php

Le premier paramètre c’est la chaine originale, et le second notre fameux textdomain.

Le saviez-vous ?

C’est une bonne pratique de toujours mettre l’anglais en langue par défaut dans vos thèmes et extensions, ce qui facilitera la tâche le jour ou d’autres équipes viendront à traduire les chaines dans leurs langues.

Transmettre une chaine traduite: __()

Dans le cas où vous voulez récupérer une chaine, sans l’afficher, il faudra alors utiliser la fonction __(). Cela vous sera utile pour passer une chaine en paramètre d’une fonction par exemple :

PHP
functions.php

Gérer les traductions singulier / pluriel : _n()

Il existe des cas où vous aurez besoin de gérer les singuliers et les pluriels. Par exemple : « 1 article, 4 articles » ou encore « 1 commentaire, 8 commentaires ».

On utilisera dans ce cas la fonction _n() couplée à sprintf():

PHP
single.php

On indique d’abord la forme au singulier en premier argument, puis la forme pluriel en second. Le troisième argument permet quant à lui de recevoir le nombre d’éléments, ici les commentaires.

Le signe %s indique à quel endroit il faudra afficher ce nombre dans la chaine. Pour autant, ce n’est pas _n() qui va faire le remplacement.

Il faudra alors utiliser sprintf() qui va permettre de remplacer %s par le nombre de commentaires !

Chaines identiques, mais contexte différent : _x()

Parfois, un même mot en anglais, pourra avoir plusieurs significations. C’est bien souvent le cas de verbes qui sont aussi des noms.

En anglais Update peut, selon le cas, se traduire par Mettre à jour (en tant que verbe d’action) ou Mise à jour (en tant que nom).

Eh bien pour faire la distinction, on va utiliser _x() qui va nous permettre :

  1. De proposer 2 chaines différentes pour permettre une traduction dans chacun des cas ;
  2. D’ajouter un contexte pour guider le traducteur.

Voici à quoi cela peut ressembler dans le code :

PHP

Lorsque le traducteur s’occupera de la traduction des chaines, Il en verra bien 2 distinctes, chacune accompagnée de leur contexte. En voyant verb, il comprendra qu’il doit traduire une action et non pas un nom.

Et jamais si vous avez besoin à la fois d’un contexte, et de gérer le singulier/pluriel, il existe la fonction _nx().

Traduire les thèmes et extensions

Bien, maintenant que notre thème est prêt pour l’internationalisation (c’est vrai qu’il est long ce mot), il nous reste à savoir comment le traduire dans d’autres langues !

Et pour cela, on a plusieurs outils à notre disposition :

Les outils de traduction

Les outils de traduction

Le logiciel Poedit

La première solution, c’est d’utiliser le logiciel Poedit, qui permet de scanner les chaines d’un projet et de les afficher. Reste ensuite à créer une traduction dans la langue de notre choix, et traduire les chaines les unes après les autres.

Capture d'écran du logiciel Poedit et son interface de traduction
L’interface de traduction de Poedit

La version Pro prend en charge les thèmes et extensions WordPress et vous évite de configurer les chaines à scanner.

Il est simple à utiliser, il fait bien le boulot, mais il a quelques petits soucis d’ergonomie.

Télécharger Poedit

L’extension Loco Translate

L’alternative est d’utiliser l’extension Loco translate qui vous permettra de faire vos traductions directement depuis l’interface d’administration de WordPress

Capture d'écran de l'extension Loco Translate dans WordPress
Traduisez vos chaines directement depuis WordPress

Loco détecte les thèmes, extensions et vous offre une interface sympathique pour faire vos traductions sans quitter votre site ! Du coup, vous pouvez même faire des traductions directement en ligne.

Loco Translate

Loco Translate

Traduisez directement des thèmes et extensions WordPress depuis votre navigateur.

Par Tim Whitlock

Vous pouvez d’ailleurs l’utiliser pour modifier une traduction ou la compléter, le jour où vous téléchargez un thème ou une extension dont la traduction est erronée ou incomplète.

La plateforme translate.wordpress.org

Enfin, dans le cas où votre thème ou extension finirait sur le répertoire officiel de WordPress, vous pouvez utilisez translate.wordpress.org pour traduire votre projet.

La plateforme translate.wordpress.org permet de traduire les chaines des thèmes et extensions du répertoire officiel
L’interface de traduction de WordPress.org, ici l’extension SEOPress

Il faut ensuite demander à un PTE (Project Translation Editor) ou un GTE (General Translation Editor) de la communauté francophone de valider vos chaines sur le Slack WordPress FR.

L’avantage, c’est que les traductions sont ensuite automatiquement envoyées à vos utilisateurs. Vous n’avez pas besoin d’intégrer les traductions à vos mises à jour : elles sont gérées de manière indépendante.

Si vous voulez participer à la traduction d’une extension, pensez d’abord à lire le guide de traduction (pour respecter les espaces inseccables et les apostrophes françaises, en autres).

Par contre, les thèmes et extensions premium ne peuvent pas bénéficier de cette technique car ils ne peuvent pas rejoindre le répertoire officiel.

Comment fonctionne une traduction sous le capot ?

Avant de continuer il faut savoir comment fonctionnent les traductions. Peut importe l’outil utilisé, il va créer des fichiers en différents formats :

  • Le fichier .pot est le catalogue contenant la liste de toutes les chaines traduisibles ;
  • Le fichier .po contient les traductions d’une langue en particulier ;
  • Et enfin, le fichier .mo est une version compilée du fichier précédent.

On trouverait donc le fichier fr_FR.po (ainsi que le .mo) dans un projet dont la traduction est disponible en français.

capture d'écran du dossier lang d'une extension, contenant les fichiers de traduction
Les fichiers de traduction .po, .mo et .pot

Le .po est utilisé par les outils de traduction, afin que vous puissiez traduire les chaines, alors que le .mo est utilisé par le script PHP (WordPress dans notre cas) pour le rendu de la page.

Du fait qu’il soit compilé, il est plus léger et plus performant.

Sur le principe, chaque projet possède un catalogue .pot contenant toutes les chaines : c’est l’outil qui est allé les scanner afin de les inventorier.

Dans le cas de WordPress, l’outil qui va scanner le code va justement chercher les fonctions de type _e(), __(), _n() et _x().

Les fichiers .po vont ensuite se synchroniser à partir de ce catalogue et vous permettre de traduire toutes les chaines trouvées.

Conseil

Le fichier .pot est donc le référentiel de base qui liste toutes les chaines trouvées dans votre thème (ou extension).

Mise en pratique : traduire votre thème avec Loco Translate

J’ai longtemps utilité Poedit, mais aujourd’hui je préfère Loco, car plus simple. Du coup c’est avec lui que je vais vous montrer comment initialiser une nouvelle traduction.

Une fois l’extension installée et activée, allez dans le menu Loco Translate > Thèmes. Votre thème devrait apparaitre dans la liste, sélectionnez-le.

Capture d'écran de Loco Translate sur un nouveau projet
Aucune traduction n’est disponible pour le moment

Pour l’instant, aucune traduction n’est disponible. Cliquez sur Nouvelle langue. Loco nous indique qu’aucun modèle (ou catalogue pot) n’est présent. Cliquez alors sur Créer un modèle.

Une fois le modèle généré, vous devriez le voir apparaitre dans wp-content/themes/<theme>/languages/<theme>.pot

Créez une nouvelle langue, en français, et laissez le fichier dans le dossier de votre thème, de cette manière il pourra être versionné sur git.

Mais si vous voulez corriger une traduction en ligne, il faudra choisir « système » afin que votre traduction ne soit pas écrasée à la prochaine mise à jour.

L'interface d'ajout d'un nouvelle langue dans Loco Translate
Configuration initiale d’une nouvelle langue

Cliquez sur Commencer la traduction. Vous devriez voir apparaitre vos différentes chaines. Traduisez-les et n’oubliez pas d’enregistrer.

Vous verrez dans le dossier de votre thème que les fichiers fr_FR.po et fr_FR.mo ont été ajoutés ! Votre traduction est prête !

Si votre site WordPress est en Français, alors votre traduction sera utilisée automatiquement !

Mettre à jour le catalogue .pot

En continuant de travailler sur votre site, vous allez sûrement ajouter à terme de nouvelles chaines à traduire. Il faudra donc à un moment mettre à jour le catalogue.

Pour cela allez dans Loco Translate > thèmes > Votre Thème. Au lieu de cliquer sur la langue, choisissez Modifier le modèle. Dans la page qui s’affiche, cliquez ensuite sur Synchroniser.

Le bouton de synchronisation de Loco Translate
Synchronisez votre .pot pour trouver de nouvelles chaines

Loco va scanner à nouveau les chaines de votre thème et les enregistrer dans le catalogue. Il enlèvera également les éventuelles chaines obsolètes.

Retournez sur votre langue, et cliquez également sur Synchroniser. Cette fois Loco va récupérer les chaines à partir de votre modèle à jour, vers votre fichier français.

Et voilà, le tour est joué !

Faut-il toujours internationaliser son thème ?

Si vous proposez votre thème (ou extension) sur le répertoire officiel de WordPress, alors la question ne se pose pas : faites en sorte que les communautés locales puissent le traduire.

Mais pour votre client, disons une petite entreprise française, a-t-il vraiment besoin que son thème soit prêt pour l’international ? Après tout il pourrait très bien décider d’étendre son activité un jour !

Comme on l’a vu dans ce cours, ll est très facile d’internationaliser un thème, et c’est rapide à mettre en place. Donc même si ça ne servira pas à priori, vous serez prêt le jour où vous en aurez besoin !


Vous connaissez maintenant la méthode pour internationaliser votre thème, qui pourra donc être traduit dans d’autres langues s’il est distribué sur le répertoire, ou simplement être prêt pour un site multilangue.

D’ailleurs, si vous voulez en savoir plus sur le multilangue, j’en parlais dans un prochain cours.

4

Questions, réponses et commentaires

  1. Julien

    Le 7 juillet 2022

    Bonjour,

    Concernant la fonction _n() de WordPress, votre exemple ne stipule pas de TextDomain.

    J’ai donc par moi même ajouté le TextDomain, mais le caractère magique « % » ne semble pas être « parsé ». Il m’a fallu utiliser la fonction « sprintf » pour que ça puisse se faire.

    Avez-vous une idée du pourquoi _n() qui comprend un paramètre justement pour ne pas à avoir utiliser une fonction tel que « sprintf » ?

    Je précise, mais vous le savez probablement, « sprintf » étant une fonction native de PHP.

    En vous remerciant.

    1. Julien

      Le 7 juillet 2022

      Je me permet de réécrire un avis, même en procédant de cette façon, la condition natif de WordPress ne semble pas prendre en compte le O comme singulier.

      J’ai donc du procéder ainsi :

      0 commentaire

      Ou alors c’est que zappé un truque… la doc WordPress précise également que le caractère magique est « %s » et non « % » mais même en corrigeant ainsi, je suis obligé de faire comme ci-dessus, et je ne comprends pas trop pourquoi.

      1. Maxime BJ

        Le 7 juillet 2022

        Salut Julien et merci pour ta contribution. Tu as raison, j’ai oublié des choses pour cette fonction que j’utilise au final très peu souvent. Tout d’abord, il faut bien écrire %s pour le caractère à remplacer, et en plus il faut adjoindre la fonction sprintf, qui s’occupe du remplacement de caractères. _n va juste définir s’il faut utiliser la forme au singulier ou celle au pluriel. C’est donc bien avec les 2 fonctions que tu vas pouvoir t’en sortir. J’ai mis à jour le cours du coup, et je te remercie à nouveau.

        1. Julien

          Le 8 juillet 2022

          Au plaisir, cependant j’ai tjrs un bug concernant le fait que le singulier soit émis que pour 1 et non 0 (sauf erreur de ma part), du coup j’ai fais avec des conditions (le PHP ne me fait pas défaut) et la fonction natif de WordPress get_comments_number().

          C’est moi qui vous remercie pour votre tutoriel, je le dévore actuellement 😉

Laisser un commentaire