Dans cette leçon, nous apprenons comment fonctionne la traduction (ou autrement connue sous le nom d’i18n) dans WordPress et comment faire les ajustements nécessaires dans nos modèles. Nous apprendrons également comment configurer correctement PoEdit pour créer un fichier de traduction pour notre thème, prêt à être traduit dans différentes langues.
Pourquoi s’embêter à ajouter un support de traduction ?
Tous les thèmes, au moins ceux qui sont rendus publics pour être utilisés par d’autres personnes que le développeur, doivent être disponibles pour la traduction. C’est ce qu’on appelle l’internationalisation (i18n en abrégé), et permet aux gens de traduire les textes que vous ajoutez dans votre thème dans une autre langue.
La façon dont cela fonctionne est que vous, en tant qu’auteur de thème ou développeur de plugin, enveloppez tous vos textes (tels que "En savoir plus", "Pas de messages") dans certaines fonctions. Ces fonctions permettent à WordPress de les récupérer et de les injecter une traduction si elle existe. Dans votre thème (ou plugin), vous pouvez ajouter des fichiers d’un certain type de fichier pour chaque langue traduite, ou vous assurer que d’autres personnes peuvent créer leur propre traduction dans leur propre langue.
Ceci est très utile pour les personnes qui souhaitent utiliser WordPress et votre thème (ou plugin) dans une langue différente de la langue d’origine dans laquelle il a été écrit (qui est généralement l’anglais). Mais il peut également être utilisé pour changer certains textes en quelque chose de différent dans la même langue.
Si le sujet vous intéresse, WordPress Codex propose un long et bon guide de documentation sur i18n pour les développeurs.
Implémenter i18n dans notre thème
Nous avons déjà fait la première partie de l’ étape précédente de cette série de didacticiels sur le thème, où nous avons ajouté load_theme_textdomainla fonction de configuration de notre thème. Au cas où vous auriez oublié, voici ce que nous avons ajouté :
load_theme_textdomain('wptutorial', get_stylesheet_directory(). '/lang');Le premier argument est le handle, il s’agit d’une chaîne unique que vous utiliserez pour regrouper tous les textes appartenant à votre thème. Vous répéterez cette poignée chaque fois que vous rendrez un texte traduisible. Le deuxième argument indique à WordPress où se trouvent les fichiers de traduction. Nous les avons définis pour qu’ils résident dans un sous-dossier ‘ lang‘ de notre répertoire de thèmes.
Ne vous inquiétez pas si ce dossier n’existe pas ou ne contient aucun fichier – rien ne plantera. Si WordPress ne trouve pas le dossier ni les fichiers de traduction corrects, il reviendra par défaut aux textes que nous avons dans le thème.
La prochaine étape consiste à parcourir tout notre code et à trouver toute sortie de texte qui devrait être traduisible. C’est une bonne pratique de s’assurer que nous couvrons absolument tous les textes. Rien n’est plus ennuyeux que d’utiliser un thème ou un plugin où l’auteur a codé en dur des textes rendant impossible la traduction ou la modification de quelque manière que ce soit.
Comment rendre les textes traduisibles
Ce que nous faisons avec tous les textes, c’est de les placer dans l’une des fonctions gettext de WordPress, qui sont le plus souvent _e()ou __(). Le premier est un trait de soulignement avec "e" qui est utilisé lorsque vous souhaitez faire écho au texte en même temps. Le second est composé de deux traits de soulignement et est utilisé lorsque vous ne voulez pas l’écho mais le stocker ou l’utiliser dans une variable.
WordPress a plus de fonctions gettext qui servent à des fins plus spécifiques, par exemple, esc_html__()et plus encore. Cependant, nous n’entrerons pas dans les détails pour ceux de ce tutoriel._n()``_x()
Les fonctions gettext prennent deux paramètres ; d’abord le texte lui-même, et deuxièmement la poignée que vous avez définie dans load_theme_textdomain. Dans ce cas c’est ‘ wptutorial‘.
Par exemple, si vous avez quelque chose comme ça :
echo 'Read more';Vous devrez le remplacer par :
_e('Read more', 'wptutorial');Et de même pour le stockage dans une variable ;
$myvariable = 'Read more';Il doit être écrit comme ceci :
$myvariable = __('Read more', 'wptutorial');Maintenant, nous devons trouver tous les textes dans nos modèles ! Si vous avez suivi ce tutoriel jusqu’à un "T" ce n’est pas beaucoup. Nous avons des chaînes dans index.phpet d’autres dans single.php.
Ajout du support de traduction dans notre thème
Commençons par index.phplocaliser le message "Pas de messages, désolé" que nous avons ajouté si la boucle ne contenait aucun message. Nous enveloppons ce texte à l’intérieur _e()parce que nous voulons toujours lui faire écho. Voici donc ce que nous obtenons :
Parce que vous avez utilisé _e(), vous ne devriez voir aucun changement lorsque vous cliquez sur Actualiser sur la page d’accueil ou l’archive. Mais sous le capot, ce texte est désormais traduisible !
Nous avons ce même texte dans nos single.phpet page.php. Mettez-les à jour de la même manière que nous l’avons fait dans index.php. Nous avons ajouté quelques textes supplémentaires dans single.php, alors voici à quoi cela ressemble après avoir rendu tous les textes traduisibles :
À partir de maintenant, tous les textes que nous ajoutons dans notre thème, nous nous assurons de les envelopper à l’intérieur __()ou _e().
Fichiers de traduction
Il existe deux façons de fournir des fichiers de traduction à votre thème ;
- Fournir un
.pot-fichier - ou fournissez une paire de fichiers
.poet ..mo
Le .potfichier -file est recommandé pour un thème que vous vendez ou donnez à d’autres utilisateurs, car avec ce fichier, il est très facile de générer un fichier de traduction pour une nouvelle langue. Cependant, il n’est pas facile (ou gratuit) de créer un de ces fichiers. Si vous connaissez WP-CLI (ligne de commande WordPress) ou Grunt, vous pouvez suivre les directives de la documentation de WordPress ici. Sinon, l’autre alternative pourrait être pour vous.
Les fichiers .poet .motravailler ensemble. WordPress nécessite un .mopour la traduction des textes, mais ce fichier n’est pas humainement lisible. Nous avons donc le .pofichier qui est lisible pour nous. Avec le bon logiciel, il génère le .mofichier chaque fois que vous apportez des modifications.
L’inconvénient des fichiers .poet .moest que vous devez générer une paire pour chaque langue, et une fois que vous l’avez traduite dans une langue, il n’y a pas de moyen facile de vider toutes les traductions afin de créer une autre nouvelle langue.
Vous avez besoin d’un programme pour éditer .potet .pofichiers. Le plus courant est PoEdit. PoEdit est gratuit et fonctionne à la fois pour iOS et Windows. Mais certaines fonctionnalités avancées (comme la génération d’un .potfichier -) nécessitent malheureusement une version payante. Nous utiliserons la version gratuite pour créer un .pofichier pour notre thème.
Téléchargez et installez PoEdit afin de suivre la suite du tutoriel.
Créer un fichier .po pour notre thème avec PoEdit
Créer un fichier de traduction pour l’anglais n’a généralement aucun sens lorsque tous les textes de notre thème sont de toute façon en anglais, mais pour les besoins de ce didacticiel, je vais créer un fichier de traduction en anglais.
1 Ouvrez PoEdit et cliquez sur Fichier > Nouveau…
2 Vous serez invité à choisir une langue. Choisissez la langue souhaitée, par exemple l’anglais.
3 Appuyez sur Enregistrer (Ctrl+S). Localisez votre dossier de thème et entrez dans le sous- /lang/dossier. (Si vous ne l’avez pas créé à la dernière étape, créez-le maintenant). Le nom de votre fichier est essentiel. Pour les thèmes, il doit être nommé simplement votre code de langue. Pour l’anglais américain ce serait en_US, pour le norvégien c’est nb_NO. Recherchez-le sur Google ou consultez cet aperçu pour trouver votre code de langue. Nous allons le nommer en_US.po.
4 Dans le menu cliquez sur Catalogue > Propriétés…
5 Dans le premier onglet, vous pouvez remplir certaines informations telles que le nom de votre projet (thème) ou changer la langue – mais ce n’est pas nécessaire. Je vous recommande de conserver le jeu de caractères en UTF-8 car c’est ce que nous écrivons pour WordPress.
6 Cliquez sur l’onglet Chemins des sources. Ici, vous devrez définir les dossiers dans lesquels le fichier doit rechercher les textes traduisibles. Les chemins sont relatifs, et comme nous l’avons déjà enregistré dans un sous-dossier de notre thème, nous savons qu’il doit remonter d’un répertoire. Appuyez sur le bouton + sous la zone Chemins et choisissez Ajouter des dossiers. Choisissez votre répertoire de thèmes. Cela devrait ajouter un élément de chemin "." (remonter d’un dossier). Vérifiez que "Chemin de base" fait référence à votre répertoire de thème racine.
7 Cliquez sur l’onglet suivant, «Mots-clés sources ». Ici, vous devez indiquer à PoEdit quelles fonctions vous avez utilisées pour les textes traduisibles (par exemple __, _e, esc_html_eetc.). Cliquez sur le bouton + pour ajouter chaque fonction et écrivez-les sans "()". C’est à vous de décider si vous voulez couvrir toutes vos bases et ajouter toutes les fonctions gettext de WordPress, mais dans ce tutoriel, nous savons que nous n’en avons utilisé que deux. Nous ajoutons donc deux éléments; __()et _e(). Ajoutez les fonctions sans aucune parenthèse.
8 Appuyez sur OK.
9 Il ne reste plus qu’à dire à PoEdit de scanner les chemins fournis pour les fonctions en utilisant __()et _e()(ou celui que vous avez fourni). Pour ce faire, cliquez sur le bouton "Mettre à jour à partir du code". (La version Windows a le texte sur le bouton mais pas la version iOS – donc pour iOS, vous devez appuyer sur le bouton qui est généralement le dernier dans la barre d’outils ; une icône de fichier avec une icône "refaire" en haut. Cliquez sur le bouton « Mettre à jour à partir du code » et vous devriez voir tous les textes répertoriés avec une interface pour la traduction :
Agréable!
Fichiers de traduction générés
Vous pouvez maintenant utiliser PoEdit pour traduire chaque chaîne, mais nous ne le ferons pas ici car il est inutile de traduire l’anglais vers l’anglais. N’oubliez pas d’appuyer sur Enregistrer pour mettre à jour et générer un .mofichier, et chaque fois que vous ajoutez un autre texte dans votre thème, vous devez appuyer à nouveau sur le bouton "Mettre à jour à partir du code". Ensuite, les nouvelles modifications apportées à vos modèles apparaîtront.
Si vous cochez le sous- /langdossier dans votre dossier de répertoire de thème, vous devriez voir deux fichiers ; le .pofichier que nous venons de créer et un .mofichier du même nom, généré par nous en enregistrant dans PoEdit.
Vous pouvez faire une copie du en_US.pofichier et le renommer dans un code de langue différent. Mais rappelez-vous que PoEdit n’offre pas un moyen simple d’effacer toutes les chaînes traduites ; vous auriez à effacer un par un. C’est la raison pour laquelle cela craint pour les utilisateurs qui souhaitent traduire votre thème dans une autre langue. Donc si vous avez la possibilité de faire un .potfichier, vous devriez le faire.
WordPress recherchera le fichier de traduction en fonction de la langue définie dans le menu d’administration Paramètres > Langue du site. Si vous avez ajouté une langue différente de l’anglais, vous pouvez la tester en changeant la langue du site et voir si votre traduction apparaît !