WP-CLI – Spravujte weby ve WordPress lépe a rychleji

WP-CLI – Spravujte weby ve WordPress lépe a rychleji

WP-CLI vám umožňuje spravovat webové stránky pomocí jednoduchých příkazů, aniž byste museli procházet mnoha stránkami v administraci WordPress. Ať už jste vývojář nebo administrátor, WP-CLI vám může ušetřit spoustu času a dokonce i nedostupné webové stránky vrátit k životu.

Co je WP-CLI?

WP-CLI je rozhraní příkazového řádku pro WordPress. To znamená, že definuje příkazy, které můžete spouštět na svém serveru a můžete je použít k provádění běžných akcí. Úkoly, jako je správa příspěvků, uživatelů, pluginů, šablon a možností webových stránek, lze provádět v příkazovém řádku. V tomto článku se podíváme na některé praktické případy použití.

Jak můžete používat WP-CLI?

WP-CLI není součastí výchozí instalace WordPress. Naštěstí mnoho poskytovatelů WordPress hostingu již tento nástroj zavedlo a zpřístupnilo svým uživatelům. Zda máte tuto funkci zahrnutou, můžete zjistit v podrobnostech vašeho hostingového plánu nebo se můžete obrátit na vašeho poskytovatele hostingu. WP-CLI je také součástí Trellis, který používáme ke správě serverů pro naše klienty v Zeni.

Pokud zjistíte, že nemáte přístup k WP-CLI na vašem serveru a za předpokladu, že máte SSH přístup na váš server nebo chcete pracovat s WP-CLI lokálně na vašem počítači, můžete jej zprovoznit pomocí několika příkazů. Na OS X a Linux vás může okamžitě dostat k plně funkčnímu WP-CLI tyto příkazy:

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp

Pokud používáte Windows nebo vás zajímají jiné způsoby instalace, můžete se podívat na dokumentaci WordPress.

Urychlete časově náročné úkoly pomocí WP-CLI

Ve WordPressu existuje mnoho administrativních úkolů, které si vyžadují provést více opakujících se akcí, abyste se dostali k cíli. To může zahrnovat mnoho načtení stránky a kliknutí, co vám zabere několik minut, v některých případech možná i hodiny. Díky WP-CLI můžete tyto úkoly provádět mnohem snadněji. Urychlit pomocí WP-CLI lze zejména hromadné akce, jako je například správa více pluginů nebo médií.

Nainstalujte více pluginů najednou

Začínáte s novým webem a chcete nainstalovat více pluginů, které pravidelně používáte, nebo jste právě obdrželi požadavek na instalaci několika nových pluginů? Pomocí WP-CLI budete muset napsat pouze jeden příkaz. Následující příkaz nainstaluje 2 pluginy a aktivuje je pomocí activate flagu:

wp plugin install bbpress classic-editor --activate

Tento příkaz také umožňuje instalaci pluginů z archivů zip. Podporovány jsou také lokální cesty:

wp plugin install https://example.com/plugin.zip

Pomocí příkazu wp plugin můžete dosáhnout mnohem více, například aktualizovat všechny pluginy na vašem webu. Doporučuji se podrobně podívat na dokumentaci příkazu wp plugin.

Hromadný import médií

Pomocí jednoduchého příkazu můžete snadno importovat více médií. Zde budeme importovat všechny soubory JPG ve složce uživatele v adresáři Pictures. Tím se zkopírují soubory z původní složky a automaticky se zaregistrují jako přílohy:

