ナビゲーションをスキップする

Home » WPML ドキュメンテーション » 関連プロジェクト » WPML GraphQL- WPGraphQLスキーマへの多言語機能の追加

WPML GraphQL- WPGraphQLスキーマへの多言語機能の追加

WPML GraphQLWPGraphQLスキーマから言語固有のコンテンツや翻訳をクエリ、フィルタリング、取得することができます。

特長

投稿、タクソノミー、コメント、メニュー、メニュー項目を含む、言語によるコンテンツのフィルタリング

WPML プラグインから特定のデータを取得するために、言語フィールドで WPGraphQL を拡張する。

インストールされているすべての言語、または特定の言語にフォーカスしてデータを照会

このページでは

必要なプラグイン

で何ができる？ WPML GraphQL?

言語と翻訳情報を照会する

言語フィルター

言語を超えて特定の投稿をクエリする

インストールされている言語からデータを照会する

使用方法 WPML GraphQLギャツビーとACF

はじめに WPML GraphQL

WPML GraphQLは現在、WPGraphQL 2.0と互換性がありません。互換性を確立するために積極的に取り組んでおり、利用可能になり次第更新いたします。

必要なプラグイン

まずは、以下のプラグインをインストールして有効化する：

  • WPGraphQL
  • WPML
  • WPML String Translation
  • WPML GraphQL

ACFプラグインの多言語フィールドをWPGraphQLスキーマに含めるには、次のプラグインもインストールしてください：

で何ができる？ WPML GraphQL?

WPML GraphQLWPGraphQLと統合され、WPML で作成された多言語コンテンツへのクエリが可能になります。

GraphQL → GraphQL IDEから、Query Composerを使って次のことができる：

  • 問い合わせたコンテンツの言語情報を取得する
  • 投稿、タクソノミー、コメントの翻訳にアクセスできます。
  • 言語によるクエリのフィルタリング
  • IDまたはスラグで言語横断的に特定の投稿をクエリする。

例えば、下の画像にあるように、サイト上の全投稿の言語コード、スラグ、URI、翻訳を完成させたリストを簡単に表示させることができます。

クエリ・コンポーザーの言語フィールドを使用して、すべての言語の投稿を取得する。

以下では、多言語のテストサイトを使って、コンテンツと翻訳を照会するための WPML GraphQLを使ってコンテンツとその翻訳を問い合わせる方法を紹介します。

言語と翻訳情報を照会する

で WPML GraphQLを使用すると、クエリで言語フィールドと翻訳フィールドを使用できます：

  • language フィールドでは、投稿タイプ、タクソノミ、メニュー、メニューアイテム、コメントの言語コード、国旗URL、ネイティブネーム、翻訳ネーム、ホームページURLなどの詳細を取得できます。
  • languageCode フィールドは投稿、タクソノミーターム、メニュー、メニューアイテム、コメントの言語コードを取得します。
  • translations フィールドは投稿タイプとタクソノミータームの翻訳を検索します。

コメントを照会する際、language とlanguageCode フィールドは投稿の言語と一致します。

投稿スラグ、URI、言語コード、カテゴリー、存在する翻訳を含む、関連する詳細とともに投稿を取得するクエリの例を以下に示します：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
query Posts{
  posts(where: {language: "en"}) {
    nodes {
      slug
      uri
      language {
        code
      }
      categories {
        nodes {
          name
        }
      }
      translations {
        slug
        uri
        language {
          code
        }
        categories {
          nodes {
            name
          }
        }
      }
    }
  }
}

このクエリを実行すると、各投稿の言語と翻訳情報が、カテゴリなどの接続アイテムとともに返されます。接続は自動的にトップレベルのアイテム（この場合は投稿）の言語に従います：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
{
  "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"
                  }
                ]
              }
            }
          ]
        }
      ]
    }
  }
}

言語フィルター

WPML GraphQLを使うと、言語フィルターを使うことができる：

  • 投稿、タクソノミー用語、メニュー、メニュー項目、またはコメントを特定の言語でフィルタリングする
  • フィルタを設定することにより、特定の言語のコンテンツを取得する。
  • フィルター値をallに設定することで、言語に関係なくすべてのコンテンツを取得する。

