Kalkulačka ve WordPress od Zeni

Kalkulačka ve WordPress od Zeni

Během redesignu webu pro A-technology jsme byli požádání o přepracování jejich technologické kalkulačky. Pro kalkulačku jsme neudělali jen redesign, ale přidali i novou funkcionalitu.

Jak jsme realizovali kompletně nový návrh webové stránky si můžete přečíst v článku Rychlost a spolehlivost webové stránky pro A-technology.

Kde lze kalkulačku využít?

Kalkulačku mohou využít lidé, kteří se rozhodují stavět dům a rádi by věděli, jaké mají možnosti v oblasti vytápění a dalších moderních technologií. Kalkulačka je aktuálně nastavena jen pro ukázkový dům o velikosti 160 m2, ale je v plánu přidat i další. To ale nebrání tomu, aby si uživatelé udělali přehled o technologiích a jejich přibližných cenách.

Jakou kalkulačku jsme vytvořili

Nová kalkulačka v základu funguje podobně jako ta stará, takže se pro uživatele nic nezměnilo a není potřeba, aby se naučil něco nového pro její používání. Klientovi ale přibily nové možnosti. Jednou z nich je možnost zadání rozšíření. Pokud zákazník zaškrtne nějakou z hlavních technologií, nabídnou se mu na výběr rozšíření. Kalkulačka tak získala na přehlednosti a zákazník přesně ví, jaké technologie jsou k čemu navázány. Může si díky tomu i lépe specifikovat svůj požadavek.

Možnosti rozšíření - Kalkulačka ve WordPress od Zeni
Možnosti rozšíření – Kalkulačka ve WordPress od Zeni

Další novinkou jsou povinná rozšíření. Některé technologie obsahují rozšíření, která je nutné přidat, aby vše vůbec fungovalo. Proto se může stát, že něktérá rozšíření budou už zaškrtlá a nepůjde je odebrat.

Povinná rozšíření - Kalkulačka ve WordPress od Zeni
Povinná rozšíření – Kalkulačka ve WordPress od Zeni

Poslední a asi největší rozšíření původní kalkulačky jsou Dotace. Zákazník si může v kalkulačce vybrat jednu z nabízených dotací a automaticky se mu k ní navolí všechny potřebné technologie pro její splnění. Díky tomu je hezky vidět, s čím vším musí počítat, pokud má o danou státní dotaci zájem.

Možnosti dotací - Kalkulačka ve WordPress od Zeni
Možnosti dotací – Kalkulačka ve WordPress od Zeni

Chcete-li poslat svou kalkulaci na e-mail, je třeba vyplnit několik základních údajů. Na žádost klienta jsme formulář rozšířili o možnost nahrání dokumentů spojených s vaším projektem. Díky těmto podkladům vám mohou v A-technology připravit návrh na mírů, přesně podle vašich požadavků.

A-technology chce svým klientům dát náhlednout do možností, které mají, a umoňuje jim vybrat si řešení podle svých představ. Přesné řešení je pak možné konzultovat s lidmi z A-technology, kteří vám dodají přesnější informace.

Pokud se vám naše řešení kalkulačky zalíbilo nebo potřebujete pomoci s webem, neváhejte se nám ozvat

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Zlepšete vývoj WordPress šablon a pluginů za použití návrhových vzorů

Zlepšete vývoj WordPress šablon a pluginů za použití návrhových vzorů

Chcete vytvářet čistší, lépe udržovatelný kód, který se dá v prostředí WordPressu mnohem snadněji upravovat a rozvíjet? Obrovský rozdíl může přinést věnování pozornosti konceptu návrhových vzorů. Pokud provedete použití návrhových vzorů během vývoje správně, může vám to ušetřit i nějaký čas.

Co jsou návrhové vzory?

Návrhové vzory nám pomáhají vytvářet software (samozřejmě včetně pluginů a šablon WordPressu) na základě již získaných znalostí těch před námi. Nemusíme znovu vynalézat kolo pro řešení některých běžných problémů, které se staly již mnoha vývojářům, a můžeme se zaměřit na specifika naší problémové oblasti a řešit požadavky zákazníků.

Návrhový vzor je opakovatelné řešení běžně se opakujícího problému v návrhu softwaru. Nelze jej použít přímo, ale poskytuje nám šablonu pro řešení problému, kterou lze opakovaně použít v mnoha podobných situacích.

Studium návrhových vzorů a jejich použití při vytváření nového kódu může výrazně zlepšit jeho strukturu a celkovou funkčnost a škálovatelnost.

Po jejich prostudování můžete také zkusit refaktorovat svůj starší kód pomocí návrhových vzorů a uvidíte, že kód může být mnohem lépe manažovatelný.

Vysvětlení návrhových vzorů pomocí hooků

Začněme něčím už známým pro většinu vývojářů WordPressu, a to jsou hooky, konkrétně akce a filtry, které se ve WordPressu hodně používají.

Jedná se o specifickou implementaci vzoru publisher-subscriber(pub-sub). V tomto vzoru definujeme publisher (vydavatele), subscriber (odběratele) a message broker (zprostředkovatele zpráv):

Vydavatelé (publisher) zveřejní nějakou konkrétní událost, v našem případě provedením do_action nebo apply_filters.  

Odběratelé (subscriber) se mohou přihlásit k určitým událostem voláním add_action nebo add_filter a provést akci, když nastane událost, ke které se přihlásili.

Zprostředkovatel (message broker), v našem případě jádro WordPress, které zajistí, aby byli všichni odběratelé informováni o událostech vydavatelů, ke kterým jsou přihlášeni.

Výhody vzoru publisher-subscriber (pub-sub)

To nám přináší mnoho výhod. Vydavatel nemusí vědět nic o svém odběrateli a ani odběratelé nemusí vědět nic o vydavateli, pokud umí reagovat na vzniklou událost. I když deaktivujeme plugin, který události vytváří nebo odebírá, nezpůsobí to žádné chyby

