เรียนรู้วิธีใช้โค้ด PHP ที่กำหนดเองและฟิลเตอร์ของ WPML เพื่อลงทะเบียนวิดเจ็ต Elementor ที่กำหนดเองสำหรับการแปลด้วยตนเอง
วิดเจ็ต Elementor ที่กำหนดเองมี 2 ประเภท:
- วิดเจ็ตแบบง่าย: เป็นวิดเจ็ตที่ไม่มีฟิลด์ repeater คุณสามารถลงทะเบียนวิดเจ็ตแบบง่ายโดยใช้ปลั๊กอิน Multilingual Tools ของ WPML เพื่อหลีกเลี่ยงการเขียนโค้ด PHP เพิ่มเติม
- วิดเจ็ตแบบซับซ้อน: วิดเจ็ตที่มีโครงสร้างซับซ้อนกว่า ซึ่งอาจมีฟิลด์ repeater ตั้งแต่หนึ่งฟิลด์ขึ้นไป
ในการทำให้วิดเจ็ตแบบซับซ้อนของคุณสามารถแปลได้ด้วย WPML คุณสามารถใช้วิธีใดวิธีหนึ่งจาก 2 วิธีนี้:
- แนะนำ: ใช้ wpml-config.xml ซึ่งเป็นไฟล์การกำหนดค่าของ WPML กระบวนการนี้อธิบายไว้ในบทช่วยสอนของเราเกี่ยวกับวิธีลงทะเบียนวิดเจ็ตของปลั๊กอินสร้างหน้าเว็บสำหรับการแปล
- ด้วยตนเอง: ใช้โค้ด PHP ที่กำหนดเอง หากคุณต้องการใช้วิธีนี้ คุณสามารถทำตามคำแนะนำในหน้านี้ได้
การเพิ่มการรองรับการแปลของ WPML ด้วย PHP
เพื่อสาธิตกระบวนการด้วยตนเอง เราได้นำวิดเจ็ตหนึ่งของ Elementor มาขยายเพื่อเพิ่มการรองรับ WPML คุณสามารถดูวิดเจ็ตนี้ได้ในหน้า GitHub นี้
1. เพิ่มฟิลเตอร์ของ WPML ลงในวิดเจ็ตของคุณ
สำหรับปลั๊กอินวิดเจ็ตที่กำหนดเองทุกตัว คุณควรเพิ่มฟิลเตอร์ wpml_elementor_widgets_to_translate ในระหว่าง action init ของปลั๊กอินนั้น WPML ใช้ฟิลเตอร์นี้เพื่อรวบรวมข้อมูลเพิ่มเติมเกี่ยวกับข้อความของวิดเจ็ตที่ต้องการการแปล
ฟิลเตอร์ของ WPML สำหรับวิดเจ็ต Elementor
add_filter( 'wpml_elementor_widgets_to_translate', [ $this, 'wpml_widgets_to_translate_filter' ] );
ฟิลเตอร์นี้จะส่งผ่านอาร์เรย์ที่แสดงรายการประเภทวิดเจ็ตทั้งหมดที่ต้องแปล อาร์เรย์นี้ประกอบด้วยส่วนเริ่มต้นของ Elementor และข้อมูลเกี่ยวกับสิ่งที่ต้องการแปล
คุณควรเพิ่มประเภทวิดเจ็ตใหม่ใด ๆ ลงในโครงสร้างนี้ ดังตัวอย่างต่อไปนี้
การเพิ่มวิดเจ็ต Elementor
public function wpml_widgets_to_translate_filter( $widgets ) {
$widgets[ $this->get_name() ] = [
'conditions' => [ 'widgetType' => $this->get_name() ],
'fields' => [
[
'field' => 'title',
'type' => __( 'Hello World Title', 'hello-world' ),
'editor_type' => 'LINE'
],
],
];
return $widgets;
}2. สร้างคลาสที่กำหนดเองเพื่อจัดการการแปล
เมื่อมีฟิลเตอร์แล้ว ให้สร้างคลาสที่กำหนดเองเพื่อจัดการการแปลวิดเจ็ตของคุณ ระบุชื่อคลาสในฟิลด์ integration-class
การระบุคลาสที่กำหนดเองซึ่งมีวิดเจ็ตที่ซับซ้อนยิ่งขึ้น
public function wpml_widgets_to_translate_filter( $widgets ) {
$widgets[ $this->get_name() ] = [
'conditions' => [ 'widgetType' => $this->get_name() ],
'fields' => [],
'integration-class' => 'My_Custom_Widget_WPML_Support’,
],
];
return $widgets;
}ในอาร์เรย์ fields คุณสามารถระบุองค์ประกอบต่อไปนี้ได้:
- field – id ของฟิลด์ ซึ่งจะเหมือนกับ id ที่ใช้เมื่อเพิ่มตัวควบคุมผ่านฟังก์ชัน Control_stack::add_control
- type – ประเภทของฟิลด์ นี่คือข้อความที่แสดงใน ตัวแก้ไขการแปล WPML เพื่อช่วยให้นักแปลทราบว่าต้องแปลฟิลด์ใด
- editor_type – นี่คือประเภทของฟิลด์ข้อความที่ใช้ในตัวแก้ไขการแปล WPML ค่าที่ถูกต้องคือ LINE, AREA และ VISUAL
3. นำอินเทอร์เฟซ IWPML_Page_Builders_Module ไปใช้
คลาสการผสานการทำงานจำเป็นต้องนำฟังก์ชัน get และ update ไปใช้ ฟังก์ชัน get จะส่งคืนรายการสตริงที่ต้องการการแปล และฟังก์ชัน update จะอัปเดตข้อมูล Elementor เมื่อได้รับการแปล
ตัวอย่างคลาสที่กำหนดเองซึ่งมีวิดเจ็ตที่ซับซ้อนยิ่งขึ้น
/**
* Class IWPML_Page_Builders_Module
*/
interface IWPML_Page_Builders_Module {
/**
* @param string|int $node_id
* @param mixed $element
* @param WPML_PB_String[] $strings
*
* @return WPML_PB_String[]
*/
public function get( $node_id, $element, $strings );
/**
* @param string|int $node_id
* @param mixed $element
* @param WPML_PB_String $string
*
* @return array
*/
public function update( $node_id, $element, WPML_PB_String $string );
}4. จัดการการเกิดซ้ำของฟิลด์เดียวกันในบล็อกโดยใช้ field_id
หากคุณมีการเกิดซ้ำของฟิลด์เดียวกันหลายครั้งภายในบล็อก ให้ใช้ field_id เพื่ออธิบายฟิลด์ภายในบล็อก Elementor วิธีนี้ช่วยให้คุณแยกแยะการเกิดซ้ำของฟิลด์เดียวกันในโหนดได้
การเกิดซ้ำของฟิลด์เดียวกันหลายครั้ง
public function wpml_widgets_to_translate_filter( $widgets ) {
$widgets[ $this->get_name() ] = [
'conditions' => [ 'widgetType' => $this->get_name() ],
'fields' => [
'title_1' => [
'field' => 'title',
'field_id' => 'title_1',
'type' => __( 'Hello World Title', 'hello-world' ),
'editor_type' => 'LINE'
],
'title_2' => [
'field' => 'title',
'field_id' => 'title_2',
'type' => __( 'Hello World Title', 'hello-world' ),
'editor_type' => 'LINE'
],
],
];
return $widgets;
}5. จัดการวิดเจ็ตที่มีรายการขององค์ประกอบอื่น ๆ โดยใช้คลาส WPML_Elementor_Module_With_Items
วิดเจ็ต Elementor บางตัว เช่น วิดเจ็ต Slides จะมีรายการขององค์ประกอบ (เช่น สไลด์หลายรายการที่มีส่วนหัวและปุ่ม) หากวิดเจ็ตที่กำหนดเองของคุณมีรายการที่คล้ายกัน คุณสามารถขยายคลาส WPML_Elementor_Module_With_Items เพื่อจัดการการแปลสำหรับแต่ละรายการแยกกันได้
ตัวอย่างคลาสที่กำหนดเองซึ่งมีรายการขององค์ประกอบอื่น ๆ
/**
* Class WPML_Elementor_Slides
*/
class WPML_Elementor_Slides extends WPML_Elementor_Module_With_Items {
/**
* @return string
*/
public function get_items_field() {
return 'slides';
}
/**
* @return array
*/
public function get_fields() {
return array( 'heading', 'description', 'button_text' );
}
/**
* @param string $field
*
* @return string
*/
protected function get_title( $field ) {
switch( $field ) {
case 'heading':
return esc_html__( 'Slides: heading', 'wpml-string-translation' );
case 'description':
return esc_html__( 'Slides: description', 'wpml-string-translation' );
case 'button_text':
return esc_html__( 'Slides: button text', 'wpml-string-translation' );
default:
return '';
}
}
/**
* @param string $field
*
* @return string
*/
protected function get_editor_type( $field ) {
switch( $field ) {
case 'heading':
case 'button_text':
return 'LINE';
case 'description':
return 'VISUAL';
default:
return '';
}
}
}คุณสามารถดูตัวอย่างเพิ่มเติมได้ในโฟลเดอร์ต่อไปนี้ของปลั๊กอินตัวหลักของ WPML:
- ..\wp-content\plugins\sitepress-multilingual-cms\addons\wpml-page-builders\classes\Integrations\Elementor\modules\
ตรวจสอบให้แน่ใจว่าได้โหลดคลาสบนฮุก init ตั้งแต่ WPML 4.5 เป็นต้นไป การโหลดคลาสก่อนแอ็กชันฮุก init จะทำให้เกิดข้อผิดพลาดร้ายแรง