การลงทะเบียนวิดเจ็ตของปลั๊กอินสร้างหน้าเว็บแบบกำหนดเองสำหรับการแปล

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

คู่มือนี้มีไว้สำหรับนักพัฒนา ที่สร้างธีมและปลั๊กอิน หรือเพิ่มโค้ดของปลั๊กอินสร้างหน้าเว็บแบบกำหนดเองลงในเว็บไซต์ของตน

หากคุณใช้ปลั๊กอินสร้างหน้าเว็บของบุคคลที่สามและไม่สามารถแปลวิดเจ็ตแบบกำหนดเองบนเว็บไซต์ของคุณได้ โปรดติดต่อฝ่ายสนับสนุนของ WPML

ปลั๊กอินสร้างหน้าเว็บอย่าง Elementor, Beaver Builder, SiteOrigin และ Cornerstone จะมาพร้อมกับชุดวิดเจ็ตของตัวเอง วิดเจ็ตเริ่มต้นเหล่านี้ทำงานร่วมกับ WPML ได้อย่างราบรื่น

บางครั้ง คุณอาจสร้างวิดเจ็ตแบบกำหนดเองที่ตั้งใจจะใช้กับปลั๊กอินสร้างหน้าเว็บเหล่านี้หรือปลั๊กอินสร้างหน้าเว็บอื่น ๆ

วิดเจ็ตแบบกำหนดเองคือวิดเจ็ตเพิ่มเติมที่ไม่ซ้ำใครซึ่งไม่ได้มาพร้อมกับปลั๊กอินสร้างหน้าเว็บ วิดเจ็ตเหล่านี้อาจสร้างโดยทีมพัฒนาของคุณ นักพัฒนาบุคคลที่สาม หรือมาจากปลั๊กอินและธีมอื่น ๆ

วิดเจ็ตแบบกำหนดเองยังรวมถึงวิดเจ็ตใด ๆ ที่มาจากปลั๊กอินส่วนเสริมที่พัฒนาขึ้นโดยเฉพาะสำหรับปลั๊กอินสร้างหน้าเว็บ เช่น Elementor โดยนักพัฒนาภายนอก

ฉันต้องลงทะเบียนวิดเจ็ตแบบกำหนดเองสำหรับการแปลเมื่อใด

คุณต้องลงทะเบียนวิดเจ็ตแบบกำหนดเองสำหรับการแปล:

• หากเป็นวิดเจ็ตที่ไม่ได้มีมาให้โดยปลั๊กอินสร้างหน้าเว็บตั้งแต่แรก
• หากคุณสร้างและเพิ่มผ่านปลั๊กอินหรือธีมอื่น
• หากได้รับการพัฒนาสำหรับเว็บไซต์ WordPress ของคุณหรือปลั๊กอินสร้างหน้าเว็บเฉพาะโดยทีมของคุณหรือบุคคลที่สาม

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

วิธีลงทะเบียนวิดเจ็ต Elementor และบล็อก Gutenberg แบบกำหนดเองสำหรับการแปลโดยใช้ปลั๊กอิน Multilingual Tools

ปลั๊กอิน Multilingual Tools ของเรามี WPML – Config Generator สำหรับ Elementor และบล็อก Gutenberg ฟีเจอร์นี้ช่วยให้คุณสามารถเพิ่มวิดเจ็ต Elementor หรือบล็อก Gutenberg แบบกำหนดเองใด ๆ ที่คุณต้องการลงทะเบียนสำหรับการแปลไปยังหน้าเว็บ จากนั้นระบบจะสร้างโค้ด XML เวอร์ชันแรกที่คุณต้องการโดยอัตโนมัติ

เรียนรู้วิธีลงทะเบียนวิดเจ็ต Elementor แบบกำหนดเองสำหรับการแปล และวิธีทำให้บล็อก Gutenberg สามารถแปลได้

วิธีค้นหาข้อมูลการลงทะเบียนของวิดเจ็ต

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

คุณสามารถรับข้อมูลนี้ได้อย่างง่ายดายโดยใช้ปลั๊กอินอย่าง JSM Show Post Metadata ปลั๊กอินนี้จะแสดงข้อมูลเมตาของโพสต์และค่าที่ยังไม่ได้แปลงข้อมูล (unserialized values) ในกล่องเมตาที่ด้านล่างของหน้าแก้ไขโพสต์

หรือคุณสามารถใช้ขั้นตอนต่อไปนี้เพื่อรับข้อมูลนี้:

