Sprachumschalter in WordPress hinzufügen

Du fragst dich, wie du auf deiner WordPress-Website einen Sprachumschalter hinzuzufügen kannst? Dann bist du hier genau richtig.

Sprachwechsler WordPress-Website einen Sprachwechsler und Ihre content übersetzen, content Besucher sie in ihrer eigenen Sprache lesen können, können Sie neue Märkte erschließen, Ihre Chancen für SEO und Online-Sichtbarkeit verbessern und Vertrauen bei neuen Zielgruppen aufbauen. Sie sind sich nicht sicher, welches Plugin Sie verwenden sollen? Werfen Sie einen Blick auf unseren Vergleichder besten mehrsprachigen WordPress-Plugins unter ( ).

Mit Weglot können Sie Ihrer WordPress-Website oder Ihrem WooCommerce in weniger als 5 Minuten mehrere Sprachen hinzufügen, code ohne code .

In diesem Artikel erhältst du eine detaillierte Schritt-für-Schritt-Anleitung, wie du einen Sprachwechsler zu deiner WordPress-Website hinzufügst und ihn optimal an das Design deiner Seite anpasst.

Anleitung: Hinzufügen eines Sprachumschalters in WordPress mit Weglot

Ein Sprachwechsler ein Navigationselement, mit dem Besucher ihre bevorzugte Sprache auswählen und zwischen den übersetzten Versionen Ihrer Website wechseln können. Sie können einen solchen Sprachwechsler zu jeder WordPress-Website hinzufügen, indem Sie ein Übersetzungs-Plugin installieren, Ihre Sprachen auswählen und den Sprachwechsler per Shortcode in Ihr Menü, widget oder auf eine Seite einfügen.

Mit Weglot, einem KI-gestütztenPlugin für die Übersetzung von Websites ( ) für WordPress, können Sie Ihre Website in nur 5 Minuten um mehrere Sprachen erweitern und das Design ganz ohne code anpassen. Die gleiche Konfiguration funktioniert auch für WooCommerce – der Sprachumschalter wird identisch angezeigt und verhält sich genauso, egal ob Sie eine Standard-WordPress-Website oder einen WooCommerce betreiben.

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 Sie das Weglot

Installieren und aktivieren Sie das Weglot auf Ihrer WordPress-Website. Erstellen Sie dann ein Weglot , in dem Sie Ihre Übersetzungen verwalten und bearbeiten können und Ihren einzigartigen API-Schlüssel für die Integration erhalten

Schritt 2: Weglot verbinden Weglot Sprachen auswählen

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: Überprüfen Sie Ihre Website und Sprachwechsler

Ihre Website jetzt mehrsprachig! Weglot content Ihrer Website automatisch erkannt, mithilfe von KI übersetzt und in Sprachunterverzeichnissen angezeigt.

Werfen Sie einen Blick auf die Benutzeroberfläche Ihrer Website, und Sie werden Sprachwechsler rechts einen neuen Sprachwechsler 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.

Dies ist das Standarddesign, das Weglot bereitstellt. Du kannst nun das Aussehen und die Position deines WordPress-Sprachumschalters auf verschiedene Weise individuell anpassen.

Anpassen des WordPress-Sprachumschalters

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 du CSS überschreiben und eigene benutzerdefinierte Selektoren verwenden kannst – darauf kommen wir später zurück. Im Moment passen wir den Sprachumschalter so an, dass die Sprachnamen ohne Flaggen angezeigt werden, aber das Dropdown-Menü beibehalten wird.

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

‍

Möglicherweise möchten Sie auch einige erweiterte Anpassungen vornehmen. Zeigen wir beispielsweise den Sprachwechsler Navigationsmenü oder Sprachwechsler der Seitenleiste an.

Sprachwechsler optionen

Es gibt mehrere Möglichkeiten, dies zu tun: entweder über ein Menü, als widget, mithilfe eines Shortcodes, mit HTML oder als schwebende Schaltfläche, die beim Scrollen in der Ecke des Bildschirms verbleibt. Sie können den Umschalter auch direkt in content eines Beitrags oder einer Seite einfügen, content den Shortcode [weglot] content – fügen Sie ihn an der gewünschten Stelle in Ihren Seiteneditor ein. Der Umschalter Weglot funktioniert mit allen WordPress-Themes, einschließlich FSE- und Block-Themes.

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.

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:

Obwohl sich der Sprachumschalter in der Kopfzeile befindet, wird er nicht korrekt angezeigt? Kein Problem! Du könntest auch Inline-Sprachcodes verwenden anstelle eines Dropdown-Menüs.

Erweitertes Sprachwechsler

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

Sprachumschalter lassen sich in der Regel in vier Kategorien einteilen:

• Nicht existent. Anders gesagt: Die Website existiert nur in einer Sprache.
• Es ist schwer zu finden. Der Sprachwechsler in der Navigation oder an einer anderen Stelle versteckt sein, sodass der Benutzer Verstecken spielen muss und eine schlechte Benutzererfahrung hat.
• Leicht zu finden. Idealerweise ist der Sprachumschalter an einer gut sichtbaren und relevanten Stelle platziert, wie zum Beispiel in der Kopf- oder Fußzeile.
• Sehr leicht zu finden. Wenn der Sprachumschalter an einer prominenten Stelle wie dem Header platziert ist, ist es perfekt! So können Nutzer schnell und bequem die gewünschte Sprache auswählen.

Daher ist es von entscheidender Bedeutung, dass Sie es den Besuchern Ihrer Website leicht machen, eine bevorzugte Sprache zu wählen, und dass Sie eine benutzerfreundliche Erfahrung für Ihre internationalen Website-Besucher bieten. In einer idealen Welt sollten Sie dies ohne Add-ons tun können. Berücksichtigen Sie daher Folgendes:

1. Wählen Sie Ihre Sprachoptionen sorgfältig aus. Nur weil Sie jede Sprache aktivieren können, heißt das nicht, dass Sie das auch tun sollten. Sie sollten nur die Sprachen aktivieren, die Sie benötigen. 
2. Sorge dafür, dass der Sprachumschalter leicht zu finden ist. Kopf- oder Fußzeile sind beides ideale Orte. Auf mobilen Geräten wird der Sprachumschalter oft in der Hauptnavigation als Menüpunkt integriert.
3. Passe den WordPress-Sprachumschalter an das Design an. Auch wenn es verlockend einfach ist, den standardmäßigen Sprachumschalter zu verwenden – besser ist es, ihn optisch an den Look & Feel deiner Website anzupassen. So fügt er sich nahtlos ins Gesamtbild ein.
4. Entscheide dich für Flaggen oder Namen zur Darstellung der Sprachen. Flaggen sind zwar gerade gerade aus Design-Sicht interessant (sie sind bunt und platzsparend), aber eigentlich nicht als Smybol für Sprachen gedacht. Dies wirft verschiedene Probleme auf.

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

Auf der Microsoft Translator-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 der Sprache sind eindeutig.

2. Etsy

Etsy ist ein internationaler Marktplatz, auf dem Kunsthandwerker ihre handgefertigten Produkte verkaufen können. Kein Wunder also, dass die Plattform einen benutzerfreundlichen Sprachumschalter bietet. Dieser befindet sich in der Fußzeile auf jeder Seite.

Sie können eine Region, eine Sprache und eine Währung auswählen. Wenn Sie hier klicken, öffnet sich ein Popup-Fenster, in dem Sie jede dieser Optionen ändern können – eine übersichtliche Lösung, die es den Nutzern erspart, auf eine regionale Website wechseln zu müssen.

3. Evernote

Die beliebte Notiz-App Evernote hält es einfach: Ein Dropdown-Menü in der Fußzeile ermöglicht es, die Sprache schnell und unkompliziert zu ändern.

Es ist leicht zu finden und klar beschriftet – was beweist, dass auch ein minimalistischer Schalter ein übersichtliches, reibungsloses Erlebnis bieten kann.

So gelingt ein perfekt gestalteter WordPress-Sprachumschalter

Mit den richtigen Tools ist es ganz einfach, einen Sprachwechsler Ihrer Website einzurichten. Mit Weglot erhalten Sie einen automatisch Sprachwechsler , vollständige KI-Übersetzungen vom ersten Tag an und volle Bearbeitungskontrolle – ganz ohne Entwickler. Das Übersetzungstool läuft im Hintergrund und sorgt dafür, dass Ihre Übersetzungen stets aktuell und markengerecht sind, ohne dass Sie sich darum kümmern müssen. Sie können über IhrDashboard auchdie automatische Weiterleitung aktivierenDashboard diese erkennt die Browsersprache eines Besuchers und leitet ihn automatisch zur richtigen Sprachversion Ihrer Website weiter.

Weglot zudem mit Blick auf mehrsprachige Suchmaschinenoptimierung entwickelt. Es erstellt automatisch Sprachunterverzeichnisse für jede übersetzte Version Ihrer Website. Es fügt hreflang-Tags hinzu und übersetzt Ihre Metadaten. Suchmaschinen können jede Sprachversion vom ersten Tag an finden und indexieren.

Wählen Sie ein WordPress-Übersetzungs-Plugin, das auch für mehrsprachige SEO entwickelt wurde. Dank automatisch erstellter Sprachunterverzeichnisse, übersetzter Metadaten und der Implementierung von hreflang-Tags Weglot die technischen Aspekte, die Suchmaschinenoptimierung und die Übersetzung Ihrer mehrsprachigen Website.

Möchten Sie einen Sprachwechsler Ihrer Website hinzufügen? Starten Sie mitdem kostenlosen TarifWeglot Weglot– ganz ohne Kreditkarte.