Stílus- és CSS-hibák javítása

Egyes sablonok, amelyek saját menügenerátort használnak, nem jelenítik meg jól a WPML nyelvváltóit. Ez a fejezet a hibakeresés lépéseit, a nyelvváltó CSS-osztályait és néhány stílus-példát tartalmaz.

Megjelenítési hibák keresése legördülő és menüs nyelvváltónál

1. Ideiglenesen add hozzá a láblécbe való nyelvváltót: ennek nagyon egyszerű a CSS-e, szinte minden oldalon működik.
2. Ideiglenesen távolítsd el az egyedi CSS-t, és használd a WPML nyelvváltóját az alapbeállításokkal.
3. A böngésző CSS-hibakeresőjével nézd meg, van-e egyértelmű CSS-ütközés. Ha megtaláltad az okot, a stílust felülírhatod a WPML → Beállítások → Language Switchers oldalon, a Language switcher options résznél az Additional CSS hivatkozásra kattintva.

Az egyes nyelvek CSS-osztályai

Osztály	Jelentés
wpml-ls-slot-{slug}	például wpml-ls-slot-sidebar-1
wpml-ls-item	minden nyelvi elem
wpml-ls-item-{nyelvkód}	például wpml-ls-item-en
wpml-ls-current-language	csak az aktuális nyelv elemén
wpml-ls-menu-item	csak menüben lévő nyelvváltónál
wpml-ls-first-item	a lista első nyelve
wpml-ls-last-item	a lista utolsó nyelve

Ha minden nyelvi elemhez saját osztályt szeretnél adni, használd a wpml_ls_model_language_css_classes szűrőt a sablon functions.php fájljában:

add_filter( 'wpml_ls_model_language_css_classes', 'my_custom_ls_item_css_classes' );
function my_custom_ls_item_css_classes( $classes ) {
    $classes[] = 'my-custom-item-class';
    return $classes;
}

A nyelvváltó tárolójának CSS-osztályai

• wpml-ls
• wpml-ls-{csoport}-{slug}, például wpml-ls-statics-footer
• wpml-ls-{sablon-slug}, például wpml-ls-legacy-dropdown-click
• wpml-ls-rtl: jobbról balra író nyelvekhez
• wpml-ls-touch-device: mobilra és táblagépre kerül

A {csoport} és a {slug} értéke a nyelvváltó helyétől függ:

Leírás	Csoport	Slug
Nyelvváltó a láblécben	statics	footer
Nyelvváltó a bejegyzés fordításaihoz	statics	post_translations
Egyedi nyelvváltó	statics	shortcode_actions
Nyelvváltó widgetként	sidebars	{sidebar_slug}
Nyelvváltó menüben	menus	{menu_id}

A tároló osztályait a wpml_ls_model_css_classes szűrővel bővítheted:

add_filter( 'wpml_ls_model_css_classes', 'my_custom_ls_wrapper_css_classes' );
function my_custom_ls_wrapper_css_classes( $classes ) {
    $classes[] = 'my-custom-wrapper-class';
    return $classes;
}

A menüben lévő nyelvváltónál a WPML csak néhány elemet szúr be, ezért ennek nincs tároló-osztálya.

Stílus-példák CSS-sel

A CSS-t a WPML → Beállítások → Language Switchers oldalon, a Language switcher options résznél az Additional CSS hivatkozás mögé írhatod.

Az aktuális nyelv vastagon:

.wpml-ls-current-language {
  font-weight: bold;
}

Csak a láblécben lévő nyelvváltó betűmérete:

.wpml-ls-statics-footer {
  font-size: 18px;
}

Jobb oldali margó az utolsó nyelvi elem után:

.wpml-ls-last-item {
  margin-right: 10px;
}

A választókat kombinálhatod is a pontosabb célzáshoz. Például a láblécben lévő nyelvváltó aktuális nyelve vastagon:

.wpml-ls-statics-footer .wpml-ls-current-language {
  font-weight: bold;
}

A menüben lévő nyelvváltó szélességének rögzítése:

nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu,
nav ul[class*="menu"] li.wpml-ls-menu-item ul.sub-menu li a {
  width: auto;
  min-width: 30px;
}