1) Proč jsme vytvořili nový web a nemohli jsme jen „přepnout motivy“

Když jsme poprvé identifikovali potřebu změny, úkol se zdál jednoduchý: „Změňte horní blok a zefektivněte výzvu k akci.“ V nominální hodnotě se to může zdát jako rychlá oprava, ale brzy jsme si uvědomili, že tento malý úkol odhalil mnohem větší základní problémy se strukturou a designem webu. Problém nebyl jen v jednom bloku; byla to celá architektura místa, která potřebovala generální opravu.

Naše webové stránky byly vytvářeny v průběhu času, s různými stránkami přidávanými pomocí různých designů a rozložení, bez jakéhokoli sjednocujícího tématu nebo šablony. Každá stránka byla jedinečná svým designem, což může znít kreativně, ale vedlo to k významnému problému: nekonzistenci. Pokud bychom pokračovali a vytvořili nový design pouze pro horní blok, zatímco zbytek webu ponechali tak, jak byl, znamenalo by to ruční aktualizaci tohoto bloku na více než 700 stránkách a příspěvcích. Ještě horší je, že tento ruční proces by bylo nutné opakovat pokaždé, když bychom chtěli provést budoucí změny. Představte si tu neefektivitu nutnosti prohrabávat se stovkami stránek a zajistit, aby každá měla nejnovější aktualizace. Rychle se ukázalo, že pokračovat v práci se starým webem nebude udržitelné.

Kromě logistiky aktualizace každé stránky jsme museli vzít v úvahu celkovou uživatelskou zkušenost. Uživatelé dnes při návštěvě webové stránky očekávají bezproblémové a soudržné prostředí. Pokud posouvají stránku dolů a vidí, že je design nekonzistentní – každý blok používá jiné styly – působí to nesourodým a neprofesionálním dojmem. Ještě horší je, když se uživatel přesune z jedné stránky na druhou a všimne si, že rozvržení a design jsou zcela odlišné, posiluje to pocit nepořádku.

Nekonzistence přesahovala rozložení. Mnoho obrázků na webu bylo zastaralých, špatně stylizovaných nebo dokonce nevhodně generovaných neuronovými sítěmi. Tyto obrázky nebyly v souladu s moderními designovými standardy a jejich nahrazení byl další náročný úkol. Použití špatných obrázků se špatně odráželo na celkové kvalitě webu a zanechalo v uživatelích negativní dojem z produktu nebo služby, kterou nabízíme.

Neexistoval žádný jednoduchý způsob, jak komplexně aktualizovat web pomocí nástroje, jako je Elementor. Každá stránka a blok obsahovaly své vlastní vložené styly, což znamená, že změny nebylo možné provádět globálně. Pokud bychom chtěli aktualizovat styl webu, museli bychom procházet každou jednotlivou stránku a ručně aktualizovat každý blok, což by bylo zdlouhavé a neefektivní. S ohledem na to se ukázalo, že naším jediným řešením bylo vytvořit nový web od nuly. To by nám umožnilo přenést veškerý obsah při zachování stejných adres URL, ale s novým, konzistentním a snadno aktualizovatelným designem.

2) Proč jsme se rozhodli nepoužívat Elementor

Elementor je jedním z nejpopulárnějších tvůrců stránek pro WordPress. Na první pohled to vypadá jako skvělý nástroj, který umožňuje rychlé a snadné vytváření stránek. Po rozsáhlé práci s ním jsme však narazili na několik omezení, kvůli kterým jsme se rozhodli opustit Elementor a místo toho zvolit web vytvořený na míru.

Omezení a výzvy Elementoru:

