Page-Builder-Inhalte für die Übersetzung registrieren

Erfahren Sie, wie Sie benutzerdefinierte Page-Builder-Inhalte für die Übersetzung über die Datei wpml-config.xml registrieren. Registrieren Sie Strings, Medien, Page-Builder-Widgets, Shortcode-IDs und mehr.

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, wenden Sie sich bitte an den WPML-Support.

Müssen Sie eine Datei wpml-config.xml generieren? Besuchen Sie unsere Schritt-für-Schritt-Anleitung zum automatischen Generieren einer Konfigurationsdatei mit dem Plugin Multilingual Tools.

Strings übersetzen

Betrachten wir ein Beispiel, bei dem Sie einer Seite mit Visual Composer ein Text-Trennzeichen hinzugefügt haben. Dieses Trennzeichen hat einen Titel, und sein Shortcode sieht wie folgt aus:

[vc_text_separator title="Separator Title"]

Um den Titel dieses Text-Trennzeichens zu übersetzen, müssen Sie Ihrer Datei wpml-config.xml einige Zeilen hinzufügen. Auf diese Weise „weiß“ WPML, dass der Titel dieses Trennzeichens übersetzt werden muss.

Der folgende Code ist ein Beispiel dafür, was Sie in diesem Fall zur Datei wpml-config.xml hinzufügen müssen.

Beispiel für das Hinzufügen eines Page-Builder-Shortcodes zur Datei wpml-config.xml

<wpml-config>
  <shortcodes>
    <shortcode>
        <tag>vc_text_separator</tag>
        <attributes>
            <attribute>title</attribute>
        </attributes>
    </shortcode>
  </shortcodes>
</wpml-config>

Gehen wir die Struktur des obigen Beispiels durch:

Beginnen Sie mit dem Tag shortcodes. Alle Shortcodes auf Ihrer Website, die übersetzt werden müssen, sollten unter diesem Tag platziert werden.
Verwenden Sie das Tag shortcode, um alle Tags zu umschließen, die zu einem einzelnen Shortcode gehören.
Verwenden Sie das Tag namens tag, um den Namen des Shortcodes zu definieren. In diesem Fall ist es vc_text_separator. Wenn Sie möchten, können Sie Tags optionale, benutzerdefinierte Labels hinzufügen. Diese Labels werden neben dem Text sowohl im Erweiterten Übersetzungs-Editor als auch im Klassischen Übersetzungs-Editor angezeigt. Exportierte XLIFF-Dateien enthalten diese Labels ebenfalls. Im folgenden Beispiel sehen Sie, wie Sie Tags und Attributen Labels hinzufügen.
Shortcodes können ein oder mehrere Attribute haben, daher müssen Sie sie in das Tag attributes (Plural) einschließen und das Tag attribute (Singular) verwenden, um den Titel jedes Attributs zu definieren.

Page-Builder enthalten (manchmal) Designelemente, die Link-Attribute haben.

Sie können interne Links automatisch auf die übersetzte Version dieses Beitrags verweisen lassen, indem Sie die Link-Option verwenden: type="link".

Sie können hierfür das Attribut encoding verwenden. Es verarbeitet spezielle Codierungen, die von verschiedenen Page-Buildern verwendet werden. Das Attribut encoding ist normalerweise spezifisch für den von Ihnen verwendeten Page-Builder. Es akzeptiert die folgenden Werte:

base64 – Visual Composer Raw-HTML-Shortcode. Der Shortcode speichert das HTML als base64-String.
vc_link – Spezielle Link-Formatierung für Visual Composer.
vc_values – Spezielle Visual Composer-Codierung für Werte in Fortschrittsbalken-, Kreisdiagramm- und Liniendiagramm-Widgets.
av_link – Spezielle Link-Formatierung für Enfold.
allow_html_tags – Normalerweise werden HTML-Tags aus Shortcode-Attributen entfernt. Setzen Sie encoding auf allow_html_tags, wenn das Shortcode-Attribut HTML-Tags zulassen soll. Verwenden Sie dies mit Vorsicht, da das Zulassen von HTML-Tags in einigen Situationen die Formatierung durcheinanderbringen und ein Sicherheitsproblem darstellen kann.

