Pular a navegação

Home » Documentação do WPML » Projetos relacionados » WPML GraphQL – Adicione a funcionalidade multilíngue ao esquema WPGraphQL

WPML GraphQL – Adicione a funcionalidade multilíngue ao esquema WPGraphQL

WPML GraphQL amplia os recursos do plug-in WPGraphQL, tornando-o a solução ideal para desenvolvedores que desejam criar sites multilíngues usando tecnologias de front-end. Experimente a facilidade de consultar e filtrar conteúdo e recuperar dados e traduções específicos do idioma diretamente do esquema WPGraphQL.

Principais recursos

Estenda o WPGraphQL com campos adicionais(idioma, código de idioma, traduções) para recuperar dados específicos do plug-in WPML

Filtrar conteúdo dentro do esquema Gatsby GraphQL

Filtrar postagens, taxonomias e comentários por idioma

Recuperar dados de linguagem para objetos e nós

Consultar dados com base em todos os idiomas instalados ou em idiomas específicos

Funciona com ACF, ACFML e WPGraphQL para campos personalizados avançados

Nesta página:

Plug-ins necessários e configuração

Para começar, instale e ative os seguintes plug-ins:

Se você estiver executando um site com ACF ou ACF Pro e quiser expor campos multilíngues do plug-in ACF ao esquema WPGraphQL, instale e ative:

Explorando o esquema WPML GraphQL

WPML GraphQL se integra ao WPGraphQL e adiciona novos campos e filtros ao esquema do WPGraphQL.

Depois de instalar os plug-ins, você pode ir para GraphQL → GraphQL IDE e usar o Query Composer para consultar e filtrar facilmente o conteúdo em diferentes idiomas. Isso inclui:

  • Obter informações sobre o idioma dos objetos consultados
  • Obter traduções para objetos como tipos de post, taxonomias e comentários.
  • Filtragem dos objetos consultados por idioma

Como exemplo, a imagem abaixo mostra como você pode recuperar uma lista de todas as postagens em um site WordPress, incluindo o código do idioma, o slug e o URI, bem como informações semelhantes para todas as traduções de cada postagem.

Usando os campos de idioma no Query Composer para recuperar posts em todos os idiomas

Para demonstrar como o WPML GraphQL funciona, configuramos um site com o inglês definido como o idioma padrão e o espanhol e o italiano como os idiomas secundários. Ao longo desta página de documentação, usamos esse site de teste para consultar os posts e as traduções de posts criadas pelo WPML.

Consulta de informações sobre idiomas e traduções

WPML GraphQL permite que você inclua campos de idioma e traduções em sua consulta. Este permite que você trabalhe com nós e elementos no GraphQL para recuperar dados específicos do idioma e traduções associadas.

  • Você pode adicionar o campo de idioma às consultas para indicar o idioma dos tipos de post, taxonomias e comentários. Essa consulta fornece informações abrangentes sobre o idioma, como:
    • O código do idioma
    • URLs de bandeiras de países
    • O nome nativo do idioma
    • O nome traduzido do idioma
    • O URL da página inicial
  • Você pode usar o campo languageCode para coletar o código de idioma de posts, termos de taxonomia e comentários, sem solicitar nenhum outro detalhe específico do idioma.
  • Você pode usar o campo de traduções para recuperar traduções de tipos de post e termos de taxonomia.

Abaixo, você pode ver um exemplo de uma consulta de posts que inclui esses 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
        }
      }
    }
  }
}

A execução dessa consulta retorna informações de idioma e tradução para 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"
              }
            }
          ]
        }
      ]
    }
  }
}

Filtragem de idiomas

O plugin WPML GraphQL vem equipado com um filtro de idioma, que permite refinar suas consultas para obter os dados exatos do idioma em que você está interessado.

Você pode usar o filtro de idioma para filtrar posts, termos de taxonomia ou comentários com base em um idioma específico. Você pode solicitar nós de um determinado idioma incluindo o filtro de idioma em sua consulta e também pode recuperar todos os itens, independentemente do idioma, usando o filtro de idioma com o valor definido como all.

Aqui está um exemplo de consulta que filtra as postagens por nosso idioma secundário, o espanhol:

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

Como você pode ver, essa consulta obtém todas as postagens em espanhol.

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 dados de idiomas instalados

WPML GraphQL define duas consultas que permitem que você consulte dados dos idiomas instalados em seu site:

  • Uma consulta de idiomas para obter todos os idiomas registrados, juntamente com os dados relevantes de cada um deles.
  • Uma consulta defaultLanguage para obter o idioma definido como o idioma padrão, juntamente com seus dados relevantes.

Isso pode ser útil se você quiser, por exemplo, criar um alternador de idiomas.

Digamos que você queira consultar os dados de todos os idiomas instalados. Para isso, executamos a seguinte consulta:

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

A consulta acima produz o seguinte 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/"
      }
    ]
  }
}

Usando o WPML GraphQL com Gatsby e ACF

A estrutura do Gatsby permite que você colete dados de diferentes fontes de back-end, incluindo sites WordPress.

Se o seu site WordPress estiver usando o WP GraphQL, você poderá fornecer os dados dele a um site Gatsby. Com o WPML GraphQL instalado, você pode fornecer dados em diferentes idiomas e até mesmo recuperar informações sobre o idioma.

Para oferecer funcionalidade adicional, o WP GraphQL tem um complemento para Advanced Custom Fields (ACF). Ao usar esse complemento junto com o plugin ACF Multilingual do WPML, você pode fornecer dados principais e dados de campos personalizados com base em requisitos específicos de idioma.

Vamos considerar um cenário de exemplo: Você tem uma instalação do Gatsby com o pacote complementargatsby-source-graphql, que recupera dados de um backend WordPress. Nesse back-end WordPress:

  1. Você tem WPML instalado com o espanhol definido como o idioma secundário.
  2. Você tem o ACF instalado e adicionou um grupo de campos (slug postfields) que inclui um campo de texto (slug subtitle) para postagens.
  3. Você preencheu alguns dados.

Com uma simples consulta GraphQL, você pode coletar esses dados.

No exemplo de consulta abaixo, recuperamos posts do backend WordPress em que o idioma está definido como inglês. Para cada publicação, podemos acessar o título, o código do idioma e os dados do campo ACF, como o subtítulo. Além disso, podemos recuperar traduções da postagem, incluindo seus títulos, códigos de idioma e dados de campo do 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 conhecidos

O WPML funciona bem com este plugin, mas às vezes pode haver problemas menores, os quais estamos trabalhando para resolver. Isso é esperado, já que ambos os plugins oferecem atualizações frequentes.

Problemas atuais não resolvidos:

Você também pode pesquisar todos os problemas conhecidos deste plugin, inclusive os resolvidos anteriormente.

Obtendo suporte

Se você precisar de ajuda para usar o WPML GraphQL com o WPGraphQL, acesse nosso fórum de suporte.

Documentação do WPML
Kathy Banach
Atualizado
junho 6, 2024