Pokud používáte Polylang na překlady a chcete pro jazyky použít vlastní ikonky místo těch originálních, stačí k tomu několik kroků:
1) Připravte si potřebné ikony
Potřebná velikost se bude odvíjet podle toho, kde výsledná ikonka přistane. Např. pro kulatou jsem nedávno volila velikost 30 x 30 px. Doporučuji, aby měly všechny stejný rozměr (jak fyzicky, tj. na px, tak vizuálně, tj. bez prázdných okrajů, všechny kulaté/obdélníkové/hranaté…), aby se vám případně dobře stylovaly.
2) Vložte je do webu
Na web je vložíte např. přes FTP nebo FTP-webového klienta na hostingu.
Umístění cílové složky “polylang” se odvíjí od toho, jak pracujete:
- wp-content složka je místo, které nic nezkazí:
- /wp-content/polylang/
- child theme je ideální umístění pro takové věci, pokud ji na webu máte, aby všechny vlastní úpravy byly na jednom místě
- /wp-content/themes/<my-child-theme>/polylang/
- Můžete použít i složku šablony jako takové, ale počítejte s tím, že o vlaječky pravděpodobně přijdete s jejím nadcházejícím updatem
- /wp-content/themes/<my-theme>/polylang/
Nezapomeňte soubory správně pojmenovat – podle zkratky jazyka (najdete ji v nastavení Polylangu)
3) Opravit URL
Když jsou vlaječky nahrané do webu, stačí jen beze změn uložit nastavení URL modifications v Polylangu.
- Polylang -> Settings -> URL modifications (rozevřít) -> Save Changes (pouze uložit beze změn).
Pokud jste vše udělali správně, měly by vlajky na webu svítit (případně můžete vysypat cache).
4) Nastylovat
Pokud potřebujete vlaječky ještě nastylovat, stačí vám k tomu CSS. Třídy záleží na použité šabloně/builderu.
- Např. pro DIVI můžete použít něco takového:
/* Polylang flags BEGIN */
/* set smaller margin to both desktop and mobile navigation */
.et-menu-nav .lang-item, .mobile_nav .lang-item{
margin-top: 1px !important;
}
/* visually updates the flag images, size, border, etc... */
.et-menu-nav .lang-item img, .mobile_nav .lang-item img{
border: 0px solid #F8B598;
border-radius: 100%;
max-width: 30px;
}
/* Polylang flags END*/