Beispiel für das Hinzufügen eines Shortcode-Link-Attributs: type="link"

<wpml-config>
  <shortcodes>
    <shortcode>
            <tag>av_button</tag>
            <attributes>
                <attribute>label</attribute>
                <attribute type="link" encoding="av_link">link</attribute>
            </attributes>
    </shortcode>
  </shortcodes>
</wpml-config>

Wenn Sie erwägen, urlencoded-Shortcodes zu verwenden, lesen Sie unbedingt die Seite über das Übersetzen von urlencoded-Shortcodes.

Beispiel für das Hinzufügen von Tag- und Attribut-Labels

<wpml-config>
    <shortcodes>
        <shortcode>
            <tag label="My shortcode label">my_shortcode</tag>
            <attributes>
                <attribute label="Shortcode title">title</attribute>
            </attributes>
        </shortcode>
    </shortcodes>
</wpml-config>

Das Hinzufügen von Labels zu Tags und Attributen ermöglicht es Ihnen, benutzerdefinierte Labels im Erweiterten Übersetzungs-Editor oder im Klassischen Übersetzungs-Editor anzuzeigen. Dies kann dem Übersetzer helfen, den Kontext des Strings besser zu verstehen.

Felder zur besseren Organisation gruppieren

Um die Übersichtlichkeit und Organisation Ihrer XML-Konfiguration zu verbessern, können Sie Feld-Labels mit dem Gruppennamen präfigieren. Betrachten Sie dieses Beispiel eines CTA-Buttons:

<wpml-config>
    <shortcodes>
        <shortcode>
            <tag label="Call To Action: Content">et_pb_cta</tag>
            <attributes>
                <attribute label="Call To Action: Title">title</attribute>
                <attribute label="Call To Action: Button Text">button_text</attribute>
                <attribute label="Call To Action: Button URL" type="link">button_url</attribute>
            </attributes>
        </shortcode>
    </shortcodes>
</wpml-config>

Hier wird jedem Attribut innerhalb des Shortcodes et_pb_cta das Label Call To Action: vorangestellt, das auch im Erweiterten Übersetzungs-Editor angezeigt wird:

CTA-Button im Erweiterten Übersetzungs-Editor übersetzen

Medien übersetzen

Sie können die WPML Medienübersetzung verwenden, um unterschiedliche Bilder für verschiedene Sprachen in Page-Builder-Inhalten zu verwenden. Dies geschieht durch die Konvertierung von Bild-IDs und Bild-URLs. Sie müssen dem Page-Builder, der Shortcodes verwendet, „mitteilen“, wie diese Konvertierung durchzuführen ist. Der folgende Code ist ein Beispiel dafür, was Sie in diesem Fall zur Datei wpml-config.xml hinzufügen müssen.

Beispiel für das Hinzufügen eines Page-Builder-Shortcodes zur Datei wpml-config.xml für die Bildübersetzung

<wpml-config>
  <shortcodes>
    <shortcode>
        <!-- Convert media IDs in `gallery_ids` attribute, and ignore the shortcode content -->
        <tag ignore-content="1">et_pb_gallery</tag>
        <attributes>
          <attribute type="media-ids">gallery_ids</attribute>
        <attributes>
    </shortcode>
    <shortcode>
        <!-- Convert the media URL in the content, translate some string attributes for `title` and `alt`, convert media URL in `src` attribute -->
        <tag type="media-url">et_pb_image</tag>
        <attributes>
          <attribute>title_text</attribute>
          <attribute>alt</attribute>
          <attribute type="media-url">src</attribute>
        </attributes>
    </shortcode>
  </shortcodes>
</wpml-config>

Sie können die folgenden Werte verwenden:

