Okoreňte ponuku WordPress ikonami Webtimiser
- Posledná aktualizácia 18. septembra 2020
- Sonia Rieder
- Wordpress - tipy a návody
- 1
Navigácia je veľmi dôležitou súčasťou webových stránok a dá sa ľahko prispôsobiť vo WordPress. Okrem písma alebo farby možno na návrh jednotlivých položiek ponuky použiť aj ikony. Krok za krokom vysvetlím, ako môžete zostaviť ponuku WordPress s ikonami pomocou príkladu témy Twenty Fifteen.
1. Vytvorte detskú tému
Aby sa zmeny v šablóne so štýlmi nestratili pri aktualizácii témy, mali by ste najskôr vytvoriť podradenú tému.
Podrobný návod, ako na to, nájdete v mojom článku Vytvorenie detskej témy WordPress.
Prípadne môžete samozrejme použiť aj doplnok alebo nástroj na prispôsobenie vlastných CSS vo WordPress.
2. Pridajte ikony do ponuky
Téma Dvadsať pätnásť obsahuje Ikona Generic ikon písma, ktoré použijem v tejto príručke. Ak chcete použiť ponuku WordPress s ikonami z inej knižnice fontov, bude pravdepodobne potrebné ich vopred integrovať.
Tu je krátky úryvok na integráciu písma Awesome. Vďaka viac ako 500 ikonám je toto ikonové písmo oveľa rozsiahlejšie a rýchlejšie zabudované do WordPressu. Ak to chcete urobiť, jednoducho do súboru functions.php pridajte nasledujúci útržok kódu:
Potom môžete tiež použiť ikony Font Awesome pre položky ponuky. Iba štýly CSS sa potom musia prispôsobiť odlišne od týchto pokynov.
Krok 1: Aktivujte rozšírené možnosti ponuky
Vo WordPress môžete každej položke ponuky priradiť samostatnú triedu CSS. Ak to chcete urobiť, musíte najskôr aktivovať rozšírené vlastnosti ponuky.
Ak to chcete urobiť, najskôr prejdite na informačný panel Dizajn> Ponuky.
Tam nájdete pokročilé vlastnosti ponuky, ktoré sú v paneli trochu skryté možnosti na vrchu.
Teraz začiarknite políčko Triedy CSS. Potom môžete každému navigačnému bodu priradiť samostatnú triedu CSS. A tak si ho môžete upraviť aj individuálne.
Krok 2: Vložte triedu CSS
Knižnica ikonových fontov Genericons je už integrovaná do témy WordPress Twenty Fifteen. Preto používam tieto ikony na zvýraznenie položiek ponuky.
Pre položku ponuky Home zvolím ikonu genericon-home. Takže zadávam triedy CSS do nového poľa: generikón generikón-domov
Pokiaľ ide o ďalšie položky ponuky, môžete si pozrieť dostupné ikony na webovej stránke genericons.com.
Stačí kliknúť na požadovanú ikonu a potom na Kopírovať HTML. Potom dostanete kód pre ikonu vo vyskakovacom okne.
Pre svoje vzorové menu som vybral nasledujúce ikony:
- Domov: genericon genericon-home
- Kontakt: genericon genericon-mail
- Blog: genericon genericon-image
Krok 3: prispôsobte šablónu so štýlmi
Na zaistenie správneho umiestnenia ikon pred položkami ponuky musí byť vložených niekoľko pokynov CSS.
Nasledujúce štýly CSS sú teraz súčasťou súboru štýl.css.
Podľa vášho vkusu môžete tiež určiť farbu ikon a ich veľkosť.
Hotové WordPress menu s ikonami
Pridajte ikony ponuky WordPress pomocou doplnku/témy
Ikony alebo obrázky je možné samozrejme tiež pridať do ponúk WordPress pomocou doplnku! Existujú niektoré doplnky, napríklad ikony ponúk. S ním môžete okoreniť svoj jedálniček bez akýchkoľvek CSS.
Niektoré témy ale štandardne umožňujú aj integráciu ikon. Používam tému OceanWP a tu môžem kliknutím pridať ikonu alebo obrázok do ponuky.
OceanWP: Zahrňte do ponuky ikony kliknutím
Yoast SEO pre WordPress: Pokyny a tipy