Comment utiliser le plug-in de localisation de Phrase Strings pour WordPress

WordPress est absolument massif : Plus de 43 % de tous les sites web sont basés sur le système de gestion de contenu (CMS) gratuit, et plus de 60 % des sites web basés sur un CMS ont choisi WordPress. Son architecture, sa facilité d'utilisation et son écosystème massif de thèmes et de plug-ins sont tous des contributeurs à ce grand succès.

Lorsqu'il s'agit de rendre votre site WordPress multilingue, si vous souhaitez un flux de travail professionnel qui fonctionne pour toute votre équipe de développeurs et de traducteurs, vous aurez intérêt à localiser votre site avec le plug-in de localisation WordPress pour Phrase Strings.

Dans ce tutoriel, nous allons créer un petit site de démonstration pour vous montrer à quel point il est facile de lancer un projet Phrase, de le connecter à WordPress et de commencer à localiser vos pages et articles en quelques minutes. Nous allons également utiliser le populaire Polylang plug-in pour ajouter un sélecteur de langue à notre site. Cuisinons.

Versions de l'environnement WordPress

Nous utilisons la pile et l'ensemble de plug-ins suivants pour construire notre site de démonstration (versions entre parenthèses) :

• PHP (7.4) — langage/processeur côté serveur
• MySQL (8.0) — base de données
• WordPress (5.5) — notre CMS de choix
• Phrase Strings (1.0) — lie facilement notre site WordPress avec Phrase
• Polylang (2.8) — gère la localisation des URL, des menus et des catégories
• Thème Fasciate (1.0) [Optionnel] — le rend tout joli et sucré

✋🏽 Avertissement » Vous aurez besoin de WordPress 5.5 ou supérieur, avec l'éditeur de blocs Gutenberg, pour utiliser le plug-in de localisation Phrase Strings pour WordPress.

Notre site de démonstration : Aznomia

Aznomia est une organisation à but non lucratif fictive présentant la flore et la faune de la forêt amazonienne menacée. Voici à quoi ressemblera le site web de Aznomia lorsque nous aurons terminé :

Plus de 40 000 espèces de plantes vivent dans l'Amazonie

Je vais supposer que vous savez comment installer WordPress pour le développement. Personnellement, j'aime utiliser l'environnement de développement local simple et géré Local pour mes sites de développement WordPress.

🔗 Ressource » Si vous voulez construire avec nous, téléchargez le thème WordPress gratuit Fascinate de themebeez et installez-le.

Avec WordPress installé, nous pouvons commencer à ajouter notre contenu.

Ajouter des articles

Pour chaque espèce de flore ou de faune, nous ajouterons un article qui a un titre, un bloc dans son corps et une image à la une.

Contenu et images de Wikipedia

Ajouter des pages

Ajoutons une page d'accueil pour notre site. Pour commencer, nous pouvons ajouter une page intitulée Accueil avec un peu de texte d'introduction.

Assez simple pour le moment : nous ajouterons plus à notre page d'accueil bientôt

Définir notre page d'accueil

Par défaut, WordPress utilisera la page d'index du thème, qui liste les articles récents, comme sa page d'accueil. Nous pouvons modifier cela sous Paramètres → Lecture afin que notre page d'accueil soit utilisée à la place.

Nous voulons afficher notre page d’accueil lorsque notre visiteur entre pour la première fois

Ajouter nos publications à notre page d’accueil

Incitons nos visiteurs à explorer notre contenu une fois qu’elle a atteint la page d’accueil. Nous ajouterons quelques liens vers nos publications sur la flore, et quelques autres vers nos publications sur la faune.

Allons à Pages → Toutes les pages → Accueil → Modifier, et ajoutons un nouveau bloc de colonnes à notre page d’accueil pour accueillir nos images et liens de publication.

Nous sélectionnerons la mise en page 33/33/33 pour ajouter trois colonnes côte à côte. Dans chaque colonne, nous cliquerons sur le ＋ pour ajouter un bloc dans la colonne et sélectionner la colonne d’image. Sous chaque image, nous pouvons ajouter un texte lié à la publication respective.

Nous pouvons commencer à taper le titre d’une publication pour obtenir un lien suggéré automatiquement

Avec des colonnes ajoutées sous Flore et Faune, notre page d’accueil ressemblera maintenant à ceci :

