Landsflaggor i en webbplatsmeny är ett tveksamt val. Hälften av publiken ser Union Jack som sin egen flagga, medan den andra hälften inte gör det. Den amerikanska flaggan som symbol för engelska? Det missar kanadensare och australier helt. Och fullständiga språknamn ("Русский," "Українська," "English") tar upp halva menyn på en mobilskärm.

Ett kompakt RU | UK | EN-format löser båda problemen: det läses direkt, tar upp nästan inget utrymme och är inte knutet till geografi. Det handlar om standardiserade tvåbokstavs-ISO-språkkoder, som förstås utan översättning i alla länder.

Nedan följer två sätt att ersätta standard-WPML-växlaren med ISO-koder. Det första använder ett menu-items-filter (en enkel infogning i functions.php). Det andra är en shortcode som visar växlaren var som helst på webbplatsen.

💡 Snabb översikt:

• Metod 1: att ersätta navigeringsmenyns objekt via kroken wp_nav_menu_items, för en inbyggd växlare i sidhuvudet
• Metod 2: shortcoden [wpml_custom_lang_ISO], som kan infogas var som helst i temat (widget, sidfot, mobilmeny)
• CSS: styling av avgränsaren |, döljning av det aktiva språket, responsiv design

Så här ser resultatet ut

När koden har lagts till visas språkväxlaren i formatet RU | UK | EN, kort och rent. Det aktiva språket markeras eller döljs (styrs via CSS), medan de återstående språken är klickbara och leder till motsvarande sidöversättning.

Koden använder WPML:s inbyggda funktion icl_get_languages(), som returnerar en array med webbplatsens aktiva språk och all relevant data: översättnings-URL, språkkod, aktiv status. Det finns inga beroenden till tredje part, endast WPML:s egna API.

Metod 1: ersätta menyobjekt via wp_nav_menu_items

Den här metoden fångar upp utdata från WordPress navigeringsmeny och ersätter standardspråkobjekten med kompakta ISO-koder och en avgränsare.

Var koden ska infogas: barntemats functions.php eller via pluginet Code Snippets (säkrare, raderas inte vid temauppdateringar).

Innan du lägger till koden bör du göra en fullständig säkerhetskopia av webbplatsen. Koden är inte destruktiv och lägger bara till utdata, men en säkerhetskopia är god praxis varje gång du redigerar functions.php.

1
/**
2
 * Ersätter WPML-språkposterna i menyn med ISO-koder.
3
 * theme_location anges för din meny.
4
 */
5
add_filter( 'wp_nav_menu_items', 'wpml_iso_menu_items', 10, 2 );
6
 
7
function wpml_iso_menu_items( $items, $args ) {
8
    // Kontrollerar att WPML-funktionen är tillgänglig
9
    if ( ! function_exists( 'icl_get_languages' ) ) {
10
        return $items;
11
    }
12
 
13
    $languages = icl_get_languages( 'skip_missing=0&orderby=code' );
14
 
15
    // Ange här theme_location för din meny (till exempel '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
    // Tar bort den sista avgränsaren
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
}

Vad som händer här. Kroken wp_nav_menu_items utlöses när varje meny på webbplatsen byggs. Villkoret $args->theme_location !== 'primary' begränsar ersättningen till endast den meny du behöver; ersätt 'primary' med din menys theme_location (kontrollera wp_nav_menu() i din mall eller i adminpanelen under Utseende > Menyer > Visningsplatser).

Funktionen icl_get_languages('skip_missing=0') hämtar alla publicerade språk. skip_missing=0 betyder "visa språket även om den aktuella sidan saknar översättning", så användaren hamnar på det språkets startsida istället för en 404.

strtoupper() konverterar koderna till versaler: ru → RU. Om du behöver gemener, ta bort anropet.

Metod 2: shortcoden [wpml_custom_lang_ISO]

Shortcoden är mer mångsidig: infoga [wpml_custom_lang_ISO] var som helst, en widget, en sidas innehåll, eller en PHP-mall via do_shortcode(). Den fungerar bra för en mobilmeny, sidfot eller ett block under sidhuvudet.

Var den ska infogas: functions.php (samma fil som i metod 1). Du kan hålla båda metoderna aktiva samtidigt; de kommer inte att krocka.

1
/**
2
 * Kortkoden [wpml_custom_lang_ISO] visar språkväxlaren i ISO-format.
3
 * Infogning: [wpml_custom_lang_ISO] i texten eller <?php echo do_shortcode('[wpml_custom_lang_ISO]'); ?> i mallen.
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
    // Tar bort den sista avgränsaren
32
    $output = rtrim( $output, '<span class="wpml-lang-sep">|</span>' );
33
 
34
    return '<div class="wpml-iso-lang-switcher">' . $output . '</div>';
35
}

Skillnaden från metod 1: shortcoden returnerar en HTML-sträng istället för att lägga till objekt i en meny. Det innebär att du kan placera den var som helst, utan beroende av theme_location. Parametern order=desc vänder på språkordningen (valfritt; ta bort den om du inte behöver den).

Så hittar du din menys theme_location

Om du använder metod 1 måste du ange argumentet theme_location exakt. Öppna mallfilen där menyn anropas (vanligtvis header.php) och leta efter en rad liknande:

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

Värdet inom enkla citattecken, till exempel 'primary', är din theme_location. Vanliga namn är primary för huvudmenyn och top för det övre fältet. Sätt in ditt eget i villkoret $args->theme_location !== 'primary' i koden ovan.

Ett annat sätt: gå till adminpanelen, Utseende > Menyer > fliken "Hantera platser", som listar alla registrerade theme_location-värden för ditt tema.

CSS-stilar för växlaren

En minimal uppsättning stilar för att hålla växlaren snygg. Lägg till dem under Utseende > Anpassa > Ytterligare CSS eller i barntemats style.css-fil.

1
/* Behållare för växlaren */
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
/* Länkar och aktivt språk */
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
/* Avgränsare */
31
.wpml-lang-sep {
32
    margin: 0 6px;
33
    color: #ccc;
34
    font-weight: 400;
35
}
36
 
