Originally written
Januar 24, 2013
Aktualisiert
Dezember 30, 2019

Entwickler können mit Hilfe des API-Befehls icl_get_languages von WPML ihre eigenen, benutzerdefinierten Sprachumschalter erstellen. In diesem Tutorial finden Sie alle Details zu icl_get_languages und Beispiele für benutzerdefinierte Sprachumschalter, die damit erstellt wurden.

Kurze Übersicht:

  1. Der Befehl icl_get_languages ruft die Liste der Übersetzungen für die aktuell angezeigte Seite auf
  2. Schreiben Sie Ihre eigene PHP-Funktion zur Darstellung des PHP-Umschalters
  3. Fügen Sie Ihren Sprachumschalter in Ihr Theme ein

Abruf der Liste der (anderen) Sprachen

Benutzen Sie icl_get_languages() zum Aufruf einer Liste der Übersetzungen für eine beliebige Seite. Wenn Sie WPML 3.2 oder höher verwenden, können Sie den ähnlichen Hook-Filter wpml_active_languages nutzen.

Nutzung:

icl_get_languages('skip_missing=N&orderby=KEY&order=DIR&link_empty_to=str')

* N=0/1
* KEY=id/code/name/custom (name -> translated_name), (default: id)
* DIR=asc/desc (default: asc)
* link_empty_to = str (Standard: leer, funktioniert in Verbindung mit skip_missing=0 und ermöglicht die Nutzung benutzerdefinierter Links für die Sprachen, die keine Übersetzungen für das aktuelle Element haben. {%lang} kann als Platzhalter für den Sprachcode verwendet werden)

Hinweise:

  • Der Parameter skip_missing sagt der Funktion, wie Sprachen ohne Übersetzungen behandelt werden sollen.
  • Die Kombination von orderby und order ermöglicht die Erstellung von Dropdown-Sprachumschaltern oder Sprachumschaltern, bei denen Sprachen immer in der gleichen Position angezeigt werden.
  • Die benutzerdefinierte Reihenfolge kann im WordPress-Admin-Bereich unter WPML » Sprachen » Sprachumschalter-Optionen definiert werden.

Die Funktion gibt ein Array mit Einträgen pro Sprache heraus. Bei einer WordPress-Website, die auf Englisch, Französisch und Italienisch läuft, gibt sie beispielsweise dies aus:

Array
(
 [en] => Array
 (
 [id] => 1
 [active] => 1
 [native_name] => English
 [missing] => 0
 [translated_name] => Englisch
 [language_code] => en
 [country_flag_url] => http://yourdomain/wpmlpath/res/flags/en.png
 [url] => http://yourdomain/about
 )

 [fr] => Array
 (
 [id] => 4
 [active] => 0
 [native_name] => Français
 [missing] => 0
 [translated_name] => Französisch
 [language_code] => fr
 [country_flag_url] => http://yourdomain/wpmlpath/res/flags/fr.png
 [url] => http://yourdomain/fr/a-propos
 )

 [it] => Array
 (
 [id] => 27
 [active] => 0
 [native_name] => Italiano
 [missing] => 0
 [translated_name] => Italienisch
 [language_code] => it
 [country_flag_url] => http://yourdomain/wpmlpath/res/flags/it.png
 [url] => http://yourdomain/it/circa
 )
)

Jede Sprache hat Ihren eigenen Array von Parametern, die Ihre Theme-Funktion auch zur Erstellung beliebiger Sprachumschalter nutzen kann.

  • id: Interne Referenz-ID
  • active: Dies ist die aktuell aktive Sprache (exakt eine Sprache ist aktiv)
  • native_name: Der Name der Sprache in der Muttersprache (nie übersetzt)
  • translated_name: Der Name der Sprache in die aktuell aktive Sprache übersetzt
  • country_flag_url: Die URL auf ein PNG-Bild mit der Länderflagge
  • url: Der Link auf die Übersetzung in der Sprache
  • missing: 1 wenn die Übersetzung für dieses Element fehlt, 0 wenn sie vorhanden ist.

Umgang mit fehlenden Übersetzungen

