Come rendere traducibili i widget personalizzati di Elementor usando PHP

Scopri come usare codice PHP personalizzato e i filtri di WPML per registrare manualmente i widget personalizzati di Elementor per la traduzione.

Esistono due tipi di widget personalizzati di Elementor:

• Widget semplici: sono widget senza campi ripetitore. Puoi registrare i widget semplici usando il plugin Multilingual Tools di WPML per evitare di scrivere codice PHP aggiuntivo.
• Widget complessi: widget con strutture più complicate. Possono includere uno o più campi ripetitore.

Per rendere traducibile il tuo widget complesso con WPML, puoi usare uno dei due metodi seguenti:

1. Consigliato: usare wpml-config.xml, il file di configurazione di WPML. Il processo è descritto nel nostro tutorial su come registrare i widget dei page builder per la traduzione.
2. Manuale: usare codice PHP personalizzato. Se vuoi usare questo metodo, puoi seguire le linee guida in questa pagina.

Aggiungere il supporto per la traduzione di WPML con PHP

Per dimostrare il processo manuale, abbiamo preso uno dei widget di Elementor e lo abbiamo esteso per includere il supporto per WPML. Puoi trovare il widget in questa pagina di GitHub.

1. Aggiungi un filtro di WPML al tuo widget

Per ogni plugin di widget personalizzati, devi aggiungere il filtro wpml_elementor_widgets_to_translate durante la loro azione init. WPML usa questo filtro per raccogliere maggiori informazioni sui testi dei widget che necessitano di traduzione.

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

Questo filtro passa l’array che elenca tutti i tipi di widget che devono essere tradotti. Questo array include le parti predefinite di Elementor e le informazioni su cosa necessita di traduzione.

Devi aggiungere eventuali nuovi tipi di widget a questa struttura, come nell’esempio seguente.

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. Crea una classe personalizzata che gestirà le traduzioni

Con il filtro in posizione, crea una classe personalizzata per gestire le traduzioni del tuo widget. Specifica il nome della classe nel 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;
}

Nell’array fields, puoi specificare i seguenti elementi:

1. field: l’id del campo. È lo stesso id usato quando si aggiunge un controllo tramite la funzione Control_stack::add_control.
2. type: il tipo di campo. Questo è il testo visualizzato nell’Editor di traduzione WPML per aiutare il traduttore a sapere quale campo deve essere tradotto.
3. editor_type: è il tipo di campo di testo usato nell’editor di traduzione di WPML. I valori validi sono LINE, AREA e VISUAL.

3. Implementa l’interfaccia IWPML_Page_Builders_Module

La classe di integrazione deve implementare le funzioni get e update. La funzione get restituisce l’elenco di stringhe che necessitano di traduzione e la funzione update aggiorna i dati di Elementor quando viene ricevuta una traduzione.

/**
* 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. Gestisci occorrenze multiple dello stesso campo in un blocco usando field_id

Se hai occorrenze multiple dello stesso campo all’interno di un blocco, usa field_id per descrivere un campo all’interno di un blocco di Elementor. Questo ti permette di distinguere le occorrenze dello stesso campo in 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. Gestisci i widget con elenchi di altri elementi usando la classe WPML_Elementor_Module_With_Items

Alcuni widget di Elementor, come il widget Slides, contengono elenchi di elementi (ad esempio, più diapositive con intestazioni e pulsanti). Se il tuo widget personalizzato ha elenchi simili, puoi estendere la classe WPML_Elementor_Module_With_Items per gestire la traduzione per ogni singolo elemento.

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

}

Puoi trovare altri esempi nella seguente cartella del plugin core di WPML:

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

Assicurati di caricare le classi sull’hook init . A partire da WPML 4.5, il caricamento delle classi prima dell’hook di azione init causa un errore fatale.