WPML

사용자 정의 PHP 코드와 WPML 필터를 사용하여 번역할 사용자 정의 Elementor 위젯을 수동으로 등록하는 방법을 알아보세요.

사용자 정의 Elementor 위젯에는 두 가지 유형이 있습니다.

WPML로 복합 위젯을 번역할 수 있게 하려면 다음 두 가지 방법 중 하나를 사용할 수 있습니다.

  1. 권장: WPML의 구성 파일인 wpml-config.xml을 사용합니다. 이 과정은 페이지 빌더 위젯을 번역용으로 등록하는 방법에 대한 튜토리얼에 설명되어 있습니다.
  2. 수동: 사용자 정의 PHP 코드를 사용합니다. 이 방법을 사용하려면 이 페이지의 지침을 따르세요.

PHP로 WPML 번역 지원 추가

수동 과정을 보여주기 위해 Elementor의 위젯 중 하나를 가져와 WPML 지원을 포함하도록 확장했습니다. 이 GitHub 페이지에서 해당 위젯을 찾을 수 있습니다.

1. 위젯에 WPML 필터 추가

모든 사용자 정의 위젯 플러그인의 경우, init 작업 중에 wpml_elementor_widgets_to_translate 필터를 추가해야 합니다. WPML은 이 필터를 사용하여 번역이 필요한 위젯 텍스트에 대한 추가 정보를 수집합니다.

Elementor 위젯용 WPML 필터
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. field – 필드의 id입니다. 이는 Control_stack::add_control 함수를 통해 컨트롤을 추가할 때 사용되는 id와 동일합니다.
  2. type – 필드의 유형입니다. 번역가가 어떤 필드를 번역해야 하는지 알 수 있도록 WPML 번역 에디터에 표시되는 텍스트입니다.
  3. editor_type – WPML 번역 에디터에서 사용되는 텍스트 필드의 유형입니다. 유효한 값은 LINE, AREAVISUAL입니다.

3. IWPML_Page_Builders_Module 인터페이스 구현

통합 클래스는 getupdate 함수를 구현해야 합니다. 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 클래스를 사용하여 다른 요소 목록이 있는 위젯 처리

Slides 위젯과 같은 일부 Elementor 위젯에는 요소 목록(예: 제목과 버튼이 있는 여러 슬라이드)이 포함되어 있습니다. 사용자 정의 위젯에 유사한 목록이 있는 경우 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 · 마지막 업데이트: 2024년 11월 7일