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

Home » WPML ドキュメンテーション » 関連プロジェクト » WPML GraphQL – WPGraphQLスキーマに多言語機能を追加する

WPML GraphQL – WPGraphQLスキーマに多言語機能を追加する

WPML GraphQLはWPGraphQLプラグインの機能を拡張し、フロントエンド技術を使って多言語ウェブサイトを作成しようとしている開発者にとって理想的なソリューションとなる。 WPGraphQLスキーマから直接、コンテンツのクエリやフィルター、言語固有のデータや翻訳可能なデータの取得が簡単にできる。

主な特長

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

Gatsby GraphQLスキーマ内のコンテンツをフィルターする

投稿、タクゾノミー、コメントを言語でフィルターする

オブジェクトとノードの言語データを取得する

インストールされているすべての言語または特定の言語に基づいてデータを照会する

ACF、ACFML、WPGraphQLのアドバンスト・カスタム・フィールドに対応

このページの内容:

必要なプラグインとセットアップ

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

  • 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フィールドを使って、投稿、タクソノミーターム、コメントの言語コードを収集することができる。
  • 投稿タイプやタクソノミーの用語の翻訳を取得するために、translationsフィールドを使うことができる。

以下に、これらのフィールドを含む投稿クエリの例を示す。

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のバックエンドである:

  1. WPMLをインストールし、第二言語としてスペイン語を設定している。
  2. あなたはACFをインストールし、投稿用のテキストフィールド(スラグ・サブタイトル)を含むフィールドグループ(スラグ・ポストフィールド)を追加した。
  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で使用する際にヘルプが必要な場合は、サポートフォーラムへどうぞ。

更新済み
1月 18, 2024