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 mở rộng khả năng của plugin WPGraphQL, khiến nó trở thành giải pháp lý tưởng cho các nhà phát triển muốn tạo trang web đa ngôn ngữ bằng công nghệ giao diện người dùng. Trải nghiệm sự dễ dàng khi truy vấn và lọc nội dung cũng như truy xuất dữ liệu và bản dịch theo ngôn ngữ cụ thể trực tiếp từ lược đồ WPGraphQL.

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

Mở rộng WPGraphQL với các trường bổ sung ( ngôn ngữ , mã ngôn ngữ , bản dịch ) để truy xuất dữ liệu cụ thể từ plugin WPML

Lọc nội dung trong lược đồ Gatsby GraphQL

Lọc bài đăng, phân loại và nhận xét theo ngôn ngữ

Truy xuất dữ liệu ngôn ngữ cho các đối tượng và nút

Truy vấn dữ liệu dựa trên tất cả các ngôn ngữ được cài đặt hoặc ngôn ngữ cụ thể

Hoạt động với ACF, ACFML và WPGraphQL cho Trường tùy chỉnh nâng cao

Trên trang này:

Các plugin và thiết lập cần thiết

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

Nếu bạn đang chạy một trang web có ACF hoặc ACF Pro và muốn hiển thị các trường đa ngôn ngữ từ plugin ACF sang lược đồ WPGraphQL, hãy cài đặt và kích hoạt:

Khám phá Lược đồ WPML GraphQL

WPML GraphQL tích hợp với WPGraphQL và thêm các trường và bộ lọc mới vào lược đồ WPGraphQL.

Sau khi cài đặt các plugin, bạn có thể truy cập GraphQL → GraphQL IDE và sử dụng Trình soạn thảo truy vấn để dễ dàng truy vấn và lọc nội dung bằng các ngôn ngữ khác nhau. Bao gồm:

  • Lấy thông tin về ngôn ngữ của các đối tượng được truy vấn
  • Nhận bản dịch cho các đối tượng như loại bài đăng, phân loại và nhận xét.
  • Lọc các đối tượng được truy vấn theo ngôn ngữ

Ví dụ: hình ảnh bên dưới cho thấy cách bạn có thể truy xuất danh sách tất cả các bài đăng trên trang web WordPress , bao gồm mã ngôn ngữ, slug và URI của chúng, cũng như thông tin tương tự cho bất kỳ bản dịch nào của mỗi bài đăng.

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ữ

Để minh họa cách hoạt động của WPML GraphQL , chúng tôi đã thiết lập một trang web có tiếng Anh được đặt làm ngôn ngữ mặc định và tiếng Tây Ban Nha và tiếng Ý làm ​​ngôn ngữ phụ. Trong suốt trang tài liệu này, chúng tôi sử dụng trang thử nghiệm này để truy vấn các bài đăng và bản dịch bài đăng được tạo bởi WPML .

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

WPML GraphQL cho phép bạn bao gồm các trường ngôn ngữ và bản dịch trong truy vấn của mình . Cái này cho phép bạn làm việc với các nút và thành phần trong GraphQL để truy xuất dữ liệu theo ngôn ngữ cụ thể và các bản dịch liên quan.

  • Bạn có thể thêm trường ngôn ngữ vào truy vấn để chỉ ra ngôn ngữ của loại bài đăng, phân loại và nhận xét. Truy vấn này cung cấp thông tin ngôn ngữ rộng rãi, chẳng hạn như:
    • Mã ngôn ngữ
    • URL cờ quốc gia
    • Tên bản địa của ngôn ngữ
    • Tên dịch của ngôn ngữ
    • URL trang chủ
  • Bạn có thể sử dụng trường Mã ngôn ngữ để thu thập mã ngôn ngữ cho các bài đăng, thuật ngữ phân loại và nhận xét mà không yêu cầu bất kỳ chi tiết cụ thể nào khác về ngôn ngữ.
  • Bạn có thể sử dụng trường bản dịch để truy xuất bản dịch của các loại bài đăng và thuật ngữ phân loại.

Dưới đây, bạn có thể xem ví dụ về truy vấn các bài đăng bao gồm các trường này.

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
        }
      }
    }
  }
}

Việc chạy truy vấn này sẽ trả về thông tin ngôn ngữ và bản dịch cho từng tài nguyên.

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

Lọc ngôn ngữ

Plugin WPML GraphQL được trang bị bộ lọc ngôn ngữ , cho phép bạn tinh chỉnh các truy vấn của mình để có được dữ liệu ngôn ngữ chính xác mà bạn quan tâm.