Einige Seiten sind eventuell nicht in alle Sprachen übersetzt. Sie können icl_get_languages sagen, was bei Sprachen ohne Übersetzungen ausgegeben werden soll.

Bei ’skip_missing=1′ erscheinen diese Sprachen in der Ausgabe nicht. Bei ’skip_missing=0′ erscheinen alle Sprachen und Sprachen mit fehlenden Übersetzungen verlinken wieder auf die Startseite in der Sprache.

Verwendung in Ihren Theme-Funktionen

Sie können Ihre eigenen Sprachumschalter auf jede gewünschte Weise erstellen. Hier zeigen wir zwei beliebte Anwendungsmöglichkeiten.

Die Beispiel-PHP-Funktionen, die wir hier zeigen, sollten Ihrer Datei functions.php (im Theme-Ordner) hinzugefügt werden – nicht dem Plugin.

Dieser Beitrag ist auch verfügbar auf…

Nehmen wir an, Sie wollen unter (oder über) jedem Beitrag eine Zeile hinzufügen, in der Sie mitteilen, in welchen anderen Sprachen dieser verfügbar ist. Diese Funktion sollte nur vorhandene übersetzte Beiträge ausgeben und wenn keine Übersetzung verfügbar ist, sollte sie gar nichts ausgeben.

function icl_post_languages(){
 $languages = icl_get_languages('skip_missing=1');
 if(1 < count($languages)){
 echo __('Dieser Beitrag ist auch verfügbar auf: ');
 foreach($languages as $l){
 if(!$l['active']) $langs[] = '<a href="'.$l['url'].'">'.$l['translated_name'].'</a>';
 }
 echo join(', ', $langs);
 }
}

Was diese Funktion macht:

  1. Abrufen der Sprachenliste von WPML – $languages = icl_get_languages(’skip_missing=1′);
  2. Prüfen, dass es mehr als eine Sprache für diesen Beitrag gibt – if(1 < count($languages))
  3. Die Ausgabe erstellen, wobei die aktuell angezeigte Sprache übersprungen wird – if(!$l[‚active‘])

Hinweise:

  1. Die Nachricht läuft über gettext. Das ist sehr wichtig, damit diese Nachricht, die Sie den Beiträgen in verschiedenen Sprachen anhängen, in der richtigen Sprache erscheint: __(‚This post is also available in: ‚);
  2. Als Sprachnamen werden die übersetzten Sprachnamen verwendet. Dies garantiert, dass der ganze Satz in der richtigen Sprache geschrieben ist: $l[‚translated_name‘]

Dies hat folgendes Ergebnis:

Nachricht, dass der Beitrag in anderen Sprachen verfügbar ist
Nachricht, dass der Beitrag in anderen Sprachen verfügbar ist

Um diese Nachricht in Beiträge einzubeziehen, fügen Sie einen Befehl icl_post_languages() von single.php aus hinzu.

Liste der Sprachnamen und Flaggen für die Fußzeile

Auch wenn Sie oben auf der Seite eine Sprachauswahl anbieten, ist es eine gute Idee, in der Fußzeile eine Liste der Sprachnamen und Flaggen einzufügen. Viele Leute scrollen auf einer Website sofort nach unten, um sich ein besseres Bild der Inhalte machen zu können. Ihren fremdsprachigen Besuchern hilft es daher wahrscheinlich, wenn Sie dort einen gut sichtbaren Sprachumschalter platzieren.

function languages_list_footer(){
 $languages = icl_get_languages('skip_missing=0&orderby=code');
 if(!empty($languages)){
 echo '<div id="footer_language_list"><ul>';
 foreach($languages as $l){
 echo '<li>';
 if($l['country_flag_url']){
 if(!$l['active']) echo '<a href="'.$l['url'].'">';
 echo '<img src="'.$l['country_flag_url'].'" height="12" alt="'.$l['language_code'].'" width="18" />';
 if(!$l['active']) echo '</a>';
 }
 if(!$l['active']) echo '<a href="'.$l['url'].'">';
 echo icl_disp_language($l['native_name'], $l['translated_name']);
 if(!$l['active']) echo '</a>';
 echo '</li>';
 }
 echo '</ul></div>';
 }
}

