WPML

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

เรียนรู้วิธีคิวรีเนื้อหาเฉพาะภาษา ดึงข้อมูลการแปล และแสดงเมนูหลายภาษาผ่าน WPGraphQL บนเว็บไซต์ WordPress แบบ headless โดย WPML GraphQL จะเพิ่มอาร์กิวเมนต์ภาษาและฟิลด์การแปลลงในสคีมาของ WPGraphQL เพื่อให้ Next.js, Nuxt, Astro, Gatsby หรือส่วนหน้าเว็บไซต์อื่น ๆ สามารถดึงเนื้อหาของภาษาที่ถูกต้องได้ในรอบเดียว

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

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

  • 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 จะเพิ่มหน้าจอ GraphQLGraphQL IDE ลงในหน้าจัดการเว็บไซต์ WordPress โดย Query Composer ของ IDE จะแสดงรายการฟิลด์ที่มีให้ใช้งานทั้งหมด รวมถึงอาร์กิวเมนต์ language และฟิลด์ translations ของ WPML และเรียกใช้คิวรีกับเว็บไซต์ที่ใช้งานจริงของคุณ ทดสอบคิวรีที่นั่นก่อนที่จะเชื่อมต่อเข้ากับเฟรมเวิร์กส่วนหน้าเว็บไซต์ของคุณ

ปลายทาง GraphQL สำหรับแต่ละภาษา

WPGraphQL จะตอบสนองที่ /graphql คิวรีที่ไม่มีอาร์กิวเมนต์ language จะส่งคืนเนื้อหาในภาษาเริ่มต้นของคุณ หากต้องการรับเนื้อหาในภาษาอื่น ให้เพิ่ม where: { language: "es" } ลงในคิวรี

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

เพิ่ม 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 }
      }
    }
  }
}

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

คิวรีโพสต์ที่เจาะจงตาม ID หรือสลักในภาษาใดก็ได้

หากต้องการดึงข้อมูลโพสต์ที่แปลแล้วรายการเดียวโดยตรง (ตามสลักที่แปลแล้วหรือตาม 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 }
  }
}

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

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

คิวรีเมนูและรายการเมนูตามภาษาด้วยอาร์กิวเมนต์ where: { language } เดียวกัน หากต้องการรับรายการของตำแหน่งเมนูในธีม ให้เพิ่มตำแหน่งเข้าไปด้วย:

query NavES {
  menuItems(where: { language: "es", location: PRIMARY }) {
    nodes {
      label
      url
      path
    }
  }
}

หากต้องการแสดงรายการเมนูของภาษา ให้ใช้คิวรี menus:

query MenusES {
  menus(where: { language: "es" }) {
    nodes {
      name
      locations
    }
  }
}

label และ url ของแต่ละรายการเมนูจะส่งคืนในภาษาที่คิวรี รายการเมนูที่ลิงก์ไปยังโพสต์ที่แปลแล้วจะแก้ไขเป็น URI ที่แปลแล้วโดยอัตโนมัติ คิวรี menu แบบเอกพจน์จะไม่มีอาร์กิวเมนต์ language ดังนั้นให้ใช้ menus หรือ menuItems เพื่อเลือกภาษา

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

สำหรับตัวสลับภาษาระดับโกลบอล (ไม่ขึ้นอยู่กับโพสต์ใดโพสต์หนึ่ง) ให้ใช้คิวรี 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 }
    }
  }
}

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

ตั้งแต่ WPGraphQL for ACF 3.0.0 หน้าตัวเลือกจะอยู่ในสคีมาของ GraphQL ก็ต่อเมื่อคุณเปิดใช้งาน show_in_graphql สำหรับหน้านั้น หากไม่มีการเปิดใช้งาน คิวรีหน้าตัวเลือกและอาร์กิวเมนต์ language จะไม่มีอยู่ หากคุณลงทะเบียนหน้าตัวเลือกในโค้ด ให้เพิ่มการตั้งค่าที่นั่น:

acf_add_options_page( array(
  'page_title'         => 'Site Settings',
  'menu_slug'          => 'site-settings',
  'show_in_graphql'    => true,
  'graphql_field_name' => 'siteSettings',
) );

รายละเอียดผู้เขียนที่แปลแล้ว

WPML GraphQL จะส่งคืน firstName, lastName, nickname และ description ของผู้ใช้ที่แปลแล้ว หากต้องการแปลข้อมูลเหล่านี้:

  1. ไปที่หน้า WPMLการแปลสตริง
  2. ในตัวเลือก Translate User properties ให้เลือกบทบาทผู้ใช้แล้วบันทึก
  3. แปลสตริงในโดเมน Authors

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

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

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

เขียนโดยAmir

เขียนโดยAmir