Sprachumschalter in WordPress hinzufügen

Möchten Sie einen Sprachwechsler zu Ihrer Website hinzufügen? Nach der Installation zeigt der Sprachwechsler automatisch die verfügbaren Sprachen Ihrer Website an und lässt die Besucher ihre bevorzugte Sprache wählen. Warum ist das so wichtig? Nur weil jemand z. B. in den USA lebt, heißt das nicht, dass Englisch seine bevorzugte Sprache ist.

Hier erfahren Sie, wie Sie einen Sprachwechsler in Ihre Website einfügen können:

1. Installieren und aktivieren Sie das Weglot-Plugin
2. Erstellen Sie ein Weglot-Konto und erhalten Sie Ihren API-Schlüssel
3. Fügen Sie Ihren API-Schlüssel in WordPress hinzu und wählen Sie Ihre Sprachen aus
4. Platzieren Sie Ihren Switcher überall auf Ihrer Website

Möchten Sie es in Aktion sehen? Sehen Sie sich unser Video zur Schnellinstallation an:

Im Folgenden finden Sie eine ausführliche Anleitung mit Screenshots zur Installation und Tipps zur Anpassung an das Design Ihrer Website.

Verwenden Sie WooCommerce? Sehen Sie sich unsere WooCommerce Sprachwechsler an. Für WPML-Benutzer haben wir einen separaten Sprachwechsler .

Anleitung: Hinzufügen eines Sprachumschalters in WordPress mit Weglot

Beginnen wir mit der Installation von Weglot in Ihrem WordPress-Dashboard und erkunden dann den Bereich Sprachwechsler in Ihrem Weglot-Arbeitsbereich, um Übersetzungen effizient zu verwalten.

Einrichten Ihres Sprachwechsler im WordPress-Dashboard

Das Hinzufügen eines WordPress-Sprachwechslers ist einfach und schnell, dank des Übersetzungs-Plugins für WordPress, Weglot.

Mit Weglot kannst du deiner Website mehrere Sprachen hinzufügen und das Design anpassen – in weniger als 5 Minuten und ganz ohne Programmierkenntnisse.

Du kannst einen Sprachwechsler an verschiedenen Stellen in deiner WordPress-Website platzieren, zum Beispiel im Menü, in einem Widget oder direkt im HTML-Quellcode.

In diesem Tutorial zeigen wir dir, wie du einen Sprachumschalter zur Navigation deiner Website hinzufügst. Standardmäßig platziert Weglot den Sprachumschalter unten links auf deiner Seite. Anschließend erklären wir dir, wie du den Sprachumschalter über die Einstellungen oder den Visual Editor von Weglot an eine andere Stelle verschieben kannst.

Schritt 1: Installieren und Aktivieren von Weglot

Installiere und aktiviere das Weglot-Plugin auf deiner WordPress-Website. Lege dann ein Weglot-Konto an, in dem du deine Übersetzungen verwalten und bearbeiten kannst. Dort erhältst du auch deinen API-Schlüssel für die Integration.

Schritt 2: Konfigurieren der Weglot-Einstellungen

Klicke im WordPress-Dashboard auf die Registerkarte „Weglot“. Füge deinen API-Schlüssel ein, wähle die Originalsprache deiner Website sowie die Sprache(n), die du hinzufügen möchtest, und speichere die Einstellungen.

Schritt 3: Testen Sie Ihren neuen Sprachwechsler

Ihre WordPress-Website ist jetzt mehrsprachig! Weglot hat den Inhalt Ihrer Website automatisch erkannt, ihn mit einer ersten Ebene der maschinellen Übersetzung übersetzt und in Unterverzeichnissen für Sprachen angezeigt.

Werfen Sie einen Blick auf das Frontend Ihrer Website, und Sie werden einen neuen Sprachwechsler in der unteren rechten Ecke sehen.

Wenn du darauf klickst, werden die verfügbaren Sprachen angezeigt. So kannst du ganz einfach die gewünschte Übersetzung auswählen und anzeigen lassen.

Wie Sie Ihren Sprachwechsler in Weglot Workspace verwalten

Während grundlegende Anpassungen in WordPress vorgenommen werden können, bietet der Weglot-Arbeitsbereich mit seinem speziellenSprachwechsler"-Bereich leistungsfähigere Steuerungsmöglichkeiten:

Das Sprachwechsler gibt Ihnen eine umfassende Kontrolle über:

• Visuelles Erscheinungsbild: Wählen Sie zwischen verschiedenen Stilen, Schaltflächen und Dropdown-Optionen.
• Positionseinstellungen: Wählen Sie aus, wo Ihr Umschalter auf Ihrer Website angezeigt wird.
• Anzeige der Sprache: Legen Sie fest, wie die Namen, Codes und Flaggen der Sprachen angezeigt werden.
• Erweitertes Styling: Zugriff auf benutzerdefinierte CSS-Optionen für eine perfekte Designintegration.
• Sprachverwaltung: Steuern Sie, welche Sprachen angezeigt werden und in welcher Reihenfolge sie angezeigt werden.

Alles im Weglot-Arbeitsbereich ist auf Effizienz ausgelegt - Änderungen sind sofort live, und Sie können Änderungen in Echtzeit in der Vorschau anzeigen. Außerdem finden Sie alle Tools für das Übersetzungsmanagement in derselben Oberfläche, die damit zu Ihrer zentralen Anlaufstelle für die Pflege Ihrer mehrsprachigen Website wird.

Lassen Sie uns nun herausfinden, wie Sie das Design Ihres Sprachwechsler so anpassen können, dass es perfekt zum Look and Feel Ihrer Website passt.

Anpassen und Ändern der Position Ihres Sprachwechsler

Am einfachsten können Sie Ihren Sprachwechsler direkt über Ihr Weglot-Dashboard anpassen. Schauen Sie sich unseren Video-Guide hier an, um einen schnellen Überblick über alle Anpassungsoptionen zu erhalten.
Und wenn Sie noch mehr in die Tiefe gehen wollen, schauen Sie sich diese hilfreichen Ressourcen an:

• Gestalten Sie Ihren perfekten Sprachwechsler in unserer Weglot Academy
• Ändern Sie Ihre Sprachwechsler
• Den Sprachwechsler beherrschen

Wenn Sie es jedoch vorziehen, von WordPress aus zu arbeiten, können Sie diese Änderungen auch in Ihrem WordPress-Administrationsbereich vornehmen. So geht's:

Um mit den grundlegenden Anpassungen zu starten, gehe im WordPress-Backend zu Weglot > Language button design (Optional). Dort kannst du folgende Einstellungen vornehmen:

• Ob ein Dropdown-Menü verwendet werden soll
• Ob du Flaggen verwenden möchtest und wenn ja, welche;
• Ob die Namen der Sprachen angezeigt werden sollen;
• Ob nur der Sprachcode angezeigt werden soll.

Es gibt auch einen Abschnitt, in dem Sie CSS überschreiben und durch eigene Selektoren ersetzen können - dazu kommen wir gleich. Für den Moment wollen wir den Sprachwechsler so anpassen, dass er die Sprachnamen ohne Flaggen anzeigt, aber das Dropdown-Menü beibehält.

Deaktiviere dazu das Kontrollkästchen „With flags“ und aktiviere „Is fullname“. Schau dir anschließend deine Website an, um die Änderungen zu überprüfen:

Vielleicht möchtest du weitere Anpassungen vornehmen. Zum Beispiel können wir den Sprachumschalter in der Navigation anzeigen lassen.

Es gibt verschiedene Möglichkeiten, dies umzusetzen: Du kannst den Sprachumschalter in ein Menü einfügen, als Widget verwenden, mit einem Shortcode integrieren oder direkt über HTML platzieren. Das Beste daran: Du brauchst keine PHP-Kenntnisse und musst nicht auf die Templates deiner Website zugreifen. So kannst du auch ohne Expertenwissen Änderungen auf Entwicklerniveau vornehmen.

Gehe zurück zum Weglot-Bereich im WordPress-Dashboard und scrolle auf der Seite nach unten, bis du die Optionen zur Anzeige des Sprachumschalters findest.

‍Sie finden diese Anweisungen:

• Im Menü. Gehen Sie zu Erscheinungsbild -> Menüs und ziehen Sie den Link Weglot Translate Custom an die gewünschte Stelle.
• Als Widget. Gehen Sie zu Darstellung -> Widgets und ziehen Sie das Weglot Translate per Drag & Drop an die gewünschte Stelle.
• Mit einem Shortcode. Verwende den Weglot Shortcode [ weglot_switcher ] (ohne Leerzeichen), um deinen Sprachwechsler dort zu platzieren, wo du ihn haben willst.
• Im Quellcode. Du kannst den folgenden Code an einer beliebigen Stelle im Quellcode der HTML-Seite einfügen:

<div id=”weglot_here”></div>

Folge einfach der Anleitung, je nachdem, wo du den Sprachumschalter platzieren möchtest. In diesem Beispiel navigierst du zu „Appearance -> Menu“ und verschiebst den Umschalter per Drag-and-Drop, um die Reihenfolge der Menüelemente anzupassen.

Sobald du fertig bist und deine Änderungen gespeichert hast, wirf einen Blick auf dein Frontend:

Der Sprachwechsler befindet sich zwar in der Kopfzeile, wird aber nicht richtig angezeigt. Sie könnten auch Inline-Sprachcodes verwenden, anstatt ein Dropdown-Menü.

In diesem Fall kannst du CSS nutzen, um das Problem zu lösen. Deaktiviere zunächst die Dropdown-Einstellung im Weglot-Menü in WordPress. Aktiviere anschließend das Kontrollkästchen, um die Sprachcodes anzuzeigen.

Hier kannst du „Override CSS“ nutzen, um Selektoren für Schriftarten, Farben und Strichstärke festzulegen, damit sie zum Design deiner Website passen.

Zum Schluss wirf einen Blick auf dein Design im Frontend.

Mit der richtigen Platzierung und ein paar Zeilen CSS kannst du den Sprachumschalter von Weglot schnell und einfach so anpassen, dass er perfekt zu deiner Website passt – ganz ohne aufwendige Template-Bearbeitung oder Kenntnisse in HTML und PHP.

Die benutzerdefinierten CSS-Änderungen sind optional. Du kannst das Design des Sprachumschalters auch ganz einfach über die Optionen in der Registerkarte „Weglot“ in deinem WordPress-Adminbereich anpassen und verschieben.

Wenn du lieber visuell arbeiten möchtest, kannst du auch den Visual Editor von Weglot verwenden.

Mit dem Visual Editor für den Sprachumschalter kannst du die gleichen Einstellungen wie in deinem WordPress-Dashboard vornehmen. Ziehe den Schalter einfach an die gewünschte Position und klicke anschließend auf Speichern, um die Änderungen direkt auf deiner WordPress-Website zu übernehmen.

Best Practices für die Anzeige von WordPress-Sprachumschaltern

Ihr Sprachwechsler ist oft die erste Interaktion, die internationale Besucher mit Ihrer Website haben. Hier erfahren Sie, wie Sie ihn so effektiv wie möglich gestalten können.

Wählen Sie die perfekte Position für Ihren Switcher:

Die Position Ihres Sprachwechsler kann über seine Verwendbarkeit entscheiden. Die effektivsten Platzierungen sind:

• Kopfzeile oben: Unmittelbar sichtbar und von den Nutzern erwartet
• Navigationsmenü: Perfekt für mobile und Desktop-Integration
• Schwebende Schaltfläche: Beim Browsen immer zugänglich
• Fußzeile: Funktioniert gut mit klaren Flaggen- oder Sprachsymbolen

Mit Weglot können Sie verschiedene Platzierungen testen, um die beste für Ihre Website zu finden. Und wenn Sie Hilfe brauchen oder nicht mehr wissen, wo Sie anfangen sollen, lesen Sie unseren Leitfaden.

• Profi-Tipp: Für eine maximale Sichtbarkeit sollten Sie zwei Positionen kombinieren - z. B. eine schwebende Schaltfläche für Mobilgeräte und eine Kopfzeile für den Desktop.

Gestalten Sie Ihren Switcher

Ihr Sprachwechsler sollte auf den ersten Blick erkennbar sein und zum Design Ihrer Website passen:

• Verwenden Sie die Farben Ihrer Marke, aber sorgen Sie dafür, dass der Switcher auffällt
• Ein einheitliches Design auf allen Seiten
• Groß genug, um aufzufallen, klein genug, um nicht abzulenken
• Testen Sie die Sichtbarkeit vor allen Ihren Seitenhintergründen

Die effektivsten Umschalter verwenden oft eine Kombination von visuellen Elementen - wie ein Weltkugelsymbol mit Sprachcodes - um eine sofortige Erkennung zu gewährleisten.

Öffnen Sie den Weglot Sprachwechsler und passen Sie ihn in der mobilen und der Desktop-Version an. Gestalten Sie Ihren Sprachwechsler noch weiter, wenn Sie möchten.

Sprachen klar und deutlich anzeigen

Die Art und Weise, wie Sie die Sprachen in Ihrem Sprachumschalter anzeigen, ist entscheidend für die Benutzerfreundlichkeit:

• Vollständige Sprachnamen sind am besten geeignet: "Englisch", "Français", "Español".
• Sprachcodes sparen Platz: "EN", "FR", "ES"
• Flaggen können Ihre Kennzeichnung ergänzen, sollten aber nicht die einzige sein. Obwohl Flaggen aus vielen Gründen für Designer verlockend sind (sie sind bunt, ikonisch und platzsparend), sind Flaggen nicht für die Darstellung von Sprachen gedacht. Dies ist besonders problematisch, da viele Länder mehrere Amtssprachen haben, während eine Flagge nur ein Land repräsentieren kann.
• Dropdown-Menüs funktionieren gut für mehrere Sprachen
• Erwägen Sie die Verwendung des einheimischen Namens der Sprache

Denken Sie daran: Ihre aktuelle Sprache sollte in der Sprachumschaltung immer deutlich gekennzeichnet sein.

Wenn Sie die verschiedenen Optionen testen möchten, gehen Sie zu Ihrem Weglot-Arbeitsbereich, es dauert nur ein paar Minuten.

Optimieren Sie das Switching-Erlebnis

Konzentrieren Sie sich darauf, den Sprachwechsel reibungslos und intuitiv zu gestalten:

• Behalten Sie den Schalter auf allen Seiten in der gleichen Position
• Sicherstellen, dass der Wechsel möglichst ohne Seitenaktualisierung erfolgt
• Beibehaltung der Position des Benutzers auf der Seite nach dem Wechsel
• Speichern Sie die Sprachpräferenzen der Benutzer für erneute Besuche

Die besten Sprachumschalter sind diejenigen, über die die Benutzer kaum nachdenken - sie funktionieren einfach.

Denken Sie daran: Testen Sie Ihren Sprachwechsler regelmäßig auf verschiedenen Geräten und Browsern, um sicherzustellen, dass er für alle Benutzer zugänglich ist und funktioniert. Öffnen Sie dazu den Weglot Sprachwechsler und prüfen Sie die mobile und die Desktop-Version Ihrer Website.

3 Beispiele für gelungene Sprachumschalter

Beim Surfen im Internet begegnen dir häufig Sprachumschalter. Wenn du jedoch keine andere Sprache benötigst oder nicht gezielt danach suchst, fällt dir vielleicht gar nicht auf, wie unterschiedlich sie in Design und Positionierung sein können.

1. Microsoft Translator

Der Microsoft Übersetzer Website können Besucher über ein Dropdown-Menü (oder in diesem Fall ein "Drop-up") in der Nähe der Fußzeile der Seite aus fast 40 Sprachen wählen. Sie haben sich auch dafür entschieden, den Namen jeder Sprache vollständig in der jeweiligen Muttersprache anzuzeigen. Auf diese Weise können die Besucher ihre Sprache auf einen Blick erkennen, und die Optionen zum Umschalten zwischen den Sprachen sind eindeutig.

Wir finden es gut, dass es zusätzlich die Option gibt, eine regionale Version der Website aufzurufen. Zu oft machen es große Marken kompliziert, indem sie Nutzer dazu zwingen, die Region zu wechseln, anstatt ihnen direkt die Sprachwahl zu ermöglichen.

2. Etsy

Als internationaler Marktplatz, auf dem Kunsthandwerker ihre handgefertigten Waren verkaufen können, ist es keine Überraschung, dass Etsy einen gut gestalteten Sprachwechsler anbietet. Sie finden ihn in der Fußzeile jeder Seite auf ihrer Website.

Nutzer können eine Region, eine Sprache und eine Währung auswählen. Klickt man darauf, öffnet sich ein Fenster, in dem all diese Einstellungen angepasst werden können. Das Design ist elegant und intuitiv – es erlaubt Nutzern, die Sprache zu ändern, ohne dass sie automatisch auf eine regionale Version der Website umgeleitet werden.

3. Evernote

Beliebte App für Notizen Evernote hält seinen Sprachwechsler einfach und verwendet ein Dropdown-Menü in der Fußzeile, um die Sprache zu wechseln.

Es ist leicht zu finden und klar beschriftet: „Wählen Sie eine Sprache“. Klickt man darauf, weiß man sofort, was einen erwartet.

Manchmal reicht ein einfacher Sprachumschalter völlig aus. Ist er zu kompliziert, besteht die Gefahr, dass Besucher frustriert abspringen.

Erhöhen Sie Ihre globale Reichweite mit dem erweiterten Sprachwechsler von Weglot

Mit den richtigen Tools ist das Hinzufügen eines Sprachumschalters zu deiner WordPress-Website ganz einfach. Mit Weglot erhältst du nicht nur einen automatisch integrierten Sprachumschalter, sondern kannst das Design ganz einfach und ohne Entwickler individuell anpassen.

Darüber hinaus bietet dir Weglot eine erste, maschinell erstellte Übersetzung, die du ganz nach deinen Wünschen bearbeiten kannst. Du kannst Änderungen vornehmen, Teammitglieder zur Bearbeitung hinzufügen und bei Bedarf professionelle Übersetzungen beauftragen, um deine Inhalte perfekt abzustimmen.

Entscheiden Sie sich für ein WordPress-Übersetzungs-Plugin, bei dem auch die mehrsprachige SEO im Vordergrund steht. Dank automatisch erstellter Sprachunterverzeichnisse, übersetzter Metadaten, der Implementierung von hreflang-Tags und vielem mehr!

Bist du bereit, einen Sprachumschalter zu deiner WordPress-Website hinzuzufügen? Teste Weglot jetzt 10 Tage kostenlos – ganz ohne Kreditkarte!