Myslím, že je velmi užitečné nejen odebírat hooky z jádra WordPressu nebo pluginů, ale také vytvářet hooky v kódu a stavět kolem nich svůj kód. Nejenže usnadníte život ostatním vývojářům, pokud se rozhodnou stavět na funkčnosti vašeho pluginu nebo šablony, ale věřte mi, že i váš život bude mnohem jednodušší při implementaci nové funkčnosti do vašeho pluginu nebo šablony.

Ve WordPressu lze použít mnoho dalších šikovných návrhových vzorů. Většinou vyžadují trochu více práce než hooky, ale mohou znamenat obrovský rozdíl v designu vašeho pluginu nebo šablony. Skvělým příkladem návrhového vzoru, který lze použít v kontextu WordPressu, je vzor singleton.

Vzor singleton

Tento vzor vyžaduje znalost objektově orientovaného programování. Pokud s ním nejste obeznámeni, nejprve si ho prostudujte a pak se můžete vrátit ke čtení.

Vzor singleton omezuje iniciaci určité třídy, takže lze vytvořit pouze jednu instanci třídy. Toho lze dosáhnout vytvořením soukromého konstruktoru, statické proměnné pro uložení instance a statické funkce getInstance(). Tato funkce odpovídá za vytvoření instance objektu, pokud již není vytvořen a uložen v proměnné $instance. Příklad můžete vidět níže

class SingletonClass
{
    private static $instance = null;

    private function __construct() {}

    public static function getInstance()
    {
        if (null === self::$instance) {
            self::$instance = new self();
        }
        return self::$instance;
    }
}

Pokaždé, když se nějaký kód pokusí vytvořit novou instanci této třídy, spustí se chyba, protože jde o soukromý konstruktor (tohle je lepší zdokumentovat, aby nedošlo k nedorozumění), takže jediný způsob, jak získat instanci, je prostřednictvím naší funkce getInstance().

Jako příklad použití by bylo možné vytvořit základní třídu, jejíž odpovědností je vytvořit instanci všech našich funkcionalit pluginu. K této instanci můžeme navázat například konfigurační data, takže jsou přístupná odkudkoli v pluginu a není nutné je načítat z databáze nebo konfiguračního souboru vícekrát, pouze při vytvoření jediné instance této třídy.

Nepřehánějte to s používáním singleton vzoru

Myslím, že tento vzor je dobrým příkladem také proto, že jeho přílišné používání může být velmi svůdné, protože v mnoha situacích je snadnévidět výhody jeho použití. Neříkám, že by se neměl používat, ale před jeho použitím je třeba zvážit i jeho nevýhody

Hlavní nevýhodou tohoto vzoru je podle mého názoru to, že pokaždé, když tento vzor použijeme, váže se naše funkčnost na přímou znalost singletonové třídy. To vytváří provázanost kódu a může způsobit, že pokud se rozhodneme něco v singletonu změnit, musíme provést mnoho změn v celém projektu. 

Před použitím tohoto vzoru nebo jakéhokoli jiného vzoru proto vždy vše rozvažujte předem, ale pokud budete odvádět dobrou práci, bude to pro vás velmi přínosné.

Další vzory

V tomto článku jsme popsali dva návrhové vzory. Tyto vzory lze použít v mnoha situacích při vývoji WordPressu a mohou zlepšit váš kód a myšlení. 

To je však jen velmi malá ukázka toho, co lze díky konceptu návrhových vzorů vytvořit. Návrhových vzorů, které lze při vývoji použít, je mnohem více. Jejich studium a použití by mohlo mít během vývoje obrovský význam a mohlo by mít velmi pozitivní dopad na to, co vyvíjíte. 

Pokud vám nedělá problém angličtina, doporučuji vám použití vzorů vyzkoušet buď pomocí známé a kvalitní literatury, jako Design Patterns: Elements of Reusable Object-Oriented Softwarenebo Head First Design Patterns nebo na webech jako je refactoring.guru, kde je mnoho vzorů dobře popsáno včetně příkladů v PHP. V českém jazyku vyšel titul Návrhové vzory v PHP.

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Optimalizace a komprese obrázků ve WordPress

Optimalizace a komprese obrázků ve WordPress

Optimalizace a komprese obrázků je velmi důležitá. Zkrátí čas při načítání vašich stránek, a tím vám může pomoci zvýšit návštěvnost stránky. Váš web se tak stává úspěšnějším.

Velikost obrázků

Používejte obrázky vždy v takové velikosti, v jaké je zobrazujete. Je zbytečné načítat obrázek v rozlišení 1024×1024 px, pokud jej na webu zobrazujete ve velikosti 16×16 px.

Nepřehánějte to s množstvím obrázků. Čím více obrázků, tím více dat se načítá a tím je načítání stránky pomalejší. Zamyslete se, zda má obrázek pro stránku přidanou hodnotu, například při psaní článků.

Ve WordPress se každý obrázek při nahrávání zmenší do 4 různých velikostí a následně si můžeme načíst verzi obrázku, která nám nejvíce pro danou stránku vyhovuje. Například velikost miniatury v blogu je jiná než velikost obrázku přímo v blogu.

  • Miniatura – 150 x 150 pixelů
  • Střední velikost – maximálně 300 x 300 pixelů
  • Velká velikost – maximálně 1024 x 1024 pixelů
  • Plná velikost – původní velikost nahraného obrázku

Pro dodatečnou optimalizaci webu lze také do WordPressu doplnit vlastní velikosti obrázků.

Formát obrázků

Bitmapové obrázky

  • Vhodné použít pro velmi detailní obrázky jako například fotografie
  • Bitmapové obrázky obsahují mapu jednotlivých pixelů.
Bitmapový obrázok
Bitmapový obrázok
  • Formát JPEG podporuje velké množství barev, proto působí živěji jako například PNG, JPG je nejvhodnější pro zobrazení fotografií.
  • Formát PNG podporuje menší množství barev než JPEG, ale na rozdíl od JPEG podporuje průhlednost, také lépe zvládá text a ilustrace.

Na tomto memu můžete vidět rozdíl v zobrazení ilustrací a textů mezi JPEG a PNG:

