WP-CLI – Spravujte weby vo WordPress lepšie a rýchlejšie

WP-CLI – Spravujte weby vo WordPress lepšie a rýchlejšie

WP-CLI vám umožňuje spravovať webové stránky pomocou jednoduchých príkazov bez toho, aby ste museli prechádzať mnohými stránkami v administrácii WordPress. Či už ste vývojár alebo administrátor, WP-CLI vám môže ušetriť veľa času a dokonca vrátiť k životu aj nedostupné webové stránky.

Čo je WP-CLI?

WP-CLI je rozhranie príkazového riadka pre WordPress. To znamená, že definuje príkazy, ktoré môžete spúšťať na svojom serveri a môžete ich použiť na vykonávanie bežných akcií. Úlohy, ako je správa príspevkov, užívateľov, pluginov, tém a možností webových stránok, je možné vykonávať v príkazovom riadku. V tomto článku sa pozrieme na niektoré praktické prípady použitia.

Ako môžete používať WP-CLI?

WP-CLI nie je súčasťou východiskovej inštalácie WordPress. Našťastie mnoho poskytovateľov WordPress hostingu už tento nástroj zaviedlo a sprístupnilo svojim používateľom. Či máte túto funkciu zahrnutú, môžete zistiť v podrobnostiach vášho hostingového plánu alebo sa môžete obrátiť na vášho poskytovateľa hostingu. WP-CLI je tiež súčasťou Trellis, ktorý používame na správu serverov pre našich klientov v Zeni.

Ak zistíte, že nemáte prístup k WP-CLI na vašom serveri a za predpokladu, že máte SSH prístup na váš server alebo chcete pracovať s WP-CLI lokálne na vašom počítači, môžete ho spustiť pomocou niekoľkých príkazov. Na OS X a Linux vás môžu okamžite dostať k plne funkčnému WP-CLI tieto prí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

Ak používate Windows alebo vás zaujímajú iné spôsoby inštalácie, môžete sa pozrieť na dokumentáciu WordPress.

Urýchlite časovo náročné úlohy pomocou WP-CLI

Vo WordPresse existuje mnoho administratívnych úloh, ktoré si vyžadujú vykonať viac opakujúcich sa akcií, aby ste sa dostali k cieľu. To môže zahŕňať mnoho načítaní stránky a kliknutí, čo vám zaberie niekoľko minút, v niektorých prípadoch možno aj hodín. Vďaka WP-CLI môžete tieto úlohy vykonávať oveľa ľahšie. Urýchliť pomocou WP-CLI je možné najmä hromadné akcie, ako je napríklad správa viacerých pluginov alebo médií.

Nainštalujte viac pluginov naraz

Začínate s novým webom a chcete nainštalovať viac pluginov, ktoré pravidelne používate, alebo ste práve dostali požiadavku na inštaláciu niekoľkých nových pluginov? Pomocou WP-CLI budete musieť napísať iba jeden príkaz. Nasledujúci príkaz nainštaluje 2 pluginy a aktivuje ich pomocou activate flagu:

wp plugin install bbpress classic-editor --activate

Tento príkaz taktiež umožňuje inštaláciu pluginov z archívov zip. Podporované sú aj lokálne cesty:

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

Pomocou príkazu wp plugin môžete dosiahnuť oveľa viac, napríklad aktualizovať všetky pluginy na vašom webe. Odporúčam sa podrobne pozrieť na dokumentáciu príkazu wp plugin.

Hromadný import médií

Pomocou jednoduchého príkazu môžete ľahko importovať viac médií. Tu budeme importovať všetky súbory JPG v priečinku užívateľa v adresári Pictures. Tým sa skopírujú súbory z pôvodného priečinka a automaticky sa zaregistrujú ako prílohy:

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

Pokiaľ vás zaujímajú príkazy zamerané na médiá, môžete sa pozrieť na príkaz wp media.

Správa užívateľov

Príkaz wp user pomáha so všetkými úlohami súvisiacimi so správou užívateľov. Tu je príklad vytvorenia užívateľa daniel s e-mailovou adresou [email protected] a s rolou administrátor. Tento presný príkaz som použil nespočetnekrát, keď bol nový projekt, na ktorom som pracoval:

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

Vďaka WP-CLI je správa užívateľských hesiel, rolí, oprávnení a ďalšieho veľmi pohodlná. Pokiaľ vás zaujíma správa užívateľov, tu nájdete viac o príkaze wp user.

WP-CLI a riešenie technických problémov

WP-CLI je skvelým pomocníkom, keď sa snažíte riešiť technické problémy, ako uvidíme v nasledujúcich riadkoch.

Debugovanie problémov tém a pluginov

Predstavte si, že ste práve aktivovali chybný plugin, kvôli ktorému je administrácia WordPressu neprístupná. WP-CLI vás môže v tejto situácii zachrániť pomocou jediného príkazu:

wp plugin deactivate faulty-plugin

Podobne pomocou WP-CLI môžete aktivovať rôzne témy, ak si myslíte, že aktuálna téma spôsobuje problémy. Nasledujúci príklad aktivuje zvolenú tému:

wp theme activate different-theme

Práca s nastaveniami

Potrebujete rýchlo zmeniť nastavenia? Toto sa môže hodiť, keď chcete zistiť, či má váš aktuálny problém niečo spoločné s aktuálnou konfiguráciou alebo ak zmena nejakých nastavení nie je priamo možná v administrácii. V tomto príklade zmeníme aktuálny administrátorský e-mail:

wp option update admin_email [email protected]

Viac o práci s nastaveniami nájdete v dokumentácii príkazu wp option.

Správa databázy

WP-CLI je tiež skvelé pre správu databázy. Pomocou nasledujúceho príkazu môžete jednoducho vytvoriť zálohu aktuálnej databázy a uložiť ju do aktuálneho užívateľského adresára:

wp db export ~/backup.sql

Toto je extrémne užitočné, keď chcete vytvoriť export databázy pre použitie na stagingu alebo lokálnom vývojovom prostredí alebo vytvoriť zálohu pred vykonaním nejakej riskantnej akcie, ako je aktualizácia štruktúry databázy kvôli nejakému pluginu. Pokiaľ sa niečo pokazí, môžeme to ľahko vrátiť pomocou tohto príkazu:

wp db import ~/backup.sql

