Egyedi, lebegő nyelvváltó

A WPML nyelvváltója a menükbe, widgetekbe, láblécbe és a Site Editorral készült oldalakra is kerülhet, zászlókkal és testreszabási lehetőségekkel. Ha ennél különlegesebb kell, PHP-val és CSS-sel egyedit építhetsz. Itt egy lebegő nyelvváltót készítünk, amely az ablak sarkában marad görgetéskor is.

Három lépés:

1. a nyelvváltót kiírő PHP-kód;
2. a stílus CSS-sel;
3. a nyelvváltó beállításai.

1. A PHP-kód

A kód egy div tárolót ír ki, benne a nyelvváltóval, amelyet a wpml_add_language_selector akció rajzol ki. A WordPress wp_footer horgára akasztva a lábléc táján jelenik meg. Másold be a (gyermek)sablon functions.php fájljába:

// WPML - lebegő nyelvváltó a láblécben
add_action( 'wp_footer', 'wpml_floating_language_switcher' );

function wpml_floating_language_switcher() {
    echo '<div class="wpml-floating-language-switcher">';
    do_action( 'wpml_add_language_selector' );
    echo '</div>';
}

2. A stílus

A position: fixed tulajdonsággal lesz lebegő a nyelvváltó a jobb alsó sarokban. A CSS-t két helyre írhatod:

• WPML → Beállítások → Language Switchers, a Language switcher options kártyán nyisd le az Additional CSS részt;
• vagy Megjelenés → Testreszabás → Additional CSS.

/* Az alapértelmezett CSS egy részének eltávolítása */
.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}

.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}

.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}

/* Ezt tetszés szerint módosíthatod */
.wpml-floating-language-switcher {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background: #f8f8f8;
  border: 1px solid;
  border-color: #eee;
  padding: 0px;
  border-radius: 6px;
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
}

3. A beállítások

Hogy csak a zászlók látsszanak:

1. Nyisd meg a WPML → Beállítások → Language Switchers oldalt, és keresd meg a Custom language switchers részt.
2. Görgess le a Custom language switchers részhez, és kattints az Enable gombra.
3. Kattints a Customize gombra.
4. A What to include in the language switcher alatt hagyd bejelölve a Flag négyzetet, a Native language name, Language name in current language és Current language négyzetet pedig vedd ki.
5. Kattints a Save gombra.

Ezután az oldal sarkában vízszintes, csak zászlókat mutató nyelvváltó lebeg.

Függőleges változat

Ha függőleges, az oldal jobb szélére tapadó nyelvváltót szeretnél, az előző CSS helyett ezt használd:

.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions {
  margin-bottom: 0;
}

.wpml-floating-language-switcher .wpml-ls-statics-shortcode_actions a {
  background-color: transparent !important;
}

.wpml-floating-language-switcher .wpml-ls-legacy-list-horizontal a {
  padding: 5px;
}

.wpml-floating-language-switcher .wpml-ls-item {
  display: block;
}

.wpml-floating-language-switcher {
  position: fixed;
  bottom: 20px;
  right: 0px;
  background: #f8f8f8;
  border: 1px solid;
  border-color: #eee;
  padding: 0px;
  border-radius: 6px 0 0 6px;
  box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25);
  z-index: 999;
}