Ein Sprachumschalter ermöglicht es Besuchern, die Sprache auszuwählen, in der sie Ihren Inhalt lesen wollen. Mit WPML können Sie auf verschiedene Weise einen Sprachumschalter hinzufügen: in einem Menü, als Widget oder im Footer der Website. Sie können dies auch verwenden, um Links über oder unter Ihren Beiträgen anzuzeigen und diese in anderen Sprachen anzubieten.

Sprachumschalter, die mit WPML hinzugefügt wurden, funktionieren in jedem Theme und sehen ansprechend aus.

Die Sprachumschalter Ihrer Website können auf der Seite WPML -> Sprachen hinzugefügt und angepasst werden.

Globale Optionen für Sprachumschalter

Der erste Abschnitt bei den Sprachumschaltern ist der für die globalen Einstellungen, wie die Reihenfolge der Sprachen. Bitte beachten Sie, dass diese Optionen auf alle Sprachumschalter angewendet werden, die Sie hinzufügen.

Der Abschnitt für die Hauptoptionen des Sprachumschalters
Der Abschnitt für die Hauptoptionen des Sprachumschalters

Einstellungen für die Beibehaltung von URL-Argumenten

Im Abschnitt Sprachumschalter-Optionen befindet sich auch die Option URL-Argumente beibehalten.

Einige Plugins benötigen eventuell URL-Argumente und Sie wollen diese beim Umschalten von Sprachen sicher beibehalten – dazu dient diese Funktion. Die Argumente, die Sie beibehalten wollen, sollten hier als kommagetrennte Liste eingefügt werden.

Dialogbox
Dialogbox

Sehen wir uns einmal das folgende Anwendungsbeispiel für diese Funktion an:

  • Angenommen, Sie fügen die folgenden Argumente hinzu: bar, foo.
  • Sie übersetzen den „Hallo Welt“-Beitrag.
  • Öffnen Sie im Frontend den „Hallo Welt“-Beitrag und fügen Sie am Ende der URL dies hinzu: ?bar=10&foo=100&lost=1000 (beachten Sie, dass wir die beiden Argumente + das Argument lost hinzugefügt haben)
  • Schalten Sie die Sprache um – die URL wird nur auf ?bar=10&foo=100 enden

Verschiedene Abschnitte für verschiedene Arten von Sprachumschaltern

Jede Art von Sprachumschalter hat ihren eigenen Abschnitt. Optionen, die für verschiedene Arten von Sprachumschaltern ausgewählt werden, werden auf den jeweiligen Sprachumschalter angewendet. Die Sprachen-Seite zeigt eine Vorschau der verschiedenen Sprachumschalter, die auf Ihrer Website aktiv sind, wie das folgende Bild zeigt.

Verschiedene Abschnitte für jede Art von Sprachumschalter
Verschiedene Abschnitte für jede Art von Sprachumschalter

Jeder Abschnitt hat seinen eigenen „hinzufügen“-Button (zum Hinzufügen eines weiteren Sprachumschalters dieser Art), ein „Bleistift“-Symbol zum Bearbeiten des vorhandenen Sprachumschalters und ein „Papierkorb“-Symbol.

Verschiedene Abschnitte für verschiedene Arten von Sprachumschaltern

Jede Art von Sprachumschalter hat ihre eigenen Einstellungen. So können Sie vollständig und unabhängig kontrollieren, was der Sprachumschalter enthält und wie er aussieht.

Das folgende Bild zeigt zum Beispiel eine Dialogbox mit Einstellungen für den Menü-Sprachumschalter.

Einstellungen für den Menü-Sprachumschalter
Einstellungen für den Menü-Sprachumschalter

Live-Vorschau, die die Sprachumschalter-Optionen zeigt

Wenn Sie die Einstellungen des Sprachumschalters ändern, aktualisiert sich die Vorschau. Die Vorschau ist „schematisch“. Sie lädt nicht die Frontend-CSS (es ist keine gute Idee, diese im WordPress-Adminbereich zu laden), der tatsächliche Sprachumschalter wird also anders gestaltet sein. Die Vorschau zeigt Ihnen jedoch die Wirkung der verschiedenen Optionen, der Farbeinstellungen, der Reihenfolge und des Inhalts.

HTML-Struktur der Menü-Sprachumschalter

Ab Version 3.6 stellt WPML die Sprachumschalter nicht mehr mit seiner eigenen HTML dar. Stattdessen werden die „Sprachumschalter“-Elemente in die Menü-Struktur eingefügt. So stellt Ihr Theme die Sprachumschalter genau wie die anderen Menüelemente dar.

Im Grunde sieht der Sprachumschalter so auf Ihrer Website besser aus und übernimmt das Aussehen der CSS-Regeln Ihres Themes.

Menü-Sprachumschalter im Frontend
Menü-Sprachumschalter im Frontend

