การรักษาความเข้ากันได้ของ Divi Builder กับ WPML

เรียนรู้วิธีรักษาความเข้ากันได้ของโมดูล Divi กับ WPML ผ่านไฟล์การกำหนดค่าภาษา wpml-config.xml

เอกสารประกอบนี้จัดทำขึ้นสำหรับทีมพัฒนา Divi และนักพัฒนาเว็บที่ใช้ Divi โดยจะอธิบายกระบวนการรักษาความเข้ากันได้ของ Divi Builder กับ WPML ซึ่งทำได้โดยการอัปเดตไฟล์การกำหนดค่าภาษา

หน้านี้อ้างอิงถึง Divi 5 ซึ่งจัดเก็บเนื้อหาเป็นบล็อกที่เข้ากันได้กับ Gutenberg (Divi 4 เคยใช้ shortcode)

การผสานการทำงานของ Divi Builder กับ WPML

เพื่อให้เข้าใจว่า Divi Builder ทำงานร่วมกับ WPML อย่างไร เรามาเริ่มต้นด้วยการสร้างหน้าง่าย ๆ โดยใช้ Divi Builder เราได้เพิ่มโมดูลบางส่วนในตัวอย่างด้านล่าง เช่น Text, Number Counter, Icon เป็นต้น

หากต้องการแปล ให้ไปที่ WPML → แดชบอร์ดการแปล และค้นหาหน้าเว็บภายใต้ส่วนหน้า เลือกหน้านั้นแล้วคลิก แปลเนื้อหาของคุณ เพื่อเลือกวิธีการแปล หากคุณมีเครดิตการแปลอัตโนมัติ คุณสามารถแปลหน้านี้โดยอัตโนมัติได้ในไม่กี่นาที

การใช้ไฟล์การกำหนดค่าภาษา

ในไฟล์ wpml-config.xml คุณสามารถกำหนดค่าองค์ประกอบต่อไปนี้ได้:

• บล็อกของปลั๊กอินสร้างหน้าเว็บ
• ฟิลด์กำหนดเอง
• อนุกรมวิธานที่กำหนดเอง
• ข้อความผู้ดูแลระบบ / wp_options
• การกำหนดค่าตัวสลับภาษา

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับโครงสร้างและไวยากรณ์ โปรดดูคู่มือไฟล์การกำหนดค่าภาษาของเรา

การรับไฟล์การกำหนดค่าสำหรับ Divi

การกำหนดค่าไฟล์ wpml-config.xml จะแยกสตริงข้อความออกจากหน้าที่สร้างโดยใช้ Divi Builder และโหลดลงใน ตัวแก้ไขการแปลขั้นสูง ใช้ไฟล์นี้เพื่อเพิ่มประเภทบล็อกและแอตทริบิวต์ใหม่ รวมถึงลบประเภทบล็อกที่ล้าสมัยออก

คุณสามารถดาวน์โหลดไฟล์การกำหนดค่าภาษาได้จากที่เก็บข้อมูลของเรา และวางไว้ในโฟลเดอร์รากของธีมของคุณเมื่อกำหนดค่าเสร็จแล้ว

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

การกำหนดค่าบล็อกในไฟล์การกำหนดค่าภาษา

Divi 5 ใช้ไวยากรณ์แบบบล็อก ดังนั้นการลงทะเบียนโมดูล Divi สำหรับการแปลจึงคล้ายกับกระบวนการแปลบล็อก Gutenberg:

• คำจำกัดความของบล็อกทั้งหมดจะถูกห่อหุ้มไว้ภายในองค์ประกอบหลัก <gutenberg-blocks>
• แต่ละบล็อกจะถูกประกาศด้วยองค์ประกอบ <gutenberg-block> โดยที่แอตทริบิวต์ type จะตรงกับชื่อที่ลงทะเบียนไว้ของบล็อก
• ฟิลด์ที่แปลได้จะถูกประกาศเป็นองค์ประกอบย่อย <key>

ลองดูตัวอย่างโมดูล Call to Action ของ Divi:

<!-- wp:divi/cta {"module":{"title":"CTA","button_text":"Contact Us","button_url":"https://example.com/contact/"}} /-->

นี่คือวิธีการกำหนดค่าใน wpml-config.xml:

