Bỏ qua điều hướng

Home » Các dự án liên quan » WPML GraphQL – Thêm chức năng đa ngôn ngữ vào lược đồ WPGraphQL

WPML GraphQL – Thêm chức năng đa ngôn ngữ vào lược đồ WPGraphQL

WPML GraphQL cho phép bạn truy vấn, lọc và truy xuất nội dung và bản dịch theo ngôn ngữ cụ thể từ lược đồ WPGraphQL.

Các tính năng chính

Lọc nội dung theo ngôn ngữ, bao gồm bài đăng, phân loại, bình luận, menu và mục menu

Mở rộng WPGraphQL với các trường ngôn ngữ để lấy dữ liệu cụ thể từ plugin WPML

Truy vấn dữ liệu trên tất cả các ngôn ngữ đã cài đặt hoặc tập trung vào các ngôn ngữ cụ thể

Trên trang này:

Plugin bắt buộc

Để bắt đầu, hãy cài đặt và kích hoạt các plugin sau:

  • WPGraphQL
  • WPML
  • WPML String Translation
  • WPML GraphQL

Để bao gồm các trường đa ngôn ngữ từ plugin ACF trong lược đồ WPGraphQL, hãy cài đặt thêm:

Bạn có thể làm gì với WPML GraphQL ?

WPML GraphQL tích hợp với WPGraphQL để cho phép bạn truy vấn nội dung đa ngôn ngữ được tạo bằng WPML .

Từ GraphQL → GraphQL IDE , bạn có thể sử dụng Query Composer để:

  • Nhận thông tin ngôn ngữ cho bất kỳ nội dung nào bạn truy vấn
  • Truy cập bản dịch cho bài đăng, phân loại và bình luận
  • Lọc truy vấn của bạn theo ngôn ngữ
  • Truy vấn các bài đăng cụ thể trên nhiều ngôn ngữ theo ID hoặc slug của chúng

Ví dụ, như hình ảnh bên dưới hiển thị, bạn có thể dễ dàng kéo lên danh sách tất cả các bài đăng trên trang web của mình, kèm theo mã ngôn ngữ, slug, URI và thông tin chi tiết về bản dịch.

Sử dụng các trường ngôn ngữ trong Trình soạn thảo truy vấn để truy xuất các bài đăng bằng tất cả các ngôn ngữ

Bên dưới, chúng tôi sẽ sử dụng một trang web thử nghiệm đa ngôn ngữ để chỉ cho bạn cách sử dụng WPML GraphQL để truy vấn nội dung và bản dịch của nội dung đó.

Truy vấn thông tin về ngôn ngữ và bản dịch

Với WPML GraphQL , bạn có thể sử dụng các trường ngôn ngữ và bản dịch trong truy vấn của mình:

  • Các language trường này cho phép bạn lấy các thông tin chi tiết như mã ngôn ngữ, URL cờ quốc gia, tên gốc, tên đã dịch và URL trang chủ cho các loại bài đăng, phân loại, menu, mục menu và bình luận.
  • Các languageCode trường này lấy mã ngôn ngữ cho các bài đăng, thuật ngữ phân loại, menu, mục menu và bình luận mà không có thông tin chi tiết ngôn ngữ bổ sung.
  • Các translations trường này lấy các bản dịch cho các loại bài đăng và thuật ngữ phân loại.

Khi bạn truy vấn các bình luận,language VàlanguageCode các trường khớp với ngôn ngữ của bài đăng mà chúng thuộc về.

Sau đây là ví dụ về truy vấn lấy các bài đăng cùng với thông tin chi tiết liên quan, bao gồm slug bài đăng, URI, mã ngôn ngữ, danh mục và bất kỳ bản dịch nào hiện có:

query Posts{
  posts(where: {language: "en"}) {
    nodes {
      slug
      uri
      language {
        code
      }
      categories {
        nodes {
          name
        }
      }
      translations {
        slug
        uri
        language {
          code
        }
        categories {
          nodes {
            name
          }
        }
      }
    }
  }
}

Chạy truy vấn này sẽ trả về thông tin ngôn ngữ và bản dịch cho mỗi bài đăng, cùng với các mục được kết nối như danh mục. Các kết nối tự động theo ngôn ngữ của mục cấp cao nhất (trong trường hợp này là bài đăng): 

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

Lọc ngôn ngữ

WPML GraphQL cho phép bạn sử dụng bộ lọc ngôn ngữ để:

  • Lọc bài đăng, thuật ngữ phân loại, menu, mục menu hoặc bình luận theo ngôn ngữ cụ thể
  • Truy xuất nội dung bằng ngôn ngữ cụ thể bằng cách thiết lập bộ lọc phù hợp
  • Nhận tất cả nội dung, bất kể ngôn ngữ, bằng cách đặt giá trị bộ lọc thành tất cả

