WPML

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

อัปเดตเมื่อ: 24 เมษายน 2026

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

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

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

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

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

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

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

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

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

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

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

การลงทะเบียนวิดเจ็ต Elementor แบบกำหนดเองสำหรับการแปลใน WPML 4.9+

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

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

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

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

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

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

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

เพิ่มวิดเจ็ตลงในหน้าใหม่และบันทึกหน้านั้น Elementor จะจัดเก็บวิดเจ็ตของหน้าไว้ในฟิลด์ post meta ชื่อ _elementor_data และปลั๊กอินอย่าง JSM Show Post Metadata (เปิดในแท็บใหม่) จะแสดงฟิลด์นั้นใน metabox ที่ด้านล่างของตัวแก้ไขหน้า เพื่อให้คุณสามารถอ่านข้อมูลของวิดเจ็ตได้ที่นั่น

ในข้อมูลนั้น:

  • widgetType คือชื่อที่จะใช้ในแอตทริบิวต์ name ของวิดเจ็ต
  • คีย์ภายใต้ settings คือฟิลด์ของวิดเจ็ต คีย์ที่เก็บข้อความที่คุณต้องการแปล เช่น title คือชื่อฟิลด์ที่จะลงทะเบียน
  • ฟิลด์ตัวทำซ้ำจะเก็บอาร์เรย์ของแถว คีย์ที่เก็บอาร์เรย์นั้น เช่น contents คือชื่อ "items of"
การคัดลอกข้อมูลวิดเจ็ตในตัวแก้ไขแบบคลาสสิก
อาร์เรย์แบบอนุกรมของวิดเจ็ต Elementor ที่แสดงในตัวแก้ไขการแปลแบบคลาสสิกของ WPML

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

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

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

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

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

<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> (ไม่บังคับ): ภายใต้เงื่อนไข คุณสามารถเพิ่มเงื่อนไขที่มีคีย์เท่ากับชื่อวิดเจ็ตได้ ซึ่งสามารถใช้ได้เมื่อชื่อวิดเจ็ตแตกต่างจากคีย์วิดเจ็ตในข้อมูล แต่มักไม่จำเป็นต้องใช้
  1. เพิ่มฟิลด์ของวิดเจ็ต โดยครอบไว้ในแท็ก <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 ของอนุกรมวิธาน/คำศัพท์

เมื่อคุณใช้ค่า 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

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

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

สำหรับวิดเจ็ตที่มีฟิลด์ตัวทำซ้ำ คุณต้องครอบฟิลด์ไว้ในแท็ก <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>

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

โครงสร้างข้อมูลของวิดเจ็ต 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>

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

หมายเหตุ วิดเจ็ตสามารถมีได้ทั้งสองประเภท: 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 ของคุณ คุณสามารถเพิ่มคำนำหน้าป้ายกำกับฟิลด์ด้วยชื่อกลุ่ม ลองพิจารณาตัวอย่างของวิดเจ็ตฮอตสปอตนี้:

<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 โปรดไปที่คู่มือเพิ่มเติมของเรา:

เขียนโดยAmir