Landesflaggen im Seitenmenü sind eine fragwürdige Wahl. Die Hälfte des Publikums sieht den Union Jack als ihre eigene Flagge, die andere Hälfte nicht. Die US-Flagge als Symbol für Englisch? Das übergeht Kanadier und Australier komplett. Und vollständige Sprachnamen („Русский", „Українська", „English") fressen auf einem mobilen Bildschirm die halbe Menüzeile auf.

Ein kompaktes RU | UK | EN-Format löst beide Probleme: Es ist sofort lesbar, nimmt fast keinen Platz ein und ist nicht an eine Geografie gebunden. Dabei handelt es sich um standardisierte zweistellige ISO-Sprachcodes, die in jedem Land ohne Übersetzung verstanden werden.

Im Folgenden zwei Wege, den Standard-WPML-Switcher durch ISO-Codes zu ersetzen. Die erste Methode nutzt einen Menüpunkte-Filter (ein einfacher Einschub in die functions.php). Die zweite ist ein Shortcode, der den Switcher an beliebiger Stelle auf der Website ausgibt.

💡 Kurzüberblick:

• Methode 1: Ersetzen der Navigationsmenüpunkte über den Hook wp_nav_menu_items, für einen integrierten Switcher im Header
• Methode 2: der Shortcode [wpml_custom_lang_ISO], einsetzbar an beliebiger Stelle im Theme (Widget, Footer, mobiles Menü)
• CSS: Styling des Trennzeichens |, Ausblenden der aktiven Sprache, responsives Design

Wie das Ergebnis aussieht

Sobald der Code eingefügt ist, wird der Sprach-Switcher im Format RU | UK | EN angezeigt, kurz und übersichtlich. Die aktive Sprache wird hervorgehoben oder ausgeblendet (per CSS gesteuert), während die übrigen Sprachen anklickbar sind und zur entsprechenden Seitenübersetzung führen.

Der Code verwendet die integrierte WPML-Funktion icl_get_languages(), die ein Array der aktiven Sprachen der Website mit allen relevanten Daten zurückgibt: Übersetzungs-URL, Sprachcode, Aktiv-Status. Es gibt keine Abhängigkeiten von Drittanbietern, nur die eigene API von WPML.

Methode 1: Menüpunkte über wp_nav_menu_items ersetzen

Diese Methode fängt die Ausgabe des WordPress-Navigationsmenüs ab und ersetzt die Standard-Sprachelemente durch kompakte ISO-Codes und ein Trennzeichen.

Wo einfügen: in die functions.php des Child-Themes oder über das Plugin Code Snippets (sicherer, wird bei Theme-Updates nicht gelöscht).

Erstellen Sie vor dem Hinzufügen des Codes ein vollständiges Backup der Website. Der Code ist nicht destruktiv und fügt lediglich Ausgabe hinzu, aber ein Backup ist immer eine gute Praxis, wenn Sie die functions.php bearbeiten.

1
/**
2
 * Ersetzt die WPML-Sprachmenüpunkte im Menü durch ISO-Codes.
3
 * theme_location wird für Ihr Menü festgelegt.
4
 */
5
add_filter( 'wp_nav_menu_items', 'wpml_iso_menu_items', 10, 2 );
6
 
7
function wpml_iso_menu_items( $items, $args ) {
8
    // Prüfen, ob die WPML-Funktion verfügbar ist
9
    if ( ! function_exists( 'icl_get_languages' ) ) {
10
        return $items;
11
    }
12
 
13
    $languages = icl_get_languages( 'skip_missing=0&orderby=code' );
14
 
15
    // Geben Sie hier die theme_location Ihres Menüs an (zum Beispiel 'primary', 'top')
16
    if ( empty( $languages ) || $args->theme_location !== 'primary' ) {
17
        return $items;
18
    }
19
 
20
    $lang_links = '';
21
 
22
    foreach ( $languages as $lang ) {
23
        $code = strtoupper( $lang['language_code'] );
24
 
25
        if ( $lang['active'] ) {
26
            $lang_links .= '<span class="wpml-lang-item active">' . $code . '</span>';
27
        } else {
28
            $lang_links .= '<a href="' . esc_url( $lang['url'] ) . '" class="wpml-lang-item">' . $code . '</a>';
29
        }
30
 
31
        $lang_links .= '<span class="wpml-lang-sep">|</span>';
32
    }
33
 
34
    // Entfernen des letzten Trennzeichens
35
    $lang_links = rtrim( $lang_links, '<span class="wpml-lang-sep">|</span>' );
36
 
37
    return $items . '<li class="menu-item wpml-iso-switcher">' . $lang_links . '</li>';
38
}

Was hier passiert. Der Hook wp_nav_menu_items wird ausgelöst, wenn jedes Menü der Website aufgebaut wird. Die Bedingung $args->theme_location !== 'primary' beschränkt den Austausch auf genau das benötigte Menü; ersetzen Sie 'primary' durch den theme_location Ihres Menüs (prüfen Sie wp_nav_menu() in Ihrem Template oder im Admin-Panel unter Design > Menüs > Anzeigepositionen).

Die Funktion icl_get_languages('skip_missing=0') ruft alle veröffentlichten Sprachen ab. skip_missing=0 bedeutet „Sprache auch anzeigen, wenn die aktuelle Seite keine Übersetzung hat", sodass der Nutzer auf der Startseite dieser Sprache landet statt auf einer 404-Seite.

strtoupper() wandelt die Codes in Großbuchstaben um: ru → RU. Wenn Sie Kleinbuchstaben benötigen, entfernen Sie den Aufruf.

Methode 2: der Shortcode [wpml_custom_lang_ISO]

Der Shortcode ist vielseitiger: Fügen Sie [wpml_custom_lang_ISO] überall ein, in ein Widget, einen Seiteninhalt oder ein PHP-Template über do_shortcode(). Er eignet sich gut für ein mobiles Menü, den Footer oder einen Block unterhalb des Headers.

Wo einfügen: in die functions.php (dieselbe Datei wie bei Methode 1). Sie können beide Methoden gleichzeitig aktiv lassen; sie stehen nicht im Konflikt.

1
/**
2
 * Shortcode [wpml_custom_lang_ISO] — zeigt den Sprachumschalter im ISO-Format an.
3
 * Einfügen: [wpml_custom_lang_ISO] im Text oder <?php echo do_shortcode('[wpml_custom_lang_ISO]'); ?> im Template.
4
 */
5
add_shortcode( 'wpml_custom_lang_ISO', 'wpml_shortcode_lang_iso' );
6
 
7
function wpml_shortcode_lang_iso() {
8
    if ( ! function_exists( 'icl_get_languages' ) ) {
9
        return '';
10
    }
11
 
12
    $languages = icl_get_languages( 'skip_missing=0&orderby=code&order=desc' );
13
    $output    = '';
14
 
15
    if ( empty( $languages ) ) {
16
        return '';
17
    }
18
 
19
    foreach ( $languages as $lang ) {
20
        $code = strtoupper( $lang['language_code'] );
21
 
22
        if ( $lang['active'] ) {
23
            $output .= '<span class="wpml-lang-item active">' . $code . '</span>';
24
        } else {
25
            $output .= '<a href="' . esc_url( $lang['url'] ) . '" class="wpml-lang-item">' . $code . '</a>';
26
        }
27
 
28
        $output .= '<span class="wpml-lang-sep">|</span>';
29
    }
30
 
31
    // Entfernen des letzten Trennzeichens
32
    $output = rtrim( $output, '<span class="wpml-lang-sep">|</span>' );
33
 
34
    return '<div class="wpml-iso-lang-switcher">' . $output . '</div>';
35
}

Der Unterschied zu Methode 1: Der Shortcode gibt einen HTML-String zurück, anstatt Elemente an ein Menü anzuhängen. Das bedeutet, Sie können ihn überall platzieren, ohne Abhängigkeit von theme_location. Der Parameter order=desc kehrt die Sprachreihenfolge um (optional; entfernen Sie ihn, wenn Sie ihn nicht benötigen).

So finden Sie den theme_location Ihres Menüs

Wenn Sie Methode 1 verwenden, müssen Sie das Argument theme_location genau angeben. Öffnen Sie die Template-Datei, in der das Menü aufgerufen wird (meist header.php), und suchen Sie nach einer Zeile wie:

1
wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) );

