Préparer un thème WordPress pour l'internationalisation

Que vous prévoyiez une dimension internationale dès la conception de votre site web ou que vous rencontriez ce besoin plus tard dans son cycle de vie, il est toujours bon de faire le nécessaire à l'internationalisation (couramment abrégée i18n) dès le départ.

Croyez-en mon expérience, personne ne veut être pris de court et repasser sur l'intégralité des fichiers d'un site, plusieurs semaines ou années après sa création, pour ajouter le support d'autres langues.

Nous n'aborderons ici que la méthode officielle pour un thème WordPress et ne parlerons pas d'extensions dédiées à ce besoin, comme Loco Translate.

Trève de digressions, c'est parti !

Bien concevoir son thème

Partons du principe que vous n'achetez pas votre thème sur une boutique en ligne, mais que vous le développiez vous-même (les thèmes premium sont très souvent "translation-ready" et s'ils ne le sont pas, fuyez !).

Voici un morceau de code très sommaire permettant d'afficher une liste d'articles et que l'on peut retrouver dans beaucoup de thèmes.

<h2>Actualités</h2>

<ul class="list">

  <?php while( have_posts() ) : the_post(); ?>

    <li class="list-item">
      <h3><?php echo get_the_title(); ?></h3>
      <a href="<?php echo get_permalink(); ?>">Voir l'article</a>
    </li>

  <?php endwhile; ?>

</ul>

<a href="https://www.alsacreations.com/">Voir toutes les actualités</a>

Ici, tous les textes statiques sont écrits directement dans le fichier. Résultat, impossible de les traduire.

Voyons maintenant ce que ça donne si notre thème est correctement développé.

<h2><?php echo __( 'Actualités', 'textdomain' ); ?></h2>

<ul class="list">

  <?php while( have_posts() ) : the_post(); ?>

    <li class="list-item">
      <h3><?php echo get_the_title(); ?></h3>
      <a href="<?php echo get_permalink(); ?>">
        <?php echo __( 'Voir l\'article', 'textdomain' ); ?>
      </a>
    </li>

  <?php endwhile; ?>

</ul>

<a href="https://www.alsacreations.com/">
  <?php echo __( 'Voir toutes les actualités', 'textdomain' ); ?>
</a>

Et voilà ! Avec seulement quelques octets de plus, cette partie du site est maintenant prête pour la traduction ! 😃

Et ça change quoi ? 🤔

Pas grand chose, si ce n'est que l'on utilise désormais les fonctions de gettext, la bibliothèque de fonctions de traduction intégrée à WordPress et originaire du système d'exploitation GNU.

On notera l'utilisation de la fonction __() pour afficher les textes, mais c'est loin d'être la seule ! Gestion des pluriels, échappement des textes pour affichage dans des attributs HTML ou encore _e() pour économiser les appels à echo. À chaque usage peut correspondre une fonction, mais il est aussi possible de n'utiliser que la fonction de base __() et de la combiner avec d'autres fonctions PHP comme on peut le faire habituellement.

Notez également le second paramètre ici appelé textdomain.
Il est très important et doit être unique pour votre thème, car il définit le domaine de nos traductions à venir. Ainsi, __( 'Mon texte à traduire', 'domaine1' ) et __( 'Mon texte à traduire', 'domaine2' ) sont 2 chaînes de caractères complètement différentes, même si on ne dirait pas au premier abord.
Choisissez un nom de domaine suffisamment unique pour votre thème sous peine de rencontrer de potentiels conflits avec des extensions installées sur votre site.

Et maintenant, comment je fais pour afficher une autre langue ?

C'est là que la marche à suivre se complique un peu et sort du cadre confortable de WordPress.

Il existe 3 types de fichiers dédiés à la traduction : .pot, .po et .mo et chacun à son rôle.

L'appel à un ami : .pot

Tout d'abord, il faut extraire toutes les chaines de caractères dans un catalogue qui servira de base à toutes les futures traductions, peu importe la langue cible. Ça tombe bien, c'est exactement le rôle des fichiers .pot !

Plusieurs outils existent pour le faire, dont le plus connu est PoEdit. Cependant, la génération de catalogue est, de mon point de vue, plus facile et directe avec un autre logiciel, EazyPo, que nous utiliserons dans la suite de ce tutoriel.

Une fois EazyPo téléchargé (pas besoin d'installation, c'est un logiciel portable), lancez-le pour vous retrouver face à une interface des plus conviviales.

Cliquez ensuite sur "Extract from source code" ou "File" puis "New from source code files" et sélectionnez le dossier de votre thème. Assurez-vous que la liste des fichiers est correcte si besoin.