Diese Funktion macht Folgendes:

  1. Wenn es eine Übersetzungssprache gibt, erstellt sie eine DIV und startet eine ungeordnete Liste: if(!empty($languages)){ echo ‚<div id=“footer_language_list“><ul>‘;
  2. Sie geht jede der Sprachen durch und fügt sie als Listenpunkt hinzu.
  3. Wenn dies nicht die aktive Sprache ist, verlinkt sie auch auf die Seite in der Sprache: if(!$l[‚active‘]) echo ‚<a href=“‚.$l[‚url‘].'“>‘;
  4. Sie fügt die Sprachflagge hinzu:<img src=“‚.$l[‚country_flag_url‘].'“ alt=“‚.$l[‚language_code‘].'“ width=“18″ height=“12″ />
  5. Sie fügt den Sprachnamen sowohl in der Muttersprache als auch in der Übersetzung hinzu, wenn diese sich unterscheiden: echo icl_disp_language($l[’native_name‘], $l[‚translated_name‘]);

Die Funktion icl_disp_language() function wird von WPML erstellt. Sie prüft, ob die beiden Argumente (native_language_name, translated_language_name) sich unterscheiden. Wenn ja, gibt sie beide aus, ansonsten gibt sie sie nur einmal aus.

Wir sollten auch ein wenig CSS hinzufügen, um diese Sprachenliste zu gestalten. Die CSS wird die Sprachenliste in Ihrer Fußzeile zentrieren und ein bisschen formatieren:

#footer_language_list{
 margin-bottom: 25px;
 text-align: center;
}

#footer_language_list ul{
 list-style: none;
 margin:0;
 padding:0;
}

#footer_language_list ul li img{
 margin-right:5px;
}

#footer_language_list ul li{
 display:inline;
 margin:0 5px 0 5px;
 padding:0;
}

#footer_language_list ul li a, #footer_language_list ul li a:visited{
 color: #fff;
 text-decoration:underline;
}

#footer_language_list ul li a:hover, #footer_language_list ul li a:active{
 color: #fff;
}

Hier ist der Sprachumschalter:

Sprachen-Fußzeile
Sprachen-Fußzeile

Um sie Ihrem Theme hinzuzufügen, fügen Sie den Befehl zu languages_list_footer in der Datei footer.php hinzu.

* Bitte beachten Sie: Sie können diesen horizontalen Sprachumschalter ganz einfach in einen vertikalen Sprachumschalter verwandeln. Entfernen Sie einfach die Aussage display: inline aus der CSS.

Sprachauswahl nur mit Flaggen

Einfache Funktion zur Anzeige von Flaggen, die mit den Übersetzungen auf der aktuellen Seite verlinkt sind.

Language selector with flags only
function language_selector_flags(){
    $languages = icl_get_languages('skip_missing=0&orderby=code');
    if(!empty($languages)){
        foreach($languages as $l){
            if(!$l['active']) echo '<a class="wpml-ls-item" href="'.$l['url'].'">';
            echo '<img src="'.$l['country_flag_url'].'" height="12" alt="'.$l['language_code'].'" width="18" />';
            if(!$l['active']) echo '</a>';
        }
    }
}

Die Ausgabe dieser Funktion muss separat gestaltet werden. Sie können die Funktion beispielsweise in einen div-Block packen und für die img-Tags benutzerdefinierte Stile definieren.

<div id="flags_language_selector"><?php language_selector_flags(); ?></div >

Die CSS:

#flags_language_selector img{
 margin:1px;
 border:1px solid #333;
}
Flaggen-Sprachauswahl

Sprachumschalter zeigt nur inaktive Sprachen an

Das Code-Beispiel in diesem Artikel kann zur Erstellung eines Sprachumschalters mit den folgenden Eigenschaften benutzt werden:

  • Wird horizontal angezeigt
  • Hängt an einem bestimmten Menü
  • Nutzt Sprachflaggen und Namen in der Muttersprache
  • Zeigt nur inaktive Sprachen