wp media import ~/Pictures/**\/*.jpg

Pokud vás zajímají příkazy zaměřené na média, můžete se podívat na příkaz wp media.

Správa uživatelů

Příkaz wp user pomáhá se všemi úkoly souvisejícími se správou uživatelů. Zde je příklad vytvoření uživatele daniel s e-mailovou adresou [email protected] a s rolí administrátor. Tento přesný příkaz jsem použil nesčetněkrát, když byl nový projekt, na kterém jsem pracoval:

wp user create daniel [email protected] --role=administrator

Díky WP-CLI je správa uživatelských hesel, rolí, oprávnění a dalšího velmi pohodlná. Pokud vás zajímá správa uživatelů, zde najdete více o příkazu wp user.

WP-CLI a řešení technických problémů

WP-CLI je skvělým pomocníkem, když se snažíte řešit technické problémy, jak uvidíme v následujících řádcích.

Debugování problémů šablon a pluginů

Představte si, že jste právě aktivovali vadný plugin, kvůli kterému je administrace WordPressu nepřístupná. WP-CLI vás může v této situaci zachránit pomocí jediného příkazu:

wp plugin deactivate faulty-plugin

Podobně pomocí WP-CLI můžete aktivovat různé šablony, pokud se domníváte, že aktuální téma způsobuje potíže. Následující příklad aktivuje zvolenou šablonu:

wp theme activate different-theme

Práce s nastaveními

Potřebujete rychle změnit nastavení? Tohle se může hodit, když chcete zjistit, zda má váš aktuální problém něco společného s aktuální konfigurací nebo pokud změna nějakých nastavení není přímo možná v administraci. V tomto příkladu změníme aktuální administrátorský e-mail:

wp option update admin_email [email protected]

Více o práci s nastaveními naleznete v dokumentaci příkazu wp option.

Správa databáze

WP-CLI je také skvělé pro správu databáze. Pomocí následujícího příkazu můžete snadno vytvořit zálohu aktuální databáze a uložit ji do aktuálního uživatelského adresáře:

wp db export ~/backup.sql

Tohle je extrémně užitečné, když chcete vytvořit export databáze pro použití na stagingu nebo lokálním vývojovém prostředí nebo vytvořit zálohu před provedením nějaké riskantní akce, jako je aktualizace struktury databáze kvůli nějakému pluginu. Pokud se něco pokazí, můžeme to snadno vrátit pomocí tohoto příkazu:

wp db import ~/backup.sql

Pokud plánujete experimentovat, důrazně doporučujeme, abyste to nedělali na produkčním prostředí orientovaném na zákazníka. K tomu lze použít stagingový server. Co je to stagingové prostředí se dozvíte v našem článku Sedm důvodů proč používat staging pro váš projekt ve WordPress. Pokud vás zajímá tvorba staging prostředí, můžete se o tom dozvědět v našem článku Jak vytvořit staging prostředí?

Další užitečnou funkcí je schopnost rychle vstoupit do rozhraní příkazového řádku databáze ke spuštění SQL pomocí následujícího příkazu:

wp db cli

Nahraďte všechny výskyty nějaké hodnoty

Představte si, že web byl přesunut na jinou URL nebo chcete použít svou produkční databázi na stagingu. Po importu databáze na nový server rychle zjistíte, že některé odkazy nefungují a že mediální soubory nejsou viditelné. Je to proto, že WordPress bohužel v mnoha případech používá absolutní adresy URL. K vyřešení tohoto problému má WP-CLI velmi užitečný příkaz známý jako wp search-replace. Pomocí tohoto příkazu můžete velmi jednoduše nahradit všechny staré adresy URL novými:

wp search-replace https://old-website.old https://new-website.new --dry-run

dry-run flug na konci je zde velmi užitečný, protože spustí celou operaci hledání/nahrazení se zobrazením reportu, ale do databáze se neuloží žádné změny. Rozhodně je dobré spustit tento příkaz nejprve způsobem dry run a po kontrole zprávy jej spustit bez dry-run.

Generujte fiktivní obsah pomocí WP-CLI

Toto je velmi užitečné pro vývojáře, kteří potřebují nějaký simulovaný obsah na webu pro účely vývoje. Například pomocí několika příkazů můžete generovat desítky příspěvků, uživatelů, kategorií a komentářů. Zde je několik příkladů:

wp user generate --role=subscriber --count=50
wp post generate --count=200 --post_type=post
wp post generate --count=20 --post_type=page
wp term generate category --count=10
wp comment generate --count=10 --post_id=123

Získáte tak web s 50 novými uživateli, 200 příspěvky, 20 stránkami, 10 kategoriemi a náš vybraný příspěvek má již 10 komentářů. To simuluje aktivní stránky, které existují již nějakou dobu, a nemuseli jsme nic dělat manuálně. Můžeme snadněji začít pracovat na vývoji WordPress šablony nebo pluginu.

Lze dosáhnout hodně

V tomto článku jsme představili mnoho případů použití WP-CLI, ale to není zdaleka vše, co je pomocí tohoto nástroje možné. Abyste se seznámili se všemi možnostmi, neexistuje lepší zdroj než WordPress dokumentace. Doufám, že vám WP-CLI pomůže stát se lepším vývojářem nebo administrátorem.

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.

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.

6 způsobů, jak zvýšíte rychlost a výkon vaší webové stránky ve WordPress

6 způsobů, jak zvýšíte rychlost a výkon vaší webové stránky ve WordPress

Všechno se zrychluje. Mnozí chtějí mít nejdůležitější informace co nejrychleji a získávat je bez zbytečného čekání. Rychlost očekáváme hlavně při procházení webových stránek. Nedostatečný výkon a pomalé načítání vedou ke zvýšení míry opuštění vaší stránky. Jak dopomoci ke zrychlení webové stránky ve WordPress se dozvíte v dnešním článku.

Proč je rychlost webové stránky důležitá?

Google doporučuje za nejoptimálnější rychlost načítání v případě 3G připojení 5 a méně vteřin. Pokud doba načítání vaší stránky přejde z 1 sekundy na 3, pravděpodobnost okamžitého odchodu se zvyšuje o 32 %. V případě nárůstu doby načítání webu z 1 vteřiny na 10 se zvyšuje až o 123 %! Alarmující však je, že podle Google analýzy (2018) se mobilní weby načítají v průměru až 15 vteřin. Rychlost webové stránky ovlivňuje až téměř 70 % spotřebitelů. Pravděpodobnost jejich nákupu s rychlostí webu stoupá. Pokud je webová stránka pomalá, přicházíte o zákazníky a snižujete míru konverze. Rychlost vaší webové stránky je také velmi výrazným SEO faktorem. Proto se při tvorbě webových stránek ve WordPressu vždy snažíme dbát na rychlost a výkon webu a děláme vše proto, abychom ji správně optimalizovali bez použití přílišného množství pluginů. Objektivní přehled o tom, jestli je váš web rychlý, si můžete udělat pomocí různých nástrojů, doporučujeme Google PageSpeed Insights, ale existuje mnoho dalších například GTmetrix či WebPageTest. Pojďme se podívat, na některé z možností, jakými zlepšujeme výkon webových stránek a optimalizujeme je.

1. Méně reklam

Velké množství reklam může škodit vašemu webu, jelikož reklamy načítají JavaScript, CSS a média, čímž mohou velmi zpomalit stránku a také zhoršit uživatelský zážitek.

2. Rozdělte dlouhé stránky

Dlouhé stránky zpomalují načítání webu.

  • Pokud má některá z vašich stránek na webu příliš mnoho obsahu, možná by bylo vhodnější ji rozdělit na několik.
  • Na délku dbejte i při psaní článků na váš blog. Někdy je lepší článek rozdělit na více článků, čímž také přispějete ke zrychlení webu.

3. Aktuálnost WordPress, pluginů a PHP

Ve WordPress vývojáři pluginů neustále pracují na vylepšeních, a proto je dobré si je pravidelně aktualizovat. Velký vliv na výkon WordPress stránky má také verze PHP. Cloudways zveřejnili výsledky jejich benchmarkingového testu, který sledoval zlepšování výkonu stránek od verze PHP 5.6 po 8.0. Níže uvedený graf ukazuje, že výkon se neustále zlepšuje. Oproti současnému PHP 8.0 s nejrychlejším časem načítání 164 ms vyšel PHP 5.6 téměř 3krát pomalejší.

Zeni team - průměrná doba odezvy
Zeni team – průměrná doba odezvy

4. Caching

Přednačte a připraví obsah stránky, aby se minimalizovalo počítání a načítání z databáze při přístupu na stránku. Uživatel dostane při načítání stránky předpřipravenou verzi, čímž se může až několikanásobně zvýšit načítání webu.Aby se v budoucnu mohly požadavky na údaje vyřešit rychleji, caching si tyto údaje ukládá.Součástí každého produkčního webu by měl být jistě Caching plugin, díky kterému získáte obrovské množství výkonu webu. Pro naše WordPress klienty nastavujeme Redis Cache, který umožňuje cachování pomocí in memory databáze.

5. CDN (Content Delivery Network)

  • Jde o skupinu serverů, které jsou geograficky blíže vašim návštěvníkům, a tak snižují odezvu při načítání stránky.
  • Po nastavení CDN se váš obsah (obrázky, videa…) uloží do vyrovnávací paměti na proxy serverech a načítá se ze serveru v blízkosti polohy vašeho návštěvníka, díky čemuž se sníží odezva a obsah se načte rychleji.
  • Pro naše klienty používáme službu Cloudfare CDN, kterou jim nastavujeme a je standartní pro všechny stránky, které máme ve správě.

6. Kvalitní hosting

Pokud si myslíte, že jste pro zrychlení vašeho webu zkoušeli už všechno, ale stále nedosahujete požadovaných výsledků, je vhodné se zamyslet nad změnou poskytovatele hostingu.My v Zeni vám umíme nabídnout hosting, který zrychlí váš web. Také dokážeme pomoci se zrychlením webu a zvýšením vaší návštěvnosti. Ozvěte se nám a rádi vám poradíme.

ODKAZY

  1. Page Speed Report
  2. New Industry Benchmarsk
  3. Mobile site speed statistics
  4. Performance Benchmarks for WordPress

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.

Tvorba webové stránky pro i4comfort

Tvorba webové stránky pro i4comfort

Aplikace i4comfort od společnosti A-technology přináší komplexní a jednoduchá řešení ovládání technologií ve vašem domě na dálku. Myšlenka úspory v oblasti vytápění, a tím i zmenšení CO2 stopy pomocí inteligentního ovládání technologií, nás zaujala a bylo nám potěšením podílet se na tvorbě webové stránky pro tuto aplikaci. 

Proč a jak vznikla stránka

Stránky pro i4comfort jsme vytvářeli v CMS WordPress pro již stávajícího klienta, kterému jsme již letos spustili kompletně nový produkční web. Společnost A-TECHNOLOGY s.r.o. má své prezentační stránky a-technology.cz, proto bylo důležité nadesignovat webovou stránku i4comfort v podobném duchu jako tu mateřskou a zároveň vytvořit webové stránce vlastní identitu.

Porovnání staré a nové stránky

Stará webová stránka i4comfort měla několik nedostatků:

  • Nesplňovala kritéria zabezpečení.
  • Chybělo vývojové prostředí v podobě stagingu.
  • Logo a vzhled byly zastaralé.
  • Web nebyl responzivní.
Stará webová stránka

Nová stránka:

  • Webová stránka je plně responzivní.
  • Má na více místech CTA tlačítko, které vyzývá k akci, díky čemuž je větší pravděpodobnost získání si zákazníka.
  • Vytvořili jsme nové logo a nadesignovali nový vzhled stránky.
Hlavní stránka i4comfort

Grafika webové stránky

  • Tvorba webové stránky ve WordPress pro i4comfort graficky navazovala na zmiňovanou mateřskou stránku.
  • Stránka má unikátní a zapamatovatelný design.
  • Vytvořením osobité identity stránky je samozřejmé, že jde o samostatný web.
  • Zákazník a-technology zároveň získává familiární pocit.
  • Informace nejsou komunikovány pouze textově, ale jsou znázorněny na mnoha místech graficky, díky čemuž jsou více zapamatovatelné a přehledné.

Technické funkce

Moderní zážitek

Webová stránka disponuje mnoha vizuálními efekty, které jsou zakomponovány tak, že stránku nezpomalují. Web je také responzivní na jakémkoli zařízení.

  • Mnohé animace a interaktivní části využívají čistě možnosti stylování (css).
  • Není nutné donačítat JavaScript ani kvůli některým rozklikatelným interaktivním sekcím, u kterých se jinde běžně používá.
  • Stránka je tak rychlejší, zároveň poskytuje stejně kvalitní zážitek, jako např. zde:
Vizuální efekty webové stránky

Stránka na uživatele reaguje

Symboly jednotlivých technologií se mění podle toho, o čem uživatel momentálně čte. Podle pozic na stránce se mění i CTA tlačítko, ikony, či navigační prvky (horní menu, tečky vpravo). Vše si můžete prohlédnout na stránce „Jak funguje i4comfort“.

Webová stránka na uživatele reaguje

Na stránce ,,Možnosti využití” se také interaktivně mění obrázky podle toho, o čem uživatel čte. Čtenář si tak jednoduše představí jednotlivé prvky, o kterých čte a také si je lépe zapamatuje.Toto vše vytváří unikátní, rychlou a interaktivní zkušenost, která zaujme uživatele.

Výhody nové webové stránky

Šablona na sage

Lehká konfigurovatelnost

  • Námi naprogramované téma pro WordPress umožňuje snadnou konfigurovatelnost.
  • Pro každou stránku je zvláště nastavitelné chování a styl hlavičky stránky.
  • Veškerý obsah je jednoduše editovatelný bez nutného zásahu vývojáře.

Použitelnost z hlediska mobil/desktop

Desktopové prostředí není ani zdaleka jen zvětšeným mobilním prostředím. Myslíme na dobrou zkušenost pro každého uživatele.

  • Na desktopu je využíván veškerý prostor, díky čemuž je na obrazovce poskytnuto co nejvíce informací a ani na velké obrazovce web nepůsobí prázdný.
  • Uživatelská zkušenost na mobilu je zároveň přizpůsobena používání pomocí prstu a také menší obrazovce.
  • Na mobilu je vše jednoduše klikatelné, snadno a rychle dostupné.
  • Mnohé sekce vypadají v porovnání mobilu a desktopu výrazně odlišně.
  • Pro lepší zážitek byly pro mobil mnohé části zjednodušeny, některé vizuální aspekty používané pro desktop vynechány, jelikož neměly pro mobilního uživatele přidanou hodnotu.
Webová stránka je responzivní

Pro i4comfort jsme vytvořili nový web se spoustou vychytávek, který je zároveň rychlý a přehledný. Pokud potřebujete pomoci s tvorbou webové stránky a chcete poskytnout svým zákazníkům kvalitní zážitek, neváhejte se na nás obrátit, rádi vám 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.