WPML GraphQL投稿のようなトップレベルのアイテムを言語でフィルタリングすると、カテゴリーやタグのようなすべての関連アイテムが自動的に同じ言語に従います。これにより、クエリの一貫性と精度が向上します。

スラグ、URI、接続カテゴリを含むスペイン語の投稿を検索するクエリの例です：

1
2
3
4
5
6
7
8
9
10
11
12
13
query PostsES{
  posts(where: {language: "es"}) {
    nodes {
      slug
      uri
      categories {
        nodes {
          name
        }
      }
    }
  }
}

クエリが返す結果はこうだ：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{
  "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"
              }
            ]
          }
        }
      ]
    }
  }
}

言語を超えて特定の投稿をクエリする

WPMLGraphQLを使えば、投稿IDやスラグでどの言語の投稿でも問い合わせることができます。

例えば、¡Holamundo！ (スペイン語訳のHello world! ）というタイトルの投稿があり、スラグがhola-mundoで投稿 ID が2 の場合、その投稿を取得するために以下のクエリを使用できます：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
query PostBySlug {
  post(id: "hola-mundo", idType: SLUG) {
    title
    slug
    uri
  }
}
 
query PostById {
  post(id: "2", idType: DATABASE_ID) {
    title
    slug
    uri
  }
}

どちらのクエリも¡Holamundo!”投稿のタイトル、スラグ、URIを含む投稿データを正しく返します：

1
2
3
4
5
6
7
8
9
{
  "data": {
    "post": {
      "title": "¡Hola mundo!",
      "slug": "hola-mundo",
      "uri": "/es/2018/07/05/hola-mundo/"
    }
  }
}

インストールされている言語からデータを照会する

WPML GraphQLは、サイトにインストールされている言語に関するデータにアクセスするための2つのクエリを提供します：

  • languagesクエリは、登録されているすべての言語を、各言語の関連データとともに検索します。
  • defaultLanguageクエリは、サイトのデフォルト言語に関する情報を取得します。

これらのクエリは、言語スイッチャーなどの機能を構築する場合に役立ちます。

たとえば、インストールされているすべての言語のデータを取得するには、次のクエリーを実行します：

1
2
3
4
5
6
7
8
9
10
query Languages {
  languages {
    code
    country_flag_url
    default_locale
    native_name
    translated_name
    url
  }
}

上記のクエリーは次のような結果を生む：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
  "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ギャツビーとACF

ギャツビーでは、WordPress 、からデータを取得することができます。 WPML GraphQLを使えば、Gatsbyサイトに多言語コンテンツや言語固有のデータを提供することができます。

ACFプラグインでWP GraphQLを使用している場合、 WPML GraphQLと ACF Multilingual はこの機能を拡張し、カスタムフィールドのデータを異なる言語でクエリできるようにします。

例えば、gatsby-source-graphqlアドオンパッケージを使用してGatsbyをインストールし、WordPress サイトにWPML （セカンダリ言語としてスペイン語）とACFがインストールされているとします。

シンプルなGraphQLクエリを使って、Gatsbyの多言語投稿をタイトル、言語コード、カスタムACFフィールドと共に取得できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
export const doQuery = graphql`
  {
    wordpress {
      posts(where: {language: "en"}) {
        nodes {
          title
          language {
            code
          }
          postfields{
            subtitle
          }
          translations {
            title
            language {
              code
            }
            postfields{
              subtitle
            }
          }
        }
      }
    }
  }
`;

はじめに WPML GraphQL

使用するには WPML GraphQLが必要です。 WPML Multilingual CMSまたは WPML Multilingual Agencyプランが必要です。どちらのプランでも、WPML プラグインと幅広いアドオンを無料でご利用いただけます。

あなたのサイトに最適なプランをご覧ください。

お困りですか？

もし WPML GraphQLトラブルシューティングのヒントについては、既知の問題と解決策のページをご覧ください。

まだヘルプが必要ですか？サポートチケットを送信してください。

Kathy Banach
更新済み
2月 17, 2025