1. ไปที่หน้า WPML → การตั้งค่า เลื่อนไปที่ส่วน การแปลฟิลด์ที่กำหนดเอง และคลิกลิงก์ แสดงฟิลด์ของระบบ
2. ตั้งค่าฟิลด์กำหนดเอง _elementor_data เป็น แปล
3. สร้างหน้าใหม่และเพิ่มเฉพาะวิดเจ็ต Elementor ที่คุณต้องการลงทะเบียน บันทึกหน้าเว็บ
4. ไปที่ WPML → การตั้งค่า และในส่วน ตัวแก้ไขการแปล ให้เปิดใช้งานตัวเลือก ตัวแก้ไขการแปลแบบคลาสสิก ชั่วคราว
5. ลองแปลหน้าที่คุณสร้างในขั้นตอนที่ 3 โดยใช้ ตัวแก้ไขการแปลแบบคลาสสิก แล้วคุณจะสังเกตเห็นอาร์เรย์ที่แปลงข้อมูลแล้ว (serialized array) ดังนี้:

6. คัดลอกเนื้อหาของอาร์เรย์ที่แปลงข้อมูลแล้ว
7. ใช้เครื่องมือ unserialize ที่คุณต้องการเพื่อให้เห็นได้ชัดเจนยิ่งขึ้นว่าวิดเจ็ตแสดงเนื้อหาออกมาอย่างไร ในกรณีของเรา เราใช้เว็บไซต์ Unserialize

นี่คือคำอธิบายของเนื้อหาอาร์เรย์ที่คุณจะเห็น:

• [widgetType] จะมีชื่อที่แทรกอยู่ในแอตทริบิวต์ name ของแท็กวิดเจ็ต
• ฟิลด์จริงจะอยู่ภายในอาร์เรย์ และคุณสามารถค้นหาได้โดยค้นหา [0] ซึ่งจะนำเนื้อหาขององค์ประกอบแรกของอาร์เรย์มาแสดง
• ค่าของ field จะเป็นชื่อภายในวงเล็บที่จะมีชื่อของฟิลด์ ตัวอย่างเช่น: [title] => this is a field title ในกรณีนี้ "title" คือข้อความที่คุณต้องการ
• "Items of" จะได้รับค่าจากองค์ประกอบที่สร้างอาร์เรย์ ตัวอย่างเช่น: [contents]=> array ในกรณีนี้ "contents" คือข้อความที่คุณต้องการ

เมื่อคุณมีข้อมูลนี้แล้ว คุณสามารถดำเนินการลงทะเบียนวิดเจ็ตสำหรับการแปลจริงได้

การลงทะเบียนวิดเจ็ตแบบง่าย

วิดีโอต่อไปนี้จะแนะนำคุณเกี่ยวกับตัวอย่างการลงทะเบียนวิดเจ็ต Elementor แบบง่าย:

ตัวอย่างต่อไปนี้จะแสดงวิธีการลงทะเบียนวิดเจ็ตแบบง่าย วิดเจ็ตแบบง่ายในที่นี้หมายความว่าวิดเจ็ตไม่มีฟิลด์ repeater

<wpml-config>
	<elementor-widgets>
		<widget name="heading">
			<conditions>
				<condition key="widgetType">heading</condition>
			</conditions>
			<fields>
				<field type="Heading" editor_type="LINE">title</field>
				<field type="Heading: Link URL" editor_type="LINK">link>url</field>
			</fields>
		</widget>
	</elementor-widgets>
</wpml-config>

มาดูโครงสร้างของตัวอย่างที่ให้ไว้กัน:

1. เริ่มต้นด้วยแท็ก <elementor-widgets> ซึ่งจะบอก WPML ว่าคุณกำลังจะลงทะเบียนวิดเจ็ตของปลั๊กอินสร้างหน้าเว็บใด โดยสามารถเป็นหนึ่งในแท็กเหล่านี้:
   • <elementor-widgets>: ต้องใช้แท็กนี้หากคุณใช้ Elementor, Elementor PRO หรือส่วนเสริม Elementor อื่น ๆ
   • <beaver-builder-widgets>: ต้องใช้แท็กนี้หากคุณใช้ Beaver Builder Lite, Beaver Builder รุ่นพรีเมียม หรือส่วนเสริม Beaver Builder อื่น ๆ
   • <siteorigin-widgets>: ต้องใช้แท็กนี้หากคุณใช้ปลั๊กอินสร้างหน้าเว็บ SiteOrigin
   • <cornerstone-widgets>: และต้องใช้แท็กนี้สำหรับปลั๊กอินสร้างหน้าเว็บ Cornerstone ที่มาพร้อมกับธีม X หรือธีม PRO
