Riigilipud saidi menüüs on küsitav valik. Pool auditooriumist näeb Suurbritannia lippu enda lipuna, teine pool aga mitte. USA lipp inglise keele tähisena? See jätab kanadalased ja austraallased täiesti kõrvale. Ja täielikud keelenimed ("Русский," "Українська," "English") söövad mobiiliekraanil ära poole menüüst.

Kompaktne RU | UK | EN formaat lahendab mõlemad probleemid: see on koheselt loetav, ei võta peaaegu üldse ruumi ega ole seotud geograafiaga. Need on standardsed kahetähelised ISO keelekoodid, mida mõistetakse ilma tõlketa igas riigis.

Allpool on kaks võimalust vaikimisi WPML keelevahetaja asendamiseks ISO-koodidega. Esimene kasutab menüükirjete filtrit (lihtne lisandus faili functions.php). Teine on lühikood, mis kuvab keelevahetaja saidi mis tahes kohas.

💡 Kiire ülevaade:

meetod: navigeerimismenüü kirjete asendamine wp_nav_menu_items haagi kaudu, sisseehitatud keelevahetaja jaoks päises

meetod: lühikood [wpml_custom_lang_ISO], mida saab lisada kuhu tahes teemas (vidin, jalus, mobiilimenüü)

• CSS: | eraldaja stiliseerimine, aktiivse keele peitmine, responsiivne disain

Milline tulemus välja näeb

Pärast koodi lisamist kuvatakse keelevahetaja RU | UK | EN formaadis, lühidalt ja puhtalt. Aktiivne keel on esile tõstetud või peidetud (juhitakse CSS-i kaudu), samas kui ülejäänud keeled on klõpsatavad ja viivad vastava lehe tõlkeni.

Kood kasutab WPML sisseehitatud funktsiooni icl_get_languages(), mis tagastab massiivi saidi aktiivsetest keeltest koos kõigi vajalike andmetega: tõlke URL, keelekood, aktiivsuse olek. Kolmandate osapoolte sõltuvusi ei ole, ainult WPML enda API.

1. meetod: menüükirjete asendamine wp_nav_menu_items kaudu

See meetod peatab WordPressi navigeerimismenüü väljundi ja asendab vaikimisi keelekirjed kompaktsete ISO-koodide ja eraldajaga.

Kuhu see lisada: alamteema (child theme) faili functions.php või Code Snippets pistikprogrammi kaudu (turvalisem, ei kustu teema uuendamisel).

Enne koodi lisamist tehke saidist täielik varukoopia. Kood ei ole hävitav ja lisab ainult väljundit, kuid varukoopia tegemine on hea tava alati, kui muudate faili functions.php.

1
/**
2
 * Asendab WPML keelemenüü punktid ISO-koodidega.
3
 * theme_location määratakse teie menüü jaoks.
4
 */
5
add_filter( 'wp_nav_menu_items', 'wpml_iso_menu_items', 10, 2 );
6
 
7
function wpml_iso_menu_items( $items, $args ) {
8
    // Kontrollime, kas WPML funktsioon on saadaval
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äärake siia oma menüü theme_location (näiteks '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
    // Eemaldame viimase eraldaja
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
}

Mis siin toimub. Haak wp_nav_menu_items käivitub iga saidi menüü loomisel. Tingimus $args->theme_location !== 'primary' piirab asendamise ainult vajaliku menüüga; asendage 'primary' oma menüü theme_location väärtusega (kontrollige wp_nav_menu() oma mallis või administreerimispaneelis Välimus > Menüüd > Kuva asukohad).

Funktsioon icl_get_languages('skip_missing=0') toob kõik avaldatud keeled. skip_missing=0 tähendab "näita keelt ka siis, kui praegusel lehel puudub tõlge", nii et kasutaja satub selle keele avalehele, mitte 404 veale.

strtoupper() teisendab koodid suurtähtedeks: ru → RU. Kui vajate väiketähti, eemaldage see väljakutse.

2. meetod: lühikood [wpml_custom_lang_ISO]

Lühikood on mitmekülgsem: lisage [wpml_custom_lang_ISO] kuhu tahes, vidinasse, lehe sisusse või PHP-malli funktsiooniga do_shortcode(). See sobib hästi mobiilimenüü, jaluse või päise alla jääva ploki jaoks.

Kuhu see lisada: functions.php (sama fail, mis 1. meetodi puhul). Mõlemat meetodit saab hoida samaaegselt aktiivsena; need ei lähe vastuollu.

1
/**
2
 * Lühikood [wpml_custom_lang_ISO] — kuvab keelevaliku ISO-formaadis.
3
 * Lisamine: [wpml_custom_lang_ISO] tekstis või <?php echo do_shortcode('[wpml_custom_lang_ISO]'); ?> mallis.
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
    // Eemaldame viimase eraldaja
32
    $output = rtrim( $output, '<span class="wpml-lang-sep">|</span>' );
33
 
34
    return '<div class="wpml-iso-lang-switcher">' . $output . '</div>';
35
}

Erinevus 1. meetodist: lühikood tagastab HTML-stringi, mitte ei lisa kirjeid menüüsse. See tähendab, et saate seda paigutada kuhu tahes, sõltumata theme_location väärtusest. Parameeter order=desc pöörab keelte järjekorra ümber (valikuline; eemaldage, kui te seda ei vaja).

Kuidas leida oma menüü theme_location

Kui kasutate 1. meetodit, peate täpselt määrama argumendi theme_location. Avage mallifail, kus menüüd kutsutakse (tavaliselt header.php), ja otsige sellist rida:

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

Ülakomades olev väärtus, näiteks 'primary', ongi teie theme_location. Levinumad nimed on primary peamenüü jaoks ja top ülariba jaoks. Asendage see ülaltoodud koodis tingimuses $args->theme_location !== 'primary' oma väärtusega.

Teine võimalus: minge administreerimispaneelis Välimus > Menüüd > vahekaardile "Halda asukohti", kus on loetletud kõik teie teema registreeritud theme_location väärtused.

CSS-stiilid keelevahetaja jaoks

Minimaalne stiilikomplekt, et keelevahetaja näeks puhas välja. Lisage need jaotisesse Välimus > Kohanda > Lisa-CSS või alamteema failis style.css.

1
/* Vaheti konteiner */
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
/* Lingid ja aktiivne keel */
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
/* Eraldaja */
31
.wpml-lang-sep {
32
    margin: 0 6px;
33
    color: #ccc;
34
    font-weight: 400;
35
}
36
 
37
/* Peida aktiivne keel ja sellele järgnev eraldaja */
38
.wpml-lang-item.active,
39
.wpml-lang-item.active + .wpml-lang-sep {
40
    display: none;
41
}
42
 
43
/* Mobiilikohandus */
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
}

