In diesem Tutorial lernen Sie, wie Sie eine mehrsprachige Website mit Stitched und WPML erstellen. Stitched ist ein Theme für Kunsthandwerker. Sie können seine Einführungskomponente auf der Startseite nutzen, um Ihren Besuchern etwas über sich zu erzählen, und Sie können seine Funktionalität erweitern, indem Sie die empfohlenen Plugins installieren, die darin integriert werden können.
Stitched wird von WooThemes entwickelt. Für Themes und Plugins, die von WooThemes entwickelt wurden, empfehlen wir Ihnen, die integrierte Benutzeroberfläche von WPML für die Übersetzung spezieller Funktionen zu verwenden, die WooThemes/Plugins in ihrem Code nutzen. In diesem Tutorial werde ich Sie Schritt für Schritt durch diesen reibungslosen Prozess führen.
Ein Live-Beispiel können Sie sich auf der Demo-Website von Stitched + WPML ansehen.
Um eine mehrsprachige Stitched-Website mit WPML zu betreiben, benötigen Sie:
- Das Stitched-Theme
- Eine aktuelle Version von WPML, einschließlich der Module String-Übersetzung und Übersetzungsmanagement
Erste Schritte
Dies sind die wichtigsten Schritte, die Sie befolgen müssen, um loszulegen:
- Installieren und aktivieren Sie Stitched
- Installieren und aktivieren Sie die WPML-Plugins (WPML Multilingual CMS, WPML String-Übersetzung, WPML Übersetzungsmanagement)
- Richten Sie WPML unter WPML->Sprachen ein. Eine vollständige Referenz finden Sie in unserer WPML-Dokumentation für erste Schritte
- Installieren und aktivieren Sie eines der verschiedenen Plugins, die in Stitched integriert werden können. Für dieses Tutorial verwenden wir Projects
Die Einführungsnachricht übersetzen
Die Funktion „Introductory Message“ (Einführungsnachricht) des Stitched-Themes ist eine Kombination aus dem Gravatar-Bild des Website-Administrators und dem Untertitel-Text der Website. Mit WPML wird jeder Text (oder String, wie wir ihn hier gerne nennen), der nicht Teil von Beiträgen, Seiten & Taxonomien ist, mit dem Modul String-Übersetzung übersetzt.
Der Text dafür wird unter Einstellungen > Allgemein festgelegt
Um nun zu übersetzen, gehen Sie einfach zu WPML->String-Übersetzung und suchen Sie nach diesem String,
übersetzen Sie ihn, markieren Sie ihn als abgeschlossen und speichern Sie ihn
So sieht unser Frontend nun aus, einschließlich des Gravatar-Bildes, das das Theme gemäß Ihren Einstellungen automatisch abruft
Allgemeine Texte übersetzen
Stitched enthält einige weitere Strings, die Sie vielleicht übersetzen möchten. Sie können alle fehlenden Übersetzungen mit dem WPML-Modul String-Übersetzung vervollständigen, wie ich es für die „Introductory Message“ beschrieben habe. Wenn einige Strings fehlen, befolgen Sie die Anweisungen zur Theme- und Plugin-Lokalisierung. Kurz gesagt, gehen Sie zu WPML->Theme- und Plugin-Lokalisierung und klicken Sie auf „Theme nach Strings durchsuchen“. Beachten Sie, dass Sie im Kontext-Dropdown-Menü ganz einfach nach den richtigen Strings filtern können – filtern Sie für Stitched nach „theme woothemes“ und für das „Projects-Plugin“ nach „plugin projects-by-woothemes“. Das sieht in etwa so aus:
Integrierte Plugins übersetzen
Nachdem wir nun gesehen haben, wie man den gesamten Text übersetzt, der vom Theme stammt, wollen wir uns ansehen, wie wir die Strings und Funktionen, die von einem Woo-Plugin stammen, ebenfalls übersetzbar machen. Für dieses Tutorial habe ich das sehr schöne Plugin ausgewählt, das für die Verwendung mit Stitched empfohlen wird – „Projects by WooThemes“.
Nachdem Sie „Projects“ installiert und aktiviert haben, sehen Sie in Ihrem WordPress-Admin-Bereich ein neues Menü, das genau so heißt... „Projects“, wie hier zu sehen:
Um Ihre Projekte und deren Kategorien übersetzbar zu machen, verwenden Sie die WPML-Einstellungen (WPML-Benutzeroberfläche). Im Grunde gehen Sie einfach so zu WPML->Übersetzungsmanagement
Wählen Sie oben in den Registerkarten die Option Einrichtung mehrsprachiger Inhalte aus
Bevor wir fortfahren, nur ein paar Worte dazu, was hier eigentlich im Hintergrund passiert: Das Projects-Plugin verwendet, wie viele andere Plugins (und Themes), benutzerdefinierte Beitragstypen für seine Funktionalität. Dies sind eine Art „spezielle“ Beiträge. Da sie speziell sind, „weiß“ WPML nicht, dass diese übersetzt werden müssen. Unser nächster Schritt besteht also darin, WPML genau das mitzuteilen – Projects übersetzen!
Klicken Sie auf Benutzerdefinierte Beiträge und wählen Sie Übersetzen für Projects. Wie Sie sehen, können Sie auch festlegen, dass die Slugs von Projects übersetzbar sind, und direkt darunter können Sie die Benutzerdefinierten Taxonomien übersetzen, die sich auf diese benutzerdefinierten Beiträge beziehen, in diesem Fall „Project categories“ (Projektkategorien) genannt. Klicken Sie nun einfach auf Speichern und das war's. Auf die gleiche Weise können Sie steuern, wie die benutzerdefinierten Felder für die Übersetzung gehandhabt werden, indem Sie oben auf den Link Übersetzung benutzerdefinierter Felder klicken. Für Projects können Sie 3 benutzerdefinierte Felder festlegen: _client, _project_image_gallery & _url. Für diese empfehle ich Ihnen jedoch, dem nächsten Punkt zu folgen -
Schauen wir uns an, wie die Admin-Seite von Projects aussieht. Wir klicken im Admin-Bereich auf „Projects“ und nun können wir – wie bei jeder „normalen“ Seite oder jedem Beitrag – jedes bestehende Projekt duplizieren oder übersetzen, ein neues in jeder beliebigen Sprache erstellen und, ganz wichtig, die volle Funktionalität des Beitragstyps Project nutzen. In diesem Fall können wir Details, eine Beschreibung und die spezielle Galerie hinzufügen, die es uns bietet, wie hier:
Benutzerdefinierte Felder (und andere Dinge) auf der Bearbeitungsseite für benutzerdefinierte Beiträge übersetzbar machen
Ein letzter Punkt hier: Wie Sie wahrscheinlich im letzten Bildschirm bemerkt haben, können Sie auf jeder Bearbeitungsseite für einen Beitrag auch steuern, wie Benutzerdefinierte Felder und sogar Taxonomien & Beitragstypen bei der Übersetzung gehandhabt werden. Lassen Sie uns das ein wenig vergrößern:
Hier möchten wir, dass das Feld _project_image_gallery zwischen den Sprachen kopiert wird, und ich fand es sinnvoll, die Felder _client & _url nicht zu übersetzen. Sie können diese auf der Seite des übersetzten Beitrags zwar immer noch ändern, aber wir müssen sie nicht wirklich übersetzen.
Den Sprachumschalter gestalten
Zu guter Letzt wollen wir noch eine kleine Anpassung vornehmen, damit der WPML-Sprachumschalter perfekt in die Hauptnavigation von Stitched integriert ist. Der WPML-Sprachumschalter hat Klassen hinzugefügt, die nach Ihren Bedürfnissen gestaltet werden können. Sie können sogar einen komplett benutzerdefinierten Sprachumschalter erstellen, wenn Sie möchten. Hier ist dies nicht nötig. Alles, was wir wollen, ist, der Flagge etwas Innenabstand (Padding) zu geben, damit sie an der richtigen Stelle „sitzt“ und nicht ungeschickt aussieht.
Gehen Sie dazu zu WPML->Sprachen->Sprachumschalter-Optionen->Zusätzliches CSS (optional) und fügen Sie der Klasse, die das Styling des Flaggenbildes des Umschalters steuert, etwas Padding hinzu – img.iclflag
Nun sieht es sehr gut aus, genau wie jedes andere Menüelement von Stitched
Fazit
Stitched ist ein sehr schönes Theme, um mehrsprachig zu werden und der Welt von sich und Ihren Projekten zu erzählen. Sie können ihm auch einen Shop hinzufügen, indem Sie WooCommerce & WPML Multilingual & Multicurrency for WooCommerce verwenden. Wir haben gesehen, wie Sie seine Funktionen mit WPML reibungslos anpassen können.
Verwendete Versionen
- WordPress 3.9
- WPML 3.1.5
- Stitched-Theme 1.0.2
- Projects-Plugin 1.2.0
