탐색 건너뛰기

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

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

WPML GraphQL을 사용하면 WPGraphQL 스키마에서 언어별 콘텐츠 및 번역을 쿼리, 필터링 및 검색할 수 있습니다.

주요 기능

글, 분류, 댓글, 메뉴, 메뉴 항목 등 언어별로 콘텐츠 필터링하기

언어 필드로 WPGraphQL을 확장하여 WPML 플러그인에서 특정 데이터를 검색하세요.

설치된 모든 언어에 걸쳐 데이터를 쿼리하거나 특정 언어에 집중하세요.

이 페이지에서

필수 플러그인

WPML GraphQL로 무엇을 할 수 있나요?

언어 및 번역 정보 쿼리하기

언어 필터링

여러 언어로 특정 글 쿼리하기

설치된 언어에서 데이터 쿼리하기

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

WPML GraphQL 시작하기

WPML GraphQL은 현재 WPGraphQL 2.0과 호환되지 않습니다. 호환성을 설정하기 위해 적극적으로 노력하고 있으며 가능한 경우 업데이트할 예정입니다.

필수 플러그인

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

  • WPGraphQL
  • WPML
  • WPML 문자열 번역
  • WPML GraphQL

WPGraphQL 스키마에 ACF 플러그인의 다국어 필드를 포함하려면 이 플러그인도 설치하세요:

WPML GraphQL로 무엇을 할 수 있나요?

WPML GraphQL은 WPGraphQL과 통합되어 WPML로 만든 다국어 콘텐츠를 쿼리할 수 있습니다.

GraphQL → GraphQL IDE에서 쿼리 작성기를 사용하여 다음을 수행할 수 있습니다:

  • 쿼리하는 모든 콘텐츠의 언어 정보 가져오기
  • 글, 분류 및 댓글의 번역에 액세스하기
  • 언어별로 쿼리 필터링
  • 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을 사용하면 언어 필터를 사용할 수 있습니다:

  • 특정 언어로 글, 분류 용어, 메뉴, 메뉴 항목 또는 댓글을 필터링합니다.
  • 필터를 적절히 설정하여 특정 언어로 된 콘텐츠를 검색합니다.
  • 필터 값을 모두로 설정하여 언어에 관계없이 모든 콘텐츠를 가져옵니다.

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 또는 슬러그를 기준으로 개별 글을 쿼리할 수도 있습니다.

예를 들어 제목이 ¡Hola mundo! ( 안녕하세요 세계의 스페인어 번역어!)라는 제목의 글이 있고 슬러그가 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
  }
}

두 쿼리 모두 ‘안녕하세요 ! ‘ 글에 대한 제목, 슬러그 및 URI를 포함한 글 데이터를 올바르게 반환합니다: 

{
  "data": {
    "post": {
      "title": "¡Hola mundo!",
      "slug": "hola-mundo",
      "uri": "/es/2018/07/05/hola-mundo/"
    }
  }
}

설치된 언어에서 데이터 쿼리하기

WPML GraphQL은 사이트에 설치된 언어에 대한 데이터에 액세스하기 위한 두 가지 쿼리를 제공합니다:

  • 언어 쿼리는 등록된 모든 언어를 각 언어에 대한 관련 데이터와 함께 검색합니다.
  • 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/"
      }
    ]
  }
}

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

개츠비에서는 워드프레스에서 데이터를 소싱할 수 있으며, WPML GraphQL을 사용하면 다국어 콘텐츠와 언어별 데이터를 개츠비 사이트에 제공할 수 있습니다.

ACF 플러그인과 함께 WP GraphQL을 사용하는 경우 WPML GraphQL 및 ACF 다국어에서 이 기능을 확장하여 사용자 정의 필드 데이터를 다른 언어로 쿼리할 수 있습니다.

예를 들어 개츠비 애드온 패키지가 포함된 개츠비가 설치되어 있고 워드프레스 사이트에 WPML(스페인어를 보조 언어로 사용)과 ACF가 설치되어 있다고 가정해 보겠습니다.

간단한 GraphQL 쿼리를 사용하여 개츠비에서 제목, 언어 코드 및 사용자 정의 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 다국어 CMS 또는 WPML 다국어 에이전시 요금제가 필요합니다. 두 요금제 모두 WPML 플러그인 및 다양한 추가 기능에 대한 액세스를 제공하며 모두 추가 비용 없이 포함되어 있습니다.

사이트에 가장 적합한 요금제를 확인하세요.

도움이 필요하세요?

WPML GraphQL 사용에 문제가 있는 경우 알려진 문제 및 해결 방법 페이지를 방문하여 문제 해결 팁을 확인하세요.

아직도 도움이 필요하신가요? 지원 티켓을 제출하세요.