このページにある：
- 必要なプラグインとセットアップ
- WPML GraphQLスキーマを探る
- 言語と翻訳情報を照会する
- 言語フィルター
- インストールされている言語からデータを照会する
- ギャツビーとACFでWPML GraphQLを使う
- 既知の問題
- サポートを受ける
必要なプラグインとセットアップ
まずは、以下のプラグインをインストールして有効化する：
- WPMLコアプラグインと文字列翻訳アドオン
- WPGraphQLプラグイン
- WPML GraphQLプラグイン
ACFまたはACF Proを使用してサイトを運営しており、ACFプラグインからWPGraphQLスキーマに多言語フィールドを公開したい場合、インストールして有効化する：
WPML GraphQLスキーマを探る
WPML GraphQLはWPGraphQLと統合し、WPGraphQLスキーマに新しいフィールドとフィルターを追加する。
プラグインをインストールしたら、GraphQL → GraphQL IDEと進み、Query Composerを使って簡単に異なる言語のコンテンツをクエリしたりフィルターしたりすることができる。 これには以下が含まれます：
- クエリーされたオブジェクトの言語に関する情報を取得する
- 投稿タイプ、タクゾノミー、コメントなどのオブジェクトの翻訳を取得する。
- クエリーされたオブジェクトを言語でフィルターする
例として、以下の画像は、言語コード、スラグ、URIを含むWordPressサイト上のすべての投稿のリストと、各投稿の翻訳可能な同様の情報を取得する方法を示している。
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プラグインには言語フィルターが装備されており、クエリを絞り込んで興味のある言語データを正確に取得することができる。
言語フィルターを使って、投稿、タクゾノミー用語、コメントを特定の言語に基づいてフィルターすることができる。 クエリに言語フィルターを含めることで、指定した言語のノードを要求することができる。また、言語フィルターの値をallに設定することで、言語に関係なくすべてのアイテムを取得することもできる。
以下は、第二言語であるスペイン語で投稿をフィルターするクエリの例である：
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は2つのクエリを定義しており、サイトにインストールされている言語からデータを取得することができる：
- 登録されているすべての言語と、各言語の関連データを取得するための言語クエリー。
- 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/"
}
]
}
}
ギャツビーとACFでWPML GraphQLを使う
Gatsbyフレームワークでは、WordPressサイトを含む様々なバックエンドソースからデータを収集することができる。
WordPressサイトがWP GraphQLを使用している場合、そのデータをGatsbyサイトに提供することができる。 WPML GraphQLをインストールすれば、さまざまな言語でデータを提供し、言語情報を取得することもできる。
さらなる機能を提供するために、WP GraphQLにはアドオンとしてAdvanced Custom Fields（ACF）が用意されている。 WPMLのACF Multilingualプラグインとともにこのアドオンを使用することで、特定の言語要件に基づいてコアデータとカスタムフィールドデータの両方を提供することができる。
シナリオの例を考えてみよう：WordPressのバックエンドからデータを取得するgatsby-source-graphqlアドオンパッケージをインストールしたGatsbyがあるとします。 WordPressのバックエンドである：
- WPMLをインストールし、第二言語としてスペイン語を設定している。
- あなたはACFをインストールし、投稿用のテキストフィールド（スラグ・サブタイトル）を含むフィールドグループ（スラグ・ポストフィールド）を追加した。
- あなたはいくつかのデータを入力した。
簡単な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 – Missing Translated Menu Support
- WPML GraphQL – No Results for Slug Queries in Secondary Languages
- WPML GraphQL – Cannot Retrieve Translated Author Metadata
- WPML GraphQL – Fails to Fetch Single Custom Post Type by Slug Based
このプラグインのために以前解決された全ての既知の問題も検索できます。
サポートを受ける
WPML GraphQLをWPGraphQLで使用する際にヘルプが必要な場合は、サポートフォーラムへどうぞ。
