Benutzerdefinierter Sprachumschalter

Wenn Sie mehrsprachige Websites mit WPML entwickeln, benötigen Sie möglicherweise einen benutzerdefinierten Sprachumschalter. Erfahren Sie, wie Sie dies mit einfachem PHP und CSS umsetzen.

WPML ermöglicht es Ihnen, Sprachumschalter zu Ihren Menüs, Widgets, Fußzeilen und zu Websites, die den Website-Editor (früher bekannt als Full Site Editing) verwenden, hinzuzufügen, komplett mit Anpassungsoptionen und integrierten Flaggen. Aber vielleicht benötigen Sie etwas Spezielleres für Ihre Website.

In diesem Tutorial zeigen wir Ihnen, wie Sie einen schwebenden Sprachumschalter hinzufügen. Ein schwebender Sprachumschalter sieht gut aus und macht es Ihren Kunden leichter, Ihre Website in ihrer Sprache anzuzeigen.

Befolgen Sie diese drei Hauptschritte:

1. Fügen Sie den PHP-Code hinzu, der den Sprachumschalter rendert
2. Gestalten Sie Ihren Sprachumschalter mit CSS
3. Aktualisieren Sie die Einstellungen Ihres Sprachumschalters

Der PHP-Teil

Der erste Schritt besteht darin, den PHP-Code hinzuzufügen, der für das Rendern des Sprachumschalters auf Ihrer Seite verantwortlich ist. Dafür erstellen Sie eine Funktion, die einen div-Container mit dem darin enthaltenen Sprachumschalter hinzufügt. Wir können die Aktion wpml_add_language_selector verwenden, um den Sprachumschalter zu rendern.

In diesem Beispiel möchten wir, dass der neue Sprachumschalter im Footer angezeigt wird, daher verwenden wir unsere neue Funktion mit dem WordPress-eigenen wp_footer-Hook.

Der vollständige PHP-Code sieht wie folgt aus.

//WPML - Add a floating language switcher to the footer
 add_action('wp_footer', 'wpml_floating_language_switcher'); 
 
 function wpml_floating_language_switcher() { 
    echo '<div class="wpml-floating-language-switcher">';
        //PHP action to display the language switcher (see https://wpml.org/documentation/getting-started-guide/language-setup/language-switcher-options/#using-php-actions)
        do_action('wpml_add_language_selector');
    echo '</div>'; 
}

Sie können ihn kopieren und der Datei functions.php Ihres (Child-)Themes hinzufügen.

Der Styling-Teil

Mit dem vorherigen Code haben wir bereits einen neuen Sprachumschalter zum Footer unserer Website hinzugefügt. Nun ist es an der Zeit, ihn so anzupassen, dass er in der unteren rechten Ecke der Website schwebt. Dies können Sie mit dem CSS-Attribut position: fixed tun.

Führen Sie die folgenden Schritte aus, um den CSS-Code hinzuzufügen:

1. Gehen Sie zu WPML → Einstellungen → Sprachumschalter.
2. Erweitern Sie in der Karte Sprachumschalter-Optionen den Bereich Zusätzliches CSS.

Alternativ können Sie diesen CSS-Code hinzufügen, indem Sie zu Design → Anpassen gehen und auf Zusätzliches CSS klicken.

Das folgende Beispiel fügt einige zusätzliche Anpassungen wie abgerundete Rahmen und einen Box-Shadow hinzu. Natürlich können Sie ihn nach Ihren Wünschen anpassen.

/*Removing some default CSS from our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}

Der Einstellungs-Teil

Schließlich müssen Sie einige Einstellungen anpassen, damit der Sprachumschalter nur die Flaggen anzeigt.

Führen Sie die folgenden Schritte aus:

1. Gehen Sie zu WPML → Einstellungen → Sprachumschalter → Benutzerdefinierte Sprachumschalter.
2. Scrollen Sie nach unten zu Benutzerdefinierte Sprachumschalter und klicken Sie auf Aktivieren.
3. Klicken Sie auf die Schaltfläche Anpassen.
4. Lassen Sie unter Was in den Sprachumschalter eingeschlossen werden soll die Option Flagge aktiviert und deaktivieren Sie Name in Muttersprache, Sprachname in aktueller Sprache und Aktuelle Sprache.
5. Klicken Sie auf Speichern.

Das war's! Sie sollten nun einen schönen benutzerdefinierten Sprachumschalter auf der Website haben:

Bonus: Vertikaler schwebender Sprachumschalter

Sie könnten stattdessen auch einen vertikalen Sprachumschalter erstellen, wie im Screenshot unten:

Ersetzen Sie dafür einfach das vorherige CSS durch den folgenden Code:

/*Removing some default CSS our language switcher*/
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}
 
.wpml-floating-language-switcher  .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}
 
.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}
 
.wpml-floating-language-switcher .wpml-ls-item {
  display: block;
}
 
/*Customize this if you want*/
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 20px;
  right: 0px;
  background: #f8f8f8; /*background color*/
  border: 1px solid; /*border settings*/
  border-color: #eee; /*color of the border*/
  padding: 0px; /*padding of container*/
  border-radius: 6px 0 0 6px; /*rounded border*/
  /*Box Shadow*/
  -webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  z-index: 999;
}