WPML hat einen eigenen Sprachumschalter, der als Dropdown-Liste von Sprachen eingefügt wird. Er ist recht flexibel, aber reicht nicht immer aus.

Sie können Ihre eigenen, benutzerdefinierten Sprachumschalter erstellen und sie ins Theme einfügen. Ich werde Ihnen zeigen, wie Sie eine Liste verfügbarer Sprachen zu Beiträgen und eine Sprachenliste für den Footer hinzufügen können.

Die Liste (anderer) Sprachen einholen

Verwenden Sie icl_get_languages() um eine Liste der Übersetzungen für jede Seite zu erhalten. Anwendung:

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

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

Hinweise:

  • Der Parameter skip_missing (fehlende überspringen) sagt der Funktion, wie mit Sprachen ohne Übersetzungen umgegangen werden soll.
  • Die Kombination von orderby und order ermöglicht die Erstellung des Dropdown-Sprachumschalters oder von Sprachumschaltern, bei denen die Sprachen immer an der gleichen Stelle angezeigt werden.

Die Funktion gibt eine Aufstellung mit Einträgen pro Sprache aus. Bei einer WordPress-Seite, die auf Englisch, Französisch und Italienisch läuft, wird sie zum Beispiel das hier ausgeben:

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

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

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

Jede Sprache hat ihre eigene Aufstellung von Parametern, die Ihre Theme-Funktion zur Erstellung einer beliebigen Sprachauswahl verwenden kann.

  • id: Interne Referenz-ID
  • active (aktiv): Dies ist die derzeit aktive Sprache (genau eine Sprache ist aktiv)
  • native_name (Name in der Muttersprache): Der Name der Sprache in der Muttersprache (nie übersetzt)
  • translated_name (übersetzter Name): Der Name der Sprache in die derzeit aktive Sprache übersetzt
  • country_flag_url (URL zur Länderflagge): Die URL zu einem PNG-Bild mit der Länderflagge
  • url: Der Link zur Übersetzung in der jeweiligen Sprache.
  • missing: 1 wenn die Übersetzung für das Element fehlt, 0 wenn diese vorhanden ist.

Umgang mit fehlenden Übersetzungen

Einige Seiten sind vielleicht nicht in alle Sprachen übersetzt. Sie können icl_get_languages sagen, was es bei Sprachen ohne Übersetzungen anzeigen soll.

Bei ’skip_missing=1′, werden diese Sprachen in der Ausgabe nicht erscheinen. Bei ’skip_missing=0′, werden alle Sprachen angezeigt und Sprachen mit fehlenden Übersetzungen verlinken zurück auf die Startseite der jeweiligen Sprache.

Verwendung in Ihren Theme-Funktionen

Sie können ganz nach Ihren Wünschen eigene Sprachumschalter erstellen. Hier zeigen wir Ihnen zwei beliebte Anwendungsweisen.

Die Beispiel-PHP-Funktionen, die wir hier zeigen, sollten in Ihre functions.php-Datei (im Theme-Ordner) aufgenommen – und nicht zum Plugin hinzugefügt werden.

Dieser Beitrag ist auch verfügbar auf…

Angenommen, Sie möchten am Ende (oder Anfang) jedes Beitrags eine Zeile einfügen, die anzeigt, in welchen anderen Sprachen er verfügbar ist. Diese Funktion sollte nur bereits übersetzte Beiträge anzeigen und wenn keine Übersetzung verfügbar ist, sollte sie nichts ausgeben.

function icl_post_languages(){
  $languages = icl_get_languages('skip_missing=1');
  if(1 < count($languages)){
    echo __('This post is also available in: ');
    foreach($languages as $l){
      if(!$l['active']) $langs[] = '<a href="'.$l['url'].'">'.$l['translated_name'].'</a>';
    }
    echo join(', ', $langs);
  }
}

Dies tut diese Funktion:

  1. Sie holt die Liste der Sprachen von WPML – $languages = icl_get_languages(’skip_missing=1′);
  2. Sie überprüft, dass es mehr als eine Sprache für diesen Beitrag gibt – if(1 < count($languages))
  3. Sie erstellt die Ausgabe, wobei die derzeit angezeigte Sprache übersprungen wird – if(!$l[‚active‘])

Hinweise:

  1. Diese Nachricht durchläuft gettext. Das ist sehr wichtig, damit diese Nachricht, die Sie an Beiträge in verschiedenen Sprachen anhängen, in der richtigen Sprache erscheint:  __(‚Dieser Post ist auch verfügbar auf: ‚);
  2. Die Namen der verwendeten Sprachen sind die übersetzten Sprachennamen. Dies würde garantieren, dass der gesamte Satz in der richtigen Sprache geschrieben wird: $l[‚translated_name‘]

Das Ergebnis ist dieses:

Nachricht über in anderen Sprachen verfügbare Beiträge
Nachricht über in anderen Sprachen verfügbare Beiträge

Um diese Nachricht in Beiträge zu integrieren, fügen Sie einen Anruf in icl_post_languages() aus single.php hinzu.

Selbst wenn Sie oben auf jeder Seite eine Sprachauswahl haben, ist es eine gute Idee, eine Liste der Sprachennamen und Flaggen zum Footer hinzuzufügen. Viele Leute scrollen sofort bis zum Ende der Seite hinunter, um sich ein besseres Bild davon zu machen, was noch kommt, deshalb wird es Ihren fremdsprachigen Besuchern wahrscheinlich helfen, wenn es dort einen gut sichtbaren Sprachumschalter gibt.

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 unsortierte Liste: if(!empty($languages)){ echo ‚<div id=“footer_language_list“><ul>‘;
  2. Geht jede der Sprachen durch und fügt sie als Listenpunkt hinzu.
  3. Wenn es nicht die aktive Sprache ist, verlinkt sie auch auf die Seite in der Sprache: if(!$l[‚active‘]) echo ‚<a href=“‚.$l[‚url‘].'“>‘;
  4. Fügt die Länderflagge hinzu: <img src=“‚.$l[‚country_flag_url‘].'“ alt=“‚.$l[‚language_code‘].'“ width=“18″ height=“12″ />
  5. Fügt sowohl die Namen der Muttersprache als auch die übersetzten Sprachnamen hinzu, wenn diese unterschiedlich sind: echo icl_disp_language($l[’native_name‘], $l[‚translated_name‘]);

Die Funktion icl_disp_language() wird von WPML erstellt. Sie überprüft, ob die zwei Parameter (native_language_name, translated_language_name) unterschiedlich sind. Wenn ja, gibt sie beide aus, ansonsten gibt sie sie nur einmal aus.

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:

#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-Footer
Sprachen-Footer

Um sie Ihrem Theme hinzuzufügen, fügen Sie den Befehl languages_list_footer zur footer.php-Datei hinzu.

* Hinweis: Sie können diesen horizontalen Sprachumschalter ganz leicht in einen vertikalen Sprachumschalter verwandeln. Entfernen Sie einfach nur die Anweisung display: inline aus der CSS.

Sprachauswahl nur mit Flaggen

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

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 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. Zum Beispiel durch Platzierung der Funktion in einen div-Block und Festlegen benutzerdefinierter Stile für die img-Tags.

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

Die CSS:

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

Ersetzen der Länderflaggen und Ändern der Ländernamen

WPML enthält eine grafische Benutzeroberfläche zum Bearbeiten von Sprachinformationen. Gehen Sie auf WPML->Sprachen und klicken Sie auf Sprachen bearbeiten. Dort können Sie die Sprachnamen ändern, ihre Gebietsschema-Werte bearbeiten und verschiedene 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.