Enfin, cliquez sur "Build" pour pouvoir choisir la destination et le nom du fichier qui sera généré.

Note : Une convention commune dans l'écosystème WordPress et d'utiliser le nom du thème à la fois pour le domaine et pour le nom des fichiers de traduction.

Une fois ceci fait, il ne vous reste plus qu'à cliquer sur le gros bouton rouge "Execute command" pour créer le fichier.

🎉TADA !🎉

La génération terminée, le logiciel ouvre votre catalogue de traductions.

Vous pouvez maintenant fermer ce fichier, nous n'avons plus besoin de le toucher.

Solution alternative : si vous êtes un utilisateur avancé, vous connaissez peut-être WP-CLI, l'interface en ligne de commande de WordPress. La commande make-pot permet de générer un fichier .pot en se positionnant dans le dossier de votre thème ou de votre extension (voir la documentation de make-pot).

Les fichiers .po et .mo

Maintenant que votre fichier .pot est prêt, vous allez pouvoir générer les fichiers nécessaires pour chaque langue que vous souhaitez ajouter à votre site.

Sans rentrer dans les détails :

• les fichiers .po pour les traducteurs/traductrices humains
• les fichiers binaires .mo à destination de la machine.

Pour servir d'exemple, nous allons créer un nouveau fichier pour traduire notre thème dans la langue de Shakespeare.

Pour cela, cliquez sur "File" puis "New from file".

Sélectionnez votre catalogue fraichement créé puis à l'étape suivante, choisissez de créer un fichier .po. Enfin, choisissez l'emplacement de création de votre fichier et son nom.

Notez que le nommage de vos fichiers est important. En plus d'avoir le même nom que votre fichier .pot, les fichiers .po doivent être suffixés de la locale de traduction. Ainsi, le fichier dédié à la langue anglaise doit être nommé nom-de-mon-theme-en_GB.po (ou nom-de-mon-theme-en_US.po si vous préférez l'anglais américain).

Une fois votre fichier créé, il ne vous reste plus qu'à le remplir ! 😉

Pour mener à bien cette partie fastidieuse, sélectionnez les chaînes de caractères une par une et cliquez dans le cadre en bas à droite pour saisir votre traduction. En fonction de la complexité de votre thème, on ne va pas se mentir, cela peut prendre plus ou moins de temps (pensez à sauvegarder régulièrement !).

Charger un fichier de traduction

Nous y voilà, toutes vos traductions sont prêtes et il ne vous reste plus qu'à faire en sorte que WordPress charge le bon fichier.

Heureusement, le CMS dispose de plusieurs fonctions pour cette tâche et celle qui nous intéresse ici est load_theme_textdomain (voir la documentation).

Ajoutez ce morceau de code dans le fichier functions.php de votre thème.

/**
 * Chargement des fichiers de traduction
 */
function load_theme_translations(){
  load_theme_textdomain( 'textdomain', get_template_directory() . '/lang' );
}
add_action( 'after_setup_theme', 'load_theme_translations' );

Le premier paramètre est le domaine que vous avez choisi. Le second est l'URL vers le dossier qui contient vos fichiers de traduction (ici, on suppose que votre thème contient un dossier /lang).

Note : Les différentes fonctions de chargement de fichiers de traductions tenteront d'abord de localiser vos fichiers dans le dossier /languages de WordPress, donc si vous le voulez, vous pouvez les y mettre directement.

Conclusion

Si préparer son thème ne demande que quelques efforts supplémentaires lors du développement, la création des fichiers de traductions peut s'avérer assez laborieuse surtout si c'est quelque chose que l'on rencontre peu dans son quotidien.

Toujours est-il que l'on ne saurait que trop vous recommander de penser à l'internationalisation de vos développements de thèmes ou d'extensions WordPress dès leur conception, sans quoi vous pourriez perdre un temps non négligeable en le faisant a posteriori, si c'est un besoin qui n'apparait que tardivement dans un projet.

Pour approfondir le sujet et connaitre, par exemple, la marche à suivre pour proposer des traductions pour des thèmes ou extensions, l'équipe de traduction de WordPress met à disposition ce guide.

C'est bien pour les thèmes, mais je développe des extensions, moi ! Comment on fait ?

Le processus reste relativement similaire, mais pour éviter d'allonger un article déjà bien complet, nous ne rentrerons pas dans les détails ici. Toutefois, si vous souhaitez un nouveau tutoriel dédié, faites-le nous savoir !

En attendant, vous pouvez visiter la documentation officielle proposée par WordPress.

Illustration par vectorjuice