WPML GraphQL hỗ trợ kết nối, vì vậy khi bạn lọc một mục cấp cao nhất như bài đăng theo ngôn ngữ, tất cả các mục liên quan, chẳng hạn như danh mục và thẻ, sẽ tự động theo cùng một ngôn ngữ. Điều này làm cho truy vấn của bạn nhất quán và chính xác.

Sau đây là ví dụ về truy vấn lấy các bài đăng bằng tiếng Tây Ban Nha, bao gồm slug, URI và danh mục được kết nối:

query PostsES{
  posts(where: {language: "es"}) {
    nodes {
      slug
      uri
      categories {
        nodes {
          name
        }
      }
    }
  }
}

Sau đây là kết quả trả về của truy vấn:

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

Truy vấn các bài đăng cụ thể trên nhiều ngôn ngữ

Với WPMLGraphQL, bạn cũng có thể truy vấn từng bài đăng bằng bất kỳ ngôn ngữ nào theo ID bài đăng hoặc slug của bài đăng đó.

Ví dụ, nếu bạn có bài đăng có tiêu đề ¡Hola mundo! (bản dịch tiếng Tây Ban Nha của Hello world !), với phần mở đầu là hola-mundo và ID bài đăng là 2 , bạn có thể sử dụng các truy vấn sau để truy xuất bài đăng:

query PostBySlug {
  post(id: "hola-mundo", idType: SLUG) {
    title
    slug
    uri
  }
}

query PostById {
  post(id: "2", idType: DATABASE_ID) {
    title
    slug
    uri
  }
}

Cả hai truy vấn đều sẽ trả về chính xác dữ liệu bài đăng, bao gồm tiêu đề, slug và URI cho bài đăng ¡Hola mundo!: 

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

Truy vấn dữ liệu từ các ngôn ngữ đã cài đặt

WPML GraphQL cung cấp hai truy vấn để truy cập dữ liệu về các ngôn ngữ được cài đặt trên trang web của bạn:

  • Truy vấn ngôn ngữ lấy tất cả các ngôn ngữ đã đăng ký cùng với dữ liệu có liên quan cho từng ngôn ngữ
  • Truy vấn defaultLanguage sẽ lấy thông tin về ngôn ngữ mặc định được đặt trên trang web của bạn

Những truy vấn này có thể hữu ích nếu bạn muốn xây dựng các tính năng như trình chuyển đổi ngôn ngữ.

Ví dụ, để lấy dữ liệu cho tất cả các ngôn ngữ đã cài đặt, bạn có thể chạy truy vấn sau:

query Languages {
  languages {
    code
    country_flag_url
    default_locale
    native_name
    translated_name
    url
  }
}

Truy vấn trên tạo ra kết quả sau:

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

Sử dụng WPML GraphQL với Gatsby và ACF

Gatsby cho phép bạn lấy dữ liệu từ WordPress và với WPML GraphQL , bạn có thể cung cấp nội dung đa ngôn ngữ và dữ liệu theo ngôn ngữ cụ thể cho trang web Gatsby của mình.

Nếu bạn đang sử dụng WP GraphQL với plugin ACF, WPML GraphQL và ACF Multilingual sẽ mở rộng chức năng này, cho phép bạn truy vấn dữ liệu trường tùy chỉnh bằng nhiều ngôn ngữ khác nhau.

Ví dụ, giả sử bạn cài đặt Gatsby với gói bổ trợ gatsby-source-graphql và trang WordPress của bạn có WPML (với tiếng Tây Ban Nha là ngôn ngữ phụ) và ACF.

Bạn có thể truy xuất các bài đăng đa ngôn ngữ cùng tiêu đề, mã ngôn ngữ và các trường ACF tùy chỉnh trong Gatsby bằng cách sử dụng truy vấn GraphQL đơn giản.

export const doQuery = graphql`
  {
    wordpress {
      posts(where: {language: "en"}) {
        nodes {
          title
          language {
            code
          }
          postfields{
            subtitle
          }
          translations {
            title
            language {
              code
            }
            postfields{
              subtitle
            }
          }
        }
      }
    }
  }
`;

Bắt đầu với WPML GraphQL

Để sử dụng WPML GraphQL , bạn cần có gói WPML Multilingual CMS hoặc WPML Multilingual Agency . Cả hai gói đều cung cấp quyền truy cập vào plugin WPML và nhiều tiện ích bổ sung khác, tất cả đều không mất thêm phí.

Xem gói nào phù hợp nhất với trang web của bạn .

Cần trợ giúp?

Nếu bạn gặp sự cố khi sử dụng WPML GraphQL , hãy truy cập trang Sự cố đã biết và Giải pháp của chúng tôi để biết mẹo khắc phục sự cố.

Bạn vẫn cần trợ giúp? Hãy gửi phiếu hỗ trợ .

Các dự án liên quan