Menu na mieru pre Engeto bez JavaScriptu

Menu na mieru pre Engeto bez JavaScriptu

Nedávno sme pre nášho klienta Engeto vytvorili zaujímavé riešenie. Vytvorili sme menu na mieru bez použitia JavaScriptu, vďaka čomu sme nespomalili výkon ich webovej stránky. V dnešnom článku si môžete prečítať, ako sme pracovali na vytvorení menu a aké sú výhody menu bez JavaScriptu.

Zoznámte sa s Engetom

Engeto organizuje IT kurzy pre začiatočníkov a pokročilých, ktorým pomáha nájsť si prácu v oblasti IT. Spolupracujú s parterskými firmami a na ich webe nájdete príbehy absolventov, ktorí rozprávajú o tom, ako sa – niekedy aj z nie ITodborov – dostali cez Engeto k práci v IT

Engetu sme už pomohli s vytvorením stránok Absolventi a Termíny, ktoré sme vytvorili podľa ich grafiky, a pridali filtrovanie, ktoré predtým nebolo možné. Umožnili sme tak ich zákazníkom jednoduchšie filtrovanie kurzov a absolventov. 

Engeto nás požiadalo o lepšie rozdelenie stránky pre jednotlivcov a firemných návštevníkov. Pôvodný web ani šablóna to neumožňovali v takom veľkom rozsahu. Začali sme sa teda podieľať na vytvorení riešenia, pre nich na mieru.

Výhody menu bez JavaScriptu

Menu funguje, ako som sa už zmienil, bez použitia JavaScriptu. Rozhodli sme sa JavaScript nepoužívať, pretože podľa nás nie je vždy potrebný a len zbytočne zdržiava načítanie stránky. Bola to pre nás aj taká výzva, či niečo takéto zvládneme urobiť. Najviac som asi hrdý na mobilnú verziu menu, ktorá má aj tlačidlo späť, ktoré sa z podmenu vracia do hlavnej ponuky.

Mobilná verzia menu
Mobilná verzia menu
  • Vďaka tomu, že nebol použitý JavaScript, sa stránka nijako nespomalila pri načítaní.
  • Zákazníkovi táto úprava umožňuje vytvoriť menu presne podľa jeho predstáv a lepšie tak svojim študentom predstaviť ponuky kurzov a obsah webu.
  • Každá stránka má vo svojej administrácii možnosť nastaviť, aké menu chce v hlavičke zobraziť. V nastaveniach sa potom spravujú dve menu. Jedno pre stránky jednotlivcov a druhé pre firemné. To umožňuje veľmi jednoduchú správu a prípadné výmeny menu za iné.
  • Hlavné menu je jednoducho upraviteľné. Všetky prvky sú v ňom nastaviteľné cez WordPress administráciu, takže nie je potrebný zásah programátora do kódu pri nejakej požiadavke na zmenu.
WordPress administrácia menu na mieru
WordPress administrácia menu na mieru

Aby som vás neklamal, tak jeden JavaScriptový kód som napísať musel. Divi šablóna, ktorá je na tomto webe využitá, totiž blokovala používanie nášho prístupu na mobiloch. Museli sme teda napísať JavaScript, ktorý ich JavaScript obíde. Menu vlastne funguje najlepšie, pokiaľ na celej stránke vypnete JavaScript. Potom vám ale nepôjde zvyšok stránky.

Ako vzniklo menu na mieru

Na vytvorenie menu som využil kombináciu elementu <label> a checkbox inputov. Vďaka ich pomenovaniu je možné tieto dva elementy previazať, aj keď sú na úplne iných miestach v stránke. A čo je ešte lepšie, že to isté funguje aj pre viaceré <label> elementy naviazané na jeden input. Tak som dosiahol možnosť dostať sa na mobiloch na podmenu a späť.

Aby som všetky tieto informácie dostal do štandardného WordPress menu, bolo treba napísať vlastné MenuWalker. To je trieda, ktorú odovzdáte vášmu menu a podľa nej sa vypisujú jednotlivé časti menu. V triede si potom môžeme upraviť jeho funkcie a pridať tak do menu nejaké vlastné položky.

Využitie WordPress pluginu

Poslednú technológiu, ktorú som použil na túto prácu, bol WordPress plugin Advance Custom Fields (ACF).

Jeho možnosť pridávania vlastných položiek na rôzne miesta WordPress administrácie ma stále baví. Narazil som ale na jeden drobný problém. 

ACF nemá možnosť definovať, do akej úrovne menu chcete nové editovateľné položky pridať. 

Vytvoril som teda kód, ktorý zisťuje, v akej úrovni sa dané menu nachádza, a potom povoľuje, prípadne vypína ACF položky. To mi umožnilo spríjemniť administrátorovi prácu s editáciou, pretože sa mu tam nepletú položky, ktoré by nemal nastavovať a nič by vo výsledku nerobili.

Pokiaľ máte tiež záujem o riešenie na mieru či zrýchlenie svojich webových stránok alebo potrebujete poradiťnapíšte nám, sme tu pre vás.

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.