Rozdíl v zobrazení textů mezi JPEG a PNG
Rozdíl v zobrazení textů mezi JPEG a PNG
  • Formát WebP lze využít jako moderní náhradu za formáty JPG a PNG. Soubory v tomto formátu jsou při stejné kvalitě značně menší než u konkurenčních formátů.
  • Zajímavé je, že tento formát byl vyvinut v Google.
  • WebP zatím není pro WordPress nativně podporován, ale jsou pluginy, které přidávají podporu. My používáme WordPress plugin WebP Converter for Media.

Vektorová grafika

  • Může ušetřit obrovské množství dat, obsahuje instrukce v textové podobě k vytvoření obrázku a nikoli mapu pixelů, jako je tomu v případě bitmapové grafiky. Proto pro zobrazení většího obrázku není nutný větší soubor.
  • Tam, kde je to aplikovatelné, je dobré ji preferovat před bitmapovou (pixelovou).
  • Nejčastěji se používá pro loga a různé ikony.
  • Velikost souboru narůstá s množstvím detailů na obrázku.

Výhodný formát pro vektorovou grafiku na webu je SVG.

SVG obrázky nelze nahrát do knihoven médií ve WordPress. Tyto obrázky můžeme zobrazit pomocí kódu v pluginu nebo v šabloně při tvorbě HTML struktury, buď dodatečným načtením nebo vnořením do HTML struktury.

Ve WordPress je právě možnost použití přímo v HTML užitečná také v Gutenbergu nebo Classic editoru. SVG obrázky můžeme do editoru vložit jako vlastní HTML.Výhodou SVG obrázků také je, že je možné upravit jejich zobrazení pomocí CSS stylování, jelikož jsou běžnou součástí HTML.

Škálovatelnost
Škálovatelnost

Komprese obrázků

Obrázkové formáty podporují většinou více úrovní komprese, kde je možné ušetřit více dat při silnější kompresi, ale je to na úkor kvality.

Pro každý obrázek, který nahráváte na váš web, by měla být aplikována komprese. Více zkomprimované obrázky jsou menší a rychleji se načtou uživateli vašeho webu. Nesmíme však zapomínat, že kompresí se ztrácí kvalita, a proto je třeba zvolit kompresi, při které budou detaily obrázků dostatečně zachovány.

Příliš komprimovaný obrázek
Příliš komprimovaný obrázek

Zde můžete vidět velmi výhodný formát WebP, který poskytuje nejlepší poměr velikosti souboru k jeho kvalitě, v porovnání s JPEG formátem.

Porovnání zobrazení formátu WebP a JPEG
Porovnání zobrazení formátu WebP a JPEG

WordPress pluginy pro kompresi obrázků

S kompresí obrázků vám může pomoci dobrý WordPress plugin. Pluginy existují různé, ale zde zmíníme jen některé pluginy pro kompresi obrázků.

  • EWWW Image Optimizer – tento WordPress plugin je bezplatný a při nahrávání obrázků je automaticky komprimuje,
  • Smush – kromě komprese obrázků obsahuje i jiné užitečné optimalizační techniky,
  • WebP Converter for Media – nahrazuje soubory JPG a PNG formátem WebP, čímž můžete bez ztráty kvality ušetřit více než polovinu zatížení. Po instalaci pluginu se obrázky automaticky převedou do nového formátu.

Optimalizace a komprese obrázků je jen jedním z mnoha aspektů, které vám mohou dopomoci se zrychlením vaší stránky a se zvýšením její návštěvnosti. Chcete-li se dozvědět více, přečtěte si článek 6 způsobů, jakými zlepšíte rychlost a výkon vaší webové stránky ve WordPress nebo Zrychlení webových stránek ve WordPress díky optimalizaci JavaScriptu a CSS.

Máte-li zájem o více informací a potřebujete poradit či pomoci se zrychlením vaší webové stránky, napište nám a my vám rádi pomůžeme.

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Zrychlení webových stránek ve WordPress díky optimalizaci JavaScriptu a CSS

Zrychlení webových stránek ve WordPressu díky optimalizaci JavaScriptu a CSS

JavaScript a CSS zpomalují načítání stránky, protože se musí dočítat a spouštět. Navíc mnoho JavaScriptu může mít velmi negativní dopad na výkon, reakčnost a responzivnost webu. Přečtěte si, jak optimalizujeme CSS a JavaScript ve WordPressu a tím přispíváme ke zrychlení webových stránek.

Načtěte méně JavaScriptu a CSS

Zvažte výběr pluginů a šablon

Některé pluginy a šablony ve WordPressu používají velmi mnoho JavaScriptu a načítají objemné CSS, proto zvažte jejich použití a zkuste najít vhodné alternativy. Mnohé načítají Javascript a CSS i na stránkách, na které daný plugin/téma nemají vůbec vliv, a tedy prodlužují načítání i tam, kde to není vůbec nutné.

Zamyslete se nad potřebnou funkcionalitou

Při práci s WordPressem si vždy dáváme pozor, aby se načítalo jen to, co je potřeba (CSS styly, JavaScript), a tak připravíme stránku pro rychlejší načítání. Například odstraníme nepotřebné CSS a JS soubory.

Pro interaktivní funkce využijte CSS místo JS

Pokud programujete obsah pro WordPress, je dobré se zamyslet, zda na všechno, k čemu používáte JavaScript, je opravdu JavaScript nutný. Spousta funkcionalit, na které bylo nutné použít JavaScript v minulosti, je dnes možné docílit pomocí moderního CSS s mnohem menším dopadem na výkon. Toho jsme využili například při tvorbě stránky pro i4comfort nebo při tvorbě Menu na míru pro Engeto bez JavaScriptu. Webová stránka obsahuje mnoho vizuálních efektů, které jsme zakomponovali tak, aby stránku nezpomalovaly. Více se můžete dočíst v článku Tvorba webové stránky pro i4comfort.

Kód manažující JS a CSS