1. Chyby a závady : Přestože Elementor nabízí mnoho užitečných funkcí, není bez technických problémů. Když jsme například zkopírovali stránku a pokusili se ji upravit, nová stránka často vypadala jinak než ta původní, a to i před provedením jakýchkoli změn. Docházelo k častým chybám ve způsobu zobrazení prvků, například vlastnost „maximální šířka obrázku“ nefungovala správně. Tyto závady znesnadnily zajištění konzistentního stylu na všech stránkách.
2. Příliš mnoho kreativní svobody, vedoucí k nekonzistentnosti : Jedním z klíčových prodejních bodů Elementoru je schopnost přizpůsobit si vše. Tato flexibilita však může být dvousečná zbraň, zvláště když na webu pracuje více editorů. Pro neprofesionály je snadné neúmyslně vytvořit stránky s nekonzistentním designem. Viděli jsme například případy editorů používajících růžový text na růžových tlačítkách nebo přidání létajících oranžových trojúhelníků na pozadí, což vedlo k nepřehlednému a matoucímu designu. Bez přísného systému designu bylo nemožné udržet soudržnou vizuální identitu.
3. Omezené přizpůsobení pro pokročilé funkce : Zatímco Elementor vyniká v základním vytváření stránek s textem a obrázky, stává se náročnější, když potřebujete přidat vlastní funkce. Často jsme se ocitli omezeni na vestavěné bloky, které bylo obtížné přizpůsobit pro složitější funkce. Jak naše potřeby přesáhly základní rozvržení, byla omezení Elementoru stále zjevnější.
4. Nabubřelý kód a problémy s výkonem : Metoda sestavování stránek Elementoru zavádí nadměrné vnořování prvků. Například Elementor automaticky generuje více
   kontejnery v jiných

   prvky, z nichž každý má svou vlastní sadu stylů. To má za následek nabubřelou strukturu, která negativně ovlivňuje rychlost načítání, výkon stránky a nakonec i SEO hodnocení webu. Když jsme spustili testy rychlosti, výsledky byly trvale špatné a velkou vinu za to mohl těžký kód generovaný Elementorem.
5. Žádné možnosti testování A/B : V dnešním digitálním prostředí je testování A/B zásadní pro optimalizaci uživatelské zkušenosti. Elementor však nenabízí možnost zobrazovat různé verze webu různým uživatelům. Všichni vidí stejný web, což omezuje naši schopnost testovat a dolaďovat prvky návrhu, jako jsou barvy, tvary tlačítek a obrázky na pozadí. Bez této funkce bychom nemohli optimalizovat stránky na základě skutečného chování uživatelů.
6. Database Bloat : Snad jednou z nejvýznamnějších nevýhod Elementoru je způsob, jakým zachází se styly a obsahem. Elementor ukládá styly, vnořené struktury a další nepotřebné značky smíchané s obsahem v databázi. To vede k nabubřelé databázi, která se nevyčistí, ani když je Elementor deaktivován nebo odinstalován. Výsledkem je, že přechod na nové téma nebo rámec problém nevyřeší – tyto styly zůstávají ve stránkách zabudovány a nadále způsobují problémy.

S ohledem na všechny tyto výzvy bylo jasné, že potřebujeme robustnější řešení. Rozhodli jsme se vytvořit nový, nezávislý web bez Elementoru a zvolili jsme udržitelnější a flexibilnější přístup.

3) Jak vytvořit stránku na novém webu

Vybudování nového webu od nuly nám dalo příležitost vytvořit čistý a efektivní proces vytváření stránek. V novém systému je vytvoření stránky jednoduché:

1. Přihlaste se do administračního panelu WordPress a klikněte na Stránky -> Přidat novou stránku .
2. Zobrazí se standardní editor WordPress, kde můžete psát nebo vkládat text, přidávat odkazy a nahrávat obrázky.

Tento proces je jednoduchý, ale flexibilní. Namísto spoléhání se na komplikovaný blokový systém Elementoru je editor obsahu ve WordPressu mnohem čistší a umožňuje rychlé aktualizace a snadné přizpůsobení. Pod editorem jsou nastavení pro Advanced Custom Fields (ACF), která jsou již nakonfigurována tak, aby byla zachována konzistence na celém webu.

