Landsflagg i en nettstedsmeny er et tvilsomt valg. Halvparten av publikummet ser Union Jack som sitt eget flagg, mens den andre halvparten ikke gjør det. Det amerikanske flagget som representant for engelsk? Det utelater kanadiere og australiere fullstendig. Og fulle språknavn («Русский», «Українська», «English») spiser opp halve menyen på en mobilskjerm.

Et kompakt RU | UK | EN-format løser begge problemene: det leses umiddelbart, tar opp nesten ingen plass, og er ikke knyttet til geografi. Dette er standard tobokstavs ISO-språkkoder, som forstås uten oversettelse i ethvert land.

Nedenfor er to måter å erstatte den standard WPML-bytteren med ISO-koder. Den første bruker et menu-items-filter (en enkel innsetting i functions.php). Den andre er en shortcode som viser bytteren hvor som helst på nettstedet.

💡 Rask oversikt:

• Metode 1: erstatte navigasjonsmenyelementer via wp_nav_menu_items-hooken, for en innebygd bytter i toppteksten
• Metode 2: shortcoden [wpml_custom_lang_ISO], som kan settes inn hvor som helst i temaet (widget, bunntekst, mobilmeny)
• CSS: styling av |-skilletegnet, skjule det aktive språket, responsivt design

Hvordan resultatet ser ut

Når koden er lagt til, vises språkbytteren i formatet RU | UK | EN, kort og ryddig. Det aktive språket er uthevet eller skjult (styres via CSS), mens de gjenværende språkene er klikkbare og fører til den tilsvarende sideoversettelsen.

Koden bruker WPMLs innebygde funksjon icl_get_languages(), som returnerer en array med nettstedets aktive språk med all relevant data: oversettelses-URL, språkkode, aktiv status. Det finnes ingen tredjepartsavhengigheter, kun WPMLs egen API.

Metode 1: erstatte menyelementer via wp_nav_menu_items

Denne metoden fanger opp utdataene fra WordPress-navigasjonsmenyen og erstatter standard språkelementer med kompakte ISO-koder og et skilletegn.

Hvor det settes inn: barnetemaets functions.php eller via Code Snippets-pluginet (tryggere, slettes ikke når temaet oppdateres).

Før du legger til koden, ta en full sikkerhetskopi av nettstedet. Koden er ikke-destruktiv og legger kun til utdata, men en sikkerhetskopi er god praksis hver gang du redigerer functions.php.

1
/**
2
 * Erstatter WPML-språkelementene i menyen med ISO-koder.
3
 * theme_location angis for menyen din.
4
 */
5
add_filter( 'wp_nav_menu_items', 'wpml_iso_menu_items', 10, 2 );
6
 
7
function wpml_iso_menu_items( $items, $args ) {
8
    // Sjekker at WPML-funksjonen er tilgjengelig
9
    if ( ! function_exists( 'icl_get_languages' ) ) {
10
        return $items;
11
    }
12
 
13
    $languages = icl_get_languages( 'skip_missing=0&orderby=code' );
14
 
15
    // Angi theme_location for menyen din her (for eksempel '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
    // Fjerner det siste skilletegnet
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
}

Hva som skjer her. wp_nav_menu_items-hooken utløses hver gang en meny på nettstedet bygges. Betingelsen $args->theme_location !== 'primary' begrenser erstatningen til kun den menyen du trenger; erstatt 'primary' med theme_location for menyen din (sjekk wp_nav_menu() i malen din eller i admin-panelet under Utseende > Menyer > Vis plasseringer).

Funksjonen icl_get_languages('skip_missing=0') henter alle publiserte språk. skip_missing=0 betyr «vis språket selv om den nåværende siden ikke har noen oversettelse», slik at brukeren havner på det språkets hjemmeside i stedet for en 404.

strtoupper() konverterer koder til store bokstaver: ru → RU. Hvis du trenger små bokstaver, fjern kallet.

Metode 2: shortcoden [wpml_custom_lang_ISO]

Shortcoden er mer allsidig: sett inn [wpml_custom_lang_ISO] hvor som helst, i en widget, i sideinnholdet, eller i en PHP-mal via do_shortcode(). Den fungerer godt for en mobilmeny, bunntekst, eller en blokk under toppteksten.

Hvor det settes inn: functions.php (samme fil som i metode 1). Du kan holde begge metodene aktive samtidig; de vil ikke komme i konflikt.

1
/**
2
 * Kortkoden [wpml_custom_lang_ISO] viser språkbryteren i ISO-format.
3
 * Innsetting: [wpml_custom_lang_ISO] i teksten eller <?php echo do_shortcode('[wpml_custom_lang_ISO]'); ?> i malen.
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
    // Fjerner det siste skilletegnet
32
    $output = rtrim( $output, '<span class="wpml-lang-sep">|</span>' );
33
 
34
    return '<div class="wpml-iso-lang-switcher">' . $output . '</div>';
35
}

Forskjellen fra metode 1: shortcoden returnerer en HTML-streng i stedet for å legge til elementer i en meny. Dette betyr at du kan plassere den hvor som helst, uten avhengighet av theme_location. Parameteren order=desc snur rekkefølgen på språkene (valgfritt; fjern den hvis du ikke trenger den).

Slik finner du menyens theme_location

Hvis du bruker metode 1, må du angi theme_location-argumentet nøyaktig. Åpne malfilen der menyen kalles (vanligvis header.php) og se etter en linje som:

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

Verdien i enkle anførselstegn, for eksempel 'primary', er din theme_location. Vanlige navn er primary for hovedmenyen og top for toppbaren. Sett inn din egen i betingelsen $args->theme_location !== 'primary' i koden ovenfor.

En annen måte: i admin-panelet, gå til Utseende > Menyer > fanen «Administrer plasseringer», som lister opp alle registrerte theme_location-verdier for temaet ditt.

CSS-stiler for bytteren

Et minimalt sett med stiler for å holde bytteren ryddig. Legg dem til under Utseende > Tilpass > Ekstra CSS eller i barnetemaets style.css-fil.

1
/* Beholder for bryteren */
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
/* Lenker og 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
/* Skilletegn */
31
.wpml-lang-sep {
32
    margin: 0 6px;
33
    color: #ccc;
34
    font-weight: 400;
35
}
36
 
