En esta Página:
- Plugins necesarios y configuración
- Explorar el esquema WPML GraphQL
- Consulta de información lingüística y de traducción
- Filtrado de idiomas
- Consulta de datos de los idiomas instalados
- Utilizar WPML GraphQL con Gatsby y ACF
- Problemas conocidos
- Obtener apoyo
Plugins necesarios y configuración
Para empezar, instala y activa las siguientes extensiones:
- Plugin principal WPML y complemento String Translation
- Extensión WPGraphQL
- Extensión WPML GraphQL
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:
- Extensión Advanced Custom Fields Multilingual (ACFML )
- WPGraphQL para la extensión de campos personalizados avanzados
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.
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:
- Tiene instalado WPML con el español como idioma secundario.
- 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.
- 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:
- WPML GraphQL – No Results for Slug Queries in Secondary Languages
- WPML GraphQL – Cannot Retrieve Translated Author Metadata
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.
