WPML GraphQL – WPGraphQL multilingüe para WordPress headless

Consulte el contenido por idioma desde su front-end

Cada consulta de WPGraphQL obtiene un argumento language. Filtre entradas, tipos de contenido personalizado, términos de taxonomía, menús, elementos del menú y comentarios por idioma en un solo campo: sin filtrado posterior a la consulta en el front-end, sin duplicar el volumen de peticiones y sin adivinar el idioma.

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

Cuando filtra un nodo de nivel superior por idioma, los elementos conectados (categorías, etiquetas, taxonomías personalizadas) siguen automáticamente el mismo idioma. Los resultados son coherentes sin necesidad de argumentos adicionales por cada campo anidado.

¿Quiere todo independientemente del idioma para un sitemap o un recuento total? Pase language: "all".

Obtenga todas las traducciones de un nodo en una sola consulta

El campo translations en entradas y términos de taxonomía devuelve todas las versiones en otros idiomas de un nodo: slug, URI, código de idioma y cualquier campo anidado que solicite. Una consulta, un viaje de ida y vuelta, todas las versiones de idioma de una página.

Estos son los datos que necesita para un selector de idiomas renderizado junto al propio contenido de la página, sin hacer que el front-end siga una cadena de consultas relacionadas.

Menús multilingües, taxonomías, comentarios y datos de idioma

Más allá de las entradas, WPML GraphQL amplía el mismo argumento language y el manejo de traducciones a:

• Menús y elementos del menú. menus(where: { language: "fr" }) y menuItems(where: { language: "fr" }) para la navegación por idioma.
• Términos de taxonomía. Las categorías, etiquetas y taxonomías personalizadas siguen el idioma de su entrada de forma predeterminada y se pueden consultar por idioma directamente.
• Comentarios. Devuelva los comentarios asociados a las entradas en un idioma específico.
• Consultas languages y defaultLanguage. Enumere cada idioma instalado en el sitio con su código, configuración regional, nombre nativo, URL de la bandera del país y URL de inicio. La estructura de datos adecuada para un selector de idiomas personalizado.

Consulte una entrada específica por ID o slug, en cualquier idioma

Dos formas de consulta obtienen una sola entrada traducida por su identificador específico del idioma:

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

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

Cualquiera de las dos formas devuelve la entrada traducida con su título, slug y URI traducidos, sin necesidad de una lógica separada de «¿es esto una traducción?» en el front-end.

Mantenido para la versión actual de WPGraphQL

Hemos probado WPML GraphQL 5.2.0 con WPGraphQL 2.24.1 y WPGraphQL for ACF 3.0.0. El equipo que mantiene WPGraphQL trabaja con nosotros para que la capa multilingüe siga avanzando con el esquema. Cuando WPGraphQL publica una nueva versión, WPML GraphQL le sigue de cerca.

Funciona con ACF al añadir ACFML y WPGraphQL for ACF

Muchos sitios headless construyen su modelo de contenido en Advanced Custom Fields y lo exponen a través de WPGraphQL. Añada ACFML y WPGraphQL for ACF, y sus datos de ACF seguirán las mismas reglas de idioma que el resto del esquema.

Consulte una página de opciones de ACF en cualquier idioma

Las páginas de opciones se sitúan fuera de cualquier entrada, por lo que toman su propio argumento language. Los subcampos dentro de los repetidores y el contenido flexible también se devuelven en ese idioma. La siguiente consulta lee el repetidor offices y el campo de contenido flexible promos. Desde WPGraphQL for ACF 3.0.0, una página de opciones está en el esquema solo cuando se activa show_in_graphql para ella.

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

Los campos de relación devuelven la entrada traducida

Los campos de ACF en entradas y tipos de contenido personalizado no toman su propio argumento language. Siguen el idioma de la petición. En la siguiente consulta, where: { language: "es" } establece ese idioma para toda la consulta.

Un campo de relación configurado en Copiar ya contiene los ID traducidos. Cuando WPML copia el campo a la traducción, ACFML intercambia cada ID por su traducción. Mantiene el ID original cuando la traducción aún no existe. Puede establecer esta preferencia por campo en el editor de grupos de campos de ACF, en Preferencias de traducción. Consulte Campos relacionales en nuestra guía para traducir campos personalizados de ACF.

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

La entrada en español devuelve la guía en español.

Establezca el idioma en cada petición. Una consulta que lee una entrada por ID o slug no lleva un filtro language. Entonces se ejecuta en el idioma predeterminado, y las entradas relacionadas también se devuelven en el idioma predeterminado.

La forma de establecer el idioma depende de su formato de URL de WPML. Con un dominio por idioma, llame al endpoint de ese idioma: https://es.example.com/graphql. Con el parámetro de idioma, añádalo al endpoint: /graphql?lang=es. El formato de directorios no tiene un endpoint por idioma, así que filtre por idioma dentro de la consulta.

Cuando falta una traducción

WPML no recurre al idioma predeterminado. Si una entrada relacionada no tiene traducción en el idioma de la petición, se excluye del resultado:

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

El campo apunta a dos guías. Solo una de ellas está traducida al español, por lo que la consulta en español devuelve una. Su front-end obtiene una lista más corta, nunca una mezcla de idiomas. Traduzca la entrada que falta y aparecerá en la misma consulta.

La lista se mantiene en un idioma cuando el tipo de contenido es traducible. Si configura el tipo de contenido como Mostrar como traducido, WPML devuelve la guía sin traducir en el idioma predeterminado. La lista entonces mezcla idiomas.