Cách truy vấn nội dung đa ngôn ngữ với WPGraphQL – Lọc ngôn ngữ và bản dịch

Trước khi bạn bắt đầu

Cài đặt và kích hoạt các plugin này:

• WPGraphQL (plugin mã nguồn mở từ dự án WPGraphQL).
• WPML và WPML Dịch Chuỗi.
• WPML GraphQL (tiện ích bổ sung được đề cập trong trang này).

Nếu bạn cũng sử dụng Advanced Custom Fields:

• Advanced Custom Fields Multilingual (ACFML).
• WPGraphQL for Advanced Custom Fields (từ dự án WPGraphQL).

Nội dung nguồn của bạn cần được dịch trong WPML trước khi các truy vấn bên dưới có thể trả về bất kỳ kết quả nào. Khi bật Dịch mọi thứ tự động (mặc định của WPML 5), các bản dịch sẽ được tạo trong nền khi bạn xuất bản nội dung. Đối với thiết lập thủ công, hãy gửi nội dung để dịch từ WPML > Bản dịch > Bảng điều khiển. Các bài viết và thuật ngữ đã dịch là những gì các truy vấn GraphQL bên dưới sẽ lọc và trả về.

GraphQL IDE – Nơi kiểm tra các truy vấn

WPGraphQL thêm màn hình GraphQL > GraphQL IDE vào trang quản trị WordPress. Query Composer của IDE liệt kê mọi trường có sẵn, bao gồm đối số language và trường translations của WPML, đồng thời chạy các truy vấn trực tiếp trên trang web chính thức của bạn. Hãy kiểm tra các truy vấn ở đó trước khi tích hợp chúng vào framework giao diện người dùng của bạn.

Truy vấn nội dung theo ngôn ngữ

Thêm where: { language: "<code>" } vào bất kỳ truy vấn danh sách nào: bài viết, loại nội dung tùy chỉnh, thuật ngữ phân loại, menu, mục menu, bình luận. Mã ngôn ngữ là cùng một mã mà WPML sử dụng ở mọi nơi (en, es, fr, pt-pt, v.v.). Truyền language: "all" để trả về nội dung từ mọi ngôn ngữ cùng một lúc.

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

Khi một node cấp cao nhất được lọc theo ngôn ngữ, các mục được kết nối (chuyên mục, thẻ, phân loại tùy chỉnh) sẽ tự động tuân theo cùng một ngôn ngữ đó. Truy vấn ở trên trả về các bài viết bằng tiếng Tây Ban Nha với các chuyên mục bằng tiếng Tây Ban Nha, không cần thêm đối số nào khác.

Lấy mọi bản dịch của một node trong một truy vấn

Thêm trường translations vào bất kỳ truy vấn bài viết hoặc phân loại nào để trả về các phiên bản ngôn ngữ khác của node trong cùng một payload:

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

Mỗi bài viết được trả về với các trường tiếng Anh của nó cộng với một mảng chứa các slug và URI ở ngôn ngữ khác. Đó là cấu trúc mà một bộ chuyển đổi ngôn ngữ được hiển thị bên cạnh nội dung trang sử dụng: một yêu cầu, mọi lựa chọn thay thế mà khách truy cập có thể chuyển sang.

Truy vấn một bài viết cụ thể theo ID hoặc slug bằng bất kỳ ngôn ngữ nào

Để lấy trực tiếp một bài viết đã dịch (theo slug đã dịch hoặc theo ID cơ sở dữ liệu), hãy sử dụng truy vấn post số ít với idType:

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

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

Cả hai truy vấn đều trả về bài viết đã dịch (tiêu đề, slug, URI) mà không cần lọc thêm ở giao diện người dùng.

Menu đa ngôn ngữ

Truy vấn các menu và mục menu theo ngôn ngữ với cùng đối số language:

query NavES {
  menu(language: "es", id: "primary", idType: SLUG) {
    menuItems {
      nodes {
        label
        url
        path
      }
    }
  }
}

label và url của mỗi mục menu được trả về bằng ngôn ngữ đã truy vấn. Các mục menu liên kết đến các bài viết đã dịch sẽ tự động phân giải thành URI đã dịch. Hỗ trợ này đã được thêm vào trong WPML GraphQL 1.1.0.

Các ngôn ngữ đã cài đặt – Dành cho bộ chuyển đổi ngôn ngữ

Đối với bộ chuyển đổi ngôn ngữ toàn cầu (độc lập với bất kỳ bài viết đơn lẻ nào), hãy sử dụng các truy vấn languages và defaultLanguage để liệt kê mọi ngôn ngữ trên trang web:

query SiteLanguages {
  languages {
    code
    country_flag_url
    default_locale
    native_name
    translated_name
    url
  }
  defaultLanguage {
    code
    native_name
  }
}

Trả về một node cho mỗi ngôn ngữ đang hoạt động cùng với URL cờ, tên bản địa, tên đã dịch và URL trang chủ của ngôn ngữ. Dữ liệu đó là đủ để hiển thị bộ chuyển đổi ngôn ngữ có cờ và nhãn mà không cần hard-code danh sách ngôn ngữ.

Truy vấn trường tùy chỉnh ACF theo ngôn ngữ

Khi ACFML và WPGraphQL for ACF đang hoạt động, các trường ACF trên bài viết và loại nội dung tùy chỉnh sẽ tự động tuân theo ngôn ngữ của bài viết chứa nó. Không cần thêm đối số nào. Đối với Trang tùy chọn ACF, vốn không bị ràng buộc với một bài viết đơn lẻ, hãy thêm đối số language vào truy vấn Trang tùy chọn:

query Settings {
  myOptionPage(language: "de") {
    addressFieldGroup {
      addressTitle
      repeaterAddressDetails { addressDetails }
    }
  }
}

Đối số yêu cầu một mã ngôn ngữ khớp với một trong các ngôn ngữ đang hoạt động trên trang web của bạn.

Các hạn chế đã biết và giải pháp tạm thời

• Siêu dữ liệu tác giả và người dùng không trả về các giá trị đã dịch. Nếu bạn hiển thị tiểu sử tác giả theo ngôn ngữ, hãy lưu trữ tiểu sử đã dịch trong một trường ACF của người dùng và truy vấn trường đó thay thế.
• Các URI đã dịch trong một số cấu trúc truy vấn. Khi lấy một bài viết đã dịch theo URI (contentNode(id: "/de/some-slug/", idType: URI)), hãy xác minh URI được trả về khớp với những gì được xuất bản trong ngôn ngữ đó – một số cấu trúc truy vấn trả về các đường dẫn không nhất quán. Hãy kiểm tra trong GraphQL IDE trước khi tích hợp vào hệ thống định tuyến.
• Trang tùy chọn ACF không có đối số language sẽ chuyển về ngôn ngữ mặc định. Luôn truyền language cho các truy vấn Trang tùy chọn trên các trang web đa ngôn ngữ.

Nếu bạn gặp phải sự cố tích hợp không được liệt kê ở đây, nhóm hỗ trợ WPML sẽ hỗ trợ phần WPML trong stack WPGraphQL 24/7.