So verwendest du das Lokalisierungs-Plugin von Phrase Strings für WordPress

WordPress ist echt riesig: Über 43 % aller Websites basieren auf dem kostenlosen Content-Management-System (CMS), und über 60 % der CMS-basierten Websites haben sich für WordPress entschieden. Seine Architektur, Benutzerfreundlichkeit und das riesige Ökosystem von Themes und Plugins tragen alle zu diesem großen Erfolg bei.

Wenn es darum geht, deine WordPress-Website mehrsprachig zu gestalten, und du einen professionellen Workflow möchtest, der für dein gesamtes Team von Entwicklern und Übersetzern funktioniert, solltest du deine Website mit dem WordPress-Lokalisierungs-Plugin für Phrase Strings lokalisieren.

In diesem Tutorial erstellen wir eine kleine Demoseite, um dir zu zeigen, wie einfach es ist, ein Phrase-Projekt zu starten, es mit WordPress zu verbinden und deine Seiten und Beiträge in wenigen Minuten zu lokalisieren. Wir nutzen auch das beliebte Polylang Plugin, um einen Sprachumschalter auf unserer Seite hinzuzufügen. Lass uns loslegen.

WordPress-Umgebungs-Versionen

Wir nutzen den folgenden Stack und eine Reihe von Plugins, um unsere Demo-Seite zu bauen (Versionen in Klammern):

• PHP (7.4)—serverseitige Sprache/Prozessor
• MySQL (8.0)—Datenbank
• WordPress (5.5)—unser CMS der Wahl
• Phrase Strings (1.0)—verknüpft unsere WordPress-Seite einfach mit Phrase
• Polylang (2.8)—kümmert sich um die Lokalisierung von URLs, Menüs und Kategorien
• Fasciate Theme (1.0) [Optional]—macht es total schick und süß

✋🏽 Hinweis » Du benötigst WordPress 5.5 oder höher mit dem Gutenberg-Block-Editor, um das Lokalisierungs-Plugin von Phrase Strings für WordPress zu verwenden.

Unsere Demoseite: Aznomia

Aznomia ist eine fiktive gemeinnützige Organisation, die die Flora und Fauna des bedrohten Amazonas-Regenwaldes zeigt. So wird die Website von Aznomia aussehen, wenn wir mit ihr fertig sind:

Über 40.000 Pflanzenarten leben im Amazonasgebiet

Ich gehe davon aus, dass du weißt, wie man WordPress für die Entwicklung installiert. Ich persönlich benutze gerne die einfache, verwaltete lokale Dev-Umgebung Local für meine WordPress-Dev-Seiten.

🔗 Ressource » Wenn du mit uns mitbauen möchtest, hol dir das kostenlose Fascinate WordPress-Theme von themebeez und installiere es.

Mit installiertem WordPress können wir anfangen, unsere Inhalte hinzuzufügen.

Beiträge hinzufügen

Für jede Art von Flora oder Fauna fügen wir einen Beitrag hinzu, der einen Titel, einen Block im Text und ein hervorgehobenes Bild hat.

Inhalte und Bilder von Wikipedia

Seiten hinzufügen

Lass uns eine Startseite für unsere Seite hinzufügen. Um anzufangen, können wir eine Seite mit dem Titel Home und etwas einleitendem Text hinzufügen.

Im Moment ziemlich schlicht: wir fügen bald mehr zu unserer Startseite hinzu

Unsere Startseite einrichten

Standardmäßig nutzt WordPress die Indexseite des Themes, die die neuesten Beiträge auflistet, als Startseite. Wir können das unter Einstellungen → Lesen ändern, damit stattdessen unsere Startseite verwendet wird.

wir wollen unsere Startseite zeigen, wenn unser Besucher das erste Mal reinkommt

Unsere Beiträge auf unserer Startseite hinzufügen

Lass uns unsere Besucher dazu verleiten, unseren Content zu erkunden, sobald sie auf der Startseite sind. Wir packen ein paar Links zu unseren Flora-Beiträgen und noch ein paar mehr zu unseren Fauna-Beiträgen dazu.

Gehen wir zu Seiten → Alle Seiten → Startseite → Bearbeiten und fügen einen neuen Spaltenblock auf unserer Startseite ein, um unsere Beitragsbilder und Links unterzubringen.

Wir nehmen das 33/33/33-Layout, um drei Spalten nebeneinander einzufügen. In jeder Spalte klicken wir auf das ＋, um einen Block in der Spalte einzufügen und die Bildspalte auszuwählen. Unter jedem Bild können wir einen Text einfügen, der zum jeweiligen Post führt.

Wir können einfach den Titel eines Beitrags eintippen, um einen automatisch vorgeschlagenen Link zu bekommen

Mit Spalten unter Flora und Fauna, sieht unsere Startseite jetzt so aus:

Ein bisschen interessanter, oder?

Und das war's auch schon mit unserer Demo-App. Lass uns damit anfangen, es mit Phrase Strings zu lokalisieren.

Unsere WordPress-Seite mit Phrase Strings lokalisieren

Zuerst lass uns ein neues Phrase-Projekt erstellen. Wir loggen uns ein und klicken im Hauptbereich auf den Button Neues Projekt erstellen.

🗒 Hinweis » Wenn du kein Phrase Pro-Abonnement hast, melde dich für eine kostenlose 14-tägige Testversion an.

Das Phrase Strings Projekt hinzufügen

Das öffnet das Fenster zum Hinzufügen eines Projekts

Im Dialog Projekt hinzufügen können wir unserem Projekt einen Namen geben, die restlichen Felder in ihrem Standardzustand belassen und auf die Speichern Schaltfläche klicken.

Wir brauchen unserem Projekt nur einen Namen zu geben

Unser neues Projekt wird jetzt in unserem Projekt-Grid angezeigt. Schweben wir über die Karte und klicken auf den Sprachen Button, um die Sprachen hinzuzufügen, die unsere Seite unterstützen wird.

Ich füge hier US-Englisch und Französisch-Kanadisch hinzu. Du kannst beliebige Sprachen hinzufügen, die dein Herz begehrt. Beachte, dass die erste Sprache, die wir hinzufügen, unsere Ausgangssprache für Übersetzungen wird. Sind wir fertig, klicken wir auf Sprachen erstellen.

Danach klicken wir auf den Setup überspringen Button.

Die anderen Einrichtungsoptionen brauchen wir für unser Projekt nicht

Einen Zugriffstoken erstellen

Wir benötigen einen Zugriffstoken, um unser Phrase-Projekt gleich mit dem Phrase Strings Lokalisierungs-Plugin für WordPress zu verbinden. Lass uns einen Zugriffstoken erstellen, während wir in der Phrase-Konsole sind. Das können wir machen, indem wir auf unseren Namen oben rechts auf dem Bildschirm klicken, um ein Dropdown-Menü zu öffnen, und dann auf Access Tokens klicken.

Als Nächstes klicken wir auf den Button Token generieren.

Wir geben unserem Token einen Namen, lassen das Scopes Feld wie es ist, und klicken auf Speichern. Das sollte eine neue Zeile ganz oben in unserer Liste der Zugriffstokens hinzufügen. Beachte, dass das neue Token nur teilweise sichtbar ist und daneben ein Kopieren Button ist.

✋🏽Achtung » Du wirst später nicht auf dein Token zugreifen können. Du musst es gleich kopieren, sobald du es erstellt hast.

Wir klicken auf den Kopieren Button und speichern unser Token an einem sicheren Ort.

Das war's schon mit dem Einrichten von Phrase. Jetzt können wir zu WordPress zurück.

Installation des Lokalisierungs-Plugins von Phrase Strings für WordPress

Das Plugin können wir aus dem WordPress-Plugin-Verzeichnis runterladen. Sobald wir die ZIP-Datei haben, können wir unser WordPress-Admin öffnen und zu Plugins → Neu hinzufügen → Plugin hochladen gehen.

Dann klicken wir auf Durchsuchen, wählen die ZIP-Datei aus, die wir zuvor runtergeladen haben, und klicken auf Öffnen, um das Übersetzungs-Plugin hochzuladen und zu installieren. Ist das erledigt, müssen wir nur noch sicherstellen, dass wir auf den Plugin aktivieren Button klicken.

Damit haben wir einen neuen Phrase Menüpunkt in unserer Admin-Seitenleiste. Mit einem Klick darauf öffnet sich das API Access Token Formular. Jetzt können wir das zuvor generierte Zugriffstoken einfügen und auf Einstellungen speichern klicken.

Wir sind bereit, mit der Lokalisierung zu starten.

Seiten lokalisieren

Lass uns mit der Lokalisierung unserer Startseite beginnen. Wir können zu Seiten → Alle Seiten → Startseite → Bearbeiten navigieren. Dort stoßen wir auf eine neue Phrase-Icon-Schaltfläche. Sobald wir auf diesen Button klicken, taucht die Seitenleiste des Phrase-String-Plugins auf.

Unter Projekt auswählen können wir das Dropdown-Menü öffnen und das Phrase-Projekt auswählen, das wir vorher erstellt haben. Dann können wir die Sprache der Seite unter Mein Beitrag ist in auswählen und auf Content pushen klicken. Das lädt unseren Inhalt zur Übersetzung in unser Phrase-Projekt hoch.

Jetzt lass uns unsere Phrase-Konsole öffnen und zu Projekte → aznomia-wordpress → Sprachen gehen. Beachte, dass unser Ausgangsinhalt in US-Englisch vollständig ist und wir unübersetzten französisch-kanadischen Inhalt haben.