Vždy je třeba se zamyslet nad tím, kde je vaše CSS a JavaScript potřeba. Je dobré rozbít velké CSS soubory na několik menších a načíst je podle potřeby. Stejně můžeme přistupovat také k JavaScript kódu.

Na tvorbu šablon nejčastěji používáme Sage, který takovýto management usnadňuje a počítá s jeho nutností.

Přečtěte si více v článku Proč je dobré mít webovou stránku vytvořenou na Sage?

Optimalizujte CSS a JavaScript pomocí minifikování

Minifikováním se ze souborů odstraní vše nepotřebné(řádky, mezery, zkrátí se názvy proměnných atd…). Textové soubory s CSS, JS se upraví tak, aby zabíraly méně místa, čímž se šetří velikost souborů a rychleji se načítají.

Rozdíl mezi originálním a minifikovaným kódem
Rozdíl mezi originálním a minifikovaným kódem

Existuje mnoho dobrých WordPress pluginů a šablon, které minifikují kód. V našich pluginech a šablonách kód minifikujeme a zároveň si uchováváme původní soubory, které lze snadněji modifikovat.

Jak na to?

Váš JavaScript a CSS lze minifikovat pomocí online nástrojů, jako například Closure Compiler či Minify Code. Takovýmto způsobem lze minifikovat i JavaScript a CSS, které vkládáte pomocí pluginů či customizéru.

Lepší alternativou k tomuto účelu je nastavit build vašeho pluginu/šablony. Je možné použít a nastavit Webpack nebo nástroje jako node-minify. Takový přístup vám umožní automatické minifikování vašich souborů, ale vyžaduje poměrně mnoho času a nervů, hlavně pokud si zvolíte Webpack. Proto je lepší sáhnout po předpřipraveném řešení pro váš plugin nebo šablonu v podobě starter projektu, jako například Roots Sage pro šablonu. Pro velké projekty, na kterých již pracujete a není snadné je zmigrovat, je však nutné si dopomoci zmíněnými nástroji.

Jak použít minifikaci bez vývojářských zkušeností?

K optimalizování všech CSS a JS souborů, které vaše stránka používá, si lze dopomoci využitím pluginu Fast Velocity Minify. Tento plugin funguje tak, že při prvním nenacachovaném načtení stránky vygeneruje minifikované CSS a JS soubory, které se pak načítají místo původních souborů. Můžete takto značně zrychlit načítání CSS a JavaScriptu u pluginů a šablon, které nemají minifikovaný JavaScript a CSS.

Méně je více

Pro zrychlení vaší webové stránky, a tím i zvýšení počtu návštěvníků, je třeba si uvědomit, že méně je v tomto případě opravdu více. Pokud bude vaše stránka zahlcena množstvím nepotřebných funkcionalit, je jasné, že se to odrazí i na výkonu.

Způsobů, jakými zrychlíte vaše webové stránky, a tím zvýšíte jejich návštěvnost, je velmi mnoho. Můžete delší stránky rozdělit na menší, omezit množství nepotřebných obrázků nebo se snažit o jednodušší kód. O tomto jsme psali také podrobnější článek 6 způsobů, jakými zlepšíte rychlost a výkon vašeho webu ve WordPressu.

Pokud máte nějaké dotazy nebo potřebujete pomoci se zrychlením či optimalizováním webu, jsme tu pro vás, neváhejte se nám ozvat.

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Menu na míru pro Engeto bez JavaScriptu

Menu na míru pro Engeto bez JavaScriptu

Před nedávnem jsme pro našeho klienta Engeto dělali zajímavé řešení. Vytvořili jsme menu na míru bez použití JavaScriptu, díky čemuž jsme nezpomalili výkon jejich webové stránky. Jak jsme pracovali na tvorbě menu a jaké výhody přináší menu bez JavaScriptu, si můžete přečíst v dnešním článku.

Seznamte se s Engetem

Engeto, pořádá IT kurzy pro začátečníky a pokročilé, kterým pomáhá najít uplatnění v IT oboru. Spolupracují s partnerskými firmami a na jejich webu najdete příběhy absolventů, kteří vypráví, jak se – někdy i z ne IT oborů – dostali přes Engeto k práci v IT

Engetu jsme již pomohli s vytvořením stránek Absolventi a Termíny, které jsme vytvořili podle jejich grafiky, a přidali filtrování, které předtím nebylo možné. Umožnili jsme tak jejich zákazníkům jednodušší filtrování kurzů a absolventů.

Engeto nás požádalo o lepší rozdělení stránky pro jednotlivce a firemní návštěvníky. Původní web ani šablona to neumožňovaly v takto velkém rozsahu. Začali jsme se tedy podílet na vytvoření řešení na míru pro ně.

Výhody menu bez JavaScriptu

Menu funguje, jak jsem se již zmínil, bez použití JavaScriptu. Rozhodli jsme se JavaScript nepoužívat, protože podle nás není vždy potřeba a jen zbytečně zdržuje načítání stránky. Byla to pro nás i taková výzva, jestli něco takového zvládneme udělat. Nejvíce jsem asi hrdý na mobilní verzi menu, která má i tlačítko zpět, které se z podmenu vrací do hlavní nabídky.

Mobilní verze menu
Mobilní verze menu
  • Díky tomu, že nebyl použit JavaScript, se stránka nijak nezpomalila při načítání.
  • Zákazníkovi tato úprava umožňuje vyvořit menu přesně podle jeho představ a lépe tak svým studentům představit nabídků kurzů a obsah webu.
  • Každá stránka má ve své administraci možnost nastavit, jaké menu chce v hlavičce zobrazit. V nastavení se pak spravují dvě menu. Jedno pro stránky jednotlivců a druhé pro firemní. To umožňuje velice jednoduchou správu a případné výměny menu za jiné.
  • Hlavní menu je jednoduše upravitelné. Všechny prvky jsou v něm nastavitelné přes WordPress administraci, takže není potřeba zásahu programátora do kódu při nějakém požadavku na změnu. 
WordPress administrace menu na míru
WordPress administrace menu na míru

