Webové zákusky

Polylang – vlastní ikony

24. 8. 2022

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/

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*/

Zdroje

Další články

Jak přidat fonty do DIVI

V článku o lokálních fontech v DIVI jsem popisovala, jak je možné přidat do DIVI vlastní font a co dělat, pokud DIVI daný formát fontu nepodporuje (tedy jiný formát než TFF nebo OTF). Někdy je...