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.

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

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

Page-Builder wie Elementor (wird in einem neuen Tab geöffnet), Beaver Builder (wird in einem neuen Tab geöffnet), SiteOrigin (wird in einem neuen Tab geöffnet) und Cornerstone (wird in einem neuen Tab geöffnet) bringen eine Reihe eigener 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 im Lieferumfang eines Page-Builders enthalten ist. Diese können von Ihrem Entwicklerteam oder von Drittentwicklern 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 von Ihrem Team oder von Dritten für Ihre WordPress-Websites oder einen bestimmten Page-Builder entwickelt wurde

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

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

Unser Multilingual Tools-Plugin enthält einen WPML – Config Generator für Elementor und Gutenberg-Blöcke. Mit dieser Funktion können Sie einer Seite beliebige benutzerdefinierte Elementor-Widgets oder Gutenberg-Blöcke hinzufügen, die Sie für die Übersetzung registrieren möchten. Sie 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.

So finden Sie die Registrierungsinformationen eines Widgets

Um ein benutzerdefiniertes Widget in der Datei wpml-config.xml registrieren zu können, müssen Sie zunächst einige grundlegende Informationen darüber herausfinden: den Namen des Widget-Typs und die Namen der Felder, die Sie übersetzen möchten.

Fügen Sie das Widget einzeln zu einer neuen Seite hinzu und speichern Sie die Seite. Elementor speichert die Widgets der Seite im Beitrags-Metafeld _elementor_data, und ein Plugin wie JSM Show Post Metadata (wird in einem neuen Tab geöffnet) zeigt dieses Feld in einer Metabox am Ende des Seiten-Editors an, sodass Sie die Daten des Widgets dort auslesen können.

In diesen Daten:

• widgetType ist der Name, der im Attribut name des Widgets verwendet werden muss.
• Die Schlüssel unter settings sind die Felder des Widgets. Ein Schlüssel, der einen Text enthält, den Sie übersetzen möchten, wie z. B. title, ist ein Feldname, den Sie registrieren müssen.
• Ein Repeater-Feld enthält ein Array von Zeilen. Der Schlüssel, der dieses Array enthält, wie z. B. contents, ist der Name für „items of“.

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

Um Ihre Arbeit zu überprüfen, öffnen Sie eine Seite, die das Widget verwendet, im Übersetzungs-Editor. Die von Ihnen registrierten Felder werden dort mit Namen angezeigt, zusammen mit den Texten des Widgets daneben. Ein nicht registriertes Widget trägt nichts zum Übersetzungsauftrag bei. Wenn also keiner seiner Texte erscheint, war die Registrierung nicht wirksam.

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 ein einfaches Widget registriert wird. 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>

Gehen wir die Struktur des angegebenen Beispiels durch:

1. 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 dies muss für den Cornerstone-Page-Builder verwendet werden, der mit dem X-Theme oder dem PRO-Theme geliefert wird.
2. 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.

3. Fügen Sie die Felder der Widgets hinzu, indem Sie sie in ein Tag <fields> einschließen:
   • 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 im Klassischen Übersetzungs-Editor von WPML angezeigt wird, um dem Übersetzer mitzuteilen, 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. Fehlt die Angabe, 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 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 durch Kommas getrennte 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 Inhalttyps vermieden werden.

Weitere Beispiele finden Sie in der Konfigurationsdatei von Elementor (wird in einem neuen Tab geöffnet), wenn Sie dort 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:

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 aus 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äfigieren. 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 ist jedem Feld innerhalb des Hotspot-Widgets die Bezeichnung Hotspot: vorangestellt. Dieses Präfix erscheint auch im Erweiterten Übersetzungs-Editor: Die Felder des Widgets befinden sich in einer Hotspot-Box und jedes trägt seine eigene Bezeichnung, was es einfacher macht, jedes Feld zu identifizieren und zu übersetzen:

Andere Arten von Page-Builder-Inhalten registrieren

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

Zusätzliche Ressourcen

Um mehr über die Datei wpml-config.xml zu erfahren, lesen Sie den Leitfaden zu Sprachkonfigurationsdateien.

Zur Anpassung weiterer Elemente mithilfe der Datei wpml-config.xml besuchen Sie unsere zusätzlichen Leitfäden:

• Page-Builder-Inhalte für die Übersetzung registrieren
• Benutzerdefinierte Shortcodes mit WPML übersetzen
• Übersetzungsoptionen für benutzerdefinierte Felder mithilfe der WPML-Konfigurationsdatei festlegen
• Benutzerdefinierte Begriffe, Typen & Taxonomien als übersetzbar registrieren
• Benutzerdefinierte Gutenberg-Blöcke übersetzbar machen
• Texte übersetzen, die Themes und Plugins in wp_options speichern
• WPML-Sprachumschalter mithilfe der WPML-Konfigurationsdatei anpassen