Der Wert in einfachen Anführungszeichen, zum Beispiel 'primary', ist Ihr theme_location. Übliche Bezeichnungen sind primary für das Hauptmenü und top für die obere Leiste. Setzen Sie Ihren Wert in die Bedingung $args->theme_location !== 'primary' im obigen Code ein.

Alternative: Gehen Sie im Admin-Panel zu Design > Menüs > zum Tab „Positionen verwalten", der alle registrierten theme_location-Werte Ihres Themes auflistet.

CSS-Stile für den Switcher

Ein minimaler Satz an Stilen, damit der Switcher übersichtlich aussieht. Fügen Sie sie unter Design > Customizer > Zusätzliches CSS oder in der style.css-Datei des Child-Themes ein.

1
/* Container des Umschalters */
2
.wpml-iso-lang-switcher,
3
.wpml-iso-switcher {
4
    display: flex;
5
    align-items: center;
6
    gap: 0;
7
    font-family: 'Oswald', sans-serif;
8
    font-size: 16px;
9
    font-weight: 600;
10
    text-transform: uppercase;
11
}
12
 
13
/* Links und aktive Sprache */
14
.wpml-lang-item {
15
    color: #33445d;
16
    text-decoration: none;
17
    padding: 4px 2px;
18
    transition: color 0.2s;
19
}
20
 
