Cómo hacer traducibles los widgets personalizados de Elementor usando PHP

Aprenda a usar código PHP personalizado y filtros de WPML para registrar manualmente widgets personalizados de Elementor para su traducción.

Hay dos tipos de widgets personalizados de Elementor:

• Widgets simples: son widgets sin campos repetidores. Puede registrar widgets simples usando el plugin Herramientas multilingües de WPML para evitar programar código adicional en PHP.
• Widgets complejos: widgets con estructuras más complicadas. Pueden incluir uno o más campos repetidores.

Para hacer que su widget complejo sea traducible con WPML, puede usar una de estas dos formas:

1. Recomendado: usando wpml-config.xml, el archivo de configuración de WPML. El proceso se describe en nuestro tutorial sobre cómo registrar widgets de maquetadores visuales para su traducción.
2. Manual: usando código PHP personalizado. Si quiere usar este método, puede seguir las pautas de esta página.

Añadir compatibilidad de traducción de WPML con PHP

Para demostrar el proceso manual, tomamos uno de los widgets de Elementor y lo ampliamos para incluir compatibilidad con WPML. Puede encontrar el widget en esta página de GitHub.

1. Añadir un filtro de WPML a su widget

Para cada plugin de widget personalizado, debe añadir el filtro wpml_elementor_widgets_to_translate durante su acción init. WPML usa este filtro para recopilar más información sobre los textos del widget que necesitan traducción.

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

Este filtro pasa el array que enumera todos los tipos de widgets que necesitan ser traducidos. Este array incluye partes predeterminadas de Elementor e información sobre lo que necesita traducirse.

Debe añadir cualquier tipo de widget nuevo a esta estructura, como en el siguiente ejemplo.

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. Crear una clase personalizada que gestionará las traducciones

Con el filtro en su lugar, cree una clase personalizada para gestionar las traducciones de su widget. Especifique el nombre de la clase en el 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;
}

En el array fields, puede especificar los siguientes elementos:

1. field – El id del campo. Este es el mismo id que se usa al añadir un control a través de la función Control_stack::add_control.
2. type – El tipo de campo. Este es el texto que se muestra en el Editor de traducción de WPML para ayudar al traductor a saber qué campo se va a traducir.
3. editor_type – Este es el tipo de campo de texto usado en el editor de traducción de WPML. Los valores válidos son LINE, AREA y VISUAL.

3. Implementar la interfaz IWPML_Page_Builders_Module

La clase de integración necesita implementar las funciones get y update. La función get devuelve la lista de cadenas que necesitan traducción y la función update actualiza los datos de Elementor cuando se recibe una traducción.

/**
* 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. Manejar múltiples apariciones del mismo campo en un bloque usando field_id

Si tiene múltiples apariciones del mismo campo dentro de un bloque, use el field_id para describir un campo dentro de un bloque de Elementor. Esto le permite diferenciar las apariciones del mismo campo en un nodo.

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. Manejar widgets con listas de otros elementos usando la clase WPML_Elementor_Module_With_Items

Algunos widgets de Elementor, como el widget Slides, contienen listas de elementos (por ejemplo, múltiples diapositivas con encabezados y botones). Si su widget personalizado tiene listas similares, puede ampliar la clase WPML_Elementor_Module_With_Items para manejar la traducción de cada elemento 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 '';
     }
  }

}

Puede encontrar más ejemplos en la siguiente carpeta del plugin del núcleo de WPML:

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

Asegúrese de cargar las clases en el hook init . A partir de WPML 4.5, cargar las clases antes del hook de acción init provoca un error fatal.