Benutzerdefinierte Page-Builder-Widgets für die Übersetzung registrieren

Um benutzerdefinierte Page-Builder-Widgets für die Übersetzung zu registrieren, müssen Sie die Datei wpml-config.xml verwenden. Folgen Sie diesem Tutorial, um zu erfahren, wie Sie sie verwenden.

Diese Anleitung richtet sich an Entwickler, die Themes und Plugins erstellen oder ihrer Website benutzerdefinierten Page-Builder-Code hinzufügen.

Wenn Sie einen Page-Builder von Drittanbietern verwenden und die benutzerdefinierten Widgets auf Ihrer Website nicht übersetzen können, wenden Sie sich bitte an den WPML-Support.

Page-Builder wie Elementor, Beaver Builder, SiteOrigin und Cornerstone bringen ihre eigenen Widgets mit. Diese Standard-Widgets funktionieren reibungslos mit WPML.

Manchmal erstellen Sie vielleicht benutzerdefinierte Widgets, die für die Verwendung mit diesen oder anderen Page-Buildern gedacht sind.

Ein benutzerdefiniertes Widget ist jedes einzigartige, zusätzliche Widget, das nicht mit einem Page-Builder gebündelt ist. Diese können von Ihrem Entwicklerteam oder Drittanbieter-Entwicklern erstellt werden oder aus anderen Plugins und Themes stammen.

Ein benutzerdefiniertes Widget ist auch jedes Widget, das aus Add-on-Plugins stammt, die von externen Entwicklern speziell für einen Page-Builder, wie Elementor, entwickelt wurden.

Wann muss ich benutzerdefinierte Widgets für die Übersetzung registrieren?

Sie müssen Ihr benutzerdefiniertes Widget für die Übersetzung registrieren:

Wenn es sich um ein Widget handelt, das ursprünglich nicht von einem Page-Builder bereitgestellt wurde
Wenn Sie es über ein anderes Plugin oder Theme erstellt und hinzugefügt haben
Wenn es für Ihre WordPress-Websites oder einen bestimmten Page-Builder von Ihrem Team oder Dritten entwickelt wurde

In der Vergangenheit war die Verwendung von benutzerdefiniertem PHP-Code der gängigste Weg, benutzerdefinierte Widgets für die Übersetzung zu registrieren. Jetzt können Sie das Widget ganz einfach mit wpml-config.xml, der Konfigurationsdatei von WPML, für die Übersetzung registrieren.

Registrieren benutzerdefinierter Elementor-Widgets für die Übersetzung in WPML 4.9+

In WPML 4.9 und neuer erkennt WPML benutzerdefinierte Elementor-Widgets automatisch und macht sie übersetzbar. Es kann jedoch Strings registrieren, die Sie nicht übersetzen möchten.

Deshalb empfehlen wir dringend, die Datei wpml-config.xml weiterhin manuell zu konfigurieren, wie auf dieser Seite beschrieben. Dies gibt Ihnen die Kontrolle darüber, welche Felder übersetzbar sind.

So registrieren Sie benutzerdefinierte Elementor-Widgets und Gutenberg-Blöcke für die Übersetzung mithilfe des Plugins Multilingual Tools

Unser Plugin Multilingual Tools enthält einen WPML – Config Generator für Elementor- und Gutenberg-Blöcke. Diese Funktion ermöglicht es Ihnen, beliebige benutzerdefinierte Elementor-Widgets oder Gutenberg-Blöcke, die Sie für die Übersetzung registrieren möchten, zu einer Seite hinzuzufügen. Er generiert dann automatisch die erste Version des benötigten XML-Codes.

Erfahren Sie, wie Sie benutzerdefinierte Elementor-Widgets für die Übersetzung registrieren und wie Sie Gutenberg-Blöcke übersetzbar machen.

Um ein benutzerdefiniertes Widget in der Datei wpml-config.xml registrieren zu können, müssen Sie zunächst einige grundlegende Informationen darüber finden.