Live-Vorschau, die die Sprachumschalter-Optionen zeigt

Speziell für Menü-Sprachumschalter wurde in der WPML-Version 3.6 eine neue CSS-Klasse hinzugefügt – wpml-ls-menu-item. Dies vereinfacht die individuelle Anpassung Ihrer Menü-Umschalter-Elemente (Links).

Wenn Ihre Website zum Beispiel das Twenty Sixteen-Theme verwendet und Ihr Menü-Umschalter nur die Flaggen der Sprache anzeigt, sieht die Darstellung im Frontend seltsam aus. Wie Sie auf dem folgenden Bild sehen können, ist die Breite der Menüelemente merkwürdig groß.

Sprachumschalter nur mit Flaggen mit dem Twenty Sixteen-Theme
Sprachumschalter nur mit Flaggen mit dem Twenty Sixteen-Theme

Sie können dies ganz einfach beheben, indem Sie die CSS-Klasse wpml-ls-menu-item verwenden.

li.wpml-ls-menu-item ul li a {
width: auto;
}

Die CSS-Datei Ihres Themes müssen Sie nicht bearbeiten. Fügen Sie einfach im Abschnitt Zusätzliche CSS unter den Sprachumschalter-Optionen die benutzerdefinierten Regeln hinzu.

Nun verbessert sich die Breite der Listenelemente, wie auf dem folgenden Bild gezeigt.

Menü-Sprachumschalter nach Anwendung benutzerdefinierter CSS
Menü-Sprachumschalter nach Anwendung benutzerdefinierter CSS

Anzeige von WPMLs Sprachumschalter an benutzerdefinierten Stellen

Manchmal müssen Sie einen Sprachumschalter an einer speziellen Stelle einfügen. Dies können Sie in den PHP-Vorlagen Ihres Themes oder direkt auf den Seiten bzw. in den Beiträgen tun.

Bitte beachten Sie, dass die globalen Einstellungen für die Sprachumschalter an den benutzerdefinierten Stellen an derselben Stelle vorgenommen werden wie die für die anderen Umschalter auf Ihrer Website – im Abschnitt Sprachumschalter-Optionen auf der Sprachen-Seite.

Mit PHP-Aktionen

Um den Sprachumschalter in den PHP-Template-Dateien Ihres Sprachumschalters anzuzeigen, können Sie die folgenden beiden Aktionen ausführen:

  • do_action('wpml_add_language_selector'); – gibt den Sprachumschalter auf Basis der Optionen aus, die im Abschnitt Benutzerdefinierte Sprachumschalter eingestellt wurden.
  • do_action( 'wpml_footer_language_selector'); – gibt den Sprachumschalter auf Basis der Optionen aus, die im Abschnitt Footer-Sprachumschalter eingestellt wurden, selbst wenn die Option Sprachumschalter im Footer anzeigen deaktiviert ist.

Mit WPML Shortcodes

In Beiträgen und auf Seiten können Sie einen der beiden WPML-Shortcodes unten verwenden. Auch hier liegt der Unterschied wieder darin, welcher Sprachumschalter angezeigt wird.

  • [wpml_language_selector_widget] – gibt den Sprachumschalter auf Basis der Optionen aus, die im Abschnitt Benutzerdefinierte Sprachumschalter eingestellt wurden.
  • [wpml_language_selector_footer] – gibt den Sprachumschalter auf Basis der Optionen aus, die im Abschnitt Footer-Sprachumschalter eingestellt wurden, selbst wenn die Option Sprachumschalter im Footer anzeigen deaktiviert ist.

Ihre eigenen benutzerdefinierten Sprachumschalter

Auf Wunsch können Sie auch Ihren eigenen, einzigartigen Sprachumschalter gestalten. Mit einem benutzerdefinierten Sprachumschalter können Sie alle Optionen ganz so einbeziehen, wie es Ihnen am besten gefällt. Oft wird dies zur Anzeige eigener Sprachflaggen oder für eine besondere Reihenfolge der Sprachen verwendet.

Ein benutzerdefinierter Sprachumschalter
Ein benutzerdefinierter Sprachumschalter

Dazu stehen Ihnen zwei Möglichkeiten offen: die Nutzung von Twig-Templates oder die Nutzung der PHP-API.

Ab Version 3.6 unterstützt WPML die Erstellung benutzerdefinierter Sprachumschalter mit Twig-Templates.. Dies ist der bevorzugte und einfachere Ansatz und kommt ganz ohne PHP-Programmierung aus. Das Beste an der Nutzung von Twig-Templates ist, dass Sie diese ganz einfach in Themes einbeziehen können und sie für die Nutzer als Optionen erscheinen.

Die andere Möglichkeit ist die Erstellung benutzerdefinierter Sprachumschalter mit der PHP API. Dieser Ansatz erfordert PHP-Kenntnisse.