ACF nám umožňuje vytvářet flexibilní sekce obsahu s bloky jako Content 1…Content 15 , kde můžete snadno nastavit nadpis, text, obrázek a popisky tlačítek pro každou sekci stránky. Tyto bloky automaticky střídají umístění obrázků a textu, což zajišťuje, že rozvržení zůstane vizuálně poutavé, aniž by bylo nutné ručně upravovat.

Pro obrázky jsme implementovali systém porovnávání barev, který automaticky aplikuje přechod v hlavních barvách webu. To zajišťuje, že všechny obrázky odpovídají celkové estetice. Pro loga nebo snímky obrazovky, kde barvy musí zůstat nedotčené, existuje možnost „zachovat barvy“, která přepíše přechod.

Tento systém zjednodušuje správu obsahu při zachování konzistence designu na všech stránkách.

4) Jak vytvořit nový příspěvek

Vytváření příspěvků na novém webu probíhá stejně zjednodušeně jako vytváření stránek s několika klíčovými rozdíly:

• Příspěvky mají adresy URL, které obsahují ../blog/.. , což je odlišuje od stránek.
• V pravém postranním panelu se v bloku automaticky zobrazí tři nejnovější články, což pomáhá udržovat blog dynamický a poutavý.

Šablona pro všechny příspěvky se nachází v souboru template-parts/content/content-single.php , který řeší strukturu a rozvržení každého blogového příspěvku. Tato konzistentní šablona umožňuje snadné aktualizace a zajišťuje, že všechny příspěvky dodržují stejné pokyny pro návrh.

5) Pokročilá vlastní pole (ACF)

ACF bylo nezbytnou součástí vývoje našeho nového webu. Umožňuje nám vytvářet vlastní pole, která lze snadno spravovat prostřednictvím administračního panelu WordPress. Na pole jako content_1 se odkazuje v kódu PHP, což nám umožňuje dynamicky stahovat správný obsah pro každou stránku a příspěvek.

Tato flexibilita je kritická pro zajištění toho, že můžeme web efektivně spravovat a aktualizovat a zároveň poskytovat prostor pro přizpůsobení v případě potřeby.

6) A/B testování

Jedním z nejvýznamnějších vylepšení, které jsme s novým webem provedli, byla implementace A/B testování. A/B testování nám umožňuje porovnat dvě verze webu a zjistit, která má u uživatelů lepší výkon. To může zahrnovat testování různých barev, tvarů tlačítek, pozadí nebo dokonce rozvržení.

Tuto funkci jsme implementovali pomocí parametrů GET v URL. Lze například vytvořit dvě stejné reklamní kampaně, ale s různými adresami URL:

• https://www.conveythis.com/?param=1

• https://www.conveythis.com/?param=2

Když uživatelé kliknou na tyto odkazy, parametr se uloží do souboru cookie. V závislosti na hodnotě parametru bude web zobrazovat různé verze stránky, například různé barvy tlačítek nebo obrázky na pozadí. To nám umožňuje shromažďovat cenná data o uživatelských preferencích a chování.

Všechny události jsou přihlášeny a .csv souboru a také v databázi MySQL, což nám umožňuje analyzovat data a přijímat informovaná rozhodnutí o vylepšeních stránek.

7) Soubor functions.php

8) Manipulace se SEO a rychlostí webu

Hlavním cílem během revize webu bylo zlepšení SEO a celkového výkonu webu. Původní web vytvořený pomocí Elementoru měl problémy s pomalým načítáním a neoptimálními postupy SEO kvůli nabubřelému kódu a neoptimalizovaným obrázkům.

Zlepšení SEO

Abychom zajistili, že náš nový web bude přátelský k SEO, zavedli jsme hned od začátku několik osvědčených postupů:

• Sémantické HTML : Pečlivě jsme strukturovali HTML stránek se správným použitím značek záhlaví (
  ,
  , atd.), což zajišťuje, že vyhledávače mohou snadno analyzovat a porozumět hierarchii obsahu. To je důležité zejména pro hodnocení SEO a dostupnost.
