跳过导航

Home » WPML文档 » 相关项目 » WPML GraphQL- 为 WPGraphQL 模式添加多语言功能

WPML GraphQL- 为 WPGraphQL 模式添加多语言功能

WPML GraphQL扩展了 WPGraphQL 插件的功能，是希望使用前端技术创建多语言网站的开发人员的理想解决方案。 体验直接从 WPGraphQL 模式中查询和过滤内容以及检索特定语言数据和翻译的便捷性。

主要功能

使用附加字段（语言、语言代码、翻译）扩展 WPGraphQL，以便从WPML插件中检索特定数据

过滤 Gatsby GraphQL 模式中的内容

按语言过滤帖子、分类标准和评论

读取对象和节点的语言数据

根据所有已安装的语言或特定语言查询数据

与 ACF、ACFML 和 WPGraphQL 配合使用高级自定义字段

在本页：

所需插件和设置

要开始使用，请安装并激活以下插件：

如果您正在使用 ACF 或 ACF Pro 运行网站，并希望将 ACF 插件中的多语言字段公开到 WPGraphQL 模式，请安装并激活：

探索WPML GraphQL模式

WPML GraphQL与 WPGraphQL 集成，为 WPGraphQL 模式添加了新字段和过滤器。

安装插件后，您可以进入GraphQL → GraphQL IDE，使用查询合成器轻松查询和过滤不同语言的内容。 这包括：

  • 获取查询对象的语言信息
  • 获取帖子类型、分类标准和评论等对象的翻译。
  • 按语言筛选查询对象

例如，下图显示了如何检索WordPress网站上所有帖子的列表，包括它们的语言代码、slug 和 URI，以及每个帖子的任何翻译的类似信息。

使用查询组合器中的语言字段检索所有语言的帖子

为了演示WPML GraphQL如何工作，我们建立了一个网站，将英语设为默认语言，西班牙语和意大利语设为辅助语言。 在整个文档页面中，我们使用该测试网站来查询帖子和WPML 创建的帖子翻译。

查询语言和翻译信息

WPML GraphQL可让您在查询中包含语言 和 翻译 字段。 通过 ，您可以使用 GraphQL 中的节点和元素来检索特定语言的数据和相关翻译。

  • 您可以在查询中添加语言字段，以显示文章类型、分类标准和评论的语言。 该查询提供了大量语言信息，例如
    • 语言代码
    • 国旗 URL
    • 母语名称
    • 翻译后的语言名称
    • 主页 URL
  • 您可以使用languageCode字段来收集帖子、分类术语和评论的语言代码，而无需请求任何其他特定语言的详细信息。
  • 您可以使用翻译字段检索帖子类型和分类术语的翻译。

下面是一个包含这些字段的帖子查询示例。

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

运行此查询可返回每个资源的语言和翻译信息。

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

语言过滤

WPML GraphQL插件配备了一个语言过滤器，让您可以细化您的查询，以获得您感兴趣的确切语言数据。

您可以使用语言过滤器，根据特定语言过滤帖子、分类术语或评论。 通过在查询中加入语言过滤器，您可以请求特定语言的节点；通过使用语言过滤器并将其值设为全部，您也可以检索所有项目，无论其使用哪种语言。

下面是一个按我们的第二语言（西班牙语）过滤帖子的查询示例：

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

如您所见，该查询可获取所有西班牙语帖子。

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

从已安装的语言中查询数据

WPML GraphQL定义了两个查询，可让您从网站上安装的语言中查询数据：

  • 语言查询可获取所有注册语言以及每种语言的相关数据。
  • defaultLanguage查询可获取设置为默认语言的语言及其相关数据。

例如，如果您想建立一个语言切换器，这可能会很有用。

假设我们要查询所有已安装语言的数据。 为此，我们运行以下查询：

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

上述查询结果如下：

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

将WPML GraphQL与 Gatsby 和 ACF 结合使用

Gatsby 框架允许您从不同的后台来源（包括WordPress网站）收集数据。

如果你的WordPress网站使用的是 WP GraphQL，你可以将其数据提供给 Gatsby 网站。 安装WPML GraphQL后，您可以用不同语言提供数据，甚至可以检索语言信息。

为了提供更多功能，WP GraphQL 提供了高级自定义字段 (ACF) 的附加功能。 通过将此插件与WPML 的 ACF 多语言插件一起使用，您可以根据特定语言要求提供核心数据和自定义字段数据。

让我们来看一个例子：您有一个安装了gatsby-source-graphql附加软件包的Gatsby，它可以从WordPress后台获取数据。 在WordPress后台：

  1. 您已安装WPML，并将西班牙语设置为第二语言。
  2. 您已安装 ACF 并添加了一个字段组（slugpostfields），其中包括一个帖子文本字段（slugsubtitle）。
  3. 您已输入一些数据。

通过简单的 GraphQL 查询，您就可以收集到这些数据。

在下面的示例查询中，我们从语言设置为英语的WordPress后台检索帖子。 对于每个帖子，我们都可以访问其标题、语言代码和 ACF 字段数据，如副标题。 此外，我们还可以检索帖子的译文，包括标题、语言代码和 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
            }
          }
        }
      }
    }
  }
`;

已知问题

WPML可与此插件配合使用，但有时我们可能会解决一些小问题。 这是意料之中的事，因为这两个插件都提供了频繁的更新。

目前未解决的问题：

您还可以搜索此插件的所有已知问题，包括之前解决的问题。

获取支持

如果您在使用WPML GraphQL和 WPGraphQL 时需要帮助，请访问我们的支持论坛。

WPML文档
Kathy Banach
已更新
6 6 月, 2024