Abych vás neklamal, tak jeden JavaScriptový kód jsem musel napsat. Divi šablona, která je na tomto webu využita, totiž blokovala používání našeho přístupu na mobilech. Museli jsme tedy napsat JavaScript, který jejich JavaScript obejde. Menu vlastně funguje nejlépe, pokud na celé stránce vypnete JavaScript. Pak vám ale nepojede zbytek stránky.

Jak vzniklo menu na míru

Pro vytvoření menu jsem využil kombinace elementu <label> a checkbox inputů. Díky jejich pojmenování lze tyto dva elementy provázat, i když jsou na úplně jiných místech ve stránce. A co je ještě lepší, že to stejné funguje i pro více <label> elementů navázaných na jeden input. Tak jsem dosáhl možnosti dostat se na mobilech na podmenu a zpátky.

Abych všechny tyto informace dostal do standardního WordPress menu, bylo potřeba napsat vlastní MenuWalker. To je třída, kterou předáte vašemu menu a podle ní se vypisují jednotlivé části menu. Ve třídě si pak můžeme upravit jeho funkce a přidat tak do menu nějaké vlastní položky.

Využití WordPress pluginu

Poslední technologii, kterou jsem použil pro tuto práci, byl WordPress plugin Advance Custom Fields (ACF). 

Jeho možnost přidávání vlastních položek na různá místa WordPress administrace mě stále baví. Narazil jsem ale na jeden drobný problém.

ACF nemá možnost definovat, do jaké úrovně menu chcete nové editovatelné položky přidat.  

Vytvořil jsem tedy kód, který zjišťuje, v jaké úrovni se daná menu nachází, a pak povoluje, případně vypíná ACF položky. To mi umožnilo zpříjemnit administrátorovi práci s editací, protože se mu tam nepletou položky, které by neměl nastavovat a nic by ve výsledku nedělaly.

Pokud máte také zájem o řešení na míru či zrychlení svých webových stránek nebo potřebujete poradit, napište nám, jsme tu pro vás. 

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Proč je dobré mít v týmu obchodníka

Proč je dobré mít v týmu obchodníka

Dnes se zamyslíme nad otázkou: Proč je dobré mít v týmu obchodníka? Existují různé typy agentur. Některé obchodnici nebo obchodníka mají, jiné ne. Ty, co nemají, většinou tvrdí, že ji/ho nepotřebují. Opak je však pravdou. Každá společnost podnikající v on-line světě si dobrou obchodnici či dobrého obchodníka může dovolit, protože se sám zaplatí.

​Proč mít obchodníka, když není potřeba?

Jsou společnosti, které mi tvrdí, že u nich obchodník není potřeba. Že jim chodí spousta poptávek z jejich webu a oni je potom „nějak” zpracují.

Tyto názory jsou velmi krátkozraké a vím, že když si s lidmi z takové společnosti sednu a vysvětlím jim, proč tomu tak není, dají mi za pravdu. 

Dobrý obchodník je k nezaplacení a zařídí spoustu důležitých věcí týkajících se nejen obchodu, jako jsou mezilidské vztahy ve firmě, vztahy mezi klientem a majitelem společnosti, atd.

Z čeho ho zaplatím?

Toto je snad nejpoužívanější otázka při debatě o obchodníkovi. Dobrý obchodník většinou nechce pracovat jen za „paušál”, ale radši si vybere částečnou platbu paušálem, přičemž zajímavější pro něj je pracovat za provizi. Dobrý obchodník totiž ví, že jen začátek spolupráce je vždy složitý, ale po několika měsících může mít díky provizím velmi slušný plat, který v dobré společnosti nemá strop. Co to znamená pro společnost? Jediné. Domluvit se s obchodníkem, jak vysoká bude jeho provize v % a o ty následně zvedne svou hodinovou nebo úkolovou cenu. 10 % nikdo moc nepocítí, 20 % je velmi krásná odměna. 

Jak se pozná dobrý obchodník?

Dobrých obchodníků je jako šafránu. Stát se dobrým obchodníkem si člověk musí zasloužit svou pílí a tréninkem. Poznáte jej podle vystupování. Tento člověk je většinou extrovert a dobře se vám s ním hovoří. I když jej potkáte poprvé, máte pocit, že už jste se někde viděli a že je to váš dlouholetý známý. Každého bere jako partnera, ne jako soupeřícího, neboť ví, že jen z win-win spolupráce jsou dlouholeté pozitivní výsledky.

Čím to je? 

Pokud má nastudované obchodní dovednosti 1. řádu, pak určitě poznal, co jste za člověka a podle toho také tak s vámi hovoří. Dle typologie osobnosti dovede velmi rychle poznat váš charakter, a po pár větách ví, jak s vámi hovořit.

Ovšem pokud má nastudované obchodní dovednosti 2. řádu, nebojí se s vámi jednat, i když vznesete námitku, dotaz. Námitka nebo dotaz je pro něj „hozená rukavice”, kterou zvedne a využije ji. 

Dá to hodně práce se toto všechno naučit, ale pokud to ovládáte, jsou obchodní jednání jedna velká symfonie, která většinou končí spoluprací. Tedy za předpokladu, že klient nejde jen po ceně. 

Co je náplní práce obchodníka?

Dobrý obchodník se na práci nikdy moc neptá, protože si jí dovede zajistit sám. Když zrovna nehledá příležitosti na netu, tak telefonuje nebo odpovídá na poptávky, které vygeneroval váš dokonalý web. V okamžiku, kdy zacítí možnou příležitost, chytne ji za pačesy a nepustí. Pokud mu dáte dobré zázemí a zajímavé ohodnocení, vrátí vám to.

Dobrý obchodník ví, že nejen z akvizice jsou peníze. A proto udržuje neustále styk i s retenčními klienty formou pravidelných telefonátů, schůzek. Své retenční klienty informuje o novinkách ve světě on-line prostoru a vždy najde možnost, jak vylepšit i to, co je již velmi dobré. U akvizicí umí velmi dobře naslouchat potřebám klienta a následně mu ukázat možná řešení. Pokud nemá klient ve své představě jasno, je to právě obchodník, kdo vymyslí celou strategii a odliší klientův obchod od konkurence. Akvizičního klienta obslouží, jak nejlépe umí, a následně si jej přesune do retencí. Nikdy jen tak klienta neopustí a stará se o něj i několik let. 