Peamine trikk on siin selektor .wpml-lang-item.active + .wpml-lang-sep, mis peidab eraldaja kohe pärast aktiivset keelt. Kui aktiivne keel on peidetud, kaob ka selle kõrval olev eraldaja, nii et rea alguses või lõpus ei jää rippuvat | märki.

Fonti Oswald kasutatakse näitena. Asendage see oma teema fondiga või eemaldage rida font-family täielikult, et pärida font teemalt. Pärast CSS-i lisamist testige keelevahetajat mobiiliresolutsioonidel arendajatööriistade abil (F12 > Toggle device toolbar).

⁉️🤔 Korduma kippuvad küsimused

Kas saan ISO-koodide asemel näidata keelte nimesid?

> Jah, asendage mõlemas koodivariandis $lang['language_code'] väärtusega $lang['native_name']. Saate tulemuseks "Русский | English | Українська". Alternatiivina väljastab $lang['translated_name'] nimed praeguse lehe keeles: kui külastaja on inglise keele versioonil, näeb ta "Russian | English | Ukrainian". Kõik saadaolevad massiivi võtmed on loetletud funktsiooni icl_get_languages() ametlikus WPML dokumentatsioonis.

Kuidas eemaldada keel, millel puudub praeguse lehe tõlge?

Muutke icl_get_languages() väljakutses parameeter skip_missing=0 väärtuseks skip_missing=1. Tõlketa keeled kaovad lihtsalt keelevahetajast ja nende asemele ei jää katkist linki. See on mugav saitidel, kus kõik lehed ei ole tõlgitud: menüü püsib puhas, ilma linkideta avalehele või 404 veale.

Keelevahetaja ei ilmu. Mis on valesti?

Kontrollige kolme asja. Esiteks, kas WPML pistikprogramm on aktiivne ja kas keeled on lisatud jaotises WPML > Languages? Teiseks, kas koodis olev theme_location vastab tegelikule menüüle (1. meetod)? Kolmandaks, kas lühikoodi kutsutakse funktsiooniga do_shortcode(), kui kasutate seda PHP-mallis, mitte lehe sisus (2. meetod)? Kui kõik on korrektne, aga keelevahetaja ikka ei ilmu, lülitage failis wp-config.php sisse WP_DEBUG ja kontrollige faili error.log; funktsioonis functions.php võib olla süntaksiviga.

Kuidas lisada koodide kõrvale lippe, näiteks 🇬🇧 + EN?

Lisage $code ette lipuemoji koos tingimusega: if ($lang['language_code'] === 'en') $code = '🇬🇧 ' . $code;. Pidage siiski meeles, et lipuemojid ei pruugi Windowsis kuvatuda. Usaldusväärsem lähenemine on kasutada CSS-lippe ::before kaudu koos background-image'iga või WPML sisseehitatud lippe.

Kas see kood töötab Polylangi või TranslatePress-ga?

Ei: icl_get_languages() on spetsiifiliselt WPML API. Polylangi puhul on vastav funktsioon pll_the_languages(), ja TranslatePressil on omaenda haakide komplekt. Loogika on sama, kuid funktsioonide nimed erinevad.

Kokkuvõte: menüü või lühikood

Menüüfiltri meetod sobib neile, kes vajavad keelevahetajat rangelt navigeerimises ja teavad kindlalt oma theme_location väärtust. Minimaalne pingutus: lisage kood, asendage asukoha nimi, valmis. Puudus: see on seotud ühe menüüga; teise jaoks tuleks haak dubleerida teise theme_location väärtusega.

Lühikood on õige valik, kui keelevahetaja peab olema mittestandardses kohas: mobiilipaneelil, jaluses või külgribal. Lisage lühikood "HTML" vidinasse või malli ja juhtige selle asukohta standardsete WordPressi tööriistadega. Eelis: saate seda lisada mitmesse kohta koodi dubleerimata.

Praktikas eksisteerivad mõlemad meetodid rahulikult koos ühes failis functions.php. Seadistage filter peamenüü jaoks ja lühikood mobiiliversiooni jaoks, ning saate puhta RU | UK | EN igal seadmel. Ja kui vajate keelevahetajat kolmandat korda (näiteks jaluses), lisage lihtsalt sobivasse malli veel üks do_shortcode('[wpml_custom_lang_ISO]').

Millist keelevahetaja formaati teie kasutate: lippe, nimesid või ISO-koode? Jagage oma kogemust mitmekeelsete saitide seadistamisel kommentaarides; oleks huvitav lähenemisi võrrelda.