Sie sollten diesen Code der Datei functions.php Ihres Themes hinzufügen. Eine noch bessere Lösung: Fügen Sie sie der functions.php im untergeordneten Theme Ihres Themes hinzu.

Per Standard funktioniert der Code gut mit den Standard-WordPress-Themes (Twenty Sixteen, Twenty Fifteen etc.) mit theme_location == ‚primary‘.

Dies ist der Sprachumschalter im Theme Twenty Sixteen, wenn die aktuelle Sprache Englisch ist.
Dies ist das Ergebnis im Theme Twenty Sixteen, wenn die aktuelle Sprache Englisch ist.

So bringen Sie den Code in Ihrem Theme zum Laufen

Andere Themes nutzen eventuell andere Theme-Positionen. Wenn der Code also in Ihrem Theme nicht läuft, befolgen Sie bitte die folgenden Schritte, um ihn funktionsfähig zu machen.

  1. Kommentieren Sie die Zeile ein. Mit anderen Worten: Entfernen Sie die doppelten Schrägstriche (//) am Beginn der Zeile, die den zuvor genannten Code enthält.
  2. Besuchen Sie das Frontend Ihrer Website. Sie sehen (eine) Theme-Position(en) wie [theme_location] => my-theme-location.
  3. Wählen Sie die gewünschte Menüposition, z. B.: my-theme-location und ändern Sie die Zeile:
if ( $languages && $args->theme_location == 'primary') {

in:

if ( $languages && $args->theme_location == 'my-theme-location') {

Wenn Sie nicht sicher sind, welche Position die richtige ist, können Sie die Menüpositionen einfach der Reihe nach ausprobieren.

  1. Machen Sie die im ersten Schritt vorgenommenen Änderungen rückgängig, sodass die Zeile gleich ist wie der Originalcode.

Der Code

// Filter wp_nav_menu() zum Hinzufügen zusätzlicher Links und anderer Ausgabe
// Nur andere Sprache im Sprachumschalter anzeigen
// Benutzen Sie den neuen Filter: https://wpml.org/wpml-hook/wpml_active_languages/ 
add_filter('wp_nav_menu_items', 'new_nav_menu_items', 10, 2);
function new_nav_menu_items($items, $args) {
 // kommentieren Sie dies ein, um die Menüposition Ihres Themes zu finden
 //echo "args:&lt;pre&gt;"; print_r($args); echo "&lt;/pre&gt;";

 // get languages
 $languages = apply_filters( 'wpml_active_languages', NULL, 'skip_missing=0' );

 // Fügen Sie $args-&gt;theme_location == 'primary-menu' als Bedingungsoperator hinzu, wenn Sie die Menü-Position festlegen wollen.

 if ( $languages &amp;&amp; $args-&gt;theme_location == 'primary') {

 if(!empty($languages)){

 foreach($languages as $l){
 if(!$l['active']){
 // flag with native name
 $items = $items . '
&lt;li class="menu-item"&gt;&lt;a href="' . $l['url'] . '"&gt;&lt;img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18" /&gt; ' . $l['native_name'] . '&lt;/a&gt;&lt;/li&gt;

';
 //only flag
 //$items = $items . '
&lt;li class="menu-item menu-item-language"&gt;&lt;a href="' . $l['url'] . '"&gt;&lt;img src="' . $l['country_flag_url'] . '" height="12" alt="' . $l['language_code'] . '" width="18" /&gt;&lt;/a&gt;&lt;/li&gt;

';
 }
 }
 }
 }

 return $items;
}

Ersetzen der Länderflaggen und Ändern der Sprachnamen

WPML enthält eine grafische Benutzeroberfläche für die Bearbeitung von Sprachinformationen. Gehen Sie auf WPML->Sprachen und klicken Sie auf Sprachen bearbeiten. Dort können Sie die Sprachennamen ändern, ihre Gebietsschemawerte bearbeiten und andere Flaggen auswählen.

'skip_missing=0&orderby=name'

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!

  3. 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

  4. 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

  5. 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.

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

  7. 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.