Jak se stát dobrým obchodníkem?

Za sebe doporučuji tréninky obchodních dovedností od Petra Urbance anebo hledejte adekvátní tréninky někde v místě bydliště. Záleží, jakou formu preferujete. Najděte si někoho na stejné vlně a s ním se neustále pošťuchujte kupředu. Čtěte knížky zaměřené na prodej a procesy s ním spojené. Já osobně mám rád knihy od Roberta Kiyosakiho. Ovšem TOP je Největší obchodník na světě.

Pokud tě fascinuje práce s klienty a patříš do skupiny dobrých obchodníků, pak neváhej a rozšiř naše řady. Právě tebe hledáme.

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Chyby začínajícího tvůrce ve WordPress

Chyby začínajícího tvůrce ve WordPress

Dnes si projdeme, jaké chyby se dají očekávat při začátcích tvorby webů na WordPress. Některým se v začátcích nedá úplně vyhnout, ale jako profík byste s tím již neměli mít větší problém.

1. Šablona

Zde je potřeba se zamyslet jakou a jestli vůbec nějakou použít. Většina free šablon toho umí hodně, ale ty kupované toho umí víc. Obě varianty však nejsou úplně super, když si umíte naskládat web sami jako Custom šablonu

Proč nejsou až tak super? Většina WordPress šablon má v sobě spoustu zajímavých „fičur”, ze kterých využijeme jen zlomek a ten zbytek, který nevyužijeme, se dost často také načítá. Každá milisekunda se počítá. Proto je dobré na toto myslet už v začátku. Za nás doporučujeme GeneratePress.

2. Pluginy

Spousta nováčků velmi ráda používá pluginy. A to doslova na cokoli. Ty můžou být stejně jako šablony jak free, tak placené. U obého je potřeba myslet na to, že WordPress je OpenSource řešení a že kvalitu kódu pluginů nikdo z jádra WordPress nekontroluje. Pokud tedy nejsou přímo ve WP repository. Proto se vám může stát, že vámi použitý plugin nebude až tak dobře komunikovat se šablonou apod. Prosím vás, před každým použitím pluginu se zamyslete, jestli je opravdu potřeba, a nebo jestli není jiná, lepší cesta.  

3. Builder

Toto je fajn řešení, pokud daný builder opravdu ovládáte. Ovšem není builder jako builder a i zde je potřeba vybírat. Nám osobně se nejvíc osvědčil Divi builder, ale máme i dobré reference na Elementor. O ostatních bych se nerad vyjadřoval. Výhoda builderu oproti šabloně je ta, že si dané prvky webu velmi rychle dovedete vyskládat sami. Práci tak vidíte hned a oproti pevně stanoveným hranicím šablony si v builderu můžete prvky upravovat. Nevýhoda je stejná jako u šablon. Mnoho kódu, který nevyužijete.

Elementor

4. Server

Pro menší web s pár stránkami sloužící jako vizitka vám bude běžně stačit snad jakýkoli z dostupných hostingů. Zjistěte si však, jakou má poskytovatel technickou podporu, ať na každý váš požadavek nečekáte týden. Také je dobré zjistit, jestli má hostingová společnost možnost instalace WordPress „na jedno kliknutí.” Také je dobré mít možnost vytvořit si na jednom hostingu tzv. subdoménu kvůli vývojovému prostředí. Jak vytvořit vývojové prostředí si můžete přečíst v článku Jak si vytvořit staging prostředí.

Z českých a slovenských hostingových společností doporučuji WPHosting, ACTIVE 24 + Websupport.

My používáme pro všechny weby VPS servery od DigitalOcean. Zde si vše manažujeme sami. Výhoda je velká rychlost, flexibilita. Nevýhoda je, že na tuto práci potřebujete odborníka

5. SEO

Často podceňované. Spousta začínajících tvůrců toto „odvětví” buďto záměrně přehlíží nebo jen na „to” prostě zapomene. Dnes ještě přitom stačí dodat základní informace pro google do google searche consol a vypsat data v backendu do pluginu k tomu určenému, aby byl váš web velmi brzy indexován. Nezapomínejte také na data u fotek a optimalizaci jejich velikosti. Pokud se rozhodnete psát články, ve kterých využijete spoustu klíčových slov, tak je to taky fajn. Každý web si to zaslouží. Jak psát články si můžete přečíst například v článku Seo – Jak psát články, aby byly čitelné a optimalizované pro vyhledávače

Pro nastavení základních popisů na stránkách používáme plugin od YOAST.

Při tvorbě se vždy držte hesla: „Málo je leckdy víc než hodně.” 

Denně se setkáváme s weby, které mají koupenou šablonu, 40 pluginů a k tomu všemu builder. Jedno s druhým a třetím nechce nebo neumí komunikovat. Věřte mi, že toto není cesta k úspěchu. Majitelé těchto stránek jsou následně nešťastní, že ačkoli zaplatili za tvorbu pěkného, rychlého a bezpečného webu, zůstalo z toho všeho v lepším případě jen to, že je to pěkné. Rychlost a bezpečnost se někam vytratila. Opravy těchto webů už ani moc neděláme, neboť jsme zjistili, že vytvořit novýweb je pro nás i pro klienta stejně a nebo méně finančně náročné

Nad každou věcí, než jí použijete, opravdu přemýšlejte. A pokud si nebudete vědět rady, ozvěte se nám a my vám rádi pomůžeme

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

10 let společnosti

10 let společnosti

Zeni team s. r. o. letos slaví své 10. výročí. Vše začalo 19. prosince léta páně v roce 2011, když Róbert a David založili společnost Vitix company s.r.o.. Ta měla původně sloužit jako základ pro e-shop s pneumatikami, který si vytvořili. Online prostor se jim zalíbil a postupně začali vyvíjet webové stránky i pro ostatní zákazníky. 