21
a.wpml-lang-item:hover {
22
    color: #0073aa;
23
}
24
 
25
.wpml-lang-item.active {
26
    color: #999;
27
    cursor: default;
28
}
29
 
30
/* Trennzeichen */
31
.wpml-lang-sep {
32
    margin: 0 6px;
33
    color: #ccc;
34
    font-weight: 400;
35
}
36
 
37
/* Aktive Sprache und das darauffolgende Trennzeichen ausblenden */
38
.wpml-lang-item.active,
39
.wpml-lang-item.active + .wpml-lang-sep {
40
    display: none;
41
}
42
 
43
/* Mobile Anpassung */
44
@media screen and (max-width: 768px) {
45
    .wpml-iso-lang-switcher,
46
    .wpml-iso-switcher {
47
        font-size: 18px;
48
        padding: 8px 0;
49
    }
50
}

Der entscheidende Trick hier: Der Selektor .wpml-lang-item.active + .wpml-lang-sep blendet das Trennzeichen unmittelbar nach der aktiven Sprache aus. Wenn die aktive Sprache ausgeblendet ist, verschwindet auch das dazugehörige Trennzeichen, sodass kein überzähliges | am Anfang oder Ende der Zeile übrig bleibt.

Die Schriftart Oswald dient als Beispiel. Ersetzen Sie sie durch die Schriftart Ihres Themes oder entfernen Sie die Zeile font-family komplett, um die Schrift vom Theme zu übernehmen. Testen Sie den Switcher nach dem Hinzufügen des CSS in mobilen Auflösungen mit den Entwicklertools (F12 > Geräte-Symbolleiste umschalten).

⁉️🤔 Häufig gestellte Fragen

Kann ich Sprachnamen statt ISO-Codes anzeigen?

> Ja, ersetzen Sie $lang['language_code'] durch $lang['native_name'] in beiden Code-Varianten. Sie erhalten dann „Русский | English | Українська". Alternativ gibt $lang['translated_name'] die Namen in der Sprache der aktuellen Seite aus: Befindet sich der Besucher auf der englischen Version, sieht er „Russian | English | Ukrainian". Alle verfügbaren Array-Schlüssel sind in der offiziellen WPML-Dokumentation zur Funktion icl_get_languages() aufgeführt.

