So machen Sie benutzerdefinierte Elementor-Widgets mit PHP übersetzbar

Erfahren Sie, wie Sie benutzerdefinierten PHP-Code und WPML-Filter verwenden, um benutzerdefinierte Elementor-Widgets manuell für die Übersetzung zu registrieren.

Es gibt zwei Arten von benutzerdefinierten Elementor-Widgets:

• Einfache Widgets: Dies sind Widgets ohne Repeater-Felder. Sie können einfache Widgets mit dem Multilingual Tools-Plugin von WPML registrieren, um zusätzlichen PHP-Code zu vermeiden.
• Komplexe Widgets: Widgets mit komplizierteren Strukturen. Sie können ein oder mehrere Repeater-Felder enthalten.

Um Ihr komplexes Widget mit WPML übersetzbar zu machen, können Sie einen von zwei Wegen nutzen:

1. Empfohlen: Über die wpml-config.xml, die Konfigurationsdatei von WPML. Der Prozess wird in unserem Tutorial beschrieben, wie Sie Page-Builder-Widgets für die Übersetzung registrieren.
2. Manuell: Über benutzerdefinierten PHP-Code. Wenn Sie diese Methode verwenden möchten, können Sie den Richtlinien auf dieser Seite folgen.

Hinzufügen von WPML-Übersetzungsunterstützung mit PHP

Um den manuellen Prozess zu demonstrieren, haben wir eines der Widgets von Elementor genommen und es um die WPML-Unterstützung erweitert. Sie finden das Widget auf dieser GitHub-Seite.

1. Fügen Sie Ihrem Widget einen WPML-Filter hinzu

Für jedes benutzerdefinierte Widget-Plugin sollten Sie den Filter wpml_elementor_widgets_to_translate während dessen init-Aktion hinzufügen. WPML verwendet diesen Filter, um weitere Informationen über die Widget-Texte zu sammeln, die übersetzt werden müssen.

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

Dieser Filter übergibt das Array, das alle Widget-Typen auflistet, die übersetzt werden müssen. Dieses Array enthält Standard-Elementor-Bestandteile und Informationen darüber, was übersetzt werden muss.

Sie sollten dieser Struktur alle neuen Widget-Typen hinzufügen, wie im folgenden Beispiel gezeigt.

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. Erstellen Sie eine benutzerdefinierte Klasse, die Übersetzungen verarbeitet

Wenn der Filter eingerichtet ist, erstellen Sie eine benutzerdefinierte Klasse, um die Übersetzungen Ihres Widgets zu verwalten. Geben Sie den Klassennamen im Feld integration-class an.

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;
}

Im fields-Array können Sie die folgenden Elemente angeben:

1. field – Die id des Feldes. Dies ist dieselbe id, die beim Hinzufügen eines Steuerelements über die Funktion Control_stack::add_control verwendet wird.
2. type – Der Typ des Feldes. Dies ist der Text, der im WPML-Übersetzungs-Editor angezeigt wird, um dem Übersetzer zu helfen, zu erkennen, welches Feld übersetzt werden soll.
3. editor_type – Dies ist der Typ des Textfeldes, das im WPML-Übersetzungs-Editor verwendet wird. Gültige Werte sind LINE, AREA und VISUAL.

3. Implementieren Sie das IWPML_Page_Builders_Module-Interface

Die Integrationsklasse muss die Funktionen get und update implementieren. Die Funktion get gibt die Liste der Strings zurück, die übersetzt werden müssen, und die Funktion update aktualisiert die Elementor-Daten, wenn eine Übersetzung empfangen wird.

/**
* 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. Behandeln Sie mehrfaches Auftreten desselben Feldes in einem Block mit field_id

Wenn dasselbe Feld innerhalb eines Blocks mehrfach auftritt, verwenden Sie die field_id, um ein Feld innerhalb eines Elementor-Blocks zu beschreiben. Dies ermöglicht es Ihnen, verschiedene Vorkommen desselben Feldes in einem Knoten zu unterscheiden.

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. Behandeln Sie Widgets mit Listen anderer Elemente über die Klasse WPML_Elementor_Module_With_Items

Einige Elementor-Widgets, wie das Slides-Widget, enthalten Listen von Elementen (z. B. mehrere Folien mit Überschriften und Buttons). Wenn Ihr benutzerdefiniertes Widget ähnliche Listen aufweist, können Sie die Klasse WPML_Elementor_Module_With_Items erweitern, um die Übersetzung für jedes Element einzeln zu behandeln.

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

}

Weitere Beispiele finden Sie im folgenden Ordner des WPML-Core-Plugins:

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

Stellen Sie sicher, dass Sie die Klassen beim init-Hook laden. Ab WPML 4.5 führt das Laden der Klassen vor dem init-Action-Hook zu einem schwerwiegenden Fehler.