Maiden liput sivuston valikossa ovat kyseenalainen valinta. Puolet yleisöstä pitää Ison-Britannian lippua omanaan, toinen puoli ei. Yhdysvaltain lippu edustamassa englantia? Se jättää kanadalaiset ja australialaiset kokonaan huomiotta. Ja täydelliset kielten nimet ("Русский," "Українська," "English") vievät puolet valikosta mobiilinäytöllä.

Kompakti RU | UK | EN -muoto ratkaisee molemmat ongelmat: se on välittömästi luettavissa, ei vie juuri ollenkaan tilaa, eikä ole sidottu maantieteeseen. Nämä ovat vakiomuotoisia kaksikirjaimisia ISO-kielikoodeja, jotka ymmärretään ilman käännöstä missä tahansa maassa.

Alla on kaksi tapaa korvata oletusarvoinen WPML-vaihdin ISO-koodeilla. Ensimmäinen käyttää valikon kohteiden suodatinta (yksinkertainen lisäys tiedostoon functions.php). Toinen on lyhytkoodi, joka näyttää vaihtimen missä tahansa sivustolla.

💡 Nopea yleiskatsaus:

• Tapa 1: navigointivalikon kohteiden korvaaminen wp_nav_menu_items-koukun avulla, sisäänrakennettua vaihdinta varten otsikossa
• Tapa 2: [wpml_custom_lang_ISO]-lyhytkoodi, joka voidaan lisätä mihin tahansa teemassa (widget, alatunniste, mobiilivalikko)
• CSS: |-erottimen tyylittely, aktiivisen kielen piilottaminen, responsiivinen suunnittelu

Miltä lopputulos näyttää

Kun koodi on lisätty, kielenvaihdin näkyy RU | UK | EN -muodossa, lyhyenä ja siistinä. Aktiivinen kieli korostetaan tai piilotetaan (hallitaan CSS:n avulla), kun taas muut kielet ovat klikattavia ja johtavat sivun vastaavaan käännökseen.

Koodi käyttää WPML:n sisäänrakennettua icl_get_languages()-funktiota, joka palauttaa taulukon sivuston aktiivisista kielistä kaikkine olennaisine tietoineen: käännöksen URL-osoite, kielikoodi, aktiivisuustila. Kolmannen osapuolen riippuvuuksia ei ole, ainoastaan WPML:n oma API.

Tapa 1: valikon kohteiden korvaaminen wp_nav_menu_items-koukulla

Tämä tapa sieppaa WordPressin navigointivalikon tulosteen ja korvaa oletusarvoiset kielikohteet kompakteilla ISO-koodeilla ja erottimella.

Mihin se lisätään: lapsiteeman functions.php-tiedostoon tai Code Snippets -laajennuksen kautta (turvallisempi vaihtoehto, ei häviä teeman päivityksen yhteydessä).

Ennen koodin lisäämistä tee täydellinen varmuuskopio sivustosta. Koodi ei ole tuhoisa ja lisää vain tulostetta, mutta varmuuskopiointi on hyvä käytäntö aina, kun muokkaat functions.php-tiedostoa.

1
/**
2
 * Korvaa WPML-kielivalikon kohdat ISO-koodeilla.
3
 * theme_location asetetaan valikkoasi vastaavaksi.
4
 */
5
add_filter( 'wp_nav_menu_items', 'wpml_iso_menu_items', 10, 2 );
6
 
7
function wpml_iso_menu_items( $items, $args ) {
8
    // Tarkistetaan, että WPML-funktio on käytettävissä
9
    if ( ! function_exists( 'icl_get_languages' ) ) {
10
        return $items;
11
    }
12
 
13
    $languages = icl_get_languages( 'skip_missing=0&orderby=code' );
14
 
15
    // Määritä tähän valikkosi theme_location (esimerkiksi '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
    // Poistetaan viimeinen erotin
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
}

Mitä tässä tapahtuu. wp_nav_menu_items-koukku laukeaa, kun kutakin sivuston valikkoa rakennetaan. Ehto $args->theme_location !== 'primary' rajoittaa korvauksen koskemaan vain tarvitsemaasi valikkoa; korvaa 'primary' oman valikkosi theme_location-arvolla (tarkista wp_nav_menu() mallipohjastasi tai hallintapaneelista kohdasta Ulkoasu > Valikot > Näyttöpaikat).