Sie können diese Informationen ganz einfach erhalten, indem Sie ein Plugin wie JSM Show Post Metadata verwenden. Dieses Plugin zeigt Beitrags-Metadaten und ihre deserialisierten Werte in einer Metabox am unteren Rand der Beitragsbearbeitungsseiten an.

Alternativ können Sie die folgenden Schritte verwenden, um diese Informationen zu erhalten:

Gehen Sie zur Seite WPML → Einstellungen, scrollen Sie zum Abschnitt Übersetzung benutzerdefinierter Felder und klicken Sie auf den Link Systemfelder anzeigen.
Stellen Sie das benutzerdefinierte Feld _elementor_data auf Übersetzen.
Erstellen Sie eine neue Seite und fügen Sie nur das Elementor-Widget hinzu, das Sie registrieren möchten. Speichern Sie die Seite.
Gehen Sie zu WPML → Einstellungen und aktivieren Sie im Abschnitt Übersetzungs-Editor vorübergehend die Option Klassischer Übersetzungs-Editor.
Versuchen Sie, die in Schritt 3 erstellte Seite mit dem Klassischen Übersetzungs-Editor zu übersetzen, und Sie werden ein serialisiertes Array wie dieses bemerken:

Kopieren der Widget-Daten im Klassischen Editor — Serialisiertes Array des Elementor-Widgets, angezeigt im Klassischen Übersetzungs-Editor von WPML

Kopieren Sie den Inhalt des serialisierten Arrays.
Verwenden Sie Ihr bevorzugtes Deserialisierungs-Tool, um besser zu sehen, wie das Widget seinen Inhalt ausgibt. In unserem Fall haben wir die Unserialize-Website verwendet.

Hier ist die Erklärung des Array-Inhalts, den Sie sehen werden:

[widgetType] enthält den Namen, der im name-Attribut des Widget-Tags eingefügt ist.
Die eigentlichen Felder befinden sich in einem Array, und Sie können sie finden, indem Sie nach [0] suchen, was den Inhalt des ersten Elements des Arrays liefert.
Der Wert für field ist der Name in den Klammern, der den Feldnamen enthält. Zum Beispiel: [title] => this is a field title. In diesem Fall ist „title“ der Text, den Sie benötigen.
„Items of“ erhält seinen Wert von dem Element, das das Array erstellt. Zum Beispiel: [contents]=> array. In diesem Fall ist „contents“ der Text, den Sie benötigen.

Sobald Sie diese Informationen haben, können Sie mit der eigentlichen Registrierung des Widgets für die Übersetzung fortfahren.

Einfache Widgets registrieren

Das folgende Video führt Sie durch ein Beispiel für die Registrierung eines einfachen Elementor-Widgets:

Das folgende Beispiel veranschaulicht, wie Sie ein einfaches Widget registrieren. Ein einfaches Widget bedeutet hier, dass das Widget keine Repeater-Felder hat.

<wpml-config>
	<elementor-widgets>
		<widget name="heading">
			<conditions>
				<condition key="widgetType">heading</condition>
			</conditions>
			<fields>
				<field type="Heading" editor_type="LINE">title</field>
				<field type="Heading: Link URL" editor_type="LINK">link>url</field>
			</fields>
		</widget>
	</elementor-widgets>
</wpml-config>

Lassen Sie uns die Struktur des angegebenen Beispiels durchgehen:

Beginnen Sie mit dem Tag <elementor-widgets>. Dies teilt WPML mit, welche Page-Builder-Widgets Sie registrieren werden. Es kann eines der folgenden sein:
- <elementor-widgets>: Dies muss verwendet werden, wenn Sie Elementor, Elementor PRO oder ein anderes Elementor-Add-on verwenden.
- <beaver-builder-widgets>: Dies muss verwendet werden, wenn Sie Beaver Builder Lite, den Premium Beaver Builder oder ein anderes Beaver Builder-Add-on verwenden.
- <siteorigin-widgets>: Dies muss verwendet werden, wenn Sie den SiteOrigin Page-Builder verwenden.
- <cornerstone-widgets>: Und dieses muss für den Cornerstone Page-Builder verwendet werden, der mit dem X Theme oder PRO Theme geliefert wird.
Fügen Sie Ihre Widgets hinzu:
- <widget name="widget_name"> wobei widget_name der Name ist, der verwendet wird, um das Widget im Page-Builder zu registrieren.
- <conditions> (optional): Unter Bedingungen fügen Sie eine Bedingung mit einem Schlüssel hinzu, der dem Widget-Namen entspricht. Dies kann verwendet werden, wenn sich der Widget-Name vom Widget-Schlüssel in den Daten unterscheidet, wird aber normalerweise nicht benötigt.

Fügen Sie die Felder der Widgets hinzu und umschließen Sie sie mit einem <fields>-Tag:
- field: Die ID des Feldes. Dies ist dieselbe ID, die beim Hinzufügen eines Steuerelements über die Funktion Control_stack::add_control verwendet wird.
- type (optional): Der Typ des Feldes. Dies ist der Text, der im Erweiterten Übersetzungs-Editor oder Klassischen Übersetzungs-Editor von WPML angezeigt wird, um dem Übersetzer zu helfen, zu wissen, welches Feld übersetzt wird.
- editor_type (optional): Dies ist der Typ des Textfeldes, das im Klassischen Übersetzungs-Editor von WPML verwendet wird. Gültige Werte sind LINE, AREA, LINK und VISUAL. Wenn er fehlt, ist der Standardwert LINE.
- key_of (optional): Dies wird nur für <field>-Tags verwendet, die ein Array innerhalb eines <fields-in-item>-Tags haben.

Sie können diese Elemente verwenden, um ein einfaches Widget mit einer beliebigen Anzahl von Feldern zu registrieren.

Felder mit Beitrags- oder Taxonomie-IDs registrieren

Im obigen Abschnitt haben Sie erfahren, dass das Attribut type typischerweise verwendet wird, um beschreibenden Text im Übersetzungs-Editor anzuzeigen.

Wenn Ihre Widget-Felder jedoch Beitrags-IDs oder Taxonomie-IDs speichern (wie z. B. ausgewählte Bilder, verwandte Beiträge oder ausgewählte Kategorien), verwenden Sie spezielle Werte, die eine automatische Konvertierung auslösen:

type="post-ids" – für Felder, die Beitrags-IDs enthalten
type="term-ids" – für Felder, die Taxonomie-/Begriff-IDs enthalten

Wenn Sie diese types-Werte verwenden:

Das Feld wird nicht im Übersetzungs-Editor angezeigt
WPML konvertiert die IDs automatisch, sodass sie auf die entsprechenden übersetzten Inhalte verweisen
Es werden sowohl einzelne IDs als auch kommagetrennte Listen von IDs unterstützt

Beispiel:

<wpml-config>
    <elementor-widgets>
        <widget name="the-widget-name">
            <fields>
                <field type="post-ids" sub-type="attachment">image_id</field>
                <field type="post-ids" sub-type="post">selected_posts</field>
                <field type="term-ids" sub-type="category">category_filter</field>
            </fields>
        </widget>
    </elementor-widgets>
</wpml-config>

In diesem Beispiel gibt das optionale Attribut sub-type den genauen Beitragstyp oder die Taxonomie an, die konvertiert wird:

Für type="post-ids": Verwenden Sie sub-type="attachment", sub-type="post", sub-type="page" oder den Slug Ihres benutzerdefinierten Beitragstyps
Für type="term-ids": Verwenden Sie sub-type="category", sub-type="post_tag" oder den Slug Ihrer benutzerdefinierten Taxonomie