Pokiaľ plánujete experimentovať, dôrazne odporúčame, aby ste to nerobili na produkčnom prostredí orientovanom na zákazníka. K tomu je možné použiť stagingový server. Čo je to stagingové prostredie sa dozviete v našom článku Sedem dôvodov prečo používať staging pre Váš projekt vo WordPress. Pokiaľ vás zaujíma tvorba staging prostredia, môžete sa o tom dozvedieť v našom článku Ako si vytvoriť staging prostredie?

Ďalšou užitočnou funkciou je schopnosť rýchlo vstúpiť do rozhrania príkazového riadka databázy k spusteniu SQL pomocou nasledujúceho príkazu:

wp db cli

Nahraďte všetky výskyty nejakej hodnoty

Predstavte si, že web bol presunutý na inú URL alebo chcete použiť svoju produkčnú databázu na stagingu. Po importe databázy na nový server rýchlo zistíte, že niektoré odkazy nefungujú a že mediálne súbory nie sú viditeľné. Je to preto, že WordPress bohužiaľ v mnohých prípadoch používa absolútnu adresu URL. Na vyriešenie tohto problému má WP-CLI veľmi užitočný príkaz známy ako `wp search-replace. Pomocou tohto príkazu môžete veľmi jednoducho nahradiť všetky staré adresy URL novými:

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

dry-run flug na konci je tu veľmi užitočný, pretože spustí celú operáciu hľadania/nahradenia so zobrazením reportu, ale do databázy sa neuložia žiadne zmeny. Rozhodne je dobré spustiť tento príkaz najprv spôsobom dry run a po kontrole správy ho spustiť bez dry-run.

Generujte fiktívny obsah pomocou WP-CLI

Toto je veľmi užitočné pre vývojárov, ktorí potrebujú nejaký simulovaný obsah na webe pre účely vývoja. Napríklad pomocou niekoľkých príkazov môžete generovať desiatky príspevkov, používateľov, kategórií a komentárov. Tu je niekoľko príkladov:

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ískate tak web s 50 novými užívateľmi, 200 príspevkami, 20 stránkami, 10 kategóriami a náš vybraný príspevok má už 10 komentárov. To simuluje aktívne stránky, ktoré existujú už nejaký čas, a nemuseli sme nič robiť manuálne. Môžeme ľahšie začať pracovať na vývoji WordPress témy alebo pluginu.

Možno toho dosiahnuť veľa

V tomto článku sme predstavili mnoho prípadov použitia WP-CLI, ale to nie je ani zďaleka všetko, čo je možné pomocou tohto nástroja. Aby ste sa zoznámili so všetkými možnosťami, neexistuje lepší zdroj ako WordPress dokumentácia. Dúfam, že vám WP-CLI pomôže stať sa lepším vývojárom alebo administrátorom.

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.

Kalkulačka vo WordPress od Zeni

Kalkulačka vo WordPress od Zeni

Počas redesignu webu pre A-technology sme boli požiadaní o prepracovanie ich technologickej kalkulačky. Pre kalkulačku sme nevytvorili len redesign, ale pridali aj novú funkcionalitu.

Ako sme realizovali kompletne nový návrh webovej stránky si môžete prečítať v článku Rýchlosť a spoľahlivosť webovej stránky pre A-technology.

Kde je možné kalkulačku využiť?

Kalkulačku môžu využiť ľudia, ktorí sa rozhodujú stavať dom a radi by vedeli, aké majú možnosti v oblasti vykurovania a ďalších moderných technológií. Kalkulačka je aktuálne nastavená len pre ukážkový dom o veľkosti 160 m2, ale je v pláne pridať aj ďalšie. To ale nebráni tomu, aby si používatelia urobili prehľad o technológiách a ich približných cenách.

Akú kalkulačku sme vytvorili

Nová kalkulačka v základe funguje podobne ako tá stará, takže sa pre používateľov nič nezmenilo a nie je potrebné, aby sa naučili niečo nové pre jej používanie. Klientovi ale pribudli nové možnosti. Jednou z nich je možnosť zadania rozšírenia. Pokiaľ zákazník zaškrtne nejakú z hlavných technológií, ponúknu sa mu na výber rozšírenia. Kalkulačka tak získala na prehľadnosti a zákazník presne vie, aké technológie sú k čomu naviazané. Môže si vďaka tomu aj lepšie špecifikovať svoju požiadavku.

Možnosti rozšírení - Kalkulačka vo WordPress od Zeni
Možnosti rozšírení – Kalkulačka vo WordPress od Zeni

Ďalšou novinkou sú povinné rozšírenia. Niektoré technológie obsahujú rozšírenia, ktoré je potrebné pridať, aby všetko vôbec fungovalo. Preto sa môže stať, že niektoré rozšírenia budú už zaškrtnuté a nepôjde ich odobrať.

Povinné rozšírenia - Kalkulačka vo WordPress od Zeni
Povinné rozšírenia – Kalkulačka vo WordPress od Zeni

Posledné a asi najväčšie rozšírenie pôvodnej kalkulačky sú Dotácie. Zákazník si môže v kalkulačke vybrať jednu z ponúkaných dotácií a automaticky sa mu k nej navolia všetky potrebné technológie na jej splnenie. Vďaka tomu je pekne vidieť, s čím všetkým musí počítať, pokiaľ má o danú štátnu dotáciu záujem.

Možnosti dotácií - Kalkulačka vo WordPress od Zeni
Možnosti dotácií – Kalkulačka vo WordPress od Zeni

Ak chcete poslať svoju kalkuláciu na e-mail, je potrebné vyplniť niekoľko základných údajov. Na žiadosť klienta sme formulár rozšírili o možnosť nahrania dokumentov spojených s vašim projektom. Vďaka týmto podkladom vám môžu v A-technology pripraviť návrh na mieru, presne podľa vašich požiadaviek.

A-technology chce svojim klientom dať náhľad možností, ktoré majú, a umožňuje im vybrať si riešenie podľa svojich predstáv. Presné riešenie je potom možné konzultovať s ľuďmi z A-technology, ktorí vám dodajú presnejšie informácie.

Pokiaľ sa vám naše riešenie kalkulačky zapáčilo alebo potrebujete pomôcť s webom, neváhajte sa nám ozvať.

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.

Zlepšite vývoj WordPress tém a pluginov za použitia návrhových vzorov

Zlepšite vývoj WordPress tém a pluginov za použitia návrhových vzorov

Chcete vytvárať čistejší, lepšie udržiavateľný kód, ktorý sa dá v prostredí WordPressu oveľa ľahšie upravovať a rozvíjať? Obrovský rozdiel môže priniesť venovanie pozornosti konceptu návrhových vzorov. Ak použijete návrhové vzory počas vývoja správne, môže vám to ušetriť aj nejaký čas.

Čo sú návrhové vzory?

Návrhové vzory nám pomáhajú vytvárať softvér (samozrejme vrátane pluginov a tém WordPressu) na základe už získaných znalostí tých pred nami. Nemusíme znovu vynachádzať koleso na riešenie niektorých bežných problémov, ktoré sa stali už mnohým vývojárom, a môžeme sa zamerať na špecifiká našej problémovej oblasti a riešiť požiadavky zákazníkov.

Návrhový vzor je opakovateľné riešenie bežne sa opakujúceho problému v návrhu softvéru. Nie je možné ho použiť priamo, ale poskytuje nám šablónu na riešenie problému, ktorú je možné opakovane použiť v mnohých podobných situáciách.

Štúdium návrhových vzorov a ich použitie pri vytváraní nového kódu môže výrazne zlepšiť jeho štruktúru a celkovú funkčnosť a škálovateľnosť.

Po ich preštudovaní môžete tiež skúsiť refaktorovať svoj starší kód pomocou návrhových vzorov a uvidíte, že kód môže byť oveľa lepšie manažovateľný.

Vysvetlenie návrhových vzorov pomocou hookov

Začnime niečím už známym pre väčšinu vývojárov WordPressu, a to sú hooky, konkrétne akcie a filtre, ktoré sa vo WordPresse veľa používajú.

Ide o špecifickú implementáciu vzoru publisher-subscriber (pub-sub). V tomto vzore definujeme publisher (vydavateľa), subscriber (odberateľa) a message broker (sprostredkovateľa správ):

Vydavatelia (publisher) zverejnia nejakú konkrétnu udalosť, v našom prípade vykonaním do_action alebo apply_filters.

Odberatelia (subscriber) sa môžu prihlásiť k určitým udalostiam volaním add_action alebo add_filter a vykonať akciu, keď nastane udalosť, ku ktorej sa prihlásili.

Sprostredkovateľ (message broker), v našom prípade jadro WordPress, ktoré zaistí, aby boli všetci odberatelia informovaní o udalostiach vydavateľov, ku ktorým sú prihlásení.

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

To nám prináša mnoho výhod. Vydavateľ nemusí vedieť nič o svojom odberateľovi a ani odberatelia nemusia vedieť nič o vydavateľovi, pokiaľ vedia reagovať na vzniknutú udalosť. Aj keď deaktivujeme plugin, ktorý udalosti vytvára alebo odoberá, nespôsobí to žiadne chyby.

Myslím, že je veľmi užitočné nielen odoberať hooky z jadra WordPressu alebo pluginov, ale aj vytvárať hooky v kóde a stavať okolo nich svoj kód. Nielenže uľahčíte život ostatným vývojárom, pokiaľ sa rozhodnú stavať na funkčnosti vášho pluginu alebo témy, ale verte mi, že aj váš život bude oveľa jednoduchší pri implementácii novej funkčnosti do vášho pluginu alebo témy.

Vo WordPresse je možné použiť mnoho ďalších šikovných návrhových vzorov. Väčšinou vyžadujú trochu viac práce ako hooky, ale môžu znamenať obrovský rozdiel v dizajne vášho pluginu alebo témy. Skvelým príkladom návrhového vzoru, ktorý je možné použiť v kontexte WordPressu, je vzor singleton.

Vzor singleton

Tento vzor vyžaduje znalosť objektovo orientovaného programovania. Pokiaľ s ním nie ste oboznámení, najprv si ho preštudujte a potom sa môžete vrátiť k čítaniu.

Vzor singleton obmedzuje iniciáciu určitej triedy, takže je možné vytvoriť iba jednu inštanciu triedy. To sa dá dosiahnuť vytvorením súkromného konštruktora, statickej premennej pre uloženie inštancie a statickej funkcie getInstance(). Táto funkcia zodpovedá za vytvorenie inštancie objektu, pokiaľ už nie je vytvorený a uložený v premennej $instance. Príklad môžete vidieť nižšie

class SingletonClass
{
    private static $instance = null;

    private function __construct() {}

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

Zakaždým, keď sa nejaký kód pokúsi vytvoriť novú inštanciu tejto triedy, spustí sa chyba, pretože ide o súkromný konštruktor (toto je lepšie zdokumentovať, aby nedošlo k nedorozumeniu), takže jediný spôsob, ako získať inštanciu, je prostredníctvom našej funkcie getInstance().

Ako príklad použitia by bolo možné vytvoriť základnú triedu, ktorej zodpovednosťou je vytvoriť inštanciu všetkých našich funkcionalít pluginu. K tejto inštancii môžeme nadviazať napríklad konfiguračné dáta, takže sú prístupné odkiaľkoľvek v plugine a nie je nutné ich načítať z databázy alebo konfiguračného súboru viackrát, iba pri vytvorení jedinej inštancie tejto triedy.

Nepreháňajte to s používaním singleton vzoru

Myslím, že tento vzor je dobrým príkladom aj preto, že jeho prílišné používanie môže veľmi lákať, pretože v mnohých situáciách je ľahké vidieť výhody jeho použitia. Nehovorím, že by sa nemal používať, ale pred jeho použitím treba zvážiť aj jeho nevýhody.

Hlavnou nevýhodou tohto vzoru je podľa môjho názoru to, že zakaždým, keď tento vzor použijeme, viaže sa naša funkčnosť na priamu znalosť singletonovej triedy. To vytvára previazanosť kódu a môže spôsobiť, že ak sa rozhodneme niečo v singletone zmeniť, musíme urobiť mnoho zmien v celom projekte.

Pred použitím tohto vzoru alebo akéhokoľvek iného vzoru preto vždy všetko plánujte vopred, ale pokiaľ budete robiť dobrú prácu, bude to pre vás veľmi prínosné.

Ďalšie vzory

V tomto článku sme popísali dva návrhové vzory. Tieto vzory je možné použiť v mnohých situáciách pri vývoji WordPressu a môžu zlepšiť váš kód a myslenie.

Toto je však len veľmi malá ukážka toho, čo sa dá vďaka konceptu návrhových vzorov vytvoriť. Návrhových vzorov, ktoré je možné pri vývoji použiť, je oveľa viac. Ich štúdium a použitie by mohlo mať počas vývoja obrovský význam a mohlo by mať veľmi pozitívny vplyv na to, čo vyvíjate.

Pokiaľ vám nerobí problém angličtina, odporúčam vám použitie vzorov vyskúšať buď pomocou známej a kvalitnej literatúry, ako Design Patterns: Elements of Reusable Object-Oriented Software alebo Head First Design Patterns alebo na weboch ako je refactoring.guru, kde je mnoho vzorov dobre popísaných vrátane príkladov v PHP. V slovenskom jazyku vyšiel titul Návrhové vzory v PHP.

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.

Optimalizácia a kompresia obrázkov vo WordPress

Optimalizácia a kompresia obrázkov vo WordPress

Optimalizácia a kompresia obrázkov je veľmi dôležitá, nakoľko vám môže ušetriť čas pri načítavaní vašich stránok. Tým vám môže pomôcť zvýšiť návštevnosť stránky a váš web sa tak stáva úspešnejším. 

Veľkosť obrázkov

Používajte obrázky vždy v takej veľkosti, v akej ich zobrazujete. Je zbytočné načítavať obrázok v rozlíšení 1024×1024 px, pokiaľ ho na webe zobrazujete vo veľkosti 16×16 px. 

Nepreháňajte to s množstvom obrázkov. Čím viac obrázkov, tým viac dát sa načítava a tým je načítanie stránky pomalšie. Zamyslite sa, či má obrázok pre stránku pridanú hodnotu, napríklad pri písaní článkov. 

Vo WordPress sa každý obrázok pri jeho nahrávaní zmenší do 4 rôznych veľkostí a následne si môžeme načítať verziu obrázka, ktorá nám najviac pre danú stránku vyhovuje. Napríklad veľkosť miniatúry v blogu je iná ako veľkosť obrázka priamo v blogu. 

  • Miniatúra – 150 x 150 pixelov
  • Stredná veľkosť – maximálne 300 x 300 pixelov
  • Veľká veľkosť – maximálne 1024 x 1024 pixelov
  • Plná veľkosť – pôvodná veľkosť nahraného obrázka

Pre dodatočnú optimalizáciu webu je tiež možné si do WordPressu doplniť vlastné veľkosti obrázkov. 

Formát obrázkov

Bitmapové obrázky

  • Vhodné použiť pre veľmi detailné obrázky ako napríklad fotografie.
  • Bitmapové obrázky obsahujú mapu jednotlivých pixelov.
Bitmapový obrázok
Bitmapový obrázok
  • Formát JPEG podporuje veľké množstvo farieb, preto pôsobí živšie ako napríklad PNG, JPG je najvhodnejší pre zobrazenie fotografií.
  • Formát PNG podporuje menšie množstvo farieb ako JPEG, no rozdiel od JPEG podporuje priehľadnosť, taktiež lepšie zvláda text a ilustrácie.

Na tomto meme môžete vidieť rozdiel v zobrazení ilustrácií a textov medzi JPEG a PNG:

Rozdiel v zobrazení textov medzi JPEG a PNG
Rozdiel v zobrazení textov medzi JPEG a PNG
  • Formát WebP je možné využiť ako modernú náhradu za formáty JPG a PNG. Súbory v tomto formáte sú pri rovnakej kvalite značne menšie ako u konkurenčných formátov.
  • Zaujímavé je, že tento formát bol vyvinutý v Google.
  • WebP zatiaľ nie je pre WordPress natívne podporovaný, ale sú pluginy, ktoré pridávajú podporu. My používame WordPress plugin WebP Converter for Media

Vektorová grafika

  • Môže ušetriť obrovské množstvo dát, obsahuje inštrukcie v textovej podobe na vytvorenie obrázku a nie mapu pixelov, ako je to v prípade bitmapovej grafiky. Preto pre zobrazenie väčšieho obrázku nie je nutný väčší súbor.
  • Tam, kde je to aplikovateľné, je dobré ju preferovať pred bitmapovou (pixelovou).
  • Najčastejšie sa používa pre logá a rôzne ikony.
  • Veľkosť súborov narastá s množstvom detailov na obrázku.

Výhodný formát pre vektorovú grafiku na webe je SVG.

SVG obrázky nie je možné nahrať do knižníc médií vo WordPress. Tieto obrázky môžeme zobraziť pomocou kódu v plugine alebo v téme pri tvorbe HTML štruktúry, buď dodatočným načítaním alebo vnorením do HTML štruktúry.

Vo WordPress je práve možnosť použitia priamo v HTML užitočná aj v Gutenberg alebo Classic editore. SVG obrázky môžeme do editora vložiť ako vlastné HTML. Výhodou SVG obrázkov je tiež, že je možné upraviť ich zobrazenie pomocou CSS štýlovania, nakoľko sú bežná súčasť HTML.

Škálovateľnosť
Škálovateľnosť

Kompresia obrázkov

Obrázkové formáty podporujú zväčša viac úrovní kompresie, kde je pri silnejšej kompresii možné ušetriť viac dát, no na úkor kvality.

Pre každý obrázok, ktorý nahrávate na váš web, by mala byť aplikovaná kompresia. Viac skomprimované obrázky sú menšie a rýchlejšie sa načítajú používateľovi vášho webu. Netreba však zabúdať, že kompresiou sa stráca kvalita a preto treba zvoliť kompresiu, pri ktorej budú detaily obrázkov dostatočne zachované.

Príliš zkomprimovaný obrázok
Príliš zkomprimovaný obrázok

Tu môžete vidieť veľmi výhodný formát WebP, ktorý poskytuje najlepší pomer veľkosti súboru k jeho kvalite, v porovnaní s JPEG formátom.

Porovnanie zobrazenia formátu WebP a JPEG
Porovnanie zobrazenia formátu WebP a JPEG

WordPress pluginy pre kompresiu obrázkov

S kompresiou obrázkov vám môže pomôcť dobrý WordPress plugin. Pluginy existujú rôzne, no tu vám spomenieme len niektoré pluginy pre kompresiu obrázkov. 

  • EWWW Image Optimizer – Tento WordPress plugin je bezplatný a pri nahrávaní obrázkov ich automaticky komprimuje
  • Smush – okrem kompresie obrázkov obsahuje aj iné užitočné optimalizačné techniky.
  • WebP Converter for Media – Nahrádza súbory JPG a PNG formátom WebP, čím môžete bez straty kvality ušetriť viac ako polovicu zaťaženia. Po inštalácií pluginu sa obrázky automaticky prevedú do nového formátu. 

Optimalizácia a kompresia obrázkov je len jedným z mnohých aspektov, ktoré vám môžu dopomôcť so zrýchlením vašej stránky a so zvýšením jej návštevnosti. Ak sa chcete dozvedieť viac, prečítajte si článok 6 spôsobov, akými zlepšíte rýchlosť a výkon vašej webovej stránky vo WordPress alebo Zrýchlenie webových stránok vo WordPress vďaka optimalizácií JavaScriptu a CSS

Ak máte záujem o viac informácií a potrebujete poradiť či pomôcť so zrýchlením vašej webovej stránky, napíšte nám a my vám radi pomôžeme. 

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.

Zrýchlenie webových stránok vo WordPress vďaka optimalizácií JavaScriptu a CSS

Zrýchlenie webových stránok vo WordPress vďaka optimalizácií JavaScriptu a CSS

JavaScript a CSS spomaľujú načítavanie stránky, pretože sa musia donačítať a spustiť. Navyše, veľa JavaScriptu môže mať veľmi negatívny dopad na výkon, reakčnosť a responzívnosť webu. Prečítajte si, ako optimalizujeme CSS a JavaScript vo WordPress a tým prispievame k zrýchleniu webových stránok. 

Načítajte menej JavaScriptu a CSS

Zvážte výber pluginov a tém

Niektoré pluginy a témy vo WordPress používajú veľmi veľaJavaScriptu a načítavajú objemné CSS, preto zvážte ich použitie a skúste nájsť vhodné alternatívy. Mnohé načítavajú Javascript a CSS aj na stránkach, na ktoré daný plugin/téma nemajú vôbec vplyv, a teda predlžujú načítavanie aj tam, kde to nie je vôbec nutné.

Zamyslite sa nad potrebnou funkcionalitou

Pri práci s WordPressom si vždy dávame pozor, aby sa načítalo len to, čo je potrebné (CSS štýly, JavaScript) a tak pripravíme stránku na rýchlejšie načítanie. Napríklad odstránime nepotrebné CSS a JS súbory.

Pre interaktívne funkcie využite CSS namiesto JS

Pokiaľ programujete obsah pre WordPress, je dobré sa zamyslieť, či na všetko, na čo používate JavaScript je naozaj JavaScript nutný. Veľa funkcionalít, na ktoré bolo nutné použiť JavaScript v minulosti, je dnes možné docieliť pomocou moderného CSS z oveľa menším dopadom na výkon. Toto sme využili napríklad pri tvorbe stránky pre i4comfort alebo pri tvorbe Menu na mieru pre Engeto bez JavaScriptu. Webová stránka obsahuje veľa vizuálnych efektov, ktoré sme zakomponovali tak, aby stránku nespomaľovali. Viac sa môžete dočítať v článku Tvorba webovej stránky pre i4comfort

Kód manažujúci JS a CSS

Vždy sa treba zamyslieť nad tým, kde je vaše CSS a JavaScript potrebné. Je dobré rozbiť veľké CSS súbory na niekoľko menších a načítať ich podľa potreby. Rovnako môžeme pristupovať aj k JavaScript kódu.

Na tvorbu tém najčastejšie používame Sage, ktorý takýto manažment ulahčuje a počíta s jeho nutnosťou. 

Prečítajte si viac o tom Prečo je dobré mať stránku vytvorenú na Sage?

Optimalizujte CSS a JavaScript pomocou minifikovania

Minifikovaním sa zo súborov odstráni všetko nepotrebné (riadky, medzery, skrátia sa názvy premenných atď…). Textové súbory s CSS, JS sa upravia tak, aby zaberali menej miesta, čím sa šetrí veľkosť súborov a rýchlejšie sa načítavajú.

Rozdiel medzi originálnym a minifikovaným kódom
Rozdiel medzi originálnym a minifikovaným kódom

Existuje mnoho dobrých WordPress pluginov a tém, ktoré minifikujú kód. V našich pluginoch a témach kód minifikujeme a zároveň si uchovávame pôvodné súbory, ktoré sa dajú jednoduchšie modifikovať

Ako na to?

Váš JavaScript a CSS je možné minifikovať pomocou online nástrojov,  ako napríklad Closure Compiler, či Minify Code. Takýmto spôsobom je možné minifikovať aj JavaScript a CSS, ktoré vkladáte pomocou pluginov či customizera.

Lepšou alternatívou na tento účel je nastaviť build vašeho pluginu/témy. Je možné použiť a nastaviť Webpack alebo nástroje ako node-minify. Takýto prístup vám umožní automatické minifikovanie vašich súborov, no vyžaduje pomerne veľa času a nervov, hlavne ak si zvolíte Webpack. Preto je lepšie siahnuť po predpripravenom riešení pre váš plugin alebo tému v podobe starter projektu, ako napríklad Roots Sage pre tému. Pre veľké projekty, na ktorých už pracujete a nie je jednoduché ich zmigrovať, je však nutné si dopomôcť spomínanými nástrojmi.

Ako použiť minifikáciu bez vývojárskych skúseností?

K optimalizovaniu všetkých CSS a JS súborov, ktoré vaša stránka používa, je možné si dopomôcť využitím pluginu Fast Velocity Minify. Tento plugin funguje tak, že pri prvom nenacachovanom načítaní stránky vygeneruje minifikované CSS a JS súbory, ktoré sa potom načítavajú namiesto pôvodných súborov. Môžete takto značne zrýchliť načítavanie CSS a JavaScriptu u pluginov a tém, ktoré nemajú minifikovaný JavaScript a CSS.

Menej je viac

Pre zrýchlenie vašej webovej stránky a tým aj zvýšenie počtu návštevníkov si treba uvedomiť, že menej je v tomto prípade naozaj viac. Ak bude vaša stránka zahltená množstvom nepotrebných funkcionalít, je jasné, že to odrazí aj na výkone. 

Spôsobov, akými zrýchlite vaše webové stránky, a tým zvýšite ich návštevnosť, je veľmi veľa. Môžete dlhšie stránky rozdeliť na menšie, obmedziť množstvo nepotrebných obrázkov alebo sa snažiť o jednoduchší kód. O tomto sme písali aj podrobnejší článok 6 spôsobov, akými zlepšíte rýchlosť a výkon vášho webu vo WordPress

Pokiaľ máte nejaké otázky alebo potrebujete pomôcť so zrýchlením či optimalizovaním webu, sme tu pre vás, neváhajte sa nám ozvať

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.

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.

6 spôsobov, akými zlepšíte rýchlosť a výkon vašej webovej stránky vo WordPress

6 spôsobov, akými zlepšíte rýchlosť a výkon vašej webovej stránky vo WordPress

Všetko sa zrýchľuje. Mnohí chcú mať najdôležitejšie informácie čo najrýchlejšie a získavať ich bez zbytočného čakania. Rýchlosť je v týchto dňoch očakávaná hlavne pri prehliadaní webových stránok. Nedostatočný výkon a pomalé načítavanie vedú k zvýšeniu miery opustenia vašej stránky. Ako dopomôcť k zrýchleniu webovej stránky vo WordPress sa dozviete v dnešnom článku. 

Prečo je rýchlosť webovej stránky dôležitá?

Google odporúča za najoptimálnejšiu rýchlosť načítania v prípade 3G pripojenia 5 a menej sekúnd. Ak čas načítania vašej stránky prejde z 1 sekundy na 3, pravdepodobnosť okamžitého odchodu sa zvyšuje o 32 %. V prípade načítania webu z 1 sekundy na 10 sa zvyšuje až o 123 %! Alarmujúce však je, že podľa Google analýzy (2018), sa mobilné weby načítavajú v priemere až 15 sekúndRýchlosť webovej stránky ovplyvňuje až takmer 70 % spotrebiteľov. Pravdepodobnosť ich nákupu s rýchlosťou webu stúpa. Pokiaľ je webová stránka pomalá, prichádzate o zákazníkov a znižujete mieru konverzieRýchlosť vašej webovej stránky je tiež veľmi výrazným SEO faktorom. Preto sa pri tvorbe webových stránok vo WordPress vždy snažíme dbať na rýchlosť a výkon webu a robíme všetko preto, aby sme ju správne optimalizovali bez použitia prílišného množstva pluginov.Objektívny prehľad o tom, či je váš web rýchly, si môžete spraviť pomocou rôznych nástrojov, odporúčame Google PageSpeed Insights, no existuje mnoho ďalších napríklad GTmetrix či WebPageTest. Poďme sa pozrieť na niektoré z možností, akými zlepšujeme výkon webových stránok a optimalizujeme ich.

1. Menej reklám

Veľké množstvo reklám môže uškodiť vášmu webu, nakoľko reklamy načítavajú JavaScript, CSS a média, čím môžu veľmi spomaliť stránku a tiež zhoršiť užívateľský zážitok. 

2. Rozdeľte dlhé stránky

Dlhé stránky spomaľujú načítavanie webu.

  • Pokiaľ má niektorá z vašich stránok na webe príliš veľa obsahu, možno by bolo vhodnejšie ju rozdeliť na niekoľko
  • Na dĺžku dbajte aj pri písaní článkov na váš blog. Niekedy je lepšie článok rozdeliť na viaceré články, čím tiež prispejete k zrýchleniu webu. 

3. Aktuálnosť WordPress, pluginov a PHP

Vo WordPress vývojári pluginov neustále pracujú na vylepšeniach a preto je dobré si ich pravidelne aktualizovať. Veľký vplyv na výkon WordPress stránky má aj verzia PHP. Cloudways zverejnili výsledky ich benchmarkingového testu, ktorý sledoval zlepšovanie výkonu stránok od verzie PHP 5.6 po 8.0. Nižšie uvedený graf ukazuje, že výkon sa neustále zlepšuje. Oproti súčasnému PHP 8.0 s najrýchlejším časom načítania 164 ms vyšiel PHP 5.6 takmer 3-krát pomalší.

Zeni team - priemerná doba odozvy
Zeni team – priemerná doba odozvy

4. Caching

Prednačíta a nachystá obsah stránky, aby sa minimalizovalo počítanie a načítavanie z databázy pri prístupe na stránku. Používateľ dostane pri načítavaní stránky predpripravenú verziu, čím sa môže až niekoľkonásobne zvýšiťnačítanie webu. Aby sa v budúcnosti mohli požiadavky na údaje vyriešiť rýchlejšie, caching si tieto údaje ukladá. Súčasťou každého produkčného webu by mal byť určite Caching plugin, vďaka ktorému získate obrovské množstvo výkonu webu. Pre našich WordPress klientov nastavujeme Redis Cache, ktoré umožňuje cachovanie pomocou in memory databázy.

5. CDN (Content Delivery Network)

  • Ide o skupinu serverov, ktoré sú geograficky bližšie k vašim návštevníkom, a tak znižujú odozvu pri načítavaní stránky. 
  • Po nastavení CDN sa váš obsah (obrázky, videá…) uloží do vyrovnávacej pamäte na proxy serveroch a načítava sa zo serverav blízkosti polohy vášho návštevníka, vďaka čomu sa zníži odozva a obsah sa načíta rýchlejšie
  • Pre našich klientov používame službu Cloudfare CDN, ktorý im nastavujeme a je štandartný pre všetky stránky, ktoré máme v správe.

6. Kvalitný hosting

Ak si myslíte, že ste pre zrýchlenie vášho webu skúšali už všetko, no stále nedosahujete želané výsledky, je vhodné sa zamyslieť nad zmenou poskytovateľa hostingu. My v Zeni vám vieme ponúknuť hosting, ktorý zrýchli váš web. Tiež dokážeme pomôcť so zrýchlením webu a zvýšením vašej návštevnosti. Ozvite sa nám a radi vám poradíme

ODKAZY

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

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.

10 rokov spoločnosti

10 rokov spoločnosti

Zeni team s. r. o. tento rok oslavuje svoje 10. výročie. Všetko začalo 19. decembra v roku 2011, keď Róbert a Dávid založili spoločnosť Vitix company s.r.o.. Tá mala pôvodne slúžiť ako základ pre e-shop s pneumatikami, ktorý si vytvorili. Online priestor sa im zapáčil a postupne začali vyvíjať webové stránky aj pre ostatných zákazníkov. 

Najskôr sa Dávid a Róbert pokúšali o vývoj vlastného CMS systému, ktorý niesol pracovný názov CMS Delfín. Po nejakej dobe sa rozhodli, že pre zvýšenie kvality bude vhodnejšie začať budovať na tom, čo už je vytvorené, a čo vytvorila WordPress komunita.

Prečo WordPress?

WordPress sa stal naším obľúbeným nástrojom pre tvorbu webových stránok, a nie je to tak len pre nás. Svedčí o tom aj fakt, že viac ako 43 % stránok využíva práve WordPress. Nepoužíváme WordPress preto, že by sme si mysleli, že je tým najlepším riešením na všetko. Používáme ho preto, že ho máme najradšej.

  • Je flexibilný – postavíte na ňom čokoľvek.
  • Umožňuje jednoducho nasadzovať i testovať zmeny pre udržanie kroku s neustále premenlivou dobou.
  • Má skvelú, skúsenú a znalú komunitu.

Podrobnejšie si dôvody, prečo staviame weby na WordPress, môžete prečítať na našej stránke.

WordPress komunita

S používaním WordPress úzko súvisí aj WordPress komunita. Róbert jedneho krásného dňa vytiahol Dávida na WordCamp do Bratislavy a bolo postarané. Dávida prednášky tak zaujali, že sa začal aktívne zapájať do diania vo WordPress komunite. Dávid sa dohodol s Jánom Bočíncom zo spoločnosti Webikon a začali spolu organizovať Brnenské WordPress meetupy. Následoval WordCamp Brno 2017 až 2019. Samozrejme návšteva a pomoc na niektorých WordCamp – Praha, Bratislava, Europe Viedeň, Paríž, Belehrad. 

Kvalita a rast

Nielen činnosťou vo WordPress komunite je človek živý, a tak Dávid začal aktívne akvizovať klientov, ktorí podľa jeho uváženia potrebujú kvalitný web na predaj ich výrobkov či služieb. Na začiatku si dal zdravý cieľ, a to každý rok zvýšiť obrat spoločnosti ruka v ruke so zvyšujúcou sa kvalitou. Tohtoročný obrat tak činí už vyše 3,5 milióna. Medziročný nárast o 35%.

Dávid a Róbert na realizáciu svojej vízie potrebujú okolo seba tím, ktorý sa z roka na rok zväčšuje. Hneď na začiatku si dali predsavzatie, že v tíme chcú mať nielen seniorov, ktorí vykúzlia super kód, kvalitný plugin, či skvele nastavia server, ale aj juniorov, ktorí sa budú od seniorov učiť a následne posilnia ich rady. Dnes sú v Zeni posádke grafik, copywriter, frontend a backend vývojári, ďalej marketérka, copywriterka, SEO špecialista a v neposlednom rade testerka.

Prečo oslavujeme 10. výročie a prečo je pre nás tak dôležité?

Štatistiky o firmách uvádzajú, že zo 100 firiem prežije prvých 5 rokov iba cca 10. Ďalších 5 rokov prežijú už len cca 3, a to už o niečom svedčí. My v týchto dňoch oslavujeme 10 rokov. 10 rokov bez úverov, pôžičiek, 10 rokov budovania systému, o ktorom môžeme povedať, že funguje. Takto sme slávili 10. výročie:

K tomuto výročiu sme si nechali urobiť audit u 2 rôznych spoločností. Jeden z nich od spoločnosti Bisnode (po novom Dun&Bradstreet), v ktorej vás „stiahnu z kože” a druhý u Prověřená společnost. U prvej spoločnosti máme hodnotenie AA, pričom AAA je najvyššia méta. U druhej sme na začiatku roka dostali strieborné ocenenie a tesne pred výročím zlaté

Za tú dobu sme spravili množstvo práce. Vytvorili sme mnoho rýchlych a spoľahlivých webov, tiež prístupné weby pre školy a škôlky, spustili vlastný plugin, vysadili ovocné stromy pre radosť a pokračujeme s ďalšími víziami. Sme radi, že nás aj našich kolegov práca v našej slobodnej spoločnosti baví a že sa navzájom obohacujeme. Tešia nás všetky spolupráce a tešíme sa na nové!

Zdieľajte na:

Ďalšie články:

Zlepšite vývoj WordPress tém a pluginov za použitia návrhových vzorov

Chcete vytvárať čistejší, lepšie udržiavateľný kód, ktorý sa dá v prostredí WordPressu oveľa ľahšie upravovať a rozvíjať? Obrovský rozdiel môže priniesť venovanie pozornosti konceptu návrhových vzorov. Ak použijete návrhové vzory počas vývoja správne, môže vám to ušetriť aj nejaký čas.

Čítať viac Zlepšite vývoj WordPress tém a pluginov za použitia návrhových vzorov

Nenechajte si nič uniknúť!

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

Zeni a výsadba stromov

Zeni a výsadba stromov

Naša spoločnosť Zeni team s.r.o., ako súčasť WordPress komunity, sa v tomto roku rozhodla podporiť myšlienku týmu konferencie WordCamp, ktorí v roku 2019 začali s výsadbou stromov nového ovocného sadu v Otniciach. Vďaka nám tento rok vznikla jeho druhá polovica. 

WordPress komunita a výsadba

V Zeni radi podporíme dobré myšlienky a jednou z tých, ktorá nás zaujala, bola aj myšlienka vysádzanie stromov, s ktorou pred dvoma rokmi začala WordPress komunita. WordPress akcia výsadby vtedy priniesla do Otníc až 45 nových stromov! Myšlienka nás zaujala o to viac, keď sme zistili, že vysadené stromy by mali byť ovocné a vznikne tak chutný a voňavý ovocný sad. Ovocné stromy majú navyše najdlhšiu životnosť, pretože tie na vysokokmeni vydržia rásť aj 70 rokov. Okoloidúci si tak budú môcť na ovocí pochutnať dlhodobo. 

WordPress komunita vďaka novým stromom tiež vyrovnala v roku 2019 CO2 stopu WordCamp Brno 2019 konferencie, ktorá sa však v nasledujúcich rokoch konala len v on-line priestore. Zeni sa WordCampu Brno 2019 účastnilo tiež. O udalosti si môžete prečítať viac v článku Zeni a WordCamp Brno 2019.

Výsadba stromov 

Zeni team tento rok oslavuje svoje 10. narodeniny a preto sme prišli s nápadom, že k 45 stromom vysadeným na akcii WordPress prispejeme a dosadíme ďalších 45. Spoločne s obyvateľmi Otníc sa tak 13.11.2021 vysadila druhá polovica ovocného sadu a vzniklo potešenie pre všetkých, ktorí pôjdu okolo. 

výsadba ovocných stromů

Ovocný sad bude ponúkať drobné občerstvenie na 90 rôznych stromoch medzi ktorými si môžete pomaškrtiť na čerešniach, jablkách, hruškách, marhuliach, či slivkách. Vďaka rôznym odrodám nájdete počas vašej prechádzky ovocie na stromoch od jari do jesene

Vízia do budúcnosti

Kedysi bývali sady v ktorých sme sa mohli prejsť a zamaškrtiť si, takmer pri každej dedine. Zeni by rada do budúcna každý rok takto prispela 50 ovocných stromov, ktoré si budú môcť obyvatelia dedín spoločne vysadiť. Ovocné sady, ktoré vzniknú na pozemkoch dedín, budú môcť navštíviť všetci, ktorí pôjdu okolo. Vytvoríme tak malú ovocnú radosť nie len pre ľudí ale aj pre prírodu a matku Zem, ktorá stromy v dnešnej dobe veľmi potrebuje. 

Obyvatelia Otníc vysádzajú ovocné stromy

O projekte vytvárania ovocných sadov budete od nás ešte určite počuť! Ak nechcete nič zmeškať alebo sa chcete dozvedať novinky o svete WordPress, prihláste sa na odber noviniek, radi vás privítame. 

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.

Tvorba webovej stránky pre i4comfort

Tvorba webovej stránky pre i4comfort

Aplikácia i4comfort od spoločnosti A-technology prináša komplexné a jednoduché riešenia ovládania technológií vo vašom dome na diaľku. Myšlienka úspory v oblasti vykurovania, a tým aj zmenšenia CO2 stopy pomocou inteligentného ovládania technológií, nás zaujala a bolo nám potešením podieľať sa na tvorbe webovej stránky pre túto aplikáciu.

Prečo a ako vznikla stránka

Stránky pre i4comfort sme vytvárali v CMS WordPress pre existujúceho klienta, ktorému sme už tento rok spustili kompletne nový produkčný web. Spoločnosť A-TECHNOLOGY s.r.o. má svoje prezentačné stránky a-technology.cz, preto bolo dôležité nadesignovať webovú stránku i4comfort v podobnom duchu ako tú materskú a zároveň webovej stránke vytvoriť vlastnú identitu. 

Porovnanie starej a novej stránky

Stará webová stránka i4comfort mala viaceré nedostatky:

  • Nespĺňala kritériá zabezpečenia.
  • Chýbalo vývojové prostredie v podobe stagingu
  • Logo a vzhľad boli zastaralé.
  • Web nebol responzívny.
Stará webová stránka

Nová stránka:

  • Webová stránka je plne responzívna.
  • Má na viacerých miestach CTA tlačidlo, ktoré vyzýva k akcii, vďaka čomu je väčšia pravdepodobnosť získania si zákazníka. 
  • Vytvorili sme nové logo a nadizajnovali nový vzhľad stránky.
Hlavná stránka i4comfort

Grafika webovej stránky

  • Tvorba webovej stránky vo WordPress pre i4comfort graficky nadväzovala na spomínanú materskú stránku.
  • Stránka má unikátny a zapamätateľný design.
  • Vytvorením osobitej identity stránky je samozrejmé, že ide o samostatný web.
  • Zákazník a-technology zároveň získava familiárny pocit.
  • Informácie nie sú komunikované len textovo, ale sú znázornené na mnohých miestach graficky, vďaka čomu sú viac zapamätateľné a prehľadné.

Technické funkcie

Moderný zážitok

Webová stránka disponuje mnohými vizuálnymi efektami, ktoré sú zakomponované tak, že stránku nespomaľujú. Web je tiež responzívny na akomkoľvek zariadení. 

  • Mnohé animácie a interaktívne časti využívajú čisto moderné možnosti štýlovania (css).
  • Nie je nutné donačítavať JavaScript ani kvôli niektorým rozklikateľným interaktívnym sekciám ako to býva na mnohých iných stránkach.
  • Stránka je tak rýchlejšia, zároveň poskytuje rovnako kvalitný zážitok, ako napríklad tu:
Vizuálne efekty webovej stránky

Stránka na používateľa reaguje

Symboly jednotlivých technológií sa menia podľa toho o čom používateľ momentálne číta. Podľa pozícii na stránke sa mení aj CTA tlačidlo, ikony, či navigačné prvky (horné menu, bodky vpravo). Spomenuté si môžete prezrieť na stránke ,,Jak funguje i4comfort”.

Webová stránka reaguje na užívateľa

Na stránke ,,Možnosti využití” sa tiež interaktívne menia obrázky podľa toho o čom používateľ číta. Čitateľ si tak jednoduchšie predstaví jednotlivé prvky o ktorých číta a tiež si ich lepšie zapamätá. Toto všetko vytvára unikátnu, rýchlu a interaktívnu skúsenosť, ktorá zaujme používateľa.

Výhody novej webovej stránky

Téma na sage

Ľahká konfigurovateľnosť

  • Nami naprogramovaná téma pre WordPress umožňuje ľahkú konfigurovateľnosť.
  • Pre každú stránku je osobitne nastaviteľné správanie a štýl hlavičky stránky.
  • Všetek obsah je jednoducho editovateľný bez nutného zásahu vývojára.

Použiteľnosť z hľadiska mobil/desktop

Desktopové prostredie nie je ani zďaleka len zväčšeným mobilným prostredím. Myslíme na dobrú skúsenosť pre každého užívateľa.

  • Na desktope je využívaný všetok priestor, vďaka čomu je na obrazovke poskytnutých čo najviac informácií a ani na veľkej obrazovke web nepôsobí prázdny
  • Používateľská skúsenosť na mobile je zároveň prispôsobená používaniu pomocou prsta a menšej obrazovke. 
  • Na mobile je všetko jednoducho klikateľné, ľahko a rýchlo dostupné. 
  • Mnohé sekcie vyzerajú v porovnaní mobilu a desktopu výrazne odlišne
  • Pre lepší zážitok boli pre mobil mnohé časti zjednodušené, niektoré vizuálne aspekty používané pre desktop vynechané, nakoľko nemali pre mobilného používateľa pridanú hodnotu
Webová stránka je responzívna

Pre i4comfort sme vytvorili nový web s množstvom vychytávok, ktorý je zároveň rýchly a prehľadný. Pokiaľ potrebujete pomôcť s tvorbou webovej stránky a chcete poskytnúť svojim zákazníkom kvalitný zážitok, neváhajte sa na nás obrátiť, radi vám pomôžeme.

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.