Nejprve se David a Róbert pokoušeli o vývoj vlastního CMS systému, který nesl pracovní název CMS Delfín. Po nějaké době se rozhodli, že pro zvýšení kvality bude vhodnější začít budovat na tom, co už je vytvořeno, a co vytvořila WordPress komunita.

Proč WordPress?

WordPress se stal naším oblíbeným nástrojem pro tvorbu webových stránek, a není tomu tak jenom u nás. Svědčí o tom i fakt, že více než 43 % stránek využívá právě WordPress. Nepoužíváme WordPress proto, že bychom si mysleli, že je tím nejlepším řešením pro všechno. Používáme ho proto, že ho máme nejraději.

  • Je flexibilní – postavíte na něm cokoliv.
  • Umožňuje jednoduše nasazovat i testovat změny pro udržení kroku s neustále proměnlivou dobou.
  • Má skvělou, zkušenou a znalou komunitu.

Podrobněji si důvody, proč stavíme weby na WordPress, můžete pročíst na naší stránce. 

WordPress komunita

S využíváním WordPress úzce souvisí i WordPress komunita. Róbert jednoho krásného dne vytáhl Davida na WordCamp do Bratislavy a bylo vystaráno. Davida přednášky tak zaujaly, že se začal aktivně zapojovat do dění ve WordPress komunitě. David se domluvil s Janem Bočíncem ze společnosti Webikon a začali spolu organizovat Brněnské WordPress meetupy. Následoval WordCamp Brno 2017 až 2019. Samožřejmě návštěva a pomoc na některých WordCamp – Praha, Bratislava, Europe Víděň, Paříž, Bělehrad. 

Kvalita a růst

Nejen činností ve WordPress komunitě je člověk živ, a tak David začal aktivně akvizovat klienty, kteří podle jeho uvážení potřebují kvalitní web k prodeji jejich výrobků či služeb. Na začátku si dal zdravý cíl, a to každý rok zvýšit obrat společnosti ruku v ruce se zvyšující se kvalitou. Letošní obrat tak činí už přes 3,5 miliónů. Meziroční nárůst o 35%.

David a Róbert pro realizování své vize potřebují kolem sebe tým, který se rok od roku zvětšuje. Hned na začátku si dali předsevzetí, že v týmu chtějí mít nejen seniory, kteří vykouzlí super kód, kvalitní plugin, či parádně nastaví server, ale také juniory, kteří se budou od seniorů učit a následně posílí jejich řady. Dnes jsou v Zeni posádce grafik, copywriter, frontend a backend vývojáři, dále marketérka, copywriterka, SEO specialista a v neposlední řadě testerka. 

Proč oslavujeme 10. výročí a proč je pro nás tak důležité?

Statistiky o firmách uvádějí, že ze 100 firem přežije prvních 5 let jenom cca 10. Dalších 5 let přežijí už jen cca 3, a to už o něčem svědčí. My v těchto dnech slavíme 10 let. 10 let bez úvěrů, půjček, 10 let budování systému, o kterém můžeme říct, že funguje. Takhle jsme slavili 10. výročí:

K tomuto výročí jsme si nechali udělat audit u 2 různých společností. Jeden z nich od společnosti Bisnode (nově Dun&Bradstreet), ve které z vás „svlečou kůži” a druhý u Prověřená společnost. U první společnosti máme hodnocení AA, přičemž AAA je nejvyšší meta. U druhé jsme na začátku roku dostali stříbrné ocenění a těsně před výročím zlaté

Za tu dobu jsme udělali nespočet práce. Vytvořili jsme mnoho rychlých a spolehlivých webů, také přístupné weby pro školy a školky, spustili vlastní plugin, vysadili ovocné stromy pro radost a pokračujeme s dalšími vizemi. Jsme rádi, že nás i naše kolegy práce v naší svobodné společnosti baví a že se navzájem obohacujeme. Těší nás všechny spolupráce a těšíme se na nové!

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Zeni a výsadba stromů

Zeni a výsadba stromů

Naše společnost Zeni team s.r.o., jakožto součást WordPress komunity, se v tomto roce rozhodla podpořit myšlenku týmu konference WordCamp, který v roce 2019 začal s výsadbou stromů nového ovocného sadu v Otnicích. Díky nám tento rok vznikla jeho druhá polovina.

WordPress komunita a výsadba

V Zeni rádi podpoříme dobré myšlenky a jednou z těch, která nás zaujala, byla myšlenka vysázení stromů, se kterou před dvěma lety začala WordPress komunita. WordPress akce výsadby tehdy přinesla do Otnic až 45 nových stromů! Myšlenka nás zaujala o to víc, když jsme zjistili, že vysázené stromy by měli být ovocné a vznikne tak dobrý a voňavý ovocný sad. Ovocné stromy mají navíc nejdelší životnost, protože ty na vysokokmenu vydrží růst i déle jak 70 roků. Kolemjdoucí si tak budou moci na ovoci pochutnat dlouhodobě.

WordPress komunita díky novým stromům také vyrovnala v roku 2019 CO2 stopu WordCamp Brno 2019 konference, která se však v následujících letech konala jen v on-line prostoru. Zeni se WordCampu Brno 2019 účastnilo také. O události si můžete přečíst více v článku Zeni a WordCamp Brno 2019.

Výsadba stromů

Zeni team tento rok oslavuje své 10. narozeniny, a proto jsme přišli s nápadem, že k 45 stromů vysázených na akci WordPress přispějeme a dosadíme dalších 45. Společně s obyvateli Otnic se tak 13.11.2021 vysadila druhá polovina ovocného sadu a vzniklo potěšení pro všechny, kteří půjdou okolo.

výsadba ovocných stromů

Ovocný sad bude nabízet občerstvení na 90 různých stromech, mezi kterými si můžete pochutnat na třešních, jablkách, hruškách, meruňkách a švestkách. Díky různým odrůdám najdete v rámci vaší procházky ovoce na stromech od jara až do podzimu.

