Navigation überspringen
Startseite » WPML-Dokumentation » Leitfaden für den Einstieg » Einrichtung der Sprache » So fügen Sie einen Sprachumschalter zu Ihrer WordPress Website hinzu » Maßgeschneiderter Sprachumschalter

Maßgeschneiderter Sprachumschalter

Amir
Aktualisiert
Mai 24, 2024

Wenn Sie mehrsprachige Websites mit WPML entwickeln, benötigen Sie möglicherweise einen maßgeschneiderten Sprachumschalter. Erfahren Sie, wie Sie dies mit ein paar einfachen PHP- und CSS-Funktionen erreichen können.

Mit WPML können Sie Ihren Menüs, Widgets, Footern und Websites mit dem Site Editor (früher bekannt als Full Site Editing) Sprachumschalter hinzufügen, komplett mit Anpassungsoptionen und integrierten Flaggen. Aber vielleicht brauchen Sie für Ihre Website etwas Besonderes.

In diesem Tutorial zeigen wir Ihnen, wie Sie einen fließenden Sprachumschalter hinzufügen können. Ein fließender Sprachumschalter sieht großartig aus und erleichtert es Ihren Kunden, Ihre Website in ihrer Sprache anzuzeigen.

Eine Website, die den gleitenden Sprachumschalter verwendet

Befolgen Sie diese drei Hauptschritte:

  1. Fügen Sie den PHP-Code hinzu, der den Sprachumschalter anzeigt
  2. Gestalten Sie Ihren Sprachumschalter mit CSS
  3. Aktualisieren Sie Ihre Sprachumschalter-Einstellungen

Der PHP-Teil

Der erste Schritt besteht darin, den PHP-Code hinzuzufügen, der für die Darstellung des Sprachumschalters auf Ihrer Seite verantwortlich ist. Dazu erstellen Sie eine Funktion, die einen div-Container mit dem Sprachumschalter darin einfügt. Wir können die wpml_add_language_selector Aktion, um den Sprachumschalter darzustellen.

In diesem Beispiel möchten wir, dass der neue Sprachumschalter in der Fußzeile angezeigt wird, also verwenden wir unsere neue Funktion mit dem WordPress-eigenen wp_footer-Hook.

Der vollständige PHP-Code sieht dann so aus.

Language switcher PHP 
//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>'; 
}

Kopieren Sie sie und fügen Sie sie in die Datei functions.php Ihres (Child-)Themes ein.

Der Styling-Teil

Mit dem vorherigen Code haben wir bereits einen neuen Sprachumschalter in der Fußzeile unserer Website hinzugefügt. Jetzt ist es an der Zeit, es so anzupassen, dass es in der unteren rechten Ecke der Website schwebt. Dies können Sie mit dem CSS-Attribut position: fixed erreichen.

Gehen Sie wie folgt vor, um den CSS-Code hinzuzufügen:

  1. Gehen Sie zu WPML → Sprachen.
  2. Scrollen Sie nach unten zu Sprachumschalter-Optionen und erweitern Sie den Abschnitt 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 Box-Shadow hinzu. Natürlich können Sie es nach Belieben anpassen.

Language Switcher Styling 
/*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 Teil mit den Einstellungen

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

Gehen Sie wie folgt vor:

  1. Gehen Sie zu WPML → Sprachen.
  2. Scrollen Sie nach unten zu Maßgeschneiderte Sprachumschalter und klicken Sie auf Aktivieren.
  3. Klicken Sie auf den Button Anpassen.
  4. Für Was in den Sprachumschalter aufgenommen werden soll, wählen Sie Flagge und deaktivieren Sie die anderen Optionen.
  5. Klicken Sie auf Speichern.
Language switcher options
Nur die Flagge im gleitenden Sprachumschalter anzeigen

Das war’s! Sie sollten nun einen schönen, maßgeschneiderten Sprachumschalter auf der Website haben:

Horizontal language switcher
Der Sprachumschalter auf dem Frontend

Bonus: Vertikal schwebender Sprachumschalter

Sie können stattdessen auch einen vertikalen Sprachumschalter erstellen, wie im folgenden Screenshot zu sehen:

Vertical language switcher
Vertikaler Sprachumschalter

Ersetzen Sie dazu einfach das vorherige CSS durch den folgenden Code:

Vertical Language Switcher CSS 
/*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;
}

10 Antworten zu “Maßgeschneiderter Sprachumschalter”

  1. guten tag

    ich möchte gerne flaggen zur sprachauswahl im header platzieren. nun werd ich nicht schlau aus den ganzen anleitungen und wäre um jegliche hilfe dankbar. ich möchte einfach alle sprachen anzeigen ohne dropdown, sondern mit grafiken wie dies hier im footer der fall ist.

  2. Die Beschreibung ist etwas fortgeschritten. Um die Auswahl in den header zu bringen, musst du erst wie beschrieben die function languages_list_footer() wie in „Liste der Sprachennamen und Flaggen für die Fußzeile“ beschrieben wurde ans Ende der Datei wp-includes/functions.php zu kopieren. Dann musst du die index.php deiner Theme bearbeiten und die funktion aufrufen, indem du ein: an der betreffenden Stelle im Code reinschreibst
    ich hoffe das hilft dir!

  4. Guten Abend,

    ich habe versucht eine ganz simple Liste (ohne JavaScript) zu erstellen. Einfach ein Link der angibt welche Sprachen verfügbar sind.
    Wie hier bei z.B. Archive. Ein ganz simpler Link, den ich mit CSS bearbeiten kann. Desweiteren würde ich mich freuen, wenn ich die (unnötigen) divs herausbekommen kann, da sonst meine Liste nicht korrekt angezeigt wird. 😉

    Vielen Dank! MfG Jakob

  5. Wie kann ich die Reihenfolge der Sprachen in der Ausgabe sortieren:

    php do_action(‚icl_language_selector‘);

    Im Moment bekomme ich:
    1. Englisch
    2. Spanisch
    3. Deutsch
    4. Portugiesisch

    Reihenfolge soll sein:
    1. Deutsch
    2. Englisch
    3. Spanisch
    4. Portugiesisch

    Wo müsste ich einen sort-Befehl einfügen?

    Vielen Dank für Hinweise!

    T. Lüers

  6. Ich habe meine Seite auf 3 Sprachen und möchte hierzu die Flaggen der jeweiligen Sprache nebeneinander anzeigen (ohne Text). Wie geht das?
    Habe keine Ahnung. Bitte um Erklärung für Laien.

  7. gute idee osman, genau dasselbe möchte ich auch mal wissen.
    am besten mit einer festen sortierung, die frei wählbar ist.
    gruß thomas

  8. Oben heisst es:
    „Wir sollten auch bisschen CSS hinzufügen, um die Sprachenliste zu gestalten. Diese CSS wird die Sprachenliste in Ihren Footer einfügen und sie ein bisschen formatieren:“
    Es fehlt die Angabe, wo dieser CSS-Code einzufügen ist.
    Bitte nachtragen!

    • Hallo Jürgen, vielen Dank für den Hinweis! Stimmt, wird nicht erklärt wo man das zusätzliche CSS eingeben soll. Wir werden das zeitnah nachtragen.
      Für alle Nutzer, die diesen Kommentar lesen sollten, das CSS sollte unter „WPML > Sprachen > Sprachumschalter-Optionen > Zusätzliche CSS“ eingetragen werden.