Dans ce tutoriel, vous apprendrez à créer un site multilingue avec Stitched et WPML. Stitched est un thème pour les artisans. Vous pouvez utiliser le composant d’introduction de sa page d’accueil pour vous présenter à vos visiteurs, et vous pouvez étendre ses fonctionnalités en installant les extensions recommandées qui peuvent y être intégrées.
Stitched est développé par WooThemes. Pour les thèmes et les extensions développés par WooThemes, nous vous recommandons d’utiliser l’interface intégrée de WPML pour la traduction des fonctionnalités spéciales que WooThemes et ses extensions utilisent dans leur code. Dans ce tutoriel, je vous guiderai étape par étape pour y parvenir facilement.
Vous pouvez voir un exemple en direct sur le site de démonstration de Stitched + WPML.
Pour gérer un site Stitched multilingue avec WPML, vous aurez besoin de :
- Thème Stitched
- Une version récente de WPML, incluant les modules Traduction de chaînes et Gestion de traduction
Premiers pas
Voici les principales étapes à suivre pour commencer :
- Installez et activez Stitched
- Installez et activez les extensions WPML (WPML Multilingual CMS, WPML Traduction de chaînes, WPML Gestion de traduction)
- Configurez WPML depuis WPML->Langues. Consultez notre guide de démarrage de WPML pour une référence complète
- Installez et activez l’une des nombreuses extensions pouvant être intégrées à Stitched. Pour les besoins de ce tutoriel, nous utiliserons Projects
Traduire le message d’introduction
La fonctionnalité « Introductory Message » (Message d’introduction) du thème Stitched est une combinaison de l’image Gravatar de l’administrateur du site et du texte du slogan du site. Avec WPML, tout texte (ou chaîne de texte, comme nous l’appelons ici) qui ne fait pas partie des articles, des pages et de la taxonomie est traduit à l’aide du module Traduction de chaînes.
Le texte de ce message est défini dans Paramètres > Général
Et maintenant, pour traduire, il vous suffit d’aller dans WPML->Traduction de chaînes et de rechercher cette chaîne,
de la traduire, de la marquer comme terminée et de l’enregistrer
Voici donc à quoi ressemble notre front-end maintenant, y compris l’image Gravatar que le thème récupère automatiquement en fonction de vos paramètres
Traduire les textes généraux
Stitched est fourni avec d’autres chaînes que vous souhaiterez peut-être traduire. Vous pouvez compléter les traductions manquantes à l’aide du module Traduction de chaînes de WPML, comme je l’ai décrit pour le « Message d’introduction ». Si certaines chaînes sont manquantes, suivez les instructions de Localisation des thèmes et des extensions. En résumé, allez dans WPML->Localisation des thèmes et des extensions, et cliquez sur « Analyser le thème pour trouver les chaînes » (Scan the theme for strings). Notez que vous pouvez facilement filtrer les bonnes chaînes dans le menu déroulant de contexte – pour Stitched, filtrez sur « theme woothemes », et pour l’extension Projects, filtrez sur « plugin projects-by-woothemes ». Cela ressemble à ceci :
Traduire les extensions intégrées
Maintenant que nous avons vu comment traduire tout le texte provenant du thème, voyons comment rendre traduisibles les chaînes et les fonctionnalités provenant d’une extension Woo. Pour les besoins de ce tutoriel, j’ai choisi la très belle extension recommandée pour une utilisation avec Stitched : « Projects by WooThemes ».
Après avoir installé et activé « Projects », vous pourrez voir dans votre interface d’administration WordPress un nouveau menu appelé exactement ainsi… « projects », comme ici :
Pour rendre vos projets et leurs catégories traduisibles, vous utilisez les paramètres de WPML (l’interface graphique de WPML). En gros, vous allez dans WPML->Gestion de traduction comme ceci
Choisissez Configuration du contenu multilingue dans les onglets en haut
Avant de continuer, juste quelques mots sur ce qui se passe réellement en arrière-plan. L’extension Projects, comme de nombreuses autres extensions (et thèmes), utilise des types de publication personnalisés pour ses fonctionnalités. Ce sont des articles un peu « spéciaux », et parce qu’ils sont spéciaux, WPML ne « sait » pas qu’ils doivent être traduits. Notre prochaine étape consiste donc à dire exactement cela à WPML : traduisez les projets !
Cliquez sur Custom posts (Publications personnalisées), choisissez Traduire pour Projects. Comme vous le voyez, vous pouvez également définir les slugs de Projects pour qu’ils soient traduisibles, et juste en dessous, vous pouvez traduire les Taxonomies personnalisées liées à ces publications personnalisées, appelées dans ce cas « Project categories » (Catégories de projets). Maintenant, il suffit d’Enregistrer et c’est tout. De la même manière, vous pouvez contrôler la façon dont les champs personnalisés sont gérés pour la traduction en cliquant sur le lien Traduction des champs personnalisés en haut. Pour Projects, vous pouvez définir 3 champs personnalisés : _client, _project_image_gallery et _url. Mais pour ceux-ci, je vous recommande de suivre le point suivant -
Voyons à quoi ressemble la page d’administration de Projects. Nous cliquons sur « Projects » dans l’écran d’administration et maintenant, comme pour n’importe quelle page ou article « normal », nous pouvons dupliquer ou traduire n’importe quel projet existant, en créer un nouveau dans la langue de notre choix, et très important, utiliser toutes les fonctionnalités du type de publication project. Dans ce cas, nous sommes en mesure d’ajouter des détails (Details), une description (Description) et la galerie spéciale qu’il nous propose, comme ceci :
Rendre les champs personnalisés (et d’autres éléments) traduisibles dans la page de modification de la publication personnalisée
Dernier point ici : comme vous l’avez probablement remarqué sur l’écran précédent, vous pouvez également contrôler la façon dont les Champs personnalisés et même la taxonomie et les types de publication sont gérés pour la traduction sur chaque page de modification d’un article. Agrandissons un peu cela :
Ici, nous voulons que _project_image_gallery soit copié entre les langues, et j’ai trouvé logique que les champs _client et _url ne soient pas traduits. Vous pouvez toujours les modifier sur la page de l’article traduit, mais nous n’avons pas vraiment besoin de les traduire.
Personnaliser le style du sélecteur de langue
Enfin et surtout, faisons un petit ajustement pour que le sélecteur de langue de WPML soit parfaitement intégré dans la navigation principale de Stitched. Le sélecteur de langue de WPML possède des classes ajoutées qui peuvent être stylisées selon vos besoins, et vous pouvez même créer un sélecteur de langue personnalisé complet si vous le souhaitez. Ici, ce n’est pas nécessaire, tout ce que nous voulons, c’est donner un peu de marge (padding) au drapeau pour qu’il « s’intègre » bien à sa place et ne paraisse pas bizarre
Pour ce faire, allons dans WPML->Langues->Options du sélecteur de langue->CSS supplémentaire (facultatif) et ajoutons un peu de marge à la classe qui contrôle le style de l’image du drapeau du sélecteur : img.iclflag
Maintenant, le rendu est très joli, tout comme n’importe quel autre élément de menu Stitched
Conclusion
Stitched est un très beau thème pour passer au multilingue et parler de vous et de vos projets au monde entier. Vous pouvez également y ajouter une boutique en utilisant WooCommerce et WPML Multilingual & Multicurrency for WooCommerce. Nous avons vu comment vous pouvez ajuster facilement ses fonctionnalités à l’aide de WPML.
Versions utilisées
- WordPress 3.9
- WPML 3.1.5
- Thème Stitched 1.0.2
- Extension Projects 1.2.0