Das Hinzufügen von sub-type verbessert die Performance, da zusätzliche Datenbankabfragen zur Bestimmung des Inhaltstyps vermieden werden.

Weitere Beispiele finden Sie in der Konfigurationsdatei von Elementor, indem Sie nach post-ids suchen.

Widgets mit Repeater-Feldern registrieren

Das folgende Video führt Sie durch ein Beispiel für die Registrierung eines erweiterten Elementor-Widgets mit Repeater-Feldern:

A hotspot widget's fields in the Advanced Translation Editor

Bei Widgets, die Repeater-Felder haben, müssen Sie die Felder in das Tag <fields-in-item items_of="tabs"> einschließen (wobei tabs der Name des Widgets mit wiederholten Feldern ist). Sehen Sie sich dieses Beispiel an:

<widget name="accordion">
	<fields-in-item items_of="tabs">
		<field type="Accordion: Title" editor_type="LINE">tab_title</field>
		<field type="Accordion: Content" editor_type="VISUAL">tab_content</field>
	</fields-in-item>
</widget>

In einigen Fällen kann das Widget mehrere Repeater-Felder haben. Betrachten Sie als Beispiel die folgende Datenstruktur des Table-Widgets von Ultimate Addons for Elementor:

Die Datenstruktur eines Table-Widgets von Ultimate Addons for Elementor

Um dieses Widget zu registrieren, sehen Sie sich bitte das folgende Beispiel an:

<widget name="uael-table">
	<fields-in-item items_of="table_content">
		<field type="The Cell text" editor_type="LINE">cell_text</field>
	</fields-in-item>
	<fields-in-item items_of="table_headings">
		<field type="The Heading text" editor_type="LINE">heading_text</field>
	</fields-in-item>
</widget>

Widgets mit sowohl einfachen als auch Repeater-Feldern registrieren

Beachten Sie, dass Widgets beide Typen haben können: fields und fields-in-item. Sehen Sie sich dieses Beispiel für ein Widget an, das beide verwendet:

<widget name="price-table">
	<fields>
		<field type="Price Table: Heading" editor_type="LINE">heading</field>
		<!-- ... -->
	</fields>
	<fields-in-item items_of="features_list">
		<field type="Price table: text" editor_type="LINE">item_text</field>
	</fields-in-item>
</widget>

Felder zur besseren Organisation gruppieren

Um die Übersichtlichkeit und Organisation Ihrer XML-Konfiguration zu verbessern, können Sie Feldbezeichnungen mit dem Gruppennamen präfixieren. Betrachten Sie dieses Beispiel eines Hotspot-Widgets:

<widget name="hotspot">
    <fields-in-item items_of="hotspot">
        <field type="Hotspot: Label">hotspot_label</field>
        <field type="Hotspot: URL" key_of="hotspot_link">url</field>
        <field type="Hotspot: Content" editor_type="VISUAL">hotspot_tooltip_content</field>
    </fields-in-item>
</widget>

Hier wird jedem Feld innerhalb des Hotspot-Widgets die Bezeichnung Hotspot: vorangestellt. Dieses Präfix erscheint auch im Erweiterten Übersetzungs-Editor, was es einfacher macht, jedes Feld zu identifizieren und zu übersetzen:

Übersetzen des Hotspot-Widgets im Erweiterten Übersetzungs-Editor

Andere Arten von Page-Builder-Inhalten registrieren

Weitere Informationen zum Registrieren von Strings, Shortcodes und mehr finden Sie in unserer Dokumentation zum Registrieren von Page-Builder-Inhalten in Ihrer Sprachkonfigurationsdatei.

Zusätzliche Ressourcen

Um mehr über die Datei wpml-config.xml zu erfahren, besuchen Sie die Anleitung zu Sprachkonfigurationsdateien.

Informationen zum Anpassen anderer Elemente mithilfe der Datei wpml-config.xml finden Sie in unseren weiteren Anleitungen: