Den WPML-Sprachumschalter anpassen – Platzierung, Styling und Verhalten

Was der Sprachumschalter von WPML kann

Ohne zusätzliche Konfiguration erstellt WPML einen Sprachumschalter, der:

• Jede aktive Sprache auf Ihrer Website in der von Ihnen gewählten Reihenfolge anzeigt.
• Jede Sprache mit ihrem eigenen Namen (Deutsch, Français) oder in der aktuellen Sprache der Website (Deutsch, Französisch) beschriftet – Sie haben die Wahl.
• Optional Flaggen anzeigt (ein Sprite, das mit Ihrem Theme skaliert).
• Fehlende Übersetzungen elegant handhabt: Entweder wird die Sprache übersprungen oder es wird auf die Startseite dieser Sprache verlinkt.
• In jedem WordPress-Menü, in jedem Widget-Bereich, in der Fußzeile oder inline über und unter Beiträgen platziert werden kann.
• Als Gutenberg-Block für jedes Page-Builder-Layout verfügbar ist.
• Auf bestimmten Seiten verborgen werden kann, wo er stören würde (404, Kasse, Konto).
• Sein gerendertes HTML für schnelle Seitenladezeiten im Cache speichert.

Die meisten Websites verwenden die integrierten Platzierungen und die Standardeinstellungen. Theme-Entwickler, die mehr Kontrolle benötigen, können mithilfe der API von WPML einen benutzerdefinierten Sprachumschalter im Code erstellen.

Wo sich die Einstellungen befinden

Öffnen Sie WPML > Einstellungen > Sprachumschalter. Die Seite ist nach Fragen gruppiert, nicht nach UI-Tabs. Wählen Sie den Abschnitt aus, der dem entspricht, was Sie ändern möchten.

Welche Sprachen in welcher Reihenfolge erscheinen

Die Karte Sprachumschalter-Optionen verfügt über einen Drag-and-Drop-Bereich, der jede aktive Sprache auflistet. Die Reihenfolge hier bestimmt die Reihenfolge in jedem Sprachumschalter auf der Website. Ziehen Sie die Sprachen nach oben oder unten und speichern Sie.

Wählen Sie auf derselben Karte aus:

• Eigener Name vs. aktuelle Sprache. Zeigen Sie Deutsch (eigener Name) oder German (aktuelle Sprache) an. Der eigene Name ist für Sprecher dieser Sprache einladender; die aktuelle Sprache ist für Erstbesucher klarer.
• Flaggen ein oder aus und das Flaggenformat.

Was passiert, wenn eine Übersetzung fehlt

Nicht jede Seite wird in jede Sprache übersetzt. Die Option Umgang mit Sprachen ohne Übersetzung entscheidet, was der Sprachumschalter für eine Sprache tut, die keine Übersetzung der aktuellen Seite hat:

• Sprache überspringen (Standard). Die Sprache verschwindet für diese Seite aus dem Sprachumschalter. Die sauberste UX; Besucher sehen nur Sprachen, die sie tatsächlich lesen können.
• Link zur Startseite der Sprache für fehlende Übersetzungen. Der Eintrag im Sprachumschalter zeigt stattdessen die Startseite der Sprache an. Nützlich, wenn Sie möchten, dass jede Sprache immer von jeder Seite aus erreichbar ist, aber Besucher könnten auf Inhalten landen, die sie nicht erwartet haben.

Die Wahl hat UX-Auswirkungen, über die es sich lohnt, bewusst nachzudenken.

Wo der Sprachumschalter erscheint

Fünf Platzierungen, die jeweils unabhängig voneinander auf derselben Einstellungsseite umgeschaltet werden können:

• Menü-Sprachumschalter. Fügen Sie den Sprachumschalter in ein beliebiges WordPress-Menü ein (Kopfzeile, Fußzeile, Seitenleiste, wo immer Ihr Theme Menüs zuweist). Fügen Sie mehrere hinzu, wenn Sie unterschiedliche Platzierungen pro Menü wünschen. Jeder Menü-Sprachumschalter erhält eine eigene Vorschauzeile, die anzeigt, wo er sich befindet.
• Widget-Sprachumschalter. Fügen Sie den Sprachumschalter einem beliebigen Widget-Bereich hinzu, den Ihr Theme registriert: Seitenleisten, Kopfzeilenbereiche, Fußzeilenspalten.
• Sprachumschalter in der Fußzeile. Ein einzelner globaler Schalter, der den Sprachumschalter automatisch am Ende jeder Seite rendert.
• Inline-Links zu Übersetzungen von Beiträgen. Ein einzelnes Kontrollkästchen, das Links wie „Dieser Beitrag ist in X verfügbar“ über oder unter jedem Beitrag anzeigt.
• Benutzerdefinierte Sprachumschalter. Wenn die integrierten Platzierungen nicht ausreichen, können Theme-Entwickler die Sprachumschalter-API von WPML aus jeder Template-Datei aufrufen. Die Einstellungsseite bietet einen Anpassen-Button für die Rendering-Optionen.

Den Sprachumschalter auf bestimmten Seiten verbergen

Einige Seiten benötigen keinen Sprachumschalter: Ihre 404-Seite, Konto-Bildschirme, die Kasse. Die bedingten Anzeigeregeln von WPML ermöglichen es Ihnen, den Sprachumschalter pro Seite zu verbergen, ohne auf display:none-CSS in Ihrem Theme zurückgreifen zu müssen.

Sie legen diese seitenbezogenen Regeln auf derselben Seite unter Einstellungen > Sprachumschalter fest. Wählen Sie die Seiten aus, auf denen der Sprachumschalter verborgen werden soll; die Regel gilt sofort für jede Platzierung des Sprachumschalters.

URL-Parameter beibehalten

Wenn ein Besucher auf den Sprachumschalter klickt, erstellt WPML die URL für die Zielsprache neu. Standardmäßig werden Query-String-Parameter (?utm_source=newsletter, Filterparameter usw.) verworfen. Dies unterbricht Analytics-Kampagnen und gefilterte Auflistungen.

Das Feld URL-Argumente erhalten listet Query-Keys auf, die Sie beim Wechsel beibehalten möchten. Alles, was Sie hier eintragen (eines pro Zeile), reist mit dem Besucher zur übersetzten URL.

Benutzerdefiniertes CSS für den Sprachumschalter

Ein einzelner Textbereich unter Zusätzliches CSS wendet das Styling auf jeden Sprachumschalter auf der Website gleichzeitig an. Nützlich, um den Sprachumschalter an Ihr Theme anzupassen, ohne Theme-Dateien zu berühren.

Das Sprachumschalter-Template im Cache speichern

Die Karte Performance hat ein einzelnes Kontrollkästchen: Sprachumschalter-Templates im Cache speichern. Wenn dies aktiviert ist, speichert WPML das gerenderte HTML jeder Sprachumschalter-Platzierung im Cache, was die Seitenladezeiten auf einer stark frequentierten Website beschleunigt.

Der Haken: Wenn Sie eine Option für den Sprachumschalter ändern und Ihre Änderung im Frontend nicht sehen, ist der Cache-Speicher der erste Ort, den Sie überprüfen sollten. Schalten Sie ihn aus, laden Sie die Seite neu, und Ihre Änderungen werden angezeigt. Schalten Sie das Caching dann für die Live-Website wieder ein.

Benutzerdefinierte Sprachumschalter im Theme-Code

Für Websites, bei denen die integrierten Platzierungen nicht passen (ein Sprachumschalter an einer bestimmten Position innerhalb der Kopfzeile der Seite, ein benutzerdefiniertes Dropdown, das von Ihrem Theme gerendert wird, alles außerhalb eines WordPress-Menüs oder Widget-Bereichs), stellt WPML eine API zur Verfügung, mit der Theme-Entwickler einen benutzerdefinierten Sprachumschalter erstellen können.

Die Karte Benutzerdefinierte Sprachumschalter verfügt über einen Aktivieren-Schalter und einen Anpassen-Button. Sobald dies aktiviert ist, kann der Theme-Template-Code den Sprachumschalter überall mit der dokumentierten PHP-API von WPML rendern.