Skip Navigation

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 时需要帮助,请访问我们的支持论坛

Updated
18 1 月, 2024