Die Kompatibilität des Divi Builders mit WPML aufrechterhalten

Erfahren Sie, wie Sie die Kompatibilität von Divi-Modulen mit WPML über die Sprachkonfigurationsdatei wpml-config.xml aufrechterhalten.

Diese Dokumentation richtet sich an das Divi-Entwicklungsteam und an Webentwickler, die Divi verwenden. Sie erklärt den Prozess zur Aufrechterhaltung der Kompatibilität des Divi Builders mit WPML, was durch die Aktualisierung der Sprachkonfigurationsdatei erfolgt.

Diese Seite bezieht sich auf Divi 5, das Inhalte als Gutenberg-kompatible Blöcke speichert (Divi 4 verwendete Shortcodes).

Wie die Integration des Divi Builders mit WPML funktioniert

Um zu verstehen, wie der Divi Builder mit WPML funktioniert, erstellen wir zunächst eine einfache Seite mit dem Divi Builder. In unserem Beispiel unten haben wir einige Module hinzugefügt, wie Text, Number Counter, Icon usw.

Um zu übersetzen, gehen Sie zu WPML → Übersetzungs-Dashboard und suchen Sie die Seite im Abschnitt Seiten. Wählen Sie sie aus und klicken Sie auf Ihre Inhalte übersetzen, um die Übersetzungsmethode auszuwählen. Wenn Sie über Credits für automatische Übersetzung verfügen, können Sie diese Seite in wenigen Minuten automatisch übersetzen.

Verwenden der Sprachkonfigurationsdatei

In der Datei wpml-config.xml können Sie die folgenden Elemente konfigurieren:

• Page-Builder-Blöcke
• Benutzerdefinierte Felder
• Benutzerdefinierte Taxonomien
• Admin-Texte / wp_options
• Sprachumschalter-Konfiguration

Weitere Informationen zu Struktur und Syntax finden Sie in unserem Leitfaden zur Sprachkonfigurationsdatei.

Die Konfigurationsdatei für Divi abrufen

Durch die Konfiguration der Datei wpml-config.xml werden Strings aus Seiten extrahiert, die mit dem Divi Builder erstellt wurden, und in den Erweiterten Übersetzungs-Editor geladen. Verwenden Sie diese Datei, um neue Blocktypen und Attribute hinzuzufügen sowie veraltete Blocktypen zu entfernen.

Sie können die Sprachkonfigurationsdatei aus unserem Repository herunterladen und nach der Konfiguration im Stammordner Ihres Themes ablegen.

Wir hosten die Sprachkonfigurationsdatei für Divi auf unseren Servern, sodass sie die lokale Konfigurationsdatei im Stammordner von Divi überschreibt. Dies stellt sicher, dass die Konfigurationsdatei immer auf dem neuesten Stand ist.

Blöcke in der Sprachkonfigurationsdatei konfigurieren

Divi 5 verwendet eine Block-Syntax. Daher ähnelt die Registrierung von Divi-Modulen für die Übersetzung dem Prozess zum Übersetzen von Gutenberg-Blöcken:

• Alle Blockdefinitionen sind in ein übergeordnetes <gutenberg-blocks>-Element eingeschlossen.
• Jeder einzelne Block wird mit einem <gutenberg-block>-Element deklariert, wobei das Attribut type dem registrierten Namen des Blocks entspricht.
• Übersetzbare Felder werden als untergeordnete <key>-Elemente deklariert.

Nehmen wir als Beispiel ein Call-to-Action-Modul von Divi:

<!-- wp:divi/cta {"module":{"title":"CTA","button_text":"Contact Us","button_url":"https://example.com/contact/"}} /-->

So wird es in der wpml-config.xml konfiguriert:

<gutenberg-blocks>
    <gutenberg-block type="divi/cta" translate="1">
       <key name="module">
         <key name="title" />
         <key name="button_text" />
         <key name="button_url" type="link" />
       </key>
    </gutenberg-block>
</gutenberg-blocks>

Die Struktur gliedert sich wie folgt:

• Das <gutenberg-blocks>-Element umschließt alle Blockdefinitionen.
• Ein <gutenberg-block>-Element definiert einen einzelnen Blocktyp, der durch das Attribut type identifiziert wird. Das translate="1" weist WPML an, diesen zu verarbeiten.
• Jedes <key>-Element identifiziert ein übersetzbares Feld: title und button_text für reine Textfelder und button_url für einen Link.
• Das Attribut type="link" weist WPML an, die URL automatisch durch die übersetzte Version des verlinkten Beitrags oder der verlinkten Seite zu ersetzen.

Die Sprachkonfigurationsdatei testen

Um die aktualisierte Sprachkonfigurationsdatei zu testen, führen Sie die folgenden Schritte aus:

1. Richten Sie eine Website ein, auf der sowohl Divi als auch WPML aktiviert sind. Stellen Sie sicher, dass Sie auch die Add-ons String-Übersetzung und Medienübersetzung aktivieren.

2. Um die remote Sprachkonfigurationsdatei mit der aktualisierten Version zu überschreiben, navigieren Sie zu WPML → Einstellungen und klicken Sie auf den Tab Benutzerdefinierte XML-Konfiguration. Kopieren Sie den Inhalt Ihrer aktualisierten Sprachkonfigurationsdatei in den Editor und klicken Sie dann auf Speichern.

3. Erstellen Sie eine neue Seite und fügen Sie ihr das neue Modul (oder die neuen Module) hinzu. Wenn Sie einige Attribute für bestehende Module aktualisiert haben, fügen Sie diese ebenfalls zur Seite hinzu. In diesem Beispiel gehen wir davon aus, dass das Button-Modul neu zum Divi Builder hinzugefügt wurde. Fügen Sie es zur Seite hinzu und klicken Sie dann auf Veröffentlichen.

4. Um die Seite mit dem Button zu übersetzen, können Sie das Übersetzungs-Dashboard verwenden. Eine Alternative ist die Verwendung des Erweiterten Übersetzungs-Editors (ATE), was beim Testen nützlich sein kann – er ermöglicht es Ihnen, das Modul-Tag für jedes Divi-Element auf der Seite zu sehen. Um den ATE zu öffnen, rufen Sie die Seite Bearbeiten auf und klicken Sie auf das Plus-Symbol unter der Sprachen-Box in der rechten Seitenleiste.

5. Überprüfen Sie die Elemente und fügen Sie Ihre Übersetzungen hinzu oder lassen Sie den ATE automatisch übersetzen.

Jetzt können Sie sich die übersetzte Seite im Frontend ansehen. Die übersetzte Seite sollte alle übersetzten Strings anzeigen, was bedeutet, dass die aktualisierte Sprachkonfigurationsdatei ordnungsgemäß funktioniert.

Falls Sie auf Probleme stoßen, kontaktieren Sie bitte unser Kompatibilitäts-Entwicklungsteam. Es wird sich gerne um Probleme im Zusammenhang mit der Sprachkonfigurationsdatei kümmern.

Sobald Sie mit den Tests fertig sind, reichen Sie bitte einen Merge Request in unserem Repository ein. Unsere Kompatibilitätsentwickler werden Ihre Anfrage erhalten und überprüfen.