Skip Navigation

Home » Documentation WPML » Projets connexes » WPML GraphQL – Ajouter des fonctionnalités multilingues au schéma WPGraphQL

WPML GraphQL – Ajouter des fonctionnalités multilingues au schéma WPGraphQL

WPML GraphQL étend les capacités de l’extension WPGraphQL, ce qui en fait la solution idéale pour les développeurs qui cherchent à créer des sites web multilingues à l’aide de technologies front-office. Fais l’expérience de la facilité d’interrogation et de filtrage du contenu et de la récupération des données spécifiques à la langue et des traductions directement à partir du schéma WPGraphQL.

Principales fonctionnalités

Étends WPGraphQL avec des champs supplémentaires(langue, code de langue, traductions) pour récupérer des données spécifiques de l’extension WPML.

Filtre le contenu dans le schéma GraphQL de Gatsby.

Filtre les articles, les taxonomies et les commentaires par langue.

Récupérer les données linguistiques des objets et des nœuds

Interroge les données en fonction de toutes les langues installées ou de langues spécifiques.

Fonctionne avec ACF, ACFML et WPGraphQL pour les champs personnalisés avancés.

Sur cette Page :

Plugins requis et configuration

Pour commencer, installe et active les extensions suivantes :

  • Le plugin principal WPML et le module complémentaire String Translation
  • 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 :

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.

Utilisation des champs de langue dans le compositeur de requêtes pour récupérer les articles dans toutes les langues.

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.

  • Tu peux 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.
  • Tu peux utiliser le champ des traductions pour récupérer les traductions des types de publication et des champs 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 : Tu as une installation Gatsby avec le module complémentairegatsby-source-graphql, qui récupère les 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 :

  1. Tu as installé WPML avec l’espagnol défini comme langue secondaire.
  2. Tu as installé ACF et ajouté un groupe de champs (slug postfields) qui comprend un champ de texte (slug subtitle) pour les articles.
  3. 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 :

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.

Mis à jour
janvier 18, 2024