Bạn có thể sử dụng bộ lọc ngôn ngữ để lọc bài đăng, thuật ngữ phân loại hoặc nhận xét dựa trên một ngôn ngữ cụ thể. Bạn có thể yêu cầu các nút của một ngôn ngữ nhất định bằng cách đưa bộ lọc ngôn ngữ vào truy vấn của mình và bạn cũng có thể truy xuất tất cả các mục, bất kể ngôn ngữ, bằng cách sử dụng bộ lọc ngôn ngữ với giá trị được đặt thành tất cả.

Dưới đây là một truy vấn mẫu lọc các bài đăng theo ngôn ngữ phụ của chúng tôi, tiếng Tây Ban Nha:

WPML GraphQL query using the language filter 
query PostsES{
  posts(where: {language: "es"}) {
    nodes {
      slug
      uri
    }
  }
}

Như bạn có thể thấy, truy vấn này tìm nạp tất cả các bài đăng bằng tiếng Tây Ban Nha.

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

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

WPML GraphQL xác định hai truy vấn cho phép bạn truy vấn dữ liệu từ 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 liên quan cho từng ngôn ngữ đó.
  • Truy vấn ngôn ngữ mặc định để lấy ngôn ngữ được đặt làm ngôn ngữ mặc định, cùng với dữ liệu liên quan của ngôn ngữ đó.

Điều này có thể hữu ích nếu bạn muốn, chẳng hạn như xây dựng trình chuyển đổi ngôn ngữ.

Giả sử chúng tôi muốn truy vấn dữ liệu cho tất cả các ngôn ngữ đã cài đặt. Với mục đích này, chúng tôi chạy truy vấn sau:

WPML GraphQL query to get all registered languages 
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:

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

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

Khung Gatsby cho phép bạn thu thập dữ liệu từ các nguồn phụ trợ khác nhau, bao gồm cả các trang web WordPress .

Nếu trang WordPress của bạn đang sử dụng WP GraphQL, bạn có thể cung cấp dữ liệu của nó đến trang Gatsby. Với WPML GraphQL được cài đặt, bạn có thể phân phát dữ liệu bằng các ngôn ngữ khác nhau và thậm chí truy xuất thông tin ngôn ngữ.

Để cung cấp chức năng bổ sung, WP GraphQL có một tiện ích bổ sung cho Trường tùy chỉnh nâng cao (ACF). Bằng cách sử dụng tiện ích bổ sung này cùng với plugin Đa ngôn ngữ ACF từ WPML , bạn có thể phân phát cả dữ liệu cốt lõi và dữ liệu trường tùy chỉnh dựa trên các yêu cầu ngôn ngữ cụ thể.

Hãy xem xét một tình huống ví dụ: Bạn có bản cài đặt Gatsby với gói tiện ích bổ sung gatsby-source-graphql , gói này sẽ truy xuất dữ liệu từ chương trình phụ trợ WordPress . Trong phần phụ trợ WordPress này:

  1. Bạn đã cài đặt WPML với bộ tiếng Tây Ban Nha làm ngôn ngữ phụ.
  2. Bạn đã cài đặt ACF và thêm một nhóm trường (slug postfields ) bao gồm trường văn bản (slug subtitle ) cho các bài đăng.
  3. Bạn đã điền một số dữ liệu.

Với một truy vấn GraphQL đơn giản, bạn có thể thu thập dữ liệu này.

Trong truy vấn mẫu bên dưới, chúng tôi truy xuất các bài đăng từ phần phụ trợ WordPress nơi ngôn ngữ được đặt thành tiếng Anh. Đối với mỗi bài đăng, chúng tôi có thể truy cập tiêu đề, mã ngôn ngữ và dữ liệu trường ACF của nó, chẳng hạn như phụ đề. Ngoài ra, chúng tôi có thể truy xuất bản dịch của bài đăng, bao gồm tiêu đề, mã ngôn ngữ và dữ liệu trường ACF của chúng.

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 hoạt động tốt với plugin này, nhưng đôi khi có thể xuất hiện một số vấn đề nhỏ mà chúng tôi đang giải quyết. Điều này được dự kiến vì cả hai plugin đều cung cấp các bản cập nhật thường xuyên.

Vấn đề chưa được giải quyết:

Bạn cũng có thể tìm kiếm tất cả các vấn đề đã biết bao gồm cả những vấn đề đã được giải quyết trước đây cho plugin này.

Nhận hỗ trợ

Nếu bạn cần trợ giúp khi sử dụng WPML GraphQL với WPGraphQL, vui lòng truy cập diễn đàn hỗ trợ của chúng tôi.

Các dự án liên quan