# Egyedi, lebegő nyelvváltó

> Lebegő (vízszintes vagy függőleges) nyelvváltó építése PHP-val és CSS-sel.

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:

```php
// 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**.

```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:

```css
.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;
}
```