WPML

เรียนรู้วิธีใช้โค้ด PHP ที่กำหนดเองและฟิลเตอร์ของ WPML เพื่อลงทะเบียนวิดเจ็ต Elementor ที่กำหนดเองสำหรับการแปลด้วยตนเอง

วิดเจ็ต Elementor ที่กำหนดเองมี 2 ประเภท:

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

  1. แนะนำ: ใช้ wpml-config.xml ซึ่งเป็นไฟล์การกำหนดค่าของ WPML กระบวนการนี้อธิบายไว้ในบทช่วยสอนของเราเกี่ยวกับวิธีลงทะเบียนวิดเจ็ตของปลั๊กอินสร้างหน้าเว็บสำหรับการแปล
  2. ด้วยตนเอง: ใช้โค้ด 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 คุณสามารถระบุองค์ประกอบต่อไปนี้ได้:

  1. fieldid ของฟิลด์ ซึ่งจะเหมือนกับ id ที่ใช้เมื่อเพิ่มตัวควบคุมผ่านฟังก์ชัน Control_stack::add_control
  2. type – ประเภทของฟิลด์ นี่คือข้อความที่แสดงใน ตัวแก้ไขการแปล WPML เพื่อช่วยให้นักแปลทราบว่าต้องแปลฟิลด์ใด
  3. 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 จะทำให้เกิดข้อผิดพลาดร้ายแรง

เขียนโดย Amir · อัปเดตล่าสุด 7 พฤศจิกายน 2024