2. เพิ่มวิดเจ็ตของคุณ:
   • <widget name="widget_name"> โดยที่ widget_name คือชื่อที่ใช้ลงทะเบียนวิดเจ็ตในปลั๊กอินสร้างหน้าเว็บ
   • <conditions> (ไม่บังคับ): ภายใต้ conditions คุณจะเพิ่มเงื่อนไขที่มี key เท่ากับชื่อวิดเจ็ต สามารถใช้ได้เมื่อชื่อวิดเจ็ตแตกต่างจากคีย์วิดเจ็ตในข้อมูล แต่โดยปกติแล้วจะไม่จำเป็น

3. เพิ่มฟิลด์ของวิดเจ็ต โดยครอบไว้ในแท็ก <fields>:
   • field: ID ของฟิลด์ ซึ่งจะเหมือนกับ ID ที่ใช้เมื่อเพิ่มตัวควบคุมผ่านฟังก์ชัน Control_stack::add_control
   • type (ไม่บังคับ): ประเภทของฟิลด์ นี่คือข้อความที่แสดงใน ตัวแก้ไขการแปลขั้นสูง หรือ ตัวแก้ไขการแปลแบบคลาสสิก ของ WPML เพื่อช่วยให้นักแปลทราบว่ากำลังแปลฟิลด์ใดอยู่
   • editor_type (ไม่บังคับ): นี่คือประเภทของฟิลด์ข้อความที่ใช้ใน ตัวแก้ไขการแปลแบบคลาสสิก ของ WPML ค่าที่ถูกต้องคือ LINE, AREA, LINK และ VISUAL หากไม่มีการระบุ ค่าเริ่มต้นจะเป็น LINE
   • key_of (ไม่บังคับ): จะใช้เฉพาะกับแท็ก <field> ที่มีอาร์เรย์อยู่ภายในแท็ก <fields-in-item> เท่านั้น

คุณสามารถใช้องค์ประกอบเหล่านี้เพื่อลงทะเบียนวิดเจ็ตแบบง่ายที่มีจำนวนฟิลด์เท่าใดก็ได้

การลงทะเบียนฟิลด์ด้วย ID ของโพสต์หรืออนุกรมวิธาน

ในส่วนด้านบน คุณได้เรียนรู้ว่าแอตทริบิวต์ type มักจะใช้เพื่อแสดงข้อความอธิบายใน ตัวแก้ไขการแปล

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

• type="post-ids" – สำหรับฟิลด์ที่มี ID ของโพสต์
• type="term-ids" – สำหรับฟิลด์ที่มี ID ของอนุกรมวิธาน/คำ (term IDs)

เมื่อคุณใช้ค่า types เหล่านี้:

• ฟิลด์จะไม่ปรากฏในตัวแก้ไขการแปล
• WPML จะแปลง ID ให้ชี้ไปยังเนื้อหาที่แปลแล้วซึ่งสอดคล้องกันโดยอัตโนมัติ
• รองรับทั้ง ID เดี่ยวและรายการ ID ที่คั่นด้วยเครื่องหมายจุลภาค

ตัวอย่าง:

<wpml-config>
    <elementor-widgets>
        <widget name="the-widget-name">
            <fields>
                <field type="post-ids" sub-type="attachment">image_id</field>
                <field type="post-ids" sub-type="post">selected_posts</field>
                <field type="term-ids" sub-type="category">category_filter</field>
            </fields>
        </widget>
    </elementor-widgets>
</wpml-config>

ในตัวอย่างนี้ แอตทริบิวต์ sub-type (ไม่บังคับ) จะระบุประเภทโพสต์หรืออนุกรมวิธานที่แน่นอนที่กำลังแปลง:

• สำหรับ type="post-ids": ใช้ sub-type="attachment", sub-type="post", sub-type="page" หรือ slug ประเภทโพสต์แบบกำหนดเองของคุณ
• สำหรับ type="term-ids": ใช้ sub-type="category", sub-type="post_tag" หรือ slug อนุกรมวิธานแบบกำหนดเองของคุณ

การเพิ่ม sub-type จะช่วยปรับปรุงประสิทธิภาพโดยหลีกเลี่ยงการสืบค้นฐานข้อมูลเพิ่มเติมเพื่อระบุประเภทเนื้อหา

สำหรับตัวอย่างเพิ่มเติม โปรดดูไฟล์การกำหนดค่าของ Elementor และค้นหา post-ids