37
/* Dölj det aktiva språket och avgränsaren som följer efter det */
38
.wpml-lang-item.active,
39
.wpml-lang-item.active + .wpml-lang-sep {
40
    display: none;
41
}
42
 
43
/* Mobilanpassning */
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
}

Nyckeltricket här: selektorn .wpml-lang-item.active + .wpml-lang-sep döljer avgränsaren omedelbart efter det aktiva språket. Om det aktiva språket döljs försvinner även avgränsaren bredvid det, så det blir inget löst | i början eller slutet av raden.

Typsnittet Oswald används som exempel. Ersätt det med ditt temas typsnitt eller ta bort raden font-family helt för att ärva från temat. Efter att du har lagt till CSS:en, testa växlaren i mobila upplösningar med utvecklarverktyg (F12 > Toggle device toolbar).

⁉️🤔 Vanliga frågor

Kan jag visa språknamn istället för ISO-koder?

> Ja, ersätt $lang['language_code'] med $lang['native_name'] i båda kodvarianterna. Du får då "Русский | English | Українська." Alternativt ger $lang['translated_name'] namn på den aktuella sidans språk: om besökaren är på den engelska versionen ser de "Ryska | Engelska | Ukrainska." Alla tillgängliga array-nycklar listas i WPML:s officiella dokumentation för funktionen icl_get_languages().

Hur tar jag bort ett språk som saknar översättning för den aktuella sidan?

Ändra parametern skip_missing=0 till skip_missing=1 i anropet till icl_get_languages(). Språk utan översättning försvinner helt enkelt från växlaren, och det blir ingen trasig länk i deras ställe. Detta är praktiskt för webbplatser där inte alla sidor är översatta: menyn förblir ren, utan länkar som leder till startsidan eller en 404.

Växlaren visas inte. Vad är fel?

Kontrollera tre saker. För det första: är WPML-pluginet aktivt och har språk lagts till under WPML > Languages? För det andra: matchar theme_location i koden den faktiska menyn (metod 1)? För det tredje: anropas shortcoden via do_shortcode() om du använder den i en PHP-mall snarare än i sidans innehåll (metod 2)? Om allt är korrekt men växlaren ändå inte visas, aktivera WP_DEBUG i wp-config.php och kontrollera error.log; det kan finnas ett syntaxfel i functions.php.

Hur lägger jag till flaggor bredvid koderna, till exempel 🇬🇧 + EN?

Lägg till en flaggemoji framför $code med ett villkor: if ($lang['language_code'] === 'en') $code = '🇬🇧 ' . $code;. Tänk dock på att flaggemojier kanske inte renderas på Windows. Ett säkrare tillvägagångssätt är att använda CSS-flaggor via ::before med background-image, eller WPML:s inbyggda flaggor.

Fungerar den här koden med Polylang eller TranslatePress?

Nej: icl_get_languages() är specifikt ett WPML-API. För Polylang är motsvarande funktion pll_the_languages(), och TranslatePress har sin egen uppsättning krokar. Logiken är densamma, men funktionsnamnen skiljer sig åt.

Slutsatser: meny eller shortcode

Menyfiltermetoden är för dig som behöver växlaren strikt i navigeringen och vet din theme_location med säkerhet. Minimal insats: infoga koden, ersätt platsnamnet, klart. Nackdelen: den är knuten till en enda meny; för en andra meny skulle du behöva duplicera kroken med en annan theme_location.

Shortcoden är rätt väg att gå om växlaren behöver placeras på en icke-standardplats: en mobilpanel, sidfot eller sidopanel. Lägg till shortcoden i en "HTML"-widget eller en mall och styr dess placering med standardverktyg i WordPress. Fördelen: du kan infoga den på flera ställen utan att duplicera kod.

I praktiken samexisterar båda metoderna fredligt i en och samma functions.php. Konfigurera filtret för huvudmenyn och shortcoden för mobilversionen, så får du ett rent RU | UK | EN på varje enhet. Och om du behöver växlaren en tredje gång (till exempel i sidfoten) lägger du bara till ytterligare ett do_shortcode('[wpml_custom_lang_ISO]') i lämplig mall.

Vilket växlarformat använder du: flaggor, namn eller ISO-koder? Dela din erfarenhet av att konfigurera flerspråkiga webbplatser i kommentarerna; det vore intressant att jämföra tillvägagångssätt.