วิธีคิวรีเนื้อหาหลายภาษาด้วย WPGraphQL – การกรองภาษาและการแปล

ก่อนที่คุณจะเริ่มต้น

ติดตั้งและเปิดใช้งานปลั๊กอินเหล่านี้:

• WPGraphQL (ปลั๊กอินโอเพนซอร์สจากโปรเจกต์ WPGraphQL)
• WPML และ WPML การแปลสตริง
• WPML GraphQL (ส่วนเสริมที่กล่าวถึงในหน้านี้)

หากคุณใช้ Advanced Custom Fields ด้วย:

• Advanced Custom Fields Multilingual (ACFML)
• WPGraphQL for Advanced Custom Fields (จากโปรเจกต์ WPGraphQL)

เนื้อหาต้นทางของคุณต้องได้รับการแปลใน WPML ก่อนที่คิวรีด้านล่างจะสามารถส่งคืนข้อมูลใด ๆ ได้ เมื่อเปิดใช้งาน แปลทุกอย่างโดยอัตโนมัติ (ค่าเริ่มต้นของ WPML 5) การแปลจะถูกสร้างขึ้นในเบื้องหลังเมื่อคุณเผยแพร่เนื้อหา สำหรับการตั้งค่าด้วยตนเอง ให้ส่งเนื้อหาเพื่อทำการแปลจาก WPML > การแปล > แดชบอร์ด โพสต์และคำศัพท์ที่แปลแล้วคือสิ่งที่คิวรี GraphQL ด้านล่างจะกรองและส่งคืน

GraphQL IDE – สถานที่สำหรับทดสอบคิวรี

WPGraphQL จะเพิ่มหน้าจอ GraphQL > GraphQL IDE ลงในหน้าจัดการเว็บไซต์ WordPress ของคุณ Query Composer ของ IDE จะแสดงรายการฟิลด์ที่มีอยู่ทั้งหมด รวมถึงอาร์กิวเมนต์ language และฟิลด์ translations ของ WPML และเรียกใช้คิวรีกับเว็บไซต์ที่ใช้งานจริงของคุณ ทดสอบคิวรีที่นั่นก่อนที่จะเชื่อมต่อเข้ากับเฟรมเวิร์กส่วนหน้าเว็บไซต์ของคุณ

การคิวรีเนื้อหาตามภาษา

เพิ่ม where: { language: "<code>" } ลงในคิวรีรายการใด ๆ เช่น โพสต์ ประเภทโพสต์แบบกำหนดเอง คำศัพท์ของอนุกรมวิธาน เมนู รายการเมนู และความคิดเห็น รหัสภาษาคือรหัสเดียวกับที่ WPML ใช้ในทุกที่ (en, es, fr, pt-pt และอื่น ๆ) ส่งผ่าน language: "all" เพื่อส่งคืนเนื้อหาจากทุกภาษาพร้อมกัน

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

เมื่อโหนดระดับบนสุดถูกกรองตามภาษา รายการที่เชื่อมต่อกัน (หมวดหมู่ แท็ก อนุกรมวิธานที่กำหนดเอง) จะใช้ภาษาเดียวกันโดยอัตโนมัติ คิวรีด้านบนจะส่งคืนโพสต์ในภาษาสเปนพร้อมหมวดหมู่ในภาษาสเปน โดยไม่จำเป็นต้องใช้อาร์กิวเมนต์เพิ่มเติม

การดึงข้อมูลการแปลทั้งหมดของโหนดในคิวรีเดียว

เพิ่มฟิลด์ translations ลงในคิวรีโพสต์หรืออนุกรมวิธานใด ๆ เพื่อส่งคืนเวอร์ชันภาษาอื่นของโหนดในเพย์โหลดเดียวกัน:

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

แต่ละโพสต์จะถูกส่งคืนพร้อมกับฟิลด์ภาษาอังกฤษ รวมถึงอาร์เรย์ของ slug และ URI ในภาษาอื่น ๆ นั่นคือรูปแบบที่ตัวสลับภาษาซึ่งแสดงผลอยู่ข้างเนื้อหาของหน้าใช้ ซึ่งก็คือคำขอเพียงครั้งเดียวก็จะได้ทุกทางเลือกที่ผู้เยี่ยมชมสามารถสลับไปใช้ได้

การคิวรีโพสต์เฉพาะด้วย ID หรือ slug ในภาษาใดก็ได้