• Meta tagy a data Open Graph : Využili jsme plugin Yoast SEO ke zpracování meta titulů, popisů a dat Open Graph pro sdílení na sociálních sítích. Pomocí Yoast jsme zajistili, že každá stránka a příspěvek mají optimalizovaná metadata, která jsou zásadní pro viditelnost vyhledávačů a míru prokliku z platforem sociálních médií.
• Schema Markup : Pomocí souboru functions.php jsme přidali vlastní označení schématu pro strukturovaná data, čímž jsme zlepšili způsob, jakým vyhledávače zobrazují naše stránky ve výsledcích vyhledávání. Zahrnuli jsme například schéma pro články, případové studie a produkty, což vyhledávačům pomáhá lépe kategorizovat náš obsah.

function add_schema_markup() {
  echo'
  {
    "@context": "http://schema.org",
    "@type": "Organizace",
    "name": "ConveyThis",
    "url": "https://www.conveythis.com",
"logo": "https://www.conveythis.com/logo.png",
"sameAs": [
"https://www.facebook.com/#{1} #",
"https://twitter.com/conveythis"
]
}
';
}
add_action( 'wp_head' , 'add_schema_markup');


Optimalizace rychlosti webu

Výkon je kritickým faktorem nejen pro uživatelskou zkušenost, ale také pro hodnocení SEO. Pro zvýšení rychlosti webu jsme podnikli několik kroků:

• Optimalizace obrazu : Použili jsme moderní obrazové formáty jako WebP , které nabízejí lepší míru komprese než tradiční formáty jako PNG a JPEG. Všechny obrázky byly zobrazeny ve vhodné velikosti na základě rozlišení obrazovky uživatele, což zajistilo rychlé načítání i na mobilních zařízeních.
• Líné načítání : Zavedením pomalého načítání obrázků jsme zajistili, že se zpočátku načítají pouze obrázky viditelné na obrazovce uživatele. Při posouvání uživatele by se načítaly další obrázky, což zkrátilo počáteční dobu načítání stránky.
• Ukládání do mezipaměti a minifikace : Použili jsme WP Rocket pro ukládání do mezipaměti, minifikace a kompresi souborů HTML, CSS a JavaScript. WP Rocket nám pomohl dosáhnout rychlejší doby načítání snížením celkové velikosti souboru a poskytováním statických verzí stránek uložených v mezipaměti opakovaným návštěvníkům.

9) Optimalizace a vyčištění databáze

Starý web nashromáždil značné množství „nevyžádaných“ dat kvůli nabubřelosti Elementoru a neefektivní struktuře databáze. Abychom zajistili hladký chod nového webu, provedli jsme důkladné vyčištění a optimalizaci databáze.

• Odstranění starých dat Elementor

Jak již bylo zmíněno dříve, i po deaktivaci Elementoru byly jeho styly a nastavení stále vloženy do databáze. K odstranění těchto nadbytečných dat a vyčištění databáze jsme použili vlastní dotazy. Kromě toho jsme odstranili všechny nepoužité mediální soubory, revize příspěvků a přechodné jevy s ukončenou platností, které se časem nashromáždily.

• Indexování databáze

Také jsme optimalizovali databázi přidáním indexů do často dotazovaných sloupců, abychom zajistili rychlejší a efektivnější databázové dotazy. Například přidáním indexu do post_date sloupec zrychlil dotazy související s nedávnými příspěvky a zlepšil výkon našich blogových stránek.

Závěr

Rozhodnutí vytvořit nový web od nuly bylo způsobeno omezeními a neefektivitou starého webu. Pouhé přepnutí motivu nebylo schůdnou možností kvůli nekonzistentnosti designu, nabubřelým stylům a problémům s výkonem způsobeným Elementorem. Vytvořením nového webu s vlastním vývojem a pokročilými uživatelskými poli jsme dosáhli efektivnějšího, soudržnějšího a profesionálnějšího webu, který zlepšuje uživatelský dojem a zároveň umožňuje efektivnější aktualizace a funkce A/B testování. Tento nový web poskytuje pevný základ pro budoucí růst a zlepšování.