ignore-content – Sie können dies innerhalb eines tag-Elements verwenden. Dieser Wert ist optional und kann entweder 0 oder 1 sein. Sie können dieses Attribut verwenden, um Abwärtskompatibilität für neue Medien-Shortcodes zu erreichen. Wenn der Wert auf 1 gesetzt ist, wird der Shortcode-Inhalt nicht verarbeitet.
type – Sie können dies innerhalb eines tag-Elements verwenden. Sie können auch Shortcode-Inhalt, der eine Medien-URL enthält, als optionalen Wert innerhalb von media-url verwenden.
type – Sie können dies auch innerhalb eines attribute-Elements verwenden. In diesem Fall kann es einen der folgenden optionalen Werte haben:
- media-ids – eine durch Kommas getrennte Liste von Medien-IDs.
- media-url – URL der Medien
- link – verweist auf eine andere Seite der Website und WPML konvertiert sie automatisch in die URL der übersetzten Seite

Medien in Block-Attributen übersetzen

Sie können auch die Attributtypen media-url und media-ids mit Gutenberg-Blöcken verwenden, um Medien wie Hintergrundbilder zu übersetzen. Dies funktioniert ähnlich wie bei Shortcodes, verwendet jedoch das Element <gutenberg-block> mit verschachtelten <key>-Elementen, um type="media-url" und type="media-ids" zu definieren.

Die Verwendung dieses Elements ermöglicht es unserem WPML-Add-on Medienübersetzung, Hintergrundbilder zu übersetzen.

Dies funktioniert sowohl für Gutenberg-Blöcke als auch für Divi 5. Diese Divi-Version verwendet Blöcke zum Speichern von Inhalten, sodass das Element <gutenberg-block> funktioniert, um die Medienübersetzung hinzuzufügen.

Hier ist ein Beispiel für das Hinzufügen der Medienübersetzung für Gutenberg-Block-Attribute:

<wpml-config>
  <gutenberg-blocks>
        <gutenberg-block type="divi/section" translate="1">
            <key name="module">
                <key name="decoration">
                    <key name="background">
                        <key name="desktop">
                            <key name="value">
                                <key name="image">
                                    <key name="url" type="media-url" />
                                </key>
                            </key>
                        </key>
                    </key>
                </key>
            </key>
        </gutenberg-block>
  </gutenberg-blocks>
</wpml-config>

Page-Builder-Widgets übersetzen

WPML ermöglicht es Ihnen, Page-Builder-Widgets in Ihrer Sprachkonfigurationsdatei zu registrieren. Detaillierte Informationen finden Sie auf unserer Dokumentationsseite darüber, wie Sie Page-Builder-Widgets für die Übersetzung registrieren.

Shortcode-IDs automatisch konvertieren

Ab WPML 4.5.9 können Sie die IDs von Beiträgen oder Taxonomie-Begriffen deklarieren, die sich in Shortcode-Attributen befinden. Diese IDs können dann im Frontend Ihrer Website automatisch konvertiert werden.

Ab WPML 4.8 erstreckt sich dieselbe Logik auf Objekt-IDs, die in Admin-Texten gespeichert sind, sowie auf IDs in benutzerdefinierten Feldern von Beiträgen und benutzerdefinierten Feldern von Taxonomie-Begriffen.

Betrachten Sie zum Beispiel den folgenden Shortcode:

[foo_product_list product_ids="12,34,56"]

Sie können mit der folgenden Konfiguration deklarieren, dass das Attribut product_ids Beitrags-IDs enthält:

Deklarieren, dass das Attribut product_ids Beitrags-IDs enthält

<shortcode>
    <tag ignore-content="1">foo_product_list</tag>
    <attributes>
        <attribute type="post-ids" sub-type="product">product</attribute>
    </attributes>
</shortcode>

Im Frontend wird der Shortcode automatisch konvertiert in:

[foo_product_list product_ids="13,35,57"]

Sie können die folgenden Konfigurationsattribute verwenden:

type – entweder post-ids oder taxonomy-ids
sub-type (optional) – eine spezifische Entität des type, falls diese bereits bekannt ist. Zum Beispiel product für den benutzerdefinierten Beitragstyp Product, der von WooCommerce stammt. Wenn dies nicht definiert ist, wird die spezifische Entität erraten.

Die ID-Konvertierung ist vielseitig und versucht, sich an die meisten möglichen Formate von IDs anzupassen (einzelne ID, Liste von IDs, serialisiertes Array, JSON-codiertes Array).

Zusätzliche Ressourcen

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

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