Comment rendre votre thème multilingue et compatible avec WooCommerce

Matt Mullenweg, cofondateur de WordPress et PDG d'Automattic, a été interviewé par Josh Janssen, où il a déclaré qu'en mai de cette année, les téléchargements non anglais de WordPress dépassaient pour la première fois les téléchargements anglais..


Cette tendance se poursuit avec WordPress 4.0, ce qui simplifie grandement l’installation et la maintenance des sites WordPress localisés. WordPress 4.0 vous donne maintenant la possibilité de télécharger WordPress dans la langue de votre choix. Cela facilitera le processus d'installation pour les non-anglophones. Dans les versions précédentes de WordPress, l'anglais était la langue par défaut et les autres langues étaient traitées comme des exceptions. WordPress 4.0 rend toutes les langues également accessibles. Ce changement rendra sûrement WordPress encore plus populaire dans le monde entier.


Le but de ces nouvelles fonctionnalités de WordPress 4.0 est d’augmenter le nombre d’utilisateurs internationaux de WordPress qui, auparavant, n’avaient pas pu utiliser WordPress en raison de difficultés linguistiques. Qui plus est, les pays de la région Asie-Pacifique, tels que la Chine, le Japon, l'Inde, la Corée du Sud et l'Indonésie, devraient dépasser l'Amérique du Nord en termes de ventes de commerce électronique grand public, selon eMarketer..

Qu'est-ce que cela signifie pour vous en tant que développeur de thèmes ou de plugins? Premièrement, cela signifie que votre produit doit être prêt pour la localisation. Tous les textes doivent être encapsulés dans des appels 'gettext', permettant aux utilisateurs de les exécuter dans d'autres langues; Cependant, l'internationalisation n'est que la première étape. Dans de nombreux pays, le fait de pouvoir exécuter un site dans une seule langue constitue une limitation majeure. Pour véritablement vous mondialiser et exploiter le potentiel énorme du marché anglophone, vos produits doivent également être compatibles multilingues..


Heureusement, avec WPML, l’exploitation de sites multilingues est simple. Nous décrirons les sept meilleures pratiques à suivre, afin que vos thèmes et plug-ins fonctionnent parfaitement sur des sites unilingues et multilingues. En suivant ces instructions simples et en respectant un code propre, vos produits peuvent alimenter des sites multilingues..


Comment les utilisateurs finaux traduiront et à quoi vous devez être préparé

Lorsque vous développez votre thème, il est essentiel de comprendre comment vos utilisateurs finaux traduiront leurs sites. Une fois que vous aurez compris leur point de vue, vous réaliserez ce que vous devez faire pour que votre thème soit multilingue..


Un thème typique affiche un en-tête, un pied de page, des menus, des widgets, du contenu et vos propres éléments personnalisés. Voici un exemple de site WooCommerce, basé sur un thème modifié de Twentyfourteen:


WPML vous permet de traduire tous les éléments WordPress standard. Ceci comprend:

  • Les menus

  • Widgets standard

  • Éléments de navigation

  • Tous les textes enveloppés dans des appels 'gettext'

  • Publier du contenu, y compris des champs personnalisés et une taxonomie

  • Des produits

  • Options du thème

  • Images et chaînes qui leur sont associées


Vous n'avez rien besoin d'ajouter dans votre code pour permettre la traduction de toutes ces sections. Veillez à faire attention à vos éléments personnalisés, afin que vos utilisateurs puissent les traduire également.


Le tableau ci-dessous récapitule comment l'utilisateur final traduira les éléments de site standard avec WPML.. 

Ce que les utilisateurs finaux peuvent traduire avec WPML

Traduire l'en-tête à l'aide de l'outil de traduction de chaîne WPML

Comme cela ne fait pas partie d'un post, d'une page ou d'une taxonomie, nous devons utiliser la traduction de chaîne de WPML pour la traduire. Allez dans WPML-> Traduction de chaîne, recherchez la chaîne par son contenu (le titre du site) et traduire.

 

Traduire les menus WordPress

Lorsque vous accédez à Apparence> Menus, vous verrez les contrôles de traduction de menus de WPML. En savoir plus sur la traduction des menus pour voir comment cela fonctionne.

Traduire un thème personnalisé ou des éléments de plug-in

De nombreux thèmes ou plugins ont des fonctionnalités uniques, qui stockent des textes dans le wp_options table. le Message d'introduction, par Recours fait cela exactement. Le thème ou le plugin enregistre ces textes dans la table wp_options et nous devons dire à WPML de les traduire. Nous ajoutons ces informations au fichier de configuration de langue. Là, nous indiquons à WPML quelles entrées de la table wp_options nécessitent une traduction.

Cette technique est utile lorsque les touches des options sont fixes (comme dans la plupart des thèmes). Si votre thème utilise des tableaux d'entrées, ce qui peut augmenter avec l'entrée de l'utilisateur, vous devez enregistrer ces entrées de manière dynamique. Utilisez les fonctions icl_register_string et icl_t de WPML pour le faire..

Traduire le corps de la poste

WPML permet aux utilisateurs de traduire du contenu facilement. Les écrans de post-édition incluent la traduction de WPML des contrôles permettant de créer de nouvelles traductions et d'éditer des traductions existantes.

Vous n'avez rien à faire dans le thème ou le plugin pour y arriver. La traduction de contenu est une fonctionnalité essentielle de WPML.

Ce que vous devez vérifier, c'est que tout texte ajouté par votre thème à la sortie peut être traduit..

Si vous débutez avec GetText, découvrez-en davantage dans notre FAQ sur la traduction des textes de thèmes..

Traduire les widgets avec la traduction de chaînes

WPML permet aux utilisateurs de traduire le contenu des widgets de texte. Il traduit également les titres de tous les autres widgets. Si votre thème ou votre plugin crée ses propres widgets personnalisés, assurez-vous de transmettre leurs titres via les filtres WordPress standard. De cette façon, WPML permettra aux utilisateurs de traduire les titres de vos widgets via l’écran de traduction de chaîne..

Traduire le pied de page

 Certains thèmes ont un écran d’administration personnalisé pour stocker les textes de bas de page. Comme d’autres textes que nous avons vus, le thème ou le plugin enregistrait les textes de bas de page dans wp_options table aussi. Nous allons ajouter ces entrées dans le fichier de configuration de la langue, en indiquant à WPML de les traduire..

 



Pour une explication détaillée de la manière dont les utilisateurs finaux utiliseront WPML, consultez notre didacticiel sur la compatibilité avec WPML..


Il n'est pas nécessaire de réécrire l'intégralité de votre thème ou de votre plug-in, car WPML gère tout cela. Ce tutoriel n’est pas aussi difficile que l’escalade du mont Everest, mais vous devrez modifier certaines choses pour le rendre plus facile pour l’utilisateur final..


Maintenant que nous avons expliqué comment les gens traduiront les éléments WordPress standard, examinons ensemble les mesures à prendre pour assurer la compatibilité multilingue de vos éléments personnalisés..

Les 7 meilleures pratiques pour rendre votre thème multilingue et compatible avec WooCommerce

1. Ajouter des fonctions GetText au texte codé en dur

Pour les plugins ou les thèmes, veillez à envelopper votre texte codé en dur dans les fonctions 'gettext'. Cela inclut l'en-tête, le pied de page et le texte du widget. Vos fichiers de modèles affichent un assortiment d’informations sur le produit et du texte codé en dur. Par exemple, la plupart des modèles incluent le nom du produit et un lien "Acheter". Le nom du produit provient de la base de données, vous n'avez donc pas à vous soucier de le traduire..

Vous devez vous assurer que tous les textes codés en dur sont traduisibles, en utilisant les fonctions 'gettext'.

Bien

Mal

”/>

Les "produits similaires" et "Acheter maintenant!" Ne sont pas inclus dans les appels GetText.

Assurez-vous d'utiliser le domaine textain de votre thème pour tous les appels GetText..

2. Utiliser les fonctions de l'API pour créer un lien vers les pages WooCommerce

De nombreux thèmes de commerce électronique comportent des pages spéciales, telles que le "panier" ou le "compte". Le thème comprend souvent des liens vers ces pages, apparaissant sur toutes les pages du site..


Si vous utilisez un menu WordPress pour ces liens, vous devriez être prêt. WPML affiche un menu WordPress différent pour chaque langue. Par conséquent, les liens vers ces "pages spéciales" seront différents selon les langues. Toutefois, si vous codez en dur ces liens dans des fichiers de modèle, vous devez autoriser WPML à remplacer les liens, par des liens vers ces pages dans la bonne langue..


La bonne façon de créer un lien vers les pages spéciales de WooCommerce consiste à utiliser les fonctions API de WordPress et les identifiants de page WooCommerce. WooCommerce Multilingual filtre les appels à 'get_option ()' avec les identifiants de page WooCommerce. Il retournera l'ID de la page dans la langue courante.


Bien

Mal

”>

”>

'shop' est le slug de la page dans la langue par défaut.

”>

L'ID 'page de magasin' est codé en dur. Ce sera différent pour différents sites et pour différentes langues.

L'URL de la "page de magasin" est codée en dur. Ce sera différent pour différentes langues.

3. Ajouter des listes de produits multilingues

Si vous utilisez les codes abrégés WooCommerce pour afficher la liste des produits, vous êtes prêt. WooCommerce chargera les produits dans la langue correcte et les affichera.

Si vous préférez charger des produits manuellement, en utilisant votre propre code, assurez-vous que vous utilisez les appels API WordPress ou WooCommerce. Si vous accédez directement à la base de données, WPML ne filtrera pas votre appel et vous obtiendrez un mélange de tous les produits dans toutes les langues..

Bien

Mal

[Featured_products per_page = "12" columns = "4"]

[produit id = "99"]

(plus)

'product', 'suppress_filters' => 0)); ?>

$ args = array (

'post_type' => 'produit',

'posts_per_page' => 10,

)

$ products = new WP_Query ($ args);

?>

'produit')); ?>

suppress_filters sera défini sur true par défaut, empêchant ainsi le filtrage de la langue.

$ products = $ wpdb-> get_results ($ wpdb-> prepare (“SELECT * FROM $ wpdb-> posts WHERE post_type =" product "ORDER BY ID DESC LIMIT% d”, 10));

WPML ne filtre pas les requêtes SQL de bas niveau. Tous les produits dans toutes les langues seront retournés.

Une fois que vous avez chargé les bons produits, vous n'avez plus à vous soucier des langues lors de leur affichage. Chaque produit viendra avec ses propres champs personnalisés, avec des informations dans la langue correcte.

4. Ajouter des options de paiement multi-devises

Certains sites de commerce électronique mondiaux ont besoin de plusieurs langues et de plusieurs devises. Votre thème devrait prendre en charge les sites nécessitant plusieurs devises. Pour de nombreux sites non américains, la prise en charge de plusieurs devises est une fonctionnalité très importante. Par exemple, de nombreux sites européens devront facturer des euros, des livres sterling et des dollars américains. Les sites d'Europe orientale ont souvent besoin du rouble russe et les sites asiatiques ont besoin de différentes devises..

La prise en charge de plusieurs devises est incluse dans WooCommerce Multilingual. Pour permettre aux visiteurs de changer de devise, votre thème doit inclure un sélecteur de devise en option..

Vous pouvez afficher un sélecteur de devise, en utilisant un appel PHP ou en insérant un shortcode..

'% name (% symbol)')); ?>

[currency_switcher]

Pour un tutoriel complet, visitez le tutoriel sur Multi-Currency pour WooCommerce. Gardez à l'esprit que le sélecteur de devise ne s'affichera que si le site utilise plusieurs devises..

5. Devenir compatible RTL

Anglais - LTR

Hébreu - RTL


Les thèmes WooCommerce doivent suivre les directives RTL, tout comme les thèmes WordPress. Vous devriez créer un fichier 'rtl.css', avec les règles CSS pour l'affichage RTL.

Créez un nouveau fichier 'rtl.css' et placez-le dans le répertoire racine de votre thème. La direction 'dir' en CSS fera la plus grande partie du travail et il vous suffit de patcher quelques endroits. Pour les langues RTL, définissez l'attribut "direction" dans CSS sur "rtl". Ajoutez en plus l'attribut 'unicode-bidi-.

Bon affichage RTL ajouté au sélecteur .body:


direction: rtl;

unicode-bidi: incorporer;


Votre thème sera maintenant affiché dans RTL. Pour gérer les exceptions, reportez-vous aux instructions d'assistance pour les thèmes RTL..

6. Gérer différentes longueurs de texte dans différentes langues

Lorsque vous créez votre thème WooCommerce prêt multilingue, sachez que certains textes seront plus longs dans certaines langues et plus courts dans d'autres. Vous ne pouvez pas tester certaines longueurs de langue, car vos utilisateurs finaux traduiront eux-mêmes le contenu..

Par exemple, regardez ces deux blocs de produits.


CSS optimisé pour les textes courts en anglais

Un texte espagnol plus long ne correspond pas à l'espace

Le meilleur moyen de parvenir à une compatibilité de plusieurs longueurs est de tester votre thème avec des textes plus longs et plus courts de x2. Dans la plupart des cas, cela couvrira toute langue traduite. Il est fortement recommandé d'utiliser des dispositions fluides pour traiter du texte de différentes tailles. Une mise en page fluide permettra à chaque élément de redimensionner et de capturer la zone nécessaire. Réaliser une mise en page fluide prend du temps, mais évite les problèmes visuels.

Le texte déborde de manière transparente sur la ligne suivante sans aucun problème d'affichage

WooCommerce 'style.css' utilise la désignation 'espace-blanc: non enroulé'. Mais dans notre exemple, pour bien envelopper le texte, vous devez utiliser 'white-space: normal;'.

7. Créer un fichier de configuration de langue

Pour rendre votre thème entièrement compatible avec WPML, vous devez simplifier la gestion de sites multilingues avec le thème en créant un fichier de configuration de langue..

WPML peut lire un fichier de configuration qui détaille ce qui doit être traduit dans le thème ou le plugin. Créez et nommez le fichier 'wpml-config.xml'. Enregistrez le fichier dans le répertoire racine du thème. Utilisez la structure et la présentation de section dans l'exemple de cet exemple de fichier wpml-config.zip et modifiez-le avec votre propre contenu personnalisé..

Le contenu du fichier 'wpml-config.xml' doit être encapsulé dans ce qui suit. balises d'ouverture et de fermeture:



Dans le fichier 'wpml-config', vous définissez les fonctionnalités à traduire par WPML, vos types de publication personnalisés, vos taxonomies personnalisées, vos champs personnalisés et votre texte administrateur (chaîne provenant de wp_options). Vous pouvez également définir la manière dont la langue de votre thème Pour voir des exemples complets et des détails sur la structuration de votre fichier de configuration de langue, consultez notre tutoriel sur les fichiers de configuration de langue..

Testez votre site

Maintenant que vous comprenez la nécessité de préparer votre thème ou plug-in multilingue et WooCommerce, et après avoir suivi les pratiques de développement habituelles décrites ci-dessus, il est temps de tester votre thème ou plug-in..


Habituellement, lorsque vous testez, vous essayez de tout traduire en insérant des traductions factices dans tous les domaines de votre site. Mais cela prendrait beaucoup de temps. Par conséquent, nous avons créé un outil de test pour vous: Plug-in des outils de test de compatibilité WPML.


Cet outil injectera des traductions factices pour votre site afin que vous puissiez changer de langue et voir ce qui a été traduit et ce qui est resté dans votre langue d'origine. Notre outil de test vous fera économiser plusieurs heures de test et vous aidera à voir quels domaines vous devez améliorer dans votre thème ou plugin..

Installer les bons plugins pour WooCommerce multilingue

Vos clients devront disposer des plug-ins suivants pour les sites de commerce électronique multilingues avec WooCommerce:

  • WPML CMS par OnTheGoSystems

  • WooCommerce par WooThemes

  • WooCommerce multilingue par OnTheGoSystems


WPML est livré avec le plugin principal et les add-ons. Cette architecture permet à différentes personnes d'installer les différentes pièces dont elles ont besoin. Pour les sites WooCommerce multilingues, vous aurez besoin des composants WPML suivants:


  • WPML (Core)

  • WPML String Translation

  • Gestion de la traduction WPML

  • WPML Media Translation

Partenariat GoGlobal

WPML est utilisé sur plus de 400 000 sites Web et tout thème ou plug-in utilisant l'API WordPress peut obtenir une compatibilité multilingue à l'aide de WPML. Pourquoi prendre le risque de ne pas avoir de thème ou plugin compatible multilingue compatible et WooCommerce?


WPML a un programme GoGlobal où nous offrons des comptes WPML gratuits aux auteurs de thèmes et de plugins pour les tests de compatibilité. Nous avons de nombreux thèmes compatibles actuellement, notamment plusieurs WooThemes, tous des thèmes élégants, Avada et de nombreux thèmes sur ThemeForest..


Chez WPML, nous prenons très au sérieux la compatibilité avec cinq développeurs et consultants experts travaillant à plein temps sur la compatibilité de tous les auteurs de thèmes et de plug-ins afin d'obtenir une compatibilité multilingue. Inscrivez-vous gratuitement aujourd'hui à notre programme WPML GoGlobal.

Distribution de thèmes multilingues

Lorsque vous distribuez votre thème, vous voulez que les gens puissent l'utiliser pour des sites unilingues et multilingues. Les conseils de conception que nous avons donnés tout au long de cet article reposent principalement sur les meilleures pratiques de WordPress. Par conséquent, votre code de thème ne contient pratiquement aucun code spécifique pour WPML..


Vos clients devront installer WPML et ses composants requis pour exécuter des sites multilingues. WPML étant une marque déposée (et pour d’autres bonnes raisons), vous ne devez pas regrouper WPML avec votre thème..


Au lieu de cela, WPML propose un petit composant d’achat et un composant d’installation automatique, que vous pouvez utiliser. Ce composant permet à vos utilisateurs d’acheter WPML directement à partir de l’administrateur de WordPress. Il vous crédite également d'une commission d'affiliation pour une telle référence.


L'intégration de ce minuscule composant d'installation automatique dans votre thème est un excellent moyen de montrer aux gens que votre thème est vraiment compatible avec WPML et qu'il peut alimenter des sites multilingues. Il offre également à vos utilisateurs un processus simplifié d’achat et d’installation de WPML, sans avoir à utiliser FTP pour le télécharger sur leurs serveurs..

Résumé

Maintenant que nous avons couvert les sept meilleures pratiques pour préparer votre thème ou plug-in WooCommerce et multilingue, nous espérons que vous êtes prêt à commencer. Être prêt pour le multilingue est facile et possible pour chaque auteur de thème.  


C'est aussi simple que d'utiliser les meilleures pratiques de WordPress, telles que l'utilisation de fonctions 'gettext' et la gestion correcte des liens WooCommerce en dur, pour enfin ajouter un fichier de configuration de langue à votre thème. Augmentez la polyvalence de votre produit sur le marché en vous concentrant sur l'internationalisation de votre thème ou de votre plugin.

Nous offrons 8 000 $ lors de notre dernier événement Thèmes les plus recherchés sur WPML et WooCommerce. Vous devez être dedans pour le gagner!