Skip Navigation
Startseite » Dokumentation » Leitfaden für erste Schritte » Einstellung der Sprachen » So fügen Sie einen Sprachumschalter zu Ihrer WordPress-Website hinzu » Benutzerdefinierter Sprachumschalter

Benutzerdefinierter Sprachumschalter

Amir
Aktualisiert
August 13, 2021

Bei der Entwicklung mehrsprachiger Websites mit WPML benötigen Sie eventuell einen benutzerdefinierten Sprachumschalter. Erfahren Sie, wie Sie dies mit einfachen PHP- und CSS-Skripten schaffen.

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

Eine Website, die den schwebenden Sprachumschalter verwendet

Befolgen Sie diese drei Hauptschritte:

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

Der PHP-Teil

Der erste Schritt besteht im Hinzufügen des PHP-Codes, der für die Ausgabe des Sprachumschalters auf Ihrer Seite verantwortlich ist. Dazu erstellen Sie eine Funktion, die einen div-Container mit dem Sprachumschalter darin hinzufügt. Wir können die Aktion wpml_add_language_selector zur Ausgabe des Sprachumschalters verwenden.

In diesem Beispiel wollen wir den neuen Sprachumschalter im Footer anzeigen lassen, darum verwenden wir unsere neue Funktion mit dem WordPress-eigenen Hook wp_footer.

Der vollständige PHP-Code wird so aussehen.

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>'; 
}

Sie können ihn kopieren und zur Datei functions.php Ihres (untergeordneten) Themes hinzufügen.

Der Gestaltungsteil

Sobald der obige Code eingefügt ist, haben wir bereits einen neuen Sprachumschalter in den Footer unserer Website eingefügt. Nun ist es Zeit, diesen so anzupassen, dass er in der unteren rechten Ecke der Website schwebt. Dies gelingt Ihnen mit dem CSS-Attribut position: fixed.

Nutzen Sie die folgenden Schritte, um den CSS-Code hinzuzufügen.

  1. Gehen Sie auf WPML → Sprachen.
  2. Scrollen Sie herunter zu Sprachumschalter-Optionen und klappen Sie den Abschnitt Zusätzliche CSS aus.

Alternativ können Sie die den CSS-Code hinzufügen, indem Sie Layout → Anpassen auswählen und auf Zusätzliche CSS klicken.

Im folgenden Beispiel werden einige zusätzliche Anpassungen wie abgerundete Kanten und Boxschatten ergänzt. Natürlich können Sie diese ganz nach Wunsch 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 Einstellungsteil

Zum Schluss müssen Sie einige Einstellungen so anpassen, dass der Sprachumschalter nur Flaggen anzeigt.

Führen Sie dazu folgende Schritte aus:

  1. Gehen Sie auf WPML → Sprachen.
  2. Scrollen Sie herunter zu Benutzerdefinierte Sprachumschalter und klicken Sie auf Aktivieren.
  3. Klicken Sie auf den Button Anpassen.
  4. Bei Was im Sprachumschalter enthalten sein soll wählen Sie Flagge und demarkieren die anderen Optionen.
  5. Klicken Sie auf Speichern.
Language switcher options
Im schwebenden Sprachumschalter wird nur die Flagge angezeigt

Das ist schon alles! Sie sollten jetzt einen hübschen benutzerdefinierten Sprachumschalter auf der Website haben:

Horizontal language switcher
Der Sprachumschalter im Frontend

Bonus: Vertikal schwebender Sprachumschalter

Sie können stattdessen auch einen vertikalen Sprachumschalter erstellen, wie auf dem Screenshot unten:

Vertical language switcher
Vertikaler Sprachumschalter:

Dazu ersetzen Sie einfach die 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 “Benutzerdefinierter 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.