Saltar navegación

Home » Documentación de WPML » Proyectos relacionados » WPML GraphQL – Añadir Funcionalidad Multilingüe al Esquema de WPGraphQL

WPML GraphQL – Añadir Funcionalidad Multilingüe al Esquema de WPGraphQL

WPML GraphQL le permite consultar, filtrar y recuperar contenido específico de un idioma y traducciones del esquema de WPGraphQL.

Características principales

Filtrar contenido por idioma, incluyendo publicaciones, taxonomías, comentarios, menús y elementos de menú

Extender WPGraphQL con campos de idioma para recuperar datos específicos del plugin WPML

Consultar datos en todos los idiomas instalados o centrarse en idiomas específicos

En esta Página:

Extensiones necesarias

Para empezar, instala y activa las siguientes extensiones:

  • WPGraphQL
  • WPML
  • WPML String Translation
  • WPML GraphQL

Para incluir campos multilingües del plugin ACF en el esquema de WPGraphQL, también instale:

¿Qué Puede Hacer con WPML GraphQL?

WPML GraphQL se integra con WPGraphQL para permitirle consultar contenido multilingüe creado con WPML.

Desde GraphQL → GraphQL IDE, puede usar el Query Composer para:

  • Obtener información de idioma para cualquier contenido que consulte
  • Acceder a traducciones de publicaciones, taxonomías y comentarios
  • Filtrar sus consultas por idioma
  • Consultar publicaciones específicas a través de idiomas por su ID o slug

Por ejemplo, como muestra la imagen a continuación, puede obtener fácilmente una lista de todas las publicaciones en su sitio, completa con sus códigos de idioma, slugs, URIs y detalles de sus traducciones.

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

A continuación, utilizaremos un sitio de prueba multilingüe para mostrarle cómo usar WPML GraphQL para consultar contenido y sus traducciones.

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

Con WPML GraphQL, puede usar los campos idioma y traducción en sus consultas:

  • El campo language le permite recuperar detalles como el código de idioma, la URL de la bandera del país, el nombre nativo, el nombre traducido y la URL de la página de inicio para tipos de publicaciones, taxonomías, menús, elementos de menú y comentarios.
  • El campo languageCode obtiene el código de idioma para publicaciones, términos de taxonomía, menús, elementos de menú y comentarios sin detalles adicionales de idioma.
  • El campo translations recupera traducciones para tipos de publicaciones y términos de taxonomía.

Cuando consulta comentarios, los campos language y languageCode coinciden con el idioma de la publicación a la que pertenecen.

Aquí hay un ejemplo de una consulta que recupera publicaciones junto con sus detalles asociados, incluyendo el slug de la publicación, URI, código de idioma, categorías y cualquier traducción existente:

query Posts{
  posts(where: {language: "en"}) {
    nodes {
      slug
      uri
      language {
        code
      }
      categories {
        nodes {
          name
        }
      }
      translations {
        slug
        uri
        language {
          code
        }
        categories {
          nodes {
            name
          }
        }
      }
    }
  }
}

Ejecutar esta consulta devuelve información de idioma y traducción para cada publicación, junto con elementos conectados como categorías. Las conexiones siguen automáticamente el idioma del elemento de nivel superior (publicaciones en este caso): 

{
  "data": {
    "posts": {
      "nodes": [
        {
          "slug": "bye-world",
          "uri": "/2023/05/18/bye-world/",
          "language": {
            "code": "en"
          },
          "categories": {
            "nodes": [
              {
                "name": "End of the day"
              },
              {
                "name": "Greetings"
              }
            ]
          },
          "translations": [
            {
              "slug": "adios-mundo",
              "uri": "/es/2023/05/18/adios-mundo/",
              "language": {
                "code": "es"
              },
              "categories": {
                "nodes": [
                  {
                    "name": "Fin del día"
                  },
                  {
                    "name": "Saludos"
                  }
                ]
              }
            },
            {
              "slug": "tchau-mundo",
              "uri": "/pt-pt/2023/05/18/tchau-mundo/",
              "language": {
                "code": "pt-pt"
              },
              "categories": {
                "nodes": [
                  {
                    "name": "Fim do dia"
                  },
                  {
                    "name": "Saudações"
                  }
                ]
              }
            }
          ]
        },
        {
          "slug": "hello-world",
          "uri": "/2018/07/05/hello-world/",
          "language": {
            "code": "en"
          },
          "categories": {
            "nodes": [
              {
                "name": "Greetings"
              },
              {
                "name": "Start of the day"
              }
            ]
          },
          "translations": [
            {
              "slug": "hola-mundo",
              "uri": "/es/2018/07/05/hola-mundo/",
              "language": {
                "code": "es"
              },
              "categories": {
                "nodes": [
                  {
                    "name": "Inicio del día"
                  },
                  {
                    "name": "Saludos"
                  }
                ]
              }
            },
            {
              "slug": "ola-mundo",
              "uri": "/pt-pt/2018/07/05/ola-mundo/",
              "language": {
                "code": "pt-pt"
              },
              "categories": {
                "nodes": [
                  {
                    "name": "Começo do dia"
                  },
                  {
                    "name": "Saudações"
                  }
                ]
              }
            }
          ]
        }
      ]
    }
  }
}