Wie entferne ich eine Sprache, die für die aktuelle Seite keine Übersetzung hat?

Ändern Sie den Parameter skip_missing=0 im Aufruf von icl_get_languages() in skip_missing=1. Sprachen ohne Übersetzung verschwinden dann einfach aus dem Switcher, und es bleibt kein defekter Link zurück. Das ist praktisch für Websites, auf denen nicht alle Seiten übersetzt sind: Das Menü bleibt übersichtlich, ohne Links, die zur Startseite oder zu einer 404-Seite führen.

Der Switcher wird nicht angezeigt. Was ist falsch?

Prüfen Sie drei Dinge. Erstens: Ist das WPML-Plugin aktiv und sind unter WPML > Sprachen Sprachen hinzugefügt? Zweitens: Stimmt der theme_location im Code mit dem tatsächlichen Menü überein (Methode 1)? Drittens: Wird der Shortcode über do_shortcode() aufgerufen, falls Sie ihn in einem PHP-Template statt im Seiteninhalt verwenden (Methode 2)? Wenn alles korrekt ist, der Switcher aber trotzdem nicht erscheint, aktivieren Sie WP_DEBUG in der wp-config.php und prüfen Sie die error.log; möglicherweise liegt ein Syntaxfehler in der functions.php vor.

Wie füge ich zusätzlich zu den Codes Flaggen hinzu, zum Beispiel 🇬🇧 + EN?

Fügen Sie mit einer Bedingung ein Flaggen-Emoji vor $code ein: if ($lang['language_code'] === 'en') $code = '🇬🇧 ' . $code;. Bedenken Sie jedoch, dass Flaggen-Emojis unter Windows möglicherweise nicht dargestellt werden. Zuverlässiger ist die Verwendung von CSS-Flaggen über ::before mit background-image oder den integrierten Flaggen von WPML.

Funktioniert dieser Code auch mit Polylang oder TranslatePress?

Nein: icl_get_languages() ist speziell eine WPML-API. Für Polylang lautet die entsprechende Funktion pll_the_languages(), und TranslatePress hat seine eigenen Hooks. Die Logik ist dieselbe, aber die Funktionsnamen unterscheiden sich.

Fazit: Menü oder Shortcode

Die Menüfilter-Methode ist für alle, die den Switcher ausschließlich in der Navigation benötigen und ihren theme_location sicher kennen. Minimaler Aufwand: Code einfügen, Positionsnamen ersetzen, fertig. Der Nachteil: Sie ist an ein einzelnes Menü gebunden; für ein zweites müssten Sie den Hook mit einem anderen theme_location duplizieren.

Der Shortcode ist die richtige Wahl, wenn der Switcher an einer untypischen Stelle stehen soll: einem mobilen Panel, dem Footer oder der Seitenleiste. Fügen Sie den Shortcode in ein „HTML"-Widget oder ein Template ein und steuern Sie seine Position mit den Standard-WordPress-Tools. Der Vorteil: Sie können ihn an mehreren Stellen einsetzen, ohne Code zu duplizieren.

In der Praxis koexistieren beide Methoden problemlos in einer einzigen functions.php. Richten Sie den Filter für das Hauptmenü und den Shortcode für die mobile Version ein, und Sie erhalten auf jedem Gerät ein sauberes RU | UK | EN. Und falls Sie den Switcher ein drittes Mal benötigen (zum Beispiel im Footer), fügen Sie einfach ein weiteres do_shortcode('[wpml_custom_lang_ISO]') in das entsprechende Template ein.

Welches Switcher-Format verwenden Sie: Flaggen, Namen oder ISO-Codes? Teilen Sie Ihre Erfahrungen beim Einrichten mehrsprachiger Websites in den Kommentaren; es wäre interessant, die Ansätze zu vergleichen.