Vize do budoucna

Kdysi bývaly sady, ve kterých jsme se mohli projít a pochutnat si, skoro u každé vesnice. Zeni by ráda do budoucna každý rok takto přispěla 50 ovocnými stromy, které si budou moct obyvatelé vesnic společně vysadit. Ovocné sady, které vzniknou na jejich pozemku, budou moci navštívit všichni, kteří půjdou okolo. Vytvoříme tak malou ovocnou radost nejen pro lidi, ale i pro přírodu a matku Zemi, která stromy v dnešní době velmi potřebuje. 

Obyvatelé Otnic sází ovocné stromy

O projektu vytváření ovocných sadů budete od nás ještě určitě informováni! Jestli nechcete nic zmeškat, nebo se chcete dozvědět novinky o světě WordPress, přihlaste se k odběru novinek, rádi vás přivítáme.

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.

Rychlost a spolehlivost webové stránky pro A-technology

Rychlost a spolehlivost webové stránky pro A-technology

Jedním z našich spokojených zákazníků je i A-technology. Realizovali jsme pro ně kompletně nový návrh webové stránky – od grafického návrhu, přes šablonu a plugin na míru, až po plně funkční web. Přečtěte si, jak jsme postupovali při tvorbě webové stránky, jaké funkcionality jsme vytvořili a jak jsme dosáhli rychlost a spolehlivost jejich webové stránky.

A-technology 

Společnost A-technology již od roku 2006 realizuje řešení systémů vytápění a chlazení při výstavbě a provozu komerčních a obytných budov. Nabízejí také systémy technologického ohřevu a chlazení jako například solární systémy, klimatizace, či podlahové vytápění.

Pro A-technology jsme vytvořili nový návrh webové stránky a spolu s ním jsme do webu zakomponovali různé zajímavé funkcionality dle požadavků klienta.

Jak jsme postupovali při tvorbě webové stránky?

  1. Nejdůležitější je komunikace s klientem. V první řadě jsme si společně ujasnili představu a vydefinovali si, co klient požaduje.
  2. Náš grafik Jarda vytvořil wireframy kde definoval konkrétní prvky, které bude webová stránka obsahovat. Následně dodal grafický návrh klientovi, který jsme společně prodiskutovali.
  3. Následovala samotná tvorba šablony a pluginu na míru dle požadavků klienta, o kterou se postarali developeři ja (Daniel) a Zbyněk.
  4. Po vytvoření stránky byla stará webová stránka nahrazena novou – rychlejší a spolehlivější.
  5. Postupně jsme přidávali další funkcionality a dodávali nové změny klientovi.

Jaké funkcionality jsme dělali pro A-technology?

  • Komunikace s externím servisem pro objednávku servisu

Zajistili jsme okamžité řešení požadavků klientů díky napojení formuláře přímo na dodavatele. Dodavatel dostane vyplněný formulář, přímo do jeho interního systému HELIOS přes API, díky čemuž může automaticky poskytnout žádaný servis klientovi, bez zbytečných prostojů a zároveň si může pracovník servisu naplánovat efektivně pracovní den bez zbytečně najetých kilometrů.

  • Automatické vyplňování adresy

Součástí formuláře je i automatické vyplnění adresy na základě zvoleného místa na mapě ve formulářích, což ušetří čas.

  • Výpočet času čtení článku

Každá aktualita obsahuje informaci o tom, kolik času zabere čtení článku. Díky této funkcionalitě čtenář může očekávat, jak dlouho bude na stránce a v konečném důsledku to může přispět ke snížení míry opouštění stránky čtenářem.

  • Prezentační stránky

Jde o tradičnější, ale velmi důležité funkcionality jako reference, používané technologie, informační stránky či blog.

  • Kalkulačka

Vypočítá předběžnou cenu objednávky v € a CZK na základě technologií, které by dle zákazníka služba měla obsahovat. Tato funkcionalita se pro klienta momentálně připravuje.

Rychlá a spolehlivá webová stránka

Rychlost

  • Používáme pouze nutné minimum javascriptu.
  • Stylování (css) je v šabloně rozděleno tak, aby načetlo jen to, co je potřebné pro danou stránku.
  • Lazy load médií – načítání obrázků atd. neblokuje prohlížeč a postupně se donačítavají, aby byla webová stránka co nejdříve interaktivní.
  • Tvoříme kód s důrazem na výkon stránky.
  • Využíváme co nejméně pluginů třetích stran, které běží při načítání stránky.
  • Používáme caching, který výrazně urychluje načítání stránek.
Rychlost webu A-technology 94 % na počítači

Spolehlivost

  • Při tvorbě webových stránek používáme pouze ověřené a otestované pluginy. O většinu funkcionalit se starají developeři, čímž se limituje závislost na třetích stranách. Případné problémy proto můžeme řešit přímo.
  • Všechny pluginy jsou pravidelně updatované kvůli opravám chyb a bezpečnostním dírám.
  • Před tím, než cokoli přidáme na produkční server, to otestujeme na stagingu.
  • Pravidelně monitorujeme stav serverů.

Možnost přidání funkcí na základě požadavku klienta

Na modifikovatelnost a rozšiřitelnost myslíme u všech nových funkcionalit. Vytvořili jsme custom plugin a šablonu na Sage, které mají přehlednou strukturu umožňující pokračovat dále ve vývoji. Jednoduše můžeme přidávat nové funkce, protože počítáme s tím, že klient může kdykoli požadovat jakoukoliv změnu.

Přístupnost stránky

Také pro A – Technology jsme vytvořili webovou stránku tak, aby splňovala všechna kritéria.Web jsme udělali co nejvíc přístupný, optimalizovaný pro mobily, který je rychlý, bezpečný a spolehlivý. Pokud máte i vy zájem o takovou webovou stránku, neváhejte se na nás obrátit.

Sdílej na:

Další články:

Nenechte si nic uniknout!

Přihlaste se k odebírání Newsletteru, ve kterém zasíláme nejzajímavější tipy pro úspěšné webové stránky.