Filtrado de idiomas

WPML GraphQL le permite usar el filtro idioma para:

  • Filtrar publicaciones, términos de taxonomía, menús, elementos de menú o comentarios por un idioma específico
  • Recuperar contenido en un idioma particular configurando el filtro en consecuencia
  • Obtener todo el contenido, independientemente del idioma, configurando el valor del filtro en todo

WPML GraphQL admite conexiones, por lo que cuando filtra un elemento de nivel superior como una publicación por idioma, todos los elementos relacionados, como categorías y etiquetas, seguirán automáticamente el mismo idioma. Esto hace que sus consultas sean consistentes y precisas.

Aquí hay un ejemplo de una consulta que recupera publicaciones en español, incluyendo sus slugs, URIs y categorías conectadas:

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

Esto es lo que devuelve la consulta:

{
  "data": {
    "posts": {
      "nodes": [
        {
          "slug": "adios-mundo",
          "uri": "/es/2023/05/18/adios-mundo/",
          "categories": {
            "nodes": [
              {
                "name": "Fin del día"
              },
              {
                "name": "Saludos"
              }
            ]
          }
        },
        {
          "slug": "hola-mundo",
          "uri": "/es/2018/07/05/hola-mundo/",
          "categories": {
            "nodes": [
              {
                "name": "Inicio del día"
              },
              {
                "name": "Saludos"
              }
            ]
          }
        }
      ]
    }
  }
}

Consultando Publicaciones Específicas a Través de Idiomas

Con WPMLGraphQL, también puede consultar publicaciones individuales en cualquier idioma por su ID de publicación o slug.

Por ejemplo, si tiene una publicación titulada ¡Hola mundo! (la traducción al español de Hello world!), con un slug de hola-mundo y un ID de publicación de 2, puede usar las siguientes consultas para recuperar la publicación:

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

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

Ambas consultas devolverán correctamente los datos de la publicación, incluyendo el título, el slug y el URI, para la publicación ¡Hola mundo!: 

{
  "data": {
    "post": {
      "title": "¡Hola mundo!",
      "slug": "hola-mundo",
      "uri": "/es/2018/07/05/hola-mundo/"
    }
  }
}

Consulta de datos de los idiomas instalados

WPML GraphQL proporciona dos consultas para acceder a los datos sobre los idiomas instalados en su sitio:

  • La consulta languages recupera todos los idiomas registrados junto con los datos relevantes para cada uno
  • La consulta defaultLanguage recupera información sobre el idioma predeterminado configurado en su sitio

Estas consultas pueden ser útiles si está buscando construir características como un conmutador de idiomas.

Por ejemplo, para obtener datos de todos los idiomas instalados, puede ejecutar la siguiente consulta:

query Languages {
  languages {
    code
    country_flag_url
    default_locale
    native_name
    translated_name
    url
  }
}

La consulta anterior produce el siguiente resultado:

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

Usando WPML GraphQL con Gatsby y ACF

Gatsby le permite obtener datos de WordPress, y con WPML GraphQL, puede servir contenido multilingüe y datos específicos de idiomas a su sitio Gatsby.

Si está utilizando WP GraphQL con el plugin ACF, WPML GraphQL y ACF Multilingual extienden esta funcionalidad, permitiéndole consultar datos de campos personalizados en diferentes idiomas.

Por ejemplo, supongamos que tiene una instalación de Gatsby con el paquete de complemento gatsby-source-graphql, y su sitio WordPress tiene WPML (con el español como idioma secundario) y ACF instalados.

Puede recuperar publicaciones multilingües con sus títulos, códigos de idioma y campos personalizados de ACF en Gatsby utilizando una simple consulta GraphQL.

export const doQuery = graphql`
  {
    wordpress {
      posts(where: {language: "en"}) {
        nodes {
          title
          language {
            code
          }
          postfields{
            subtitle
          }
          translations {
            title
            language {
              code
            }
            postfields{
              subtitle
            }
          }
        }
      }
    }
  }
`;

Comience con WPML GraphQL

Para usar WPML GraphQL, necesita un plan WPML Multilingual CMS o WPML Multilingual Agency. Ambos planes proporcionan acceso al plugin WPML y una amplia gama de complementos adicionales, todos incluidos sin costo adicional.

Vea qué plan es mejor para su sitio.

¿Necesita ayuda?

Si tiene problemas para usar WPML GraphQL, visite nuestra página de Problemas conocidos y soluciones para obtener consejos de solución de problemas.

¿Aún necesita ayuda? Envíe un ticket de soporte.

Documentación de WPML
Kathy Banach
Actualizado
noviembre 28, 2024