Funktio icl_get_languages('skip_missing=0') hakee kaikki julkaistut kielet. skip_missing=0 tarkoittaa "näytä kieli, vaikka nykyisellä sivulla ei olisi käännöstä", jolloin käyttäjä päätyy kyseisen kielen etusivulle 404-virheen sijaan.

strtoupper() muuntaa koodit isoiksi kirjaimiksi: ru → RU. Jos tarvitset pieniä kirjaimia, poista funktiokutsu.

Tapa 2: [wpml_custom_lang_ISO]-lyhytkoodi

Lyhytkoodi on monikäyttöisempi: lisää [wpml_custom_lang_ISO] mihin tahansa, widgetiin, sivun runkoon tai PHP-mallipohjaan do_shortcode()-funktion kautta. Se toimii hyvin mobiilivalikossa, alatunnisteessa tai otsikon alapuolisessa lohkossa.

Mihin se lisätään: functions.php (sama tiedosto kuin Tavassa 1). Voit pitää molemmat tavat aktiivisina samanaikaisesti; ne eivät ole ristiriidassa keskenään.

1
/**
2
 * Lyhytkoodi [wpml_custom_lang_ISO] — tulostaa kielenvaihtimen ISO-muodossa.
3
 * Lisäys: [wpml_custom_lang_ISO] tekstissä tai <?php echo do_shortcode('[wpml_custom_lang_ISO]'); ?> sivupohjassa.
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
    // Poistetaan viimeinen erotin
32
    $output = rtrim( $output, '<span class="wpml-lang-sep">|</span>' );
33
 
34
    return '<div class="wpml-iso-lang-switcher">' . $output . '</div>';
35
}

Ero Tapaan 1: lyhytkoodi palauttaa HTML-merkkijonon sen sijaan, että se lisäisi kohteita valikkoon. Tämä tarkoittaa, että voit sijoittaa sen minne tahansa ilman riippuvuutta theme_location-arvosta. order=desc-parametri kääntää kielten järjestyksen (valinnainen; poista se, jos et tarvitse sitä).

Kuinka löytää valikkosi theme_location

Jos käytät Tapaa 1, sinun on määritettävä theme_location-argumentti tarkasti. Avaa mallipohjatiedosto, jossa valikkoa kutsutaan (yleensä header.php), ja etsi tällainen rivi:

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

Yksinkertaisissa lainausmerkeissä oleva arvo, esimerkiksi 'primary', on theme_location-arvosi. Yleisiä nimiä ovat primary päävalikolle ja top yläpalkille. Korvaa omallasi yllä olevan koodin ehdossa $args->theme_location !== 'primary'.

Toinen tapa: siirry hallintapaneelissa kohtaan Ulkoasu > Valikot > "Hallitse sijainteja" -välilehti, jossa luetellaan kaikki teemasi rekisteröidyt theme_location-arvot.

Vaihtimen CSS-tyylit

Minimaalinen tyylikokoelma, joka pitää vaihtimen siistinä. Lisää ne kohtaan Ulkoasu > Muokkaa > Lisä-CSS tai lapsiteeman style.css-tiedostoon.

1
/* Vaihtimen säiliö */
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
/* Linkit ja aktiivinen kieli */
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
/* Erotin */
31
.wpml-lang-sep {
32
    margin: 0 6px;
33
    color: #ccc;
34
    font-weight: 400;
35
}
36
 
37
/* Piilota aktiivinen kieli ja sitä seuraava erotin */
38
.wpml-lang-item.active,
39
.wpml-lang-item.active + .wpml-lang-sep {
40
    display: none;
41
}
42
 
43
/* Mobiilisovitus */
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
}

Tärkein temppu tässä: valitsin .wpml-lang-item.active + .wpml-lang-sep piilottaa erottimen välittömästi aktiivisen kielen jälkeen. Jos aktiivinen kieli on piilotettu, myös sen vieressä oleva erotin katoaa, joten rivin alussa tai lopussa ei jää roikkuvaa |-merkkiä.

Oswald-fonttia käytetään esimerkkinä. Korvaa se teemasi fontilla tai poista font-family-rivi kokonaan, jolloin fontti periytyy teemalta. Kun olet lisännyt CSS:n, testaa vaihdinta mobiiliresoluutioilla kehittäjätyökalujen avulla (F12 > Toggle device toolbar).

⁉️🤔 Usein kysytyt kysymykset

