Skip navigation

Home » Документация по WPML » Связанные проекты » WPML GraphQL – добавь многоязычный функционал в схему WPGraphQL

WPML GraphQL — добавь многоязычный функционал в схему WPGraphQL

WPML GraphQL расширяет возможности плагина WPGraphQL, делая его идеальным решением для разработчиков, желающих создавать многоязычные веб-сайты с помощью фронтенд-технологий. Ощути легкость запросов и фильтрации контента, а также получения данных о языке и переводах непосредственно из схемы WPGraphQL.

Ключевые особенности

Расширь WPGraphQL дополнительными полями(язык, код языка, переводы), чтобы получать специфические данные из плагина WPML.

Фильтруй контент в рамках схемы 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, чтобы легко запрашивать и фильтровать контент на разных языках. Сюда входит:

  • Получение информации о языке запрашиваемых объектов
  • Получай переводы для таких объектов, как типы записей, таксономии и комментарии.
  • Фильтр запрошенных объектов по языку

В качестве примера на картинке ниже показано, как ты можешь получить список всех записей на сайте WordPress, включая их языковой код, слаг и URI, а также аналогичную информацию для любых переводов каждого поста.

Использование языковых полей в Query Composer для получения записей на всех языках

Чтобы продемонстрировать работу 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 есть дополнение Advanced Custom Fields (ACF). Используя это дополнение вместе с плагином ACF Multilingual от WPML, ты сможешь обслуживать как основные данные, так и данные пользовательских полей в зависимости от конкретных языковых требований.

Давайте рассмотрим примерный сценарий: У Вас есть установка Gatsby с пакетом дополненийgatsby-source-graphql, который получает данные из бэкенда WordPress. В этом бэкенде WordPress:

  1. У тебя установлен WPML с испанским языком в качестве основного.
  2. У тебя установлен ACF и добавлена группа полей (слаг postfields), которая включает текстовое поле (слаг subtitle) для записей.
  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, отправляйся на наш форум поддержки.

Документация по WPML
Kathy Banach
Обновлено
6 июня, 2024