Klick auf fr-CA, um den Übersetzungseditor zu öffnen. Unsere Übersetzungen sind in der linken Seitenleiste aufgelistet. Man kann eine auswählen und im Editor mit dem Übersetzen beginnen. Du möchtest vielleicht das Autocomplete Kontrollkästchen aktiviert lassen, da es dir Zeit sparen kann, indem es dir beim Tippen übersetzte Wörter vorschlägt.

Autocomplete ist ein echter Zeitersparer für Übersetzer

Beachte, dass der Titel unserer Seite sein eigenes Übersetzungselement ist. Das gilt auch für jeden Block im Body unserer Seite. Man kann jeden einzelnen übersetzen und auf Speichern klicken.

🗒 Hinweis » Halte HTML-Tags an denselben Stellen in deinen Übersetzungen wie im Quelltext.

Sobald wir mit der Übersetzung durch sind, können wir zum WordPress-Admin zurück und die Startseite nochmal bearbeiten. Jetzt können wir Alle Übersetzungen auswählen und auf den Übersetzungen abrufen Button klicken, um eine neue, übersetzte Startseite zu erstellen.

🗒 Hinweis » Phrase wird die übersetzten WordPress-Slugs nicht synchronisieren. Ignorier die einfach im Übersetzungseditor.

Sobald die Übersetzungen abgerufen sind, bekommen wir eine Nachricht, die sagt „Übersetzungen erfolgreich abgerufen.“ Wir sehen auch ein Chevron neben unserer Übersetzung, das zur neu erstellten Übersetzungsseite führt.

Wir haben jetzt beschlossen, die übersetzte Startseite zu veröffentlichen.

🗒 Hinweis » Beachtet, dass wir unsere Beitragslinks unverändert gelassen haben. Das liegt daran, dass Phrase diese Blöcke zum Zeitpunkt des Schreibens nicht synchronisiert hat. Ich arbeite mit einer frühen Version des Phrase-Plugins und das Phrase-Team arbeitet daran, das Plugin zu reparieren und zu aktualisieren. Bis du das hier liest, sollte das Problem behoben sein.

Beiträge lokalisieren

Das Lokalisieren von Beiträgen ähnelt sehr dem Lokalisieren von Seiten, also lassen wir das als Übung für dich.

🔗 Ressource » Wenn du eine Schritt-für-Schritt-Anleitung zur Lokalisierung von Beiträgen mit dem Lokalisierungs-Plugin von Phrase Strings für WordPress möchtest, schau dir die offizielle Hilfedokumentation an.

🗒 Hinweis » Zum Zeitpunkt des Schreibens lokalisiert das Phrase Strings-Plugin für WordPress nur Seiten und Beiträge. Die Unterstützung für die Lokalisierung von Kategorien, Tags usw. ist in Arbeit und wird bald veröffentlicht.

Sobald alle unsere Beiträge übersetzt sind und auf unserer Beitragsseite erscheinen, sollte sie ungefähr so aussehen.

Für jeden englischen Post wurde ein übersetzter französischer Post hinzugefügt

Polylang hinzufügen

Wir möchten wahrscheinlich einen Sprachumschalter zu unserer Seite hinzufügen. Das können wir mit dem kostenlosen Polylang-Plugin machen. Wir gehen zu Plugins → Neu hinzufügen und suchen nach Polylang im Plugin-Suchfeld.

Es ist das mit dem Papageienbild…frech

Mit dem installierten und aktivierten Plugin werden wir aufgefordert, den Einrichtungsassistenten zu starten. Lass uns auf den Button klicken, um das zu machen.

Polylangs Sprachübersicht

Wir können die gleichen Sprachen zu Polylang hinzufügen, die wir auch in unserem Phrase-Projekt haben. Wir verwenden US-Englisch und Französisch-Kanadisch auf unserer Demoseite, also fügen wir sie hier hinzu.

Die nächste Option im Assistenten zur Übersetzung von Medien ist Geschmackssache. Ich habe mich entschieden, die Medien hier nicht zu übersetzen.

Als nächstes ist die Sprache dran, der Inhalte zuzuweisen, die Polylang nicht zugewiesen hat. Unsere Ausgangssprache ist hier eine gute Wahl. Wir können unsere übersetzten Beiträge und Seiten manuell festlegen, nachdem wir den Assistenten abgeschlossen haben.

Wir wollen wahrscheinlich den Schritt zur Übersetzung der Startseite überspringen.

Wir haben schon eine übersetzte Startseite, die wir später manuell einrichten können. Also können wir auf Nicht jetzt klicken, um fortzufahren.

Das war's für den Polylang-Assistenten. Lass uns das Setup manuell abschließen.

Unsere Übersetzungen zu Polylang hinzufügen

