このページで
- 必須プラグイン
- で何ができる？ WPML GraphQL?
- 言語と翻訳情報を照会する
- 言語フィルター
- 言語を超えて特定の投稿をクエリする
- インストールされている言語からデータを照会する
- 使用方法 WPML GraphQLギャツビーとACF
- はじめに WPML GraphQL
- お困りですか？
必須プラグイン
まずは、以下のプラグインをインストールして有効化する：
- WPGraphQL
- WPML
- WPML String Translation
- WPML GraphQL
ACFプラグインの多言語フィールドをWPGraphQLスキーマに含めるには、次のプラグインもインストールしてください：
- Advanced Custom Fields Multilingual(ACFML)
- WPGraphQL forAdvanced Custom Fields
で何ができる？ WPML GraphQL?
WPML GraphQLWPGraphQLと統合され、WPML で作成された多言語コンテンツへのクエリが可能になります。
GraphQL → GraphQL IDEから、Query Composerを使って次のことができる：
- 問い合わせたコンテンツの言語情報を取得する
- 投稿、タクソノミー、コメントの翻訳にアクセスできます。
- 言語によるクエリのフィルタリング
- IDまたはスラグで言語横断的に特定の投稿をクエリする。
例えば、下の画像にあるように、サイト上の全投稿の言語コード、スラグ、URI、翻訳を完成させたリストを簡単に表示させることができます。
以下では、多言語のテストサイトを使って、コンテンツと翻訳を照会するための WPML GraphQLを使ってコンテンツとその翻訳を問い合わせる方法を紹介します。
言語と翻訳情報を照会する
で WPML GraphQLを使用すると、クエリで言語フィールドと翻訳フィールドを使用できます：
-
languageフィールドでは、投稿タイプ、タクソノミ、メニュー、メニューアイテム、コメントの言語コード、国旗URL、ネイティブネーム、翻訳ネーム、ホームページURLなどの詳細を取得できます。 -
languageCodeフィールドは投稿、タクソノミーターム、メニュー、メニューアイテム、コメントの言語コードを取得します。 -
translationsフィールドは投稿タイプとタクソノミータームの翻訳を検索します。
コメントを照会する際、language とlanguageCode フィールドは投稿の言語と一致します。
投稿スラグ、URI、言語コード、カテゴリー、存在する翻訳を含む、関連する詳細とともに投稿を取得するクエリの例を以下に示します：
query Posts{
posts(where: {language: "en"}) {
nodes {
slug
uri
language {
code
}
categories {
nodes {
name
}
}
translations {
slug
uri
language {
code
}
categories {
nodes {
name
}
}
}
}
}
}
このクエリを実行すると、各投稿の言語と翻訳情報が、カテゴリなどの接続アイテムとともに返されます。接続は自動的にトップレベルのアイテム（この場合は投稿）の言語に従います：
{
"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、接続カテゴリを含むスペイン語の投稿を検索するクエリの例です：
query PostsES{
posts(where: {language: "es"}) {
nodes {
slug
uri
categories {
nodes {
name
}
}
}
}
}
クエリが返す結果はこうだ：
{
"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 の場合、その投稿を取得するために以下のクエリを使用できます：
query PostBySlug {
post(id: "hola-mundo", idType: SLUG) {
title
slug
uri
}
}
query PostById {
post(id: "2", idType: DATABASE_ID) {
title
slug
uri
}
}
どちらのクエリも¡Holamundo!”投稿のタイトル、スラグ、URIを含む投稿データを正しく返します：
{
"data": {
"post": {
"title": "¡Hola mundo!",
"slug": "hola-mundo",
"uri": "/es/2018/07/05/hola-mundo/"
}
}
}
インストールされている言語からデータを照会する
WPML GraphQLは、サイトにインストールされている言語に関するデータにアクセスするための2つのクエリを提供します：
- languagesクエリは、登録されているすべての言語を、各言語の関連データとともに検索します。
- defaultLanguageクエリは、サイトのデフォルト言語に関する情報を取得します。
これらのクエリは、言語スイッチャーなどの機能を構築する場合に役立ちます。
たとえば、インストールされているすべての言語のデータを取得するには、次のクエリーを実行します：
query Languages {
languages {
code
country_flag_url
default_locale
native_name
translated_name
url
}
}
上記のクエリーは次のような結果を生む：
{
"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フィールドと共に取得できます。
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トラブルシューティングのヒントについては、既知の問題と解決策のページをご覧ください。
まだヘルプが必要ですか？サポートチケットを送信してください。
