Sur cette Page :
- Extensions requises et configuration
- Exploration du schéma WPML GraphQL
- Interroger les informations sur les langues et les traductions.
- Filtrage des langues
- Interroger les données des langues installées
- Utiliser WPML GraphQL avec Gatsby et ACF
- Problèmes connus
- Obtenir de l’aide
Extensions requises et configuration
Pour commencer, installe et active les extensions suivantes :
- Le plugin WPML cœur et le module complémentaire de Traduction de chaînes.
- Extension WPGraphQL
- WPML GraphQL extension
Si tu gères un site avec ACF ou ACF Pro et que tu veux exposer les champs multilingues de l’extension ACF au schéma WPGraphQL, installe et active :
- Extension « Advanced Custom Fields Multilingual » (ACFML )
- WPGraphQL pour l’ extension Advanced Custom Fields
Exploration du schéma WPML GraphQL
WPML GraphQL s’intègre à WPGraphQL et ajoute de nouveaux champs et filtres au schéma WPGraphQL.
Une fois les extensions installées, tu peux aller dans GraphQL → GraphQL IDE et utiliser le compositeur de requêtes pour interroger et filtrer facilement le Contenu dans différentes langues. Cela comprend :
- Obtenir des informations sur la langue des objets interrogés
- Obtenir des traductions pour des objets tels que les types de publication, les taxonomies et les commentaires.
- Filtrer les objets interrogés en fonction de la langue.
À titre d’exemple, l’image ci-dessous montre comment tu peux récupérer une liste de tous les Articles d’un site WordPress, y compris leur code de langue, leur slug et leur URI, ainsi que des informations similaires pour toutes les traductions de chaque Article.
Pour démontrer le fonctionnement de WPML GraphQL, nous avons configuré un site avec l’anglais défini comme langue par défaut, et l’espagnol et l’italien comme langues secondaires. Tout au long de cette page de documentation, nous utilisons ce site de test pour interroger les articles et les traductions des articles créées par WPML.
Interroger les informations sur les langues et les traductions.
WPML GraphQL te permet d’inclure des champs de langue et de traductions dans ta requête. Ce site te permet de travailler avec des nœuds et des éléments en GraphQL pour récupérer des données spécifiques à une langue et les traductions associées.
- Vous pouvez ajouter le champ langue aux requêtes pour indiquer la langue des types de publication, des taxonomies et des commentaires. Cette requête fournit de nombreuses informations linguistiques, telles que :
- Le code linguistique
- URL des drapeaux de pays
- Le nom indigène de la langue
- Le nom traduit de la langue.
- L’URL de la page d’accueil
- Tu peux utiliser le champ languageCode pour recueillir le code de la langue des articles, des termes de taxonomie et des commentaires, sans demander d’autres détails spécifiques à la langue.
- Vous pouvez utiliser le champ traductions pour récupérer les traductions des types de publication et des termes de taxonomie.
Ci-dessous, tu peux voir un exemple de requête pour les articles qui inclut ces champs.
WPML GraphQL query for posts using the language and translations fields
query Posts{
posts(where: {language: "en"}) {
nodes {
slug
uri
language {
code
}
translations {
slug
uri
language {
code
}
}
}
}
}
L’exécution de cette requête renvoie des informations sur la langue et la traduction pour chaque ressource.
WPML GraphQL outcome of the query for posts using the language and translations fields
{
"data": {
"posts": {
"nodes": [
{
"slug": "bye-world",
"uri": "/bye-world/",
"language": {
"code": "en"
},
"translations": [
{
"slug": "adios-mundo",
"uri": "/es/adios-mundo/",
"language": {
"code": "es"
}
},
{
"slug": "addio-mondo",
"uri": "/it/addio-mondo/",
"language": {
"code": "it"
}
}
]
},
{
"slug": "hello-world",
"uri": "/hello-world/",
"language": {
"code": "en"
},
"translations": [
{
"slug": "hola-mundo",
"uri": "/es/hola-mundo/",
"language": {
"code": "es"
}
},
{
"slug": "ciao-mondo",
"uri": "/it/ciao-mondo/",
"language": {
"code": "it"
}
}
]
}
]
}
}
}
Filtrage des langues
L’extension WPML GraphQL est équipée d’un filtre de langue, qui te permet d’affiner tes requêtes pour obtenir les données linguistiques exactes qui t’intéressent.
Tu peux utiliser le filtre de langue pour filtrer les articles, les termes de taxonomie ou les commentaires en fonction d’une langue spécifique. Tu peux demander des nœuds d’une langue donnée en incluant le filtre de langue dans ta requête, et tu peux aussi récupérer tous les éléments, quelle que soit la langue, en utilisant le filtre de langue avec la valeur définie sur tous.
Voici un exemple de requête qui filtre les articles en fonction de notre langue secondaire, l’espagnol :
WPML GraphQL query using the language filter
query PostsES{
posts(where: {language: "es"}) {
nodes {
slug
uri
}
}
}
Comme tu peux le voir, cette requête permet de récupérer tous les articles en espagnol.
WPML GraphQL outcome of the query using the language filter
{
"data": {
"posts": {
"nodes": [
{
"slug": "adois-mundo",
"uri": "/es/adios-mundo/"
},
{
"slug": "hola-mundo",
"uri": "/es/hola-mundo/"
}
]
}
}
}
Interroger les données des langues installées
WPML GraphQL définit deux requêtes qui te permettent d’interroger les données des langues installées sur ton site :
- Une requête sur les langues pour obtenir toutes les langues enregistrées, ainsi que les données pertinentes pour chacune d’entre elles.
- Une requête defaultLanguage pour obtenir la langue définie comme langue par défaut, ainsi que ses données pertinentes.
Cela peut être utile si tu veux, par exemple, construire un sélecteur de langue.
Disons que nous voulons interroger les données pour toutes les langues installées. Pour cela, nous lançons la requête suivante :
WPML GraphQL query to get all registered languages
query Languages {
languages {
code
country_flag_url
default_locale
native_name
translated_name
url
}
}
La requête ci-dessus produit le résultat suivant :
WPML GraphQL outcome of the query to get all registered languages
{
"data": {
"languages": [
{
"code": "en",
"country_flag_url": "http://site.com/wp-content/plugins/sitepress-multilingual-cms-release/res/flags/en.svg",
"default_locale": "en_US",
"native_name": "English",
"translated_name": "English",
"url": "http://site.com"
},
{
"code": "es",
"country_flag_url": "http://site.com/wp-content/plugins/sitepress-multilingual-cms-release/res/flags/es.svg",
"default_locale": "es_ES",
"native_name": "Español",
"translated_name": "Spanish",
"url": "http://site.com/es/"
},
{
"code": "it",
"country_flag_url": "http://site.com/wp-content/plugins/sitepress-multilingual-cms-release/res/flags/it.svg",
"default_locale": "it_IT",
"native_name": "Italiano",
"translated_name": "Italian",
"url": "http://site.com/it/"
}
]
}
}
Utiliser WPML GraphQL avec Gatsby et ACF
Le framework Gatsby te permet de collecter des données à partir de différentes sources Back-office, notamment les sites WordPress.
Si ton site WordPress utilise WP GraphQL, tu peux servir ses données à un site Gatsby. Avec WPML GraphQL installé, tu peux servir des données dans différentes langues et même récupérer des informations sur la langue.
Pour offrir des fonctionnalités supplémentaires, WP GraphQL dispose d’un module complémentaire pour les champs personnalisés avancés (ACF). En utilisant ce module complémentaire avec l’extension multilingue ACF de WPML, tu peux servir à la fois les données du cœur et celles des champs personnalisés en fonction d’exigences linguistiques spécifiques.
Prenons un exemple de scénario : Vous avez une installation Gatsby avec le module complémentairegatsby-source-graphql, qui récupère des données d’un Back-office WordPress. Dans ce Back-office WordPress, tu as la possibilité d’avoir des informations sur l’état d’avancement de ton projet :
- Tu as installé WPML avec l’espagnol défini comme langue secondaire.
- Tu as installé ACF et ajouté un groupe de champs (slug postfields) qui comprend un champ de texte (slug subtitle) pour les articles.
- Tu as rempli des données.
Avec une simple requête GraphQL, tu peux rassembler ces données.
Dans l’exemple de requête ci-dessous, nous récupérons les articles du back-office WordPress dont la langue est définie sur anglais. Pour chaque Article, nous pouvons accéder à son titre, au code de la langue et aux données du champ ACF, comme le sous-titre. En outre, nous pouvons récupérer les traductions de l’Article, y compris leurs titres, les codes de langue et les données du champ ACF.
WPML GraphQL example query for language-specific information and ACF field data
export const doQuery = graphql`
{
wordpress {
posts(where: {language: "en"}) {
nodes {
title
language {
code
}
postfields{
subtitle
}
translations {
title
language {
code
}
postfields{
subtitle
}
}
}
}
}
}
`;
Problèmes connus
WPML fonctionne bien avec ce module d'extension mais il peut parfois y avoir des problèmes mineurs sur lesquels nous travaillons. Cela est attendu car les deux modules proposent des mises à jour fréquentes.
Problèmes actuellement irrésolus :
- WPML GraphQL – No Results for Slug Queries in Secondary Languages
- WPML GraphQL – Cannot Retrieve Translated Author Metadata
- WPML GraphQL – Fails to Fetch Single Custom Post Type by Slug Based
Vous pouvez aussi rechercher parmi les problèmes connus notamment ceux ayant été résolus pour ce module d'extension.
Obtenir de l’aide
Si tu as besoin d’aide pour utiliser WPML GraphQL avec WPGraphQL, dirige-toi vers notre forum d’assistance.