Lass uns mit unserer Homepage anfangen. Wir können zu Seiten → Alle Seiten navigieren, um den Seitenindex zu sehen. Wir können auf den Schnell bearbeiten-Button neben der französischen Übersetzung der Startseite klicken, die wir mit Phrase erstellen können. Dadurch werden die Schnellbearbeitungsfunktionen für die Seite geöffnet.

Lass uns sicherstellen, dass der Status unserer Seitenübersetzung Status Veröffentlicht ist und dass die Sprache Französisch ist. Die Sprache, die wir hier festlegen, ist die von Polylang.

Als Nächstes öffnen wir die französische Übersetzung, indem wir auf den Edit Button klicken. Dann klicken wir auf das Zahnradsymbol oben rechts im Fenster, um die Dokument Einstellungen zu öffnen. Von dort aus können wir im Sprache Bereich von Polylang anfangen, den Titel der englischen "Home"-Seite einzugeben. Es sollte ein Dropdown-Menü zur automatischen Vervollständigung erscheinen, auf das wir klicken können, um die englische Startseite als Quelle dieser Seite in Polylang festzulegen.

Wir werden sicherstellen, dass wir auf den Update Button klicken, wenn wir fertig sind. Damit haben wir unsere französische Startseite als Hauptseite in Polylang und WordPress festgelegt.

Unsere englische und französische Startseite sind jetzt in Polylang verknüpft

Wir können auch unsere Beiträge in Polylang verknüpfen. Wir lassen das als Übung für dich, da es genau der gleiche Prozess ist wie das Verknüpfen unserer Startseite.

Damit hat Polylang unsere englischen Inhalte intern mit den französischen verknüpft. Jede Seite oder jeder Post hat auch eine lokalisierte URL. Unsere französische Startseite findest du zum Beispiel unter /fr/accueil/.

🗒 Hinweis » Standardmäßig hat der Quelltext (in unserem Fall Englisch) keinen Sprachcode in der URL. Das können wir aber in den Polylang-Einstellungen unter Sprachen → Einstellungen → URL-Änderungen → Einstellungen ändern.

Einen Sprachumschalter mit Polylang hinzufügen

Mit all diesen verknüpften Inhalten ist es echt schade, dass unsere Besucher nicht manuell zwischen den Übersetzungen wechseln können, um in ihren bevorzugten Sprachen zu lesen. Zum Glück hat Polylang ein praktisches Sprachumschalter-Widget, das wir in jeden Bereich unserer Theme-Widgets einfügen können.

Gehen wir zu Design → Widgets, finden die Einstellungen des Sprachumschalter Widgetbereichs und stellen ihn auf den Footer Middle Widgetbereich in unserem Theme ein.

Das lässt die Einstellungen des Sprachumschalters im Abschnitt Footer Middle auf der rechten Seite des Fensters erscheinen.

Die Einstellungen des Widgets hängen von deinen Vorlieben ab. Ich stelle meinen so ein, dass er den Titel Sprache trägt und als Dropdown angezeigt wird. Sobald wir auf Speichern klicken, können wir unseren Sprachumschalter unten auf jeder Seite unserer öffentlich zugänglichen Website sehen.

Damit ist unser Aznomia nun auf Englisch und Französisch verfügbar.

🗒 Hinweis » Sorry, falls die französischen Übersetzungen nicht korrekt sind. Ich habe drittanbieter Übersetzungstools benutzt, um sie vorzubereiten.

Mach weiter

Wenn du daran interessiert bist, tiefer in die WordPress-Lokalisierung einzutauchen, schau dir unsere Serie an:

• Eine mehrsprachige WordPress-Website erstellen – Teil 1: Content & Polylang
• Eine mehrsprachige WordPress-Website erstellen – Teil 2: Beginn der benutzerdefinierten Theme-Lokalisierung mit gettext
• Eine mehrsprachige WordPress-Website erstellen – Teil 3: Beste Rezepte für die benutzerdefinierte Theme-Lokalisierung

Die Power von Phrase Strings direkt in WordPress

Nicht nur können wir unsere Phrase-Übersetzungen direkt in WordPress erstellen, aktualisieren und synchronisieren, wir haben auch alle erweiterten Funktionen, die uns Phrase Strings bieten. Das heißt, unsere Manager können Jobs für unsere Übersetzer direkt in Phrase erstellen. Wir können auch Übersetzungen automatisieren, indem wir maschinelles Lernen nutzen, um für uns zu übersetzen. Und wenn wir unsere Übersetzer brauchen, können sie den praktischen Übersetzungseditor in Phrase verwenden. Alles, was wir als WordPress-Entwickler tun müssen, ist, unsere Quellinhalte zu pushen und die neuesten Übersetzungen zu pullen.

Schau dir alle Phrase's Übersetzungsprodukte an und melde dich noch heute für eine kostenlose 14-tägige Testversion an!