Saltar navegación

Home » Documentación de WPML » Proyectos relacionados » WPML GraphQL – Añade funcionalidad multilingüe al esquema WPGraphQL

WPML GraphQL – Añade funcionalidad multilingüe al esquema WPGraphQL

WPML GraphQL amplía las capacidades del plugin WPGraphQL, convirtiéndolo en la solución ideal para los desarrolladores que deseen crear webs multilingües utilizando tecnologías front-end. Experimente la facilidad de consultar y filtrar contenidos y de recuperar datos y traducciones específicos de cada idioma directamente desde el esquema WPGraphQL.

Características principales

Extender WPGraphQL con campos adicionales(idioma, código de idioma, traducciones) para recuperar datos específicos del plugin WPML

Filtrar contenido dentro del esquema GraphQL de Gatsby

Filtrar entradas, taxonomías y comentarios por idioma

Recuperar datos lingüísticos de objetos y nodos

Consulta de datos basada en todos los idiomas instalados o en idiomas específicos

Funciona con ACF, ACFML y WPGraphQL para campos personalizados avanzados

En esta Página:

Plugins necesarios y configuración

Para empezar, instala y activa las siguientes extensiones:

Si estás ejecutando un sitio con ACF o ACF Pro y quieres exponer campos multilingües desde la extensión ACF al esquema WPGraphQL, instálalo y actívalo:

Explorar el esquema WPML GraphQL

WPML GraphQL se integra con WPGraphQL y añade nuevos campos y filtros al esquema WPGraphQL.

Una vez instaladas las extensiones, puedes ir a GraphQL → GraphQL IDE y utilizar el Compositor de consultas para consultar y filtrar fácilmente contenidos en distintos idiomas. Esto incluye:

  • Obtener información sobre el idioma de los objetos consultados
  • Obtención de traducciones para objetos como Tipos de contenido, Taxonomías y Comentarios.
  • Filtrar los objetos consultados por idioma

Como ejemplo, la imagen de abajo muestra cómo puedes recuperar una lista de todas las entradas de un sitio de WordPress, incluyendo su código de idioma, slug y URI, así como información similar para cualquier traducción de cada entrada.

Uso de los campos de idioma en el compositor de consultas para recuperar entradas en todos los idiomas

Para demostrar cómo funciona WPML GraphQL, creamos un sitio con el inglés como idioma por defecto y el español y el italiano como idiomas secundarios. A lo largo de esta página de documentación, utilizamos este sitio de prueba para consultar las entradas y las traducciones de entradas creadas por WPML.

Consulta de información lingüística y de traducción

WPML GraphQL te permite incluir campos de idioma y traducciones en tu consulta. Este te permite trabajar con nodos y elementos en GraphQL para recuperar datos específicos del idioma y las traducciones asociadas.

  • Puede añadir el campo de idioma a las consultas para indicar el idioma de los tipos de entradas, taxonomías y comentarios. Esta consulta proporciona amplia información lingüística, como:
    • El código lingüístico
    • URL de banderas de países
    • El nombre nativo de la lengua
    • El nombre traducido de la lengua
    • La URL de la página de inicio
  • Puede utilizar el campo languageCode para recoger el código de idioma de las Entradas, términos de Taxonomía y comentarios, sin solicitar ningún otro detalle específico del idioma.
  • Puede utilizar el campo de traducciones para recuperar traducciones de tipos de entradas y términos de Taxonomía.

A continuación, puede ver un ejemplo de consulta de entradas que incluye estos campos.

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
        }
      }
    }
  }
}

Al ejecutar esta consulta se obtiene información sobre el idioma y la traducción de cada recurso.

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"
              }
            }
          ]
        }
      ]
    }
  }
}

Filtrado de idiomas

La extensión WPML GraphQL viene equipada con un filtro de idioma, que te permite refinar tus consultas para obtener los datos exactos del idioma que te interesan.

Puede utilizar el filtro de idioma para filtrar entradas, términos de Taxonomía o comentarios basándose en un idioma específico. Puede solicitar nodos de un idioma determinado incluyendo el filtro de idioma en su consulta, y también puede recuperar todos los elementos, independientemente del idioma, utilizando el filtro de idioma con el valor establecido en todos.

He aquí un ejemplo de consulta que filtra las entradas por nuestro idioma secundario, el español:

WPML GraphQL query using the language filter
query PostsES{
  posts(where: {language: "es"}) {
    nodes {
      slug
      uri
    }
  }
}

Como puede ver, esta consulta recupera todas las entradas en español.

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/"
        }
      ]
    }
  }
}

Consulta de datos de los idiomas instalados

WPML GraphQL define dos consultas que te permiten consultar datos de los idiomas instalados en tu sitio:

  • Una consulta de idiomas para obtener todos los idiomas registrados, junto con los datos relevantes de cada uno de ellos.
  • Una consulta a defaultLanguage para obtener el idioma establecido como idioma por defecto, junto con sus datos relevantes.

Esto puede ser útil si quieres, por ejemplo, construir un selector de idioma.

Supongamos que queremos consultar los datos de todos los idiomas instalados. Para ello, ejecutamos la siguiente consulta:

WPML GraphQL query to get all registered languages
query Languages {
  languages {
    code
    country_flag_url
    default_locale
    native_name
    translated_name
    url
  }
}

La consulta anterior produce el siguiente resultado:

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/"
      }
    ]
  }
}

Utilizar WPML GraphQL con Gatsby y ACF

El framework Gatsby permite recopilar datos de diferentes orígenes, incluidos los sitios de WordPress.

Si tu sitio WordPress utiliza WP GraphQL, puedes servir sus datos a un sitio Gatsby. Con WPML GraphQL instalado, puedes servir datos en diferentes idiomas e incluso recuperar información sobre el idioma.

Para proporcionar una funcionalidad adicional, WP GraphQL tiene una extensión para Campos personalizados avanzados (ACF). Al utilizar esta extensión junto con el plugin ACF Multilingual de WPML, puedes servir tanto datos del núcleo como datos de campos personalizados en función de los requisitos específicos de cada idioma.

Consideremos un escenario de ejemplo: Tienes una instalación de Gatsby con el paquete de extensióngatsby-source-graphql, que recupera datos de un backend de WordPress. En esta Administración de WordPress:

  1. Tiene instalado WPML con el español como idioma secundario.
  2. Tienes ACF instalado y has añadido un grupo de campos (slug postfields) que incluye un campo de texto (slug subtítulo) para las entradas.
  3. Ha rellenado algunos datos.

Con una simple consulta GraphQL, puede recopilar estos datos.

En la consulta de ejemplo que se muestra a continuación, recuperamos entradas del backend de WordPress en las que el idioma está configurado en inglés. Para cada Entrada, podemos acceder a su título, código de idioma y datos de campo ACF, como el subtítulo. Además, podemos recuperar las traducciones de la Entrada, incluidos sus títulos, códigos de idioma y datos de campo 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
            }
          }
        }
      }
    }
  }
`;

Problemas detectados

WPML funciona bien con este plugin, sin embargo, algunas veces podrían ocurrir problemas menores, que ya estamos atendiendo. Esto es de esperarse, ya que ambos plugines se actualizan ocn frecuencia.

Problemas sin resolver:

También puede buscar todos los problemas conocidos, incluidos los problemas resueltos anteriormente para este plugin.

Obtener apoyo

Si necesitas ayuda para utilizar WPML GraphQL con WPGraphQL, dirígete a nuestro foro de soporte.

Documentación de WPML
Actualizado
enero 18, 2024