<gutenberg-blocks>
    <gutenberg-block type="divi/cta" translate="1">
       <key name="module">
         <key name="title" />
         <key name="button_text" />
         <key name="button_url" type="link" />
       </key>
    </gutenberg-block>
</gutenberg-blocks>

โครงสร้างมีรายละเอียดดังนี้:

• องค์ประกอบ <gutenberg-blocks> ห่อหุ้มคำจำกัดความของบล็อกทั้งหมด
• องค์ประกอบ <gutenberg-block> กำหนดประเภทบล็อกเดียว ซึ่งระบุโดยแอตทริบิวต์ type โดย translate="1" จะบอกให้ WPML ประมวลผลสิ่งนี้
• องค์ประกอบ <key> แต่ละรายการจะระบุฟิลด์ที่แปลได้หนึ่งฟิลด์: title และ button_text สำหรับฟิลด์ข้อความธรรมดา และ button_url สำหรับลิงก์
• แอตทริบิวต์ type="link" บอกให้ WPML แทนที่ URL ด้วยเวอร์ชันที่แปลแล้วของโพสต์หรือหน้าที่ลิงก์โดยอัตโนมัติ

การทดสอบไฟล์การกำหนดค่าภาษา

หากต้องการทดสอบไฟล์การกำหนดค่าภาษาที่อัปเดตแล้ว ให้ทำตามขั้นตอนเหล่านี้:

1. ตั้งค่าเว็บไซต์ที่เปิดใช้งานทั้ง Divi และ WPML ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานส่วนเสริม การแปลสตริง และ การแปลสื่อ ด้วยเช่นกัน

2. หากต้องการแทนที่ไฟล์การกำหนดค่าภาษาระยะไกลด้วยเวอร์ชันที่อัปเดต ให้ไปที่ WPML → การตั้งค่า และคลิกที่แท็บ การกำหนดค่า XML ที่กำหนดเอง คัดลอกเนื้อหาของไฟล์การกำหนดค่าภาษาที่อัปเดตแล้วลงในตัวแก้ไข จากนั้นคลิก บันทึก

3. สร้างหน้าใหม่ และเพิ่มโมดูลใหม่ลงไป หากคุณอัปเดตแอตทริบิวต์บางอย่างสำหรับโมดูลที่มีอยู่ ให้เพิ่มโมดูลเหล่านี้ลงในหน้าด้วยเช่นกัน ในตัวอย่างนี้ เราจะสมมติว่ามีการเพิ่มโมดูล Button ใหม่ลงใน Divi Builder เพิ่มลงในหน้าแล้วคลิก เผยแพร่

4. หากต้องการแปลหน้าที่มีปุ่ม คุณสามารถใช้ แดชบอร์ดการแปล อีกทางเลือกหนึ่งคือการใช้ ตัวแก้ไขการแปลขั้นสูง (ATE) ซึ่งอาจมีประโยชน์เมื่อทำการทดสอบ เนื่องจากจะช่วยให้คุณเห็นแท็กโมดูลสำหรับทุกองค์ประกอบ Divi ในหน้าเว็บ หากต้องการเปิด ATE ให้ไปที่ แก้ไข หน้าเว็บ และคลิกที่ไอคอนบวกใต้กล่องภาษาในแถบด้านข้างทางขวา

5. ตรวจสอบองค์ประกอบต่าง ๆ และเพิ่มคำแปลของคุณ หรือปล่อยให้ ATE แปลโดยอัตโนมัติ

ตอนนี้ คุณสามารถดูหน้าที่แปลแล้วได้ที่ส่วนหน้าเว็บไซต์ หน้าที่แปลแล้วควรแสดงสตริงข้อความที่แปลทั้งหมด ซึ่งหมายความว่าไฟล์การกำหนดค่าภาษาที่อัปเดตทำงานได้อย่างถูกต้อง

ในกรณีที่คุณพบปัญหาใด ๆ โปรดติดต่อทีมพัฒนาความเข้ากันได้ของเรา พวกเขายินดีที่จะตรวจสอบปัญหาที่เกี่ยวข้องกับไฟล์การกำหนดค่าภาษา

เมื่อทำการทดสอบเสร็จแล้ว โปรดส่งคำขอผสานข้อมูล (merge request) ไปยังที่เก็บข้อมูลของเรา นักพัฒนาความเข้ากันได้ของเราจะได้รับคำขอของคุณและทำการตรวจสอบ