탐색 건너뛰기

Home » 관련 프로젝트 » WPML GraphQL – WPGraphQL 스키마에 다국어 기능 추가하기

WPML GraphQL – WPGraphQL 스키마에 다국어 기능 추가하기

WPML GraphQL WPGraphQL 플러그인의 기능을 확장하여 프런트엔드 기술을 사용하여 다국어 웹사이트를 만들고자 하는 개발자에게 이상적인 솔루션입니다. 콘텐츠를 쿼리 및 필터링하고 언어별 데이터와 번역을 WPGraphQL 스키마에서 직접 검색할 수 있는 간편한 기능을 경험해 보세요.

주요 기능

추가 필드(언어, 언어 코드, 번역)로 WPGraphQL을 확장하여 WPML 플러그인에서 특정 데이터를 검색할 수 있습니다.

개츠비 GraphQL 스키마 내에서 콘텐츠 필터링하기

언어별로 글, 분류법 및 댓글 필터링하기

객체 및 노드에 대한 언어 데이터 검색

설치된 모든 언어 또는 특정 언어를 기준으로 데이터 쿼리하기

고급 사용자 정의 필드를 위해 ACF, ACFML 및 WPGraphQL과 함께 작동합니다.

이 페이지에서:

필수 플러그인 및 설정

시작하려면 다음 플러그인을 설치하고 활성화하세요:

  • WPML 코어 플러그인 및 문자열 번역 애드온
  • WPGraphQL 플러그인
  • WPML GraphQL 플러그인

ACF 또는 ACF Pro가 있는 사이트를 운영 중이고 ACF 플러그인의 다국어 필드를 WPGraphQL 스키마에 노출하려면 설치 및 활성화하세요:

WPML GraphQL 스키마 살펴보기

WPML GraphQL WPGraphQL과 통합되어 새로운 필드와 필터를 WPGraphQL 스키마에 추가합니다.

플러그인을 설치한 후 GraphQL → GraphQL IDE로 이동하여 쿼리 작성기를 사용하여 다양한 언어로 콘텐츠를 쉽게 쿼리하고 필터링할 수 있습니다. 여기에는 다음이 포함됩니다:

  • 쿼리된 개체의 언어에 대한 정보 얻기
  • 글 유형, 분류법, 댓글 등의 객체에 대한 번역을 가져옵니다.
  • 언어별로 쿼리된 개체 필터링하기

예를 들어, 아래 이미지는 언어 코드, 슬러그 및 URI를 포함하여 WordPress 사이트의 모든 글 목록과 각 글의 번역에 대한 유사한 정보를 검색하는 방법을 보여줍니다.

쿼리 작성기의 언어 필드를 사용하여 모든 언어로 된 글 검색하기

WPML GraphQL 작동 방식을 보여주기 위해 영어를 기본 언어로 설정하고 스페인어와 이탈리아어를 보조 언어로 설정한 사이트를 설정했습니다. 이 문서 페이지에서는 이 테스트 사이트를 사용하여 WPML 만든 게시물 및 게시물 번역을 쿼리합니다.

언어 및 번역 정보 쿼리하기

WPML GraphQL 사용하면 쿼리에 언어 번역 필드를 포함할 수 있습니다. 에서 GraphQL의 노드 및 요소로 작업하여 언어별 데이터 및 관련 번역을 검색할 수 있습니다.

  • 쿼리에 언어 필드를 추가하여 글 유형, 분류 및 댓글의 언어를 표시할 수 있습니다. 이 쿼리는 다음과 같은 광범위한 언어 정보를 제공합니다:
    • 언어 코드
    • 국가 국기 URL
    • 언어의 기본 이름
    • 언어의 번역된 이름
    • 홈페이지 URL
  • 언어코드 필드를 사용하여 다른 언어별 세부 정보를 요청하지 않고도 글, 분류 용어 및 댓글의 언어 코드를 수집할 수 있습니다.
  • 번역 필드를 사용하여 글 유형 및 분류 용어의 번역을 검색할 수 있습니다.

아래에서 이러한 필드가 포함된 글에 대한 쿼리 예시를 볼 수 있습니다.

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/"
      }
    ]
  }
}

개츠비 및 ACF와 함께 WPML GraphQL 사용

개츠비 프레임워크를 사용하면 WordPress 사이트를 비롯한 다양한 백엔드 소스에서 데이터를 수집할 수 있습니다.

WordPress 사이트에서 WP GraphQL을 사용하는 경우 해당 데이터를 개츠비 사이트에 제공할 수 있습니다. WPML GraphQL 설치하면 다양한 언어로 데이터를 제공하고 언어 정보를 검색할 수도 있습니다.

추가 기능을 제공하기 위해 WP GraphQL에는 고급 사용자 정의 필드(ACF)를 위한 애드온이 있습니다. 이 애드온을 WPML ACF 다국어 플러그인과 함께 사용하면 특정 언어 요구 사항에 따라 핵심 데이터와 사용자 정의 필드 데이터를 모두 제공할 수 있습니다.

예시 시나리오를 살펴보겠습니다: WordPress 백엔드에서 데이터를 검색하는 gatsby-source-graphql 애드온 패키지가 포함된 개츠비가 설치되어 있습니다. 이 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
            }
          }
        }
      }
    }
  }
`;

Known Issues

WPML은 이 플러그인과 잘 작동하지만, 때때로 우리가 해결하고 있는 작은 문제가 발생할 수 있습니다. 이는 두 플러그인 모두 자주 업데이트를 제공하기 때문에 예상되는 일입니다.

현재 해결되지 않은 문제들:

이 플러그인에 대해 이전에 해결된 문제를 포함하여 알려진 모든 문제를 검색할 수도 있습니다.

지원 받기

WPGraphQL과 함께 WPML GraphQL 사용하는 데 도움이 필요하면 지원 포럼으로 이동하세요.