การลงทะเบียนวิดเจ็ตด้วยฟิลด์ Repeater

วิดีโอต่อไปนี้จะแนะนำคุณเกี่ยวกับตัวอย่างการลงทะเบียนวิดเจ็ต Elementor ขั้นสูงที่มีฟิลด์ repeater:

สำหรับวิดเจ็ตที่มีฟิลด์ repeater คุณต้องครอบฟิลด์ไว้ในแท็ก <fields-in-item items_of="tabs"> (โดยที่ tabs คือชื่อของวิดเจ็ตที่มีฟิลด์ที่ทำซ้ำ) ลองดูตัวอย่างนี้:

<widget name="accordion">
	<fields-in-item items_of="tabs">
		<field type="Accordion: Title" editor_type="LINE">tab_title</field>
		<field type="Accordion: Content" editor_type="VISUAL">tab_content</field>
	</fields-in-item>
</widget>

ในบางกรณี วิดเจ็ตอาจมีฟิลด์ repeater หลายฟิลด์ ลองพิจารณาโครงสร้างข้อมูลต่อไปนี้จากวิดเจ็ต Table จาก Ultimate Addons for Elementor เป็นตัวอย่าง:

หากต้องการลงทะเบียนวิดเจ็ตนี้ โปรดดูตัวอย่างต่อไปนี้:

<widget name="uael-table">
	<fields-in-item items_of="table_content">
		<field type="The Cell text" editor_type="LINE">cell_text</field>
	</fields-in-item>
	<fields-in-item items_of="table_headings">
		<field type="The Heading text" editor_type="LINE">heading_text</field>
	</fields-in-item>
</widget>

การลงทะเบียนวิดเจ็ตที่มีทั้งฟิลด์แบบง่ายและ Repeater

โปรดทราบว่า วิดเจ็ตสามารถมีได้ทั้งสองประเภท: fields และ fields-in-item ลองดูตัวอย่างนี้สำหรับวิดเจ็ตที่ใช้ทั้งสองประเภท:

<widget name="price-table">
	<fields>
		<field type="Price Table: Heading" editor_type="LINE">heading</field>
		<!-- ... -->
	</fields>
	<fields-in-item items_of="features_list">
		<field type="Price table: text" editor_type="LINE">item_text</field>
	</fields-in-item>
</widget>

การจัดกลุ่มฟิลด์เพื่อการจัดระเบียบที่ดีขึ้น

เพื่อปรับปรุงความชัดเจนและการจัดระเบียบของการกำหนดค่า XML ของคุณ คุณสามารถใส่คำนำหน้าป้ายกำกับฟิลด์ด้วยชื่อกลุ่มได้ ลองพิจารณาตัวอย่างวิดเจ็ต hotspot นี้:

<widget name="hotspot">
    <fields-in-item items_of="hotspot">
        <field type="Hotspot: Label">hotspot_label</field>
        <field type="Hotspot: URL" key_of="hotspot_link">url</field>
        <field type="Hotspot: Content" editor_type="VISUAL">hotspot_tooltip_content</field>
    </fields-in-item>
</widget>

ในที่นี้ แต่ละฟิลด์ภายในวิดเจ็ต hotspot จะนำหน้าด้วยป้ายกำกับ Hotspot: คำนำหน้านี้จะปรากฏใน ตัวแก้ไขการแปลขั้นสูง ด้วยเช่นกัน ทำให้ง่ายต่อการระบุและแปลแต่ละฟิลด์:

การลงทะเบียนเนื้อหาของปลั๊กอินสร้างหน้าเว็บประเภทอื่น ๆ

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

แหล่งข้อมูลเพิ่มเติม

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับไฟล์ wpml-config.xml โปรดไปที่คู่มือไฟล์การกำหนดค่าภาษา

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

• ลงทะเบียนเนื้อหาของปลั๊กอินสร้างหน้าเว็บสำหรับการแปล
• แปล shortcode แบบกำหนดเองด้วย WPML
• ตั้งค่าตัวเลือกการแปลสำหรับฟิลด์กำหนดเองโดยใช้ไฟล์การกำหนดค่าของ WPML
• ลงทะเบียนคำ ประเภท และอนุกรมวิธานแบบกำหนดเองให้สามารถแปลได้
• ทำให้บล็อก Gutenberg แบบกำหนดเองสามารถแปลได้
• แปลข้อความที่ธีมและปลั๊กอินบันทึกไว้ใน wp_options
• ปรับแต่งตัวสลับภาษา WPML โดยใช้ไฟล์การกำหนดค่าของ WPML