WPML GraphQL - WPGraphQL multilingue pour WordPress headless

Interrogez le contenu par langue depuis votre front-end

Chaque requête WPGraphQL gagne un argument language. Filtrez les articles, les types de publication personnalisés, les termes de taxonomie, les menus, les éléments de menu et les commentaires par langue dans un seul champ : aucun filtrage post-requête sur le front-end, aucun doublement du volume de requêtes et aucune supposition de langue.

query PostsES {
  posts(where: { language: "es" }) {
    nodes { slug uri title }
  }
}

Lorsque vous filtrez un nœud de niveau supérieur par langue, les éléments connectés (catégories, étiquettes, taxonomies personnalisées) suivent automatiquement la même langue. Les résultats sont cohérents sans arguments supplémentaires par champ imbriqué.

Vous voulez tout obtenir indépendamment de la langue pour un sitemap XML ou un compte global ? Transmettez language: "all".

Récupérez chaque traduction d’un nœud en une seule requête

Le champ translations sur les articles et les termes de taxonomie renvoie chaque version d’un nœud dans une autre langue : le slug, l’URI, le code de langue et tous les champs imbriqués que vous demandez. Une seule requête, un seul aller-retour, toutes les versions linguistiques d’une page.

Ce sont les données dont vous avez besoin pour un sélecteur de langue affiché à côté du contenu de la page lui-même, sans obliger le front-end à suivre une chaîne de requêtes associées.

Menus multilingues, taxonomies, commentaires et données de langue

Au-delà des articles, WPML GraphQL étend le même argument language et la même gestion des traductions à :

Menus et éléments de menu. menus(where: { language: "fr" }) et menuItems(where: { language: "fr" }) pour la navigation par langue.
Termes de taxonomie. Les catégories, les étiquettes et les taxonomies personnalisées suivent la langue de leur article par défaut et peuvent être interrogées directement par langue.
Commentaires. Renvoyez les commentaires associés aux articles dans une langue spécifique.
Requêtes languages et defaultLanguage. Répertoriez chaque langue installée sur le site avec son code, ses paramètres régionaux, son nom natif, l’URL de son drapeau de pays et l’URL de sa page d’accueil. Le format de données idéal pour un sélecteur de langue personnalisé.

Interrogez un article spécifique par ID ou slug, dans n’importe quelle langue

Deux formats de requête permettent d’obtenir un seul article traduit par son identifiant spécifique à la langue :

query PostBySlug {
  post(id: "hola-mundo", idType: SLUG) {
    title slug uri
  }
}

query PostById {
  post(id: "2", idType: DATABASE_ID) {
    title slug uri
  }
}

L’une ou l’autre forme renvoie l’article traduit avec son titre, son slug et son URI traduits, sans logique distincte « est-ce une traduction ? » sur le front-end.

Maintenu pour la version actuelle de WPGraphQL

Nous avons testé WPML GraphQL 5.2.0 avec WPGraphQL 2.24.1 et WPGraphQL for ACF 3.0.0. L’équipe qui gère WPGraphQL collabore avec nous afin que la couche multilingue continue d’évoluer avec le schéma. Lorsque WPGraphQL publie une nouvelle version, WPML GraphQL suit de près.

Fonctionne avec ACF lorsque vous ajoutez ACFML et WPGraphQL for ACF

De nombreux sites headless construisent leur modèle de contenu dans Advanced Custom Fields et l’exposent via WPGraphQL. Ajoutez ACFML et WPGraphQL for ACF, et vos données ACF suivront les mêmes règles de langue que le reste du schéma.

Interrogez une page d’options ACF dans n’importe quelle langue

Les pages d’options se trouvent en dehors de tout article, elles prennent donc leur propre argument language. Les sous-champs à l’intérieur des répéteurs et du contenu flexible sont également renvoyés dans cette langue. La requête ci-dessous lit le répéteur offices et le champ de contenu flexible promos. Depuis WPGraphQL for ACF 3.0.0, une page d’options n’est présente dans le schéma que lorsque vous activez show_in_graphql pour celle-ci.

query StoreSettingsES {
  storeSettings(language: "es") {
    storeContact {
      heading
      offices { city openingHours }
      promos {
        ... on StoreContactPromosBannerLayout { bannerText }
      }
    }
  }
}

Les champs de relation renvoient l’article traduit

Les champs ACF sur les articles et les types de publication personnalisés ne prennent pas leur propre argument language. Ils suivent la langue de la requête. Dans la requête ci-dessous, where: { language: "es" } définit cette langue pour l’ensemble de la requête.

Un champ de relation défini sur Copier contient déjà les ID traduits. Lorsque WPML copie le champ vers la traduction, ACFML remplace chaque ID par sa traduction. Il conserve l’ID d’origine lorsque la traduction n’existe pas encore. Vous définissez cette préférence par champ dans l’éditeur de groupe de champs ACF, sous Préférences de traduction. Consultez Champs relationnels dans notre guide sur la traduction des champs personnalisés ACF.

query BlendsES {
  posts(where: { language: "es" }) {
    nodes {
      title
      postExtras {
        relatedGuide {
          nodes { ... on Post { title languageCode } }
        }
      }
    }
  }
}

L’article en espagnol renvoie le guide en espagnol.

Définissez la langue sur chaque requête. Une requête qui lit un article par ID ou par slug ne comporte aucun filtre language. Elle s’exécute alors dans la langue par défaut, et les articles liés sont également renvoyés dans la langue par défaut.

La façon dont vous définissez la langue dépend de votre format d’URL WPML. Avec un domaine par langue, appelez le point de terminaison de cette langue : https://es.example.com/graphql. Avec le paramètre de langue, ajoutez-le au point de terminaison : /graphql?lang=es. Le format par répertoire n’a pas de point de terminaison par langue, vous devez donc filtrer par langue à l’intérieur de la requête.

Lorsqu’une traduction est manquante

WPML ne se rabat pas sur la langue par défaut. Si un article lié n’a pas de traduction dans la langue de la requête, il est exclu du résultat :

{
  "data": {
    "posts": {
      "nodes": [
        {
          "title": "Nuestras mezclas de la casa",
          "postExtras": {
            "relatedGuide": {
              "nodes": [
                { "title": "Guía de compra de espresso", "languageCode": "es" }
              ]
            }
          }
        }
      ]
    }
  }
}

Le champ pointe vers deux guides. Un seul d’entre eux est traduit en espagnol, la requête en espagnol n’en renvoie donc qu’un seul. Votre front-end obtient une liste plus courte, jamais un mélange de langues. Traduisez l’article manquant et il apparaîtra dans la même requête.

La liste reste dans une seule langue lorsque le type de publication est traduisible. Si vous définissez le type de publication sur Afficher comme traduit, WPML renvoie le guide non traduit dans la langue par défaut. La liste mélange alors les langues.

WPML GraphQL – WPGraphQL multilingue pour WordPress headless