Übersetzen von Websites, die mit Drag-and-Drop-Layouts erstellt wurden

Seit Version 3.2 kann WPML Entitäten übersetzen, die von anderen Plugins und Themes erstellt wurden. In diesem Beitrag zeigen wir, wie Sie Layouts übersetzen. Die Idee ist, nur ein Layout für alle Sprachen zu verwenden und nur die darin enthaltenen Texte zu übersetzen.

Einführung in Layouts

Das Layouts-Plugin ist ein Drag-and-Drop-Editor für Seitenlayouts. Layouts funktioniert mit Bootstrap-basierten Themes und erzeugt ein responsives Design. Es ist Teil des Toolset-Pakets von WordPress-Entwicklungs-Plugins.

Layouts gestaltet ganze Seiten, vom ersten bis zum letzten Pixel. Für sich genommen ist Layouts recht einfach gehalten, da es keine ausgefallenen Inhaltselemente enthält. Layouts benötigt keine riesige (und manchmal überladene) Bibliothek von Seitenelementen, da es mit den restlichen Toolset-Plugins zusammenarbeitet. Layout-Zellen können dynamische Inhalte von Ihrer Website und aus Formularen anzeigen. Anstatt eine Zelle aus einer Bibliothek auszuwählen und anzupassen, ermöglichen es Ihnen die Toolset-Plugins, ganz einfach und ohne Programmierkenntnisse Ihre eigenen Zellen zu erstellen.

Übersetzen von Layouts-basierten Websites

Layouts, die Sie erstellen, enthalten typischerweise etwas „statischen“ Text und einige dynamische Inhalte. Sehen Sie sich zum Beispiel unser Beispiel einer „Unternehmens-Website“ an.

Die dynamischen Elemente umfassen die Liste der Dienstleistungen und hervorgehobenen Artikel. Sie werden mit Views erstellt. Ein View ist wie eine WP_Query mit einem Anzeige-Template. Da sich WPML in Abfragen einklinkt (Hooks) und dafür sorgt, dass diese Inhalte in der richtigen Sprache laden, müssen Sie nichts tun, um Views zu übersetzen. Genau derselbe View lädt die korrekten Inhalte in der angezeigten Sprache.

Die statischen Elemente auf dieser Seite sind die Überschriften. Die Texte „Our Services“ und „Features Articles“ sind Teil des Layouts. Sie stammen nicht aus dynamischen Inhalten. Wenn Sie dasselbe Layout für die Startseite in einer anderen Sprache verwenden, möchten Sie, dass diese Texte übersetzt erscheinen. Hier kommt die Paket-Übersetzung von WPML ins Spiel. Es handelt sich um eine neue API, die wir in WPML 3.2 hinzugefügt haben und die allen anderen Autoren zur Nutzung offensteht.

Das Layouts-Plugin erstellt Pakete für WPML. Ein Paket für ein Layout enthält alle statischen Texte, die im Layout vorhanden sind und übersetzt werden müssen. Diese Pakete sehen normalen WordPress-Inhalten, die Sie mit dem Übersetzungs-Editor von WPML übersetzen, sehr ähnlich. Sie sehen alle Felder, die eine Übersetzung erfordern.

Auf diese Weise erstellen Sie ein Layout und verwenden es für alle Sprachen Ihrer Website. Sie übersetzen nur die statischen Texte, und alle dynamischen Inhalte werden in der korrekten Sprache angezeigt.

Möchten Sie es ausprobieren?

Wir haben eine Test-Website erstellt, auf der Sie mit den Toolset-Plugins und WPML experimentieren können. Um sie zu nutzen, starten Sie Ihre private und kostenlose Trainings-Website.

Wir haben die Testinhalte bereits für Sie erstellt, sodass Sie mit Layouts und dem Übersetzungsprozess experimentieren können.

Die Standardsprache der Website ist Englisch und sie ist vollständig ins Spanische übersetzt. Wir haben Inhalte auf Französisch hinzugefügt, aber die Layouts noch nicht ins Französische übersetzt.

Folgen Sie dem Video mit diesen Schritten:

1. Erstellen Sie die Trainings-Website auf discover-wp.com
2. Besuchen Sie die Startseite Ihrer Website und wechseln Sie zu Französisch. Sie werden feststellen, dass alle dynamischen Elemente tatsächlich auf Französisch sind, die statischen Texte jedoch noch auf Englisch.
3. Beginnen Sie damit, mit Layouts zu spielen und zu sehen, wie es funktioniert.
4. Gehen Sie zu WPML->Übersetzungsmanagement. Wählen Sie im Tab „Übersetzungs-Dashboard“ im Bereich Filter aus dem Dropdown-Menü Typ die Option „Layouts“ aus.
5. Wählen Sie das Layout Home aus und senden Sie es zur Übersetzung ins Französische (es ist bereits ins Spanische übersetzt).
6. Gehen Sie zu WPML->Übersetzungen, suchen Sie den Auftrag Layout-Home und klicken Sie auf „Übernehmen und bearbeiten“.
7. Übersetzen Sie die Texte. Benötigen Sie Hilfe? Verwenden Sie diesen kleinen Spickzettel für die Haupttexte der Seite:

   Englisch	Französisch
   Our Services	Nos services
   Featured articles	Articles Vedettes
   Testimonials	Témoignages
   Company Overview	Présentation de l’entreprise
   Recent News	Nouvelles récentes

   
   Denken Sie daran, neben jedem Feld auf „Übersetzung abgeschlossen“ und ganz unten auf der Seite, direkt über dem Button „Speichern“, auf das Kontrollkästchen „Übersetzung ist abgeschlossen“ zu klicken.
8. Besuchen Sie Ihre französische Startseite erneut. Nun sollten Sie alles, einschließlich der statischen Texte, übersetzt sehen.
9. Experimentieren Sie erneut, indem Sie das Layout bearbeiten. Sie werden sehen, dass Ihre Änderungen auf alle Sprachen der Website angewendet werden. Wenn Sie Texte bearbeiten oder hinzufügen, müssen Sie die Übersetzung aktualisieren, beginnend mit dem Übersetzungs-Dashboard.

Die obigen Schritte gelten für die Übersetzung der Layouts mithilfe unserer Referenz-Website. Die Website wird mit allen erforderlichen, vorinstallierten Plugins geliefert.

Wenn Sie die Schritte auf Ihrer eigenen Website nachvollziehen möchten, lesen Sie die Dokumentation „How to translate Layouts“ auf wp-types.com. Dort finden Sie die Liste aller erforderlichen Plugins und weitere Beispiele.

Wie geht es weiter?

Wenn Ihnen die Bearbeitung mit Layouts gefallen hat, sind Sie natürlich herzlich eingeladen, Toolset zu kaufen und es für Ihre echten Projekte zu verwenden.

Wir möchten, dass noch viel mehr Plugins und Themes eine einfache Übersetzung für komplexe Strukturen anbieten. Wenn Sie Page Builder, Formulare und andere „Nicht-WordPress“-Elemente verwenden, ermutigen wir Sie, die Autoren dieser Plugins und Themes zu kontaktieren. Erzählen Sie ihnen von dieser Möglichkeit in WPML. Wir sind sehr daran interessiert, mit anderen Autoren zusammenzuarbeiten und die Paket-Übersetzungs-API zu integrieren.

Hinterlassen Sie hier Ihre Kommentare und wir werden uns bei Ihnen melden.