Un peu plus visuellement intéressant, non ?

Et c’est à peu près tout pour notre application de démonstration. Passons à la localisation en utilisant Phrase Strings.

Localiser notre site WordPress avec Phrase Strings

Tout d’abord, créons un nouveau projet Phrase. Nous allons nous connecter et, dans notre espace principal, cliquer sur le bouton Créer un nouveau projet.

🗒 Note » Si vous n’avez pas d’abonnement pro Phrase, inscrivez-vous pour un essai gratuit de 14 jours.

Ajout des chaînes de phrases du projet

Cela fait apparaître la boîte de dialogue Ajouter un projet

Dans la boîte de dialogue Ajouter un projet, nous pouvons donner un nom à notre projet, laisser le reste des champs dans leur état par défaut, et cliquer sur le bouton Enregistrer.

Nous devons juste donner un nom à notre projet

Notre nouveau projet apparaîtra maintenant dans notre grille de projets. Survolons sa carte et cliquons sur le bouton Langues pour ajouter les langues que notre site prendra en charge.

J'ajouterai l'anglais américain et le français canadien ici. Vous pouvez ajouter toutes les langues que vous désirez. Notez que la première langue que nous ajoutons devient notre langue source pour les traductions. Une fois que nous avons terminé, nous pouvons cliquer sur Créer des langues.

Après cela, nous pouvons cliquer sur le bouton Ignorer la configuration.

Nous n'avons pas besoin des autres options de configuration pour notre projet

Création d'un authentifiant d’accès

Nous aurons besoin d'un authentifiant d’accès pour connecter notre projet Phrase au plug-in de localisation Phrase Strings pour WordPress dans une minute. Créons un authentifiant d’accès pendant que nous sommes dans la console Phrase. Nous pouvons le faire en cliquant sur notre nom en haut à droite de l'écran pour ouvrir un menu déroulant, puis en cliquant sur Jetons d'accès.

Ensuite, cliquons sur le bouton Générer un jeton.

Nous donnerons un nom à notre jeton, laisserons le champ Scopes tel quel, et cliquerons sur Enregistrer. Cela devrait ajouter une nouvelle ligne en haut de notre liste de jetons d'accès. Remarquez que le nouveau jeton est partiellement révélé et qu'il y a un bouton Copier à côté.

✋🏽Avis » Vous ne pourrez pas accéder à votre jeton plus tard. Vous devez le copier dès que vous le générez.

Nous cliquerons sur le bouton Copier et collerons notre jeton quelque part en sécurité.

C'est tout pour la configuration de Phrase. Nous pouvons maintenant revenir à WordPress.

Installation du plug-in de localisation de Phrase Strings pour WordPress

Nous pouvons télécharger le plug-in depuis le répertoire de plug-ins WordPress. Une fois que nous avons le fichier ZIP, nous pouvons ouvrir notre admin WordPress et aller à Extensions → Ajouter nouveau → Télécharger le plug-in.

Nous pouvons ensuite cliquer sur Parcourir, sélectionner le fichier ZIP que nous avons téléchargé plus tôt, et cliquer sur Ouvrir pour télécharger et installer le plug-in de traduction. Une fois cela fait, nous devons nous assurer de cliquer sur le bouton Activer le plug-in.

Une fois cela fait, nous aurons un nouvel élément de menu Phrase dans notre barre latérale d'administration. Cliquer dessus ouvre le formulaire API Access Token. Nous pouvons maintenant coller l'authentifiant d’accès que nous avons généré précédemment et cliquer sur Save Settings.

Nous sommes prêts à commencer la localisation.

Localiser des pages

Commençons à localiser notre page d’accueil. Nous pouvons aller à Pages → Toutes les pages → Accueil → Modifier. Là, nous trouverons un nouveau bouton d'icône Phrase. Une fois que nous cliquons sur ce bouton, nous verrons la barre latérale du plug-in Phrase String apparaître.

Sous Sélectionner le projet, nous pouvons ouvrir le menu déroulant et choisir le projet Phrase que nous avons créé précédemment. Nous pouvons ensuite sélectionner la langue de la page sous Mon post est écrit en et cliquer sur Push content. Cela téléchargera notre contenu pour traduction dans notre projet Phrase.

Maintenant, ouvrons notre console Phrase et allons à Projets → aznomia-wordpress → Langues. Remarquez que nous voyons que notre contenu source en anglais américain est complet, et que nous avons du contenu français canadien non traduit.

Cliquons sur fr-CA pour ouvrir l'éditeur de traduction. Nos traductions sont listées dans la barre latérale gauche. Nous pouvons en sélectionner une et commencer à la traduire dans l'éditeur. Vous voudrez peut-être garder la case à cocher Suggestion automatique cochée car cela peut vous faire gagner du temps en suggérant des mots traduits au fur et à mesure que vous tapez.

La suggestion automatique est un gain de temps pour les traducteurs

Notez que le titre de notre page est son propre élément de traduction. Il en va de même pour chaque bloc dans le corps de notre page. Nous pouvons traduire chacun d'eux et cliquer sur Enregistrer.

🗒 Note » Gardez les balises HTML aux mêmes emplacements dans vos traductions qu'elles le sont dans le texte source.

Une fois que nous avons terminé de traduire, nous pouvons retourner à l'administration WordPress et modifier à nouveau la page d'accueil. Maintenant, nous pouvons Sélectionner tout les traductions et cliquer sur le bouton Pull translations pour créer une nouvelle page d'accueil traduite.

🗒 Note » Phrase ne synchronisera pas les slugs WordPress traduits. Il suffit d'ignorer ceux-ci dans l'éditeur de traduction.

Une fois que les traductions ont été extraites, nous recevrons un message indiquant « Traductions extraites avec succès. » Nous verrons également une chevron à côté de notre traduction qui renvoie à la nouvelle page de traduction créée.

Nous avons maintenant choisi de publier la page d'accueil traduite.

🗒 Note » Remarquez que nous avons laissé nos liens de publication non traduits. C'est parce qu'au moment de l'écriture, Phrase ne synchronise pas ces blocs. Je travaille avec une version précoce du plug-in Phrase, et l'équipe Phrase travaille à corriger et à mettre à jour le plug-in. Au moment où vous lirez ceci, ce problème devrait être résolu.

Localiser des publications

La localisation des publications est très similaire à celle des pages, donc nous vous laisserons cela comme un exercice.

🔗 Ressource » Si vous souhaitez un guide étape par étape pour localiser des publications avec le plug-in de localisation de Phrase Strings pour WordPress, consultez la documentation d'aide officielle.

🗒 Remarque » Au moment de la rédaction, le plug-in Phrase Strings pour WordPress ne localisait que des pages et des publications. Le support pour la localisation des catégories, des tags, etc. est en cours et sera publié à l'avenir.

Une fois que toutes nos publications sont traduites et intégrées, notre page de liste de publications devrait ressembler à ceci.

Une publication française traduite a été ajoutée pour chaque publication source anglaise

Ajouter Polylang

Nous voulons probablement ajouter un sélecteur de langue à notre site. Nous pouvons le faire avec le plug-in gratuit Polylang. Nous allons nous rendre à Extensions → Ajouter nouveau et rechercher Polylang en utilisant la boîte de recherche de plug-ins.

C'est celui avec l'image du perroquet... impertinent

Avec le plug-in installé et activé, nous serons invités à exécuter son assistant de configuration. Cliquons sur le bouton pour le faire.

Écran des langues de Polylang

Nous pouvons choisir les mêmes langues à ajouter à Polylang que celles que nous avons dans notre projet Phrase. Nous utilisons l'anglais américain et le français canadien sur notre site de démonstration, donc nous allons les ajouter ici.

La prochaine option dans l'assistant concernant la traduction des médias est une question de préférence. J'ai choisi de ne pas traduire les médias ici.

Ensuite, il y a la langue à assigner au contenu que Polylang n'a pas encore assigné. Notre langue source est un bon candidat ici. Nous pouvons manuellement définir nos publications et pages traduites après avoir terminé l'assistant.

Nous voulons probablement sauter l'étape concernant la traduction de la page d'accueil.

Nous avons déjà une page d'accueil traduite que nous pouvons configurer manuellement plus tard. Donc, nous pouvons cliquer sur Pas maintenant pour continuer.

C'est tout pour l'assistant Polylang. Terminons notre configuration manuellement.

Ajouter nos traductions à Polylang

Commençons par notre page d'accueil. Nous pouvons naviguer vers Pages → Toutes les pages pour voir l'index des pages. Nous pouvons cliquer sur le bouton Édition rapide à côté de la traduction française de la page d'accueil que nous pouvons créer avec Phrase. Cela ouvrira les contrôles d'édition rapide pour la page.

Assurons-nous que la traduction de notre page Statut est Publiée et que sa Langue est Français. La langue que nous définissons ici est celle de Polylang.

Ensuite, ouvrons la traduction française en cliquant sur son bouton. Puis, nous cliquerons sur l'icône de l'engrenage en haut à droite de la fenêtre pour ouvrir les paramètres du document. De là, dans la section langue de Polylang, nous pouvons commencer à taper le titre de la page d'accueil anglaise. Nous devrions obtenir un menu déroulant de suggestion automatique sur lequel nous pouvons cliquer pour définir la page d'accueil anglaise comme la source de cette page dans Polylang.

Nous veillerons à cliquer sur le mettre à jour bouton lorsque nous avons terminé. En faisant cela, nous venons de définir notre page d'accueil française comme la page d'accueil dans Polylang et WordPress.

Nos pages d'accueil anglaise et française sont maintenant liées dans Polylang

Nous pouvons également lier nos articles dans Polylang. Nous laisserons cela comme un exercice pour vous, car c'est exactement le même processus que de lier notre page d'accueil.

Une fois cela fait, Polylang a lié en interne notre contenu anglais avec son homologue français. Chaque page ou article a également une URL localisée. Notre page d'accueil française, par exemple, est à /fr/accueil/.

🗒 Note » Par défaut, le contenu source (anglais dans notre cas) n'aura pas de code de langue dans son URL. Nous pouvons changer cela dans les paramètres de Polylang, cependant, sous Langues → Paramètres → Modifications d'URL → Paramètres.

Ajouter un sélecteur de langue avec Polylang

Avec tout ce contenu lié, c'est dommage que nos visiteurs ne puissent pas passer manuellement d'une traduction à l'autre pour lire dans leurs langues préférées. Heureusement, Polylang est livré avec un widget de sélecteur de langue pratique que nous pouvons insérer dans n'importe quelle zone de widget de notre thème.

Allons à Apparence → Widgets, trouvons les paramètres de la zone de widget Sélecteur de langue et définissons-le sur la zone de widget Pied de page du milieu de notre thème.

Cela fera apparaître les paramètres du sélecteur de langue sous la section Pied de page du milieu près du côté droit de la fenêtre.

Les paramètres du widget sont une question de préférence. Je vais définir le mien avec un titre de Langue et l'afficher sous forme de menu déroulant. Une fois que nous Enregistrer, nous pouvons voir notre sélecteur de langue près du bas de chaque page de notre site public.

Avec cela, notre Aznomia est disponible en anglais et en français.

🗒 Note » Je m'excuse si les traductions en français ne sont pas correctes. J'ai utilisé des outils de traduction tiers pour les préparer.

Continuez à explorer

Si vous êtes intéressé à approfondir la localisation de WordPress, consultez notre série :

• Créer un site WordPress multilingue – Partie 1 : Contenu & Polylang
• Créer un site WordPress multilingue – Partie 2 : Commencer la localisation de thèmes personnalisés avec gettext
• Créer un site WordPress multilingue – Partie 3 : Meilleures recettes pour la localisation de thèmes personnalisés

La puissance des Phrase Strings directement dans WordPress

Non seulement nous pouvons créer, mettre à jour et synchroniser nos traductions Phrase directement dans WordPress, mais nous avons également toutes les fonctionnalités avancées que les Phrase Strings nous offrent. Cela signifie que nos responsables peuvent définir des tâches pour nos traducteurs depuis Phrase. Nous pouvons également automatiser les traductions, en utilisant l'apprentissage automatique pour traduire pour nous. Et quand nous avons besoin de nos traducteurs, ils peuvent utiliser l'éditeur de traduction pratique dans Phrase. Tout ce que nous avons à faire en tant que développeurs WordPress est de pousser notre contenu source et de tirer les dernières traductions.

Découvrez tous les produits de traduction de Phrase, et inscrivez-vous pour un essai gratuit de 14 jours dès aujourd'hui !