หากต้องการดึงข้อมูลโพสต์ที่แปลแล้วเพียงรายการเดียวโดยตรง (ด้วย slug ที่แปลแล้วหรือด้วย ID ของฐานข้อมูล) ให้ใช้คิวรี post แบบเอกพจน์พร้อมกับ 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 }
  }
}

คิวรีทั้งสองจะส่งคืนโพสต์ที่แปลแล้ว (ชื่อ, slug, URI) โดยไม่ต้องมีการกรองเพิ่มเติมในส่วนหน้าเว็บไซต์

เมนูหลายภาษา

คิวรีเมนูและรายการเมนูตามภาษาด้วยอาร์กิวเมนต์ language เดียวกัน:

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

label และ url ของแต่ละรายการเมนูจะถูกส่งคืนในภาษาที่คิวรี รายการเมนูที่ลิงก์ไปยังโพสต์ที่แปลแล้วจะแปลงเป็น URI ที่แปลแล้วโดยอัตโนมัติ การสนับสนุนนี้ถูกเพิ่มเข้ามาใน WPML GraphQL 1.1.0

ภาษาที่ติดตั้ง – สำหรับตัวสลับภาษา

สำหรับตัวสลับภาษาระดับโกลบอล (ไม่ขึ้นอยู่กับโพสต์ใดโพสต์หนึ่ง) ให้ใช้คิวรี languages และ defaultLanguage เพื่อแสดงรายการทุกภาษาบนเว็บไซต์:

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

ส่งคืนหนึ่งโหนดต่อภาษาที่ใช้งานอยู่พร้อมกับ URL ของธง ชื่อภาษาในภาษานั้นเอง ชื่อภาษาที่แปลแล้ว และ URL หน้าแรกของภาษา นั่นเป็นข้อมูลที่เพียงพอสำหรับการแสดงผลตัวสลับภาษาแบบธงและป้ายกำกับโดยไม่ต้องฮาร์ดโค้ดรายการภาษา

การคิวรีฟิลด์ที่กำหนดเองของ ACF ตามภาษา

เมื่อ ACFML และ WPGraphQL for ACF ทำงานอยู่ ฟิลด์ ACF ในโพสต์และประเภทโพสต์แบบกำหนดเองจะใช้ภาษาเดียวกับโพสต์หลักโดยอัตโนมัติ โดยไม่จำเป็นต้องใช้อาร์กิวเมนต์เพิ่มเติม สำหรับ ACF Options Pages ซึ่งไม่ได้ผูกติดกับโพสต์ใดโพสต์หนึ่ง ให้เพิ่มอาร์กิวเมนต์ language ลงในคิวรี Options Page:

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

อาร์กิวเมนต์นี้ต้องการรหัสภาษาที่ตรงกับหนึ่งในภาษาที่ใช้งานอยู่บนเว็บไซต์ของคุณ

ข้อจำกัดที่ทราบและวิธีแก้ปัญหาชั่วคราว

• ข้อมูลเมตาของผู้เขียนและผู้ใช้ จะไม่ส่งคืนค่าที่แปลแล้ว หากคุณแสดงประวัติผู้เขียนตามภาษา ให้จัดเก็บประวัติที่แปลแล้วไว้ในฟิลด์ ACF ของผู้ใช้ และคิวรีฟิลด์นั้นแทน
• URI ที่แปลแล้วในรูปแบบคิวรีบางประเภท เมื่อดึงข้อมูลโพสต์ที่แปลแล้วด้วย URI (contentNode(id: "/de/some-slug/", idType: URI)) ให้ตรวจสอบว่า URI ที่ส่งคืนตรงกับสิ่งที่เผยแพร่ในภาษานั้นหรือไม่ เนื่องจากรูปแบบคิวรีบางประเภทอาจส่งคืนเส้นทางที่ไม่สอดคล้องกัน ทดสอบใน GraphQL IDE ก่อนที่จะเชื่อมต่อเข้ากับการกำหนดเส้นทาง
• ACF Options Pages ที่ไม่มีอาร์กิวเมนต์ language จะกลับไปใช้ภาษาเริ่มต้น ให้ส่งผ่าน language เสมอสำหรับคิวรี Options Page บนเว็บไซต์หลายภาษา

หากคุณพบปัญหาการทำงานร่วมกันที่ไม่ได้ระบุไว้ที่นี่ ทีมสนับสนุนของ WPML พร้อมดูแลในส่วนของ WPML สำหรับสแต็ก WPGraphQL ตลอด 24 ชั่วโมงทุกวัน