Como tornar widgets personalizados do Elementor traduzíveis usando PHP

Aprenda a usar código PHP personalizado e filtros do WPML para registrar manualmente widgets personalizados do Elementor para tradução.

Existem dois tipos de widgets personalizados do Elementor:

• Widgets simples: são widgets sem campos repetidores. Você pode registrar widgets simples usando o plugin Multilingual Tools do WPML para evitar codificação extra em PHP.
• Widgets complexos: widgets com estruturas mais complicadas. Eles podem incluir um ou mais campos repetidores.

Para tornar seu widget complexo traduzível com o WPML, você pode usar uma de duas maneiras:

1. Recomendado: usando o wpml-config.xml, o arquivo de configuração do WPML. O processo é descrito em nosso tutorial sobre como registrar widgets de construtores de páginas para tradução.
2. Manual: usando código PHP personalizado. Se você quiser usar este método, pode seguir as diretrizes nesta página.

Como adicionar suporte à tradução do WPML com PHP

Para demonstrar o processo manual, pegamos um dos widgets do Elementor e o estendemos para incluir o suporte do WPML. Você pode encontrar o widget nesta página do GitHub.

1. Adicione um filtro do WPML ao seu widget

Para cada plugin de widget personalizado, você deve adicionar o filtro wpml_elementor_widgets_to_translate durante a ação init deles. O WPML usa este filtro para reunir mais informações sobre os textos do widget que precisam de tradução.

add_filter( 'wpml_elementor_widgets_to_translate', [ $this, 'wpml_widgets_to_translate_filter' ] );

Este filtro passa o array que lista todos os tipos de widgets que precisam ser traduzidos. Este array inclui partes padrão do Elementor e informações sobre o que precisa ser traduzido.

Você deve adicionar quaisquer novos tipos de widgets a esta estrutura, como no exemplo a seguir.

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. Crie uma classe personalizada que lidará com as traduções

Com o filtro em vigor, crie uma classe personalizada para gerenciar as traduções do seu widget. Especifique o nome da classe no campo 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;
}

No array fields, você pode especificar os seguintes elementos:

1. field – O id do campo. Este é o mesmo id usado ao adicionar um controle por meio da função Control_stack::add_control.
2. type – O tipo de campo. Este é o texto exibido no Editor de tradução do WPML para ajudar o tradutor a saber qual campo deve ser traduzido.
3. editor_type – Este é o tipo de campo de texto usado no editor de tradução do WPML. Os valores válidos são LINE, AREA e VISUAL.

3. Implemente a interface IWPML_Page_Builders_Module

A classe de integração precisa implementar as funções get e update. A função get retorna a lista de strings que precisam de tradução e a função update atualiza os dados do Elementor quando uma tradução é recebida.

/**
* 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. Lide com várias ocorrências do mesmo campo em um bloco usando field_id

Se você tiver várias ocorrências do mesmo campo dentro de um bloco, use o field_id para descrever um campo dentro de um bloco do Elementor. Isso permite que você diferencie as ocorrências do mesmo campo em um nó.

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. Lide com widgets com listas de outros elementos usando a classe WPML_Elementor_Module_With_Items

Alguns widgets do Elementor, como o widget Slides, contêm listas de elementos (por exemplo, vários slides com cabeçalhos e botões). Se o seu widget personalizado tiver listas semelhantes, você pode estender a classe WPML_Elementor_Module_With_Items para lidar com a tradução de cada item individualmente.

/**
* 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 '';
     }
  }

}

Você pode encontrar mais exemplos na seguinte pasta do plugin núcleo do WPML:

• ..\wp-content\plugins\sitepress-multilingual-cms\addons\wpml-page-builders\classes\Integrations\Elementor\modules\

Certifique-se de carregar as classes no hook init . A partir do WPML 4.5, carregar as classes antes do hook de ação init resulta em um erro fatal.