Voinko näyttää kielten nimet ISO-koodien sijaan?

> Kyllä, korvaa $lang['language_code'] arvolla $lang['native_name'] molemmissa koodivarianteissa. Saat tuloksen "Русский | English | Українська". Vaihtoehtoisesti $lang['translated_name'] tulostaa nimet nykyisen sivun kielellä: jos kävijä on englanninkielisellä versiolla, hän näkee "Russian | English | Ukrainian". Kaikki käytettävissä olevat taulukon avaimet on lueteltu virallisessa WPML-dokumentaatiossa icl_get_languages()-funktiolle.

Miten poistan kielen, jolla ei ole käännöstä nykyiselle sivulle?

Muuta skip_missing=0-parametri arvoksi skip_missing=1 icl_get_languages()-kutsussa. Kielet, joilla ei ole käännöstä, katoavat yksinkertaisesti vaihtimesta, eikä niiden tilalle jää rikkinäistä linkkiä. Tämä on kätevää sivustoille, joilla kaikkia sivuja ei ole käännetty: valikko pysyy siistinä, eikä siinä ole linkkejä, jotka johtaisivat etusivulle tai 404-virheeseen.

Vaihdin ei näy. Mikä on vialla?

Tarkista kolme asiaa. Ensinnäkin, onko WPML-laajennus aktiivinen ja onko kielet lisätty kohdassa WPML > Languages? Toiseksi, vastaako koodissa oleva theme_location todellista valikkoa (Tapa 1)? Kolmanneksi, kutsutaanko lyhytkoodia do_shortcode()-funktion kautta, jos käytät sitä PHP-mallipohjassa sivun sisällön sijaan (Tapa 2)? Jos kaikki on kunnossa, mutta vaihdin ei silti näy, ota käyttöön WP_DEBUG tiedostossa wp-config.php ja tarkista error.log; functions.php-tiedostossa saattaa olla syntaksivirhe.

Miten lisään liput koodien rinnalle, esimerkiksi 🇬🇧 + EN?

Lisää lippuemoji ennen $code-muuttujaa ehdolla: if ($lang['language_code'] === 'en') $code = '🇬🇧 ' . $code;. Muista kuitenkin, että lippuemojit eivät välttämättä näy Windowsissa. Luotettavampi tapa on käyttää CSS-lippuja ::before-pseudoelementin ja background-image-ominaisuuden avulla, tai WPML:n sisäänrakennettuja lippuja.

Toimiiko tämä koodi Polylangin tai TranslatePressin kanssa?

Ei: icl_get_languages() on nimenomaan WPML:n API. Polylangissa vastaava funktio on pll_the_languages(), ja TranslatePressillä on omat koukkunsa. Logiikka on sama, mutta funktioiden nimet eroavat.

Yhteenveto: valikko vai lyhytkoodi

Valikkosuodatinmenetelmä sopii niille, jotka tarvitsevat vaihtimen ehdottomasti navigaatiossa ja tietävät theme_location-arvonsa varmasti. Vaivaa vähän: lisää koodi, korvaa sijainnin nimi, valmista tuli. Haittapuoli: se on sidottu yhteen valikkoon; toista varten koukku pitäisi monistaa eri theme_location-arvolla.

Lyhytkoodi on oikea valinta, jos vaihtimen täytyy olla epätavallisessa paikassa: mobiilipaneelissa, alatunnisteessa tai sivupalkissa. Lisää lyhytkoodi "HTML"-widgetiin tai mallipohjaan ja hallitse sen sijaintia vakiona olevilla WordPress-työkaluilla. Etu: voit lisätä sen useisiin paikkoihin koodia monistamatta.

Käytännössä molemmat tavat elävät rauhanomaisesti rinnakkain samassa functions.php-tiedostossa. Määritä suodatin päävalikolle ja lyhytkoodi mobiiliversiolle, niin saat siistin RU | UK | EN -vaihtimen jokaiseen laitteeseen. Ja jos tarvitset vaihtimen kolmannen kerran (esimerkiksi alatunnisteessa), lisää vain toinen do_shortcode('[wpml_custom_lang_ISO]') sopivaan mallipohjaan.

Mitä vaihdinmuotoa sinä käytät: lippuja, nimiä vai ISO-koodeja? Jaa kommenteissa kokemuksesi monikielisten sivustojen perustamisesta; olisi mielenkiintoista vertailla lähestymistapoja.