37
/* Skjul aktivt språk og skilletegnet som følger etter det */
38
.wpml-lang-item.active,
39
.wpml-lang-item.active + .wpml-lang-sep {
40
    display: none;
41
}
42
 
43
/* Mobiltilpasning */
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
}

Nøkkeltricket her: selektoren .wpml-lang-item.active + .wpml-lang-sep skjuler skilletegnet umiddelbart etter det aktive språket. Hvis det aktive språket er skjult, forsvinner også skilletegnet ved siden av det, slik at det ikke blir noen hengende | i begynnelsen eller slutten av raden.

Oswald-fonten brukes som eksempel. Erstatt den med temaets font, eller fjern font-family-linjen helt for å arve fra temaet. Etter at du har lagt til CSS-en, test bytteren på mobiloppløsninger med utviklerverktøy (F12 > Toggle device toolbar).

⁉️🤔 Ofte stilte spørsmål

Kan jeg vise språknavn i stedet for ISO-koder?

> Ja, erstatt $lang['language_code'] med $lang['native_name'] i begge kodevariantene. Du vil få «Русский | English | Українська». Alternativt gir $lang['translated_name'] navn på det gjeldende sidespråket: hvis besøkende er på den engelske versjonen, vil de se «Russian | English | Ukrainian». Alle tilgjengelige array-nøkler er listet i den offisielle WPML-dokumentasjonen for funksjonen icl_get_languages().

Hvordan fjerner jeg et språk som ikke har noen oversettelse for den gjeldende siden?

Endre parameteren skip_missing=0 til skip_missing=1 i kallet til icl_get_languages(). Språk uten oversettelse vil rett og slett forsvinne fra bytteren, og det vil ikke være noen ødelagt lenke i stedet. Dette er praktisk for nettsteder der ikke alle sider er oversatt: menyen forblir ryddig, uten lenker som fører til hjemmesiden eller en 404.

Bytteren vises ikke. Hva er galt?

Sjekk tre ting. Først, er WPML-pluginet aktivt, og er språkene lagt til under WPML > Languages? For det andre, samsvarer theme_location i koden med den faktiske menyen (metode 1)? For det tredje, kalles shortcoden via do_shortcode() hvis du bruker den i en PHP-mal i stedet for i sideinnholdet (metode 2)? Hvis alt er riktig, men bytteren fortsatt ikke vises, aktiver WP_DEBUG i wp-config.php og sjekk error.log; det kan være en syntaksfeil i functions.php.

Hvordan legger jeg til flagg sammen med kodene, for eksempel 🇬🇧 + EN?

Legg til et flaggemoji foran $code med en betingelse: if ($lang['language_code'] === 'en') $code = '🇬🇧 ' . $code;. Husk likevel at flaggemojier kanskje ikke vises på Windows. En mer pålitelig tilnærming er å bruke CSS-flagg via ::before med background-image, eller WPMLs innebygde flagg.

Vil denne koden fungere med Polylang eller TranslatePress?

Nei: icl_get_languages() er spesifikt et WPML-API. For Polylang er den tilsvarende funksjonen pll_the_languages(), og TranslatePress har sitt eget sett med hooker. Logikken er den samme, men funksjonsnavnene er forskjellige.

Oppsummering: meny eller shortcode

Menyfiltermetoden passer for de som trenger bytteren strengt i navigasjonen og vet sin theme_location med sikkerhet. Minimal innsats: sett inn koden, erstatt plasseringsnavnet, ferdig. Ulempen: den er knyttet til én enkelt meny; for en til må du duplisere hooken med en annen theme_location.

Shortcoden er veien å gå hvis bytteren må plasseres på et ikke-standard sted: et mobilpanel, en bunntekst, eller et sidefelt. Legg shortcoden til en «HTML»-widget eller en mal, og kontroller plasseringen med standard WordPress-verktøy. Fordelen: du kan sette den inn flere steder uten å duplisere kode.

I praksis sameksisterer begge metodene fredelig i én og samme functions.php. Sett opp filteret for hovedmenyen og shortcoden for mobilversjonen, og du får en ryddig RU | UK | EN på alle enheter. Og hvis du trenger bytteren en tredje gang (for eksempel i bunnteksten), legg bare til enda en do_shortcode('[wpml_custom_lang_ISO]') i den aktuelle malen.

Hvilket bytterformat bruker du: flagg, navn, eller ISO-koder? Del din erfaring med å sette opp flerspråklige nettsteder i kommentarene; det ville vært interessant å sammenligne tilnærminger.