1) Miért hoztunk létre új webhelyet, és miért nem tudtunk egyszerűen „témát váltani”

Amikor először azonosítottuk a változtatás szükségességét, a feladat egyszerűnek tűnt: „Változtassa meg a felső blokkot, és tegye hatékonyabbá a cselekvésre ösztönzést.” Névértékben ez gyors megoldásnak tűnhet, de hamar rájöttünk, hogy ez a kis feladat sokkal nagyobb problémákat tárt fel a webhely szerkezetével és kialakításával kapcsolatban. A probléma nem csak egy blokkban volt; a telek teljes architektúrája átalakításra szorult.

Weboldalunk az idők során épült, különféle oldalakat adtunk hozzá különböző dizájnnal és elrendezéssel, egységes téma vagy sablon nélkül. Minden oldal egyedi volt a dizájnjában, ami talán kreatívnak hangzik, de jelentős problémához vezetett: következetlenséghez. Ha továbblépnénk, és csak a legfelső blokkhoz készítenénk el egy új dizájnt, miközben a webhely többi részét megőriznénk, az azt jelentené, hogy manuálisan frissítjük ezt a blokkot több mint 700 oldalon és bejegyzésben. Még rosszabb, hogy ezt a manuális folyamatot minden alkalommal meg kell ismételni, amikor jövőbeni változtatásokat akarunk végrehajtani. Képzelje el, milyen hatástalan, ha több száz oldalt kell átfésülnie, biztosítva, hogy mindegyik megkapja a legújabb frissítéseket. Gyorsan világossá vált, hogy a régi telephellyel való munka folytatása nem lenne fenntartható.

Az egyes oldalak frissítésének logisztikáján túl az általános felhasználói élményt is figyelembe kellett vennünk. A felhasználók manapság zökkenőmentes, összefüggő élményt várnak, amikor felkeresnek egy webhelyet. Ha lejjebb görgetnek egy oldalt, és azt látják, hogy a design nem konzisztens – minden egyes blokk más-más stílust használ –, az széttagolt és szakszerűtlen benyomást kelt. Még rosszabb, ha a felhasználó egyik oldalról a másikra lép, és észreveszi, hogy az elrendezés és a design teljesen eltérő, az megerősíti a rendezetlenség érzését.

Az inkonzisztencia túlmutat az elrendezésen. A webhelyen található képek közül sok elavult, rossz stílusú, vagy akár nem megfelelő módon neurális hálózatok generálták. Ezek a képek nem feleltek meg a modern tervezési szabványoknak, és cseréjük újabb ijesztő feladat volt. A rossz képek használata rosszul tükrözte a webhely általános minőségét, és negatív benyomást kelt a felhasználókban az általunk kínált termékről vagy szolgáltatásról.

Nem volt egyszerű módja a webhely átfogó frissítésének egy olyan eszközzel, mint a Elementor. Minden oldal és blokk saját soros stílusokat tartalmazott, ami azt jelenti, hogy globálisan nem lehetett változtatásokat végrehajtani. Ha frissíteni szeretnénk az oldal stílusát, akkor minden egyes oldalt végig kellene néznünk, és manuálisan frissítenünk kellene minden blokkot, ami időigényes és nem hatékony lenne. Ezt szem előtt tartva nyilvánvalóvá vált, hogy egyetlen megoldásunk egy új weboldal felépítése a semmiből. Ez lehetővé tenné számunkra, hogy az összes tartalmat ugyanazon URL-ek megőrzése mellett, de új, következetes és könnyen frissíthető kialakítással vigyük át.

2) Miért döntöttünk úgy, hogy nem használjuk a Elementor-t

Elementor az egyik legnépszerűbb oldalépítő WordPress. A felszínen nagyszerű eszköznek tűnik, amely lehetővé teszi a gyors és egyszerű oldalkészítést. Miután azonban sokat dolgoztunk vele, számos korláttal találkoztunk, amelyek miatt úgy döntöttünk, hogy eltávolodunk a Elementor-től, és helyette egy egyedi gyártású webhelyet választunk.

Elementor’s Korlátozások és kihívások:

1. Hibák és hibák: Bár a Elementor számos hasznos funkciót kínál, nem mentes a technikai problémáktól. Például, amikor lemásoltunk egy oldalt, és megpróbáltuk szerkeszteni, az új oldal gyakran különbözött az eredetitől, még a változtatások előtt. Gyakran előfordultak hibák az elemek megjelenítésével kapcsolatban, például a “maximális képszélesség ” tulajdonság nem működött megfelelően. Ezek a hibák megnehezítették az oldalak egységes stílusának biztosítását.
2. Túl sok kreatív szabadság, ami következetlenséghez vezet: A Elementor’s legfontosabb értékesítési pontjai közül az egyik az a képesség, hogy mindent testreszabhat. Ez a rugalmasság azonban kétélű fegyver lehet, különösen akkor, ha több szerkesztő dolgozik az oldalon. A nem szakemberek könnyen létrehozhatnak akaratlanul is inkonzisztens kialakítású oldalakat. Például láttunk olyan eseteket, amikor a szerkesztők rózsaszín szöveget használtak rózsaszín gombokon, vagy repülő narancssárga háromszögeket adtak hozzá a háttérben, ami zsúfolt és zavaros dizájnt eredményezett. Szigorú tervezési rendszer nélkül lehetetlenné vált az összetartó vizuális identitás fenntartása.
3. Korlátozott testreszabás a fejlett funkcionalitás érdekében: Míg a Elementor kiemelkedik az alapvető oldalépítésben szöveggel és képekkel, nagyobb kihívást jelent, ha egyéni funkciókat kell hozzáadnia. Gyakran azon kaptuk magunkat, hogy a beépített blokkokra korlátozódtunk, amelyeket nehéz volt testreszabni a bonyolultabb funkciókhoz. Ahogy szükségleteink túlnőttek az alapvető elrendezéseken, a Elementor’s korlátai egyre nyilvánvalóbbá váltak.
4. Duzzadt kóddal és teljesítménnyel kapcsolatos problémák: Elementor’s oldalépítési módszer bevezeti az elemek túlzott beágyazását. Például a Elementor automatikusan többszöröst generál
   konténerek máson belül

   elemek, mindegyiknek megvan a maga stíluskészlete. Ez egy olyan felfúvódott struktúrát eredményez, amely negatívan befolyásolja a betöltési sebességet, az oldal teljesítményét, és végső soron a webhely SEO rangsorát. Amikor sebességteszteket futtattunk, az eredmények folyamatosan rosszak voltak, és nagyrészt a Elementor által generált nehéz kód volt a hibás.
5. Nincsenek A/B tesztelési képességek: A mai digitális környezetben az A/B tesztelés elengedhetetlen a felhasználói élmény optimalizálásához. A Elementor azonban nem kínálja fel a webhely különböző verzióinak megjelenítését a különböző felhasználók számára. Mindenki ugyanazt az oldalt látja, ami korlátozza a tervezési elemek, például a színek, a gombformák és a háttérképek tesztelésének és finomhangolásának lehetőségét. E funkció nélkül nem tudnánk optimalizálni a webhelyet a valós felhasználói viselkedés alapján.
6. Adatbázis Bloat: A Elementor talán egyik legjelentősebb hátránya, hogy hogyan kezeli a stílusokat és a tartalmat. A Elementor stílusokat, beágyazott struktúrákat és egyéb szükségtelen címkéket tárol az adatbázis tartalmával keverve. Ez egy felduzzadt adatbázishoz vezet, amely még akkor sem törlődik, ha a Elementor le van tiltva vagy eltávolítva. Ennek eredményeként az új témára vagy keretrendszerre való váltás nem oldja meg a problémát – ezek a stílusok beágyazva maradnak az oldalakon, és továbbra is problémákat okoznak.

Mindezeket a kihívásokat szem előtt tartva világossá vált, hogy robusztusabb megoldásra van szükségünk. Úgy döntöttünk, hogy egy új, független weboldalt építünk Elementor nélkül, fenntarthatóbb és rugalmasabb megközelítést választva.

3) Hogyan hozzunk létre oldalt az új webhelyen

Az új webhely a semmiből történő felépítése lehetőséget adott számunkra, hogy tiszta, letisztult oldalkészítési folyamatot alakítsunk ki. Az új rendszerben az oldal létrehozása egyszerű:

1. Jelentkezzen be a WordPress adminisztrációs panelre, és kattintson az Oldalak -> Új oldal hozzáadása elemre .
2. Megjelenik a szabványos WordPress szerkesztő, amelybe szöveget írhat vagy beilleszthet, linkeket adhat hozzá, és képeket tölthet fel.

Ez a folyamat egyszerű, de rugalmas. Ahelyett, hogy a Elementor’s bonyolult blokkrendszerre hagyatkozna, a WordPress tartalomszerkesztője sokkal tisztább, lehetővé téve a gyors frissítéseket és az egyszerű testreszabást. A szerkesztő alatt a következőhöz vannak beállítások Speciális egyéni mezők (ACF), amelyek már úgy vannak beállítva, hogy fenntartsák a konzisztenciát a teljes webhelyen.

Az ACF lehetővé teszi rugalmas tartalomrészek létrehozását olyan blokkokkal, mint a Content 1…Content 15 , ahol könnyedén beállíthatja a címet, a szöveget, a képet és a gombcímkéket az oldal egyes szakaszaihoz. Ezek a blokkok automatikusan váltogatják a képek és a szöveg elhelyezését, biztosítva, hogy az elrendezés vizuálisan vonzó maradjon anélkül, hogy manuálisan módosítani kellene.

A képeknél színillesztő rendszert alkalmaztunk, amely automatikusan alkalmaz egy színátmenetet a webhely fő színeiben. Ez biztosítja, hogy minden kép összhangba kerüljön az általános esztétikaival. Azoknál a logóknál vagy képernyőképeknél, ahol a színeknek sértetleneknek kell maradniuk, létezik egy „színek megtartása” opció, amely felülírja a színátmenetet.

Ez a rendszer leegyszerűsíti a tartalomkezelést, miközben megőrzi a tervezési konzisztenciát az összes oldalon.

4) Hogyan hozzunk létre új bejegyzést

A bejegyzések létrehozása az új webhelyen ugyanazt az egyszerűsített folyamatot követi, mint az oldalak létrehozása, néhány lényeges különbséggel:

• A bejegyzések URL-címe tartalmazza a ../blog/.. címet, megkülönböztetve őket az oldalaktól.
• A jobb oldali sávban egy blokk automatikusan megjeleníti a három legújabb cikket, segítve a blog dinamikus és vonzó megőrzését.

Az összes bejegyzés sablonja a template-parts/content/content-single.php fájlban található, amely kezeli az egyes blogbejegyzések szerkezetét és elrendezését. Ez a konzisztens sablon lehetővé teszi az egyszerű frissítéseket, és biztosítja, hogy minden bejegyzés ugyanazon tervezési irányelveknek feleljen meg.

5) Speciális egyéni mezők (ACF)

Az ACF elengedhetetlen része volt új weboldalunk fejlesztésének. Lehetővé teszi egyedi mezők létrehozását, amelyek könnyen kezelhetők a WordPress adminisztrációs paneljén keresztül. Az olyan mezőkre, mint a content_1, hivatkozunk a PHP-kódban, ami lehetővé teszi számunkra, hogy dinamikusan húzzuk be a megfelelő tartalmat minden oldalhoz és bejegyzéshez.

Ez a rugalmasság kritikus fontosságú annak biztosításához, hogy hatékonyan tudjuk kezelni és frissíteni a webhelyet, miközben szükség esetén továbbra is teret biztosítunk a testreszabásra.

6) A/B tesztelés

Az egyik legjelentősebb fejlesztés, amelyet az új oldallal végrehajtottunk, az A/B tesztelés megvalósítása volt. Az A/B tesztelés lehetővé teszi a webhely két verziójának összehasonlítását, hogy megtudjuk, melyik teljesít jobban a felhasználók körében. Ez magában foglalhatja a különböző színek, gombformák, hátterek vagy akár elrendezések tesztelését.

Ezt a funkciót az URL-ben található GET paraméterek használatával valósítottuk meg. Például két azonos hirdetési kampány hozható létre, de eltérő URL-ekkel:

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

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

Amikor a felhasználók ezekre a hivatkozásokra kattintanak, a paraméter egy cookie-ba kerül. A paraméter értékétől függően a webhely az oldal különböző verzióit, például különböző gombszíneket vagy háttérképeket jelenít meg. Ez lehetővé teszi számunkra, hogy értékes adatokat gyűjtsünk a felhasználói preferenciákról és viselkedésekről.

Minden esemény bejelentkezve a .csv fájlban, valamint egy MySQL adatbázisban, lehetővé téve számunkra az adatok elemzését és megalapozott döntések meghozatalát a webhely fejlesztésével kapcsolatban.

7) A functions.php fájl

8) A SEO és a webhely sebességének kezelése

A webhely átalakítása során a fő hangsúly a SEO és a webhely általános teljesítményének javításán volt. Az eredeti, Elementor használatával épített webhelyen problémák merültek fel a lassú betöltési időkkel és a szuboptimális SEO gyakorlattal a dagadt kód és az optimalizált képek miatt.

SEO javítása

Annak érdekében, hogy új webhelyünk SEO-barát legyen, már a kezdetektől fogva bevezettünk néhány bevált gyakorlatot:

• Szemantikus HTML : Gondosan strukturáltuk a webhely HTML-jét a fejléccímkék megfelelő használatával (
  ,
  stb.), biztosítva, hogy a keresőmotorok könnyen elemezzék és megértsék a tartalomhierarchiát. Ez különösen fontos mind a SEO-rangsorolás, mind a hozzáférhetőség szempontjából.
• Metacímkék és Open Graph adatok : A Yoast SEO beépülő modult használtuk a metacímek, leírások és az Open Graph adatok kezelésére a közösségi megosztáshoz. A Yoast használatával gondoskodtunk arról, hogy minden oldal és bejegyzés optimalizált metaadatokkal rendelkezzen, ami kulcsfontosságú a keresőmotorok láthatósága és a közösségi média platformokon való átkattintási aránya szempontjából.
• Sémajelölés : A functions.php fájl segítségével egyéni sémajelöléseket adtunk hozzá a strukturált adatokhoz, javítva ezzel, hogy a keresőmotorok hogyan jelenítik meg oldalainkat a keresési eredmények között. Például a cikkekhez, esettanulmányokhoz és termékekhez sémát adtunk, ami segít a keresőmotoroknak tartalmaink jobb kategorizálásában.

function add_schema_markup() {
  visszhang'
  {
    "@context": "http://schema.org",
    "@type": "Szervezet",
    "név": "ConveyThis",
    "url": "https://www.conveythis.com",
"logo": "https://www.conveythis.com/logo.png",
"ugyanaz, mint": [
„https://www.facebook.com/conveythis”,
"https://twitter.com/conveythis"
]
}
';
}
hozzáadás_művelet( 'wp_head', 'séma_jelölés hozzáadása' );


Oldalsebesség optimalizálása

A teljesítmény nemcsak a felhasználói élmény szempontjából kritikus tényező, hanem a SEO-rangsorolás szempontjából is. Számos lépést tettünk a webhely sebességének javítása érdekében:

• Képoptimalizálás : Modern képformátumokat, például WebP-t használtunk, amelyek jobb tömörítési arányt kínálnak, mint a hagyományos formátumok, például a PNG és a JPEG. Minden kép a felhasználó képernyőfelbontásának megfelelő méretben került kiszolgálásra, így mobileszközökön is gyors betöltési időket biztosítottunk.
• Lazy Loading : A képek lusta betöltésének megvalósításával biztosítottuk, hogy először csak a felhasználó képernyőjén látható képeket töltsük be. A felhasználó görgetése közben további képek töltődnek be, csökkentve ezzel a kezdeti oldalbetöltési időt.
• Gyorsítótár és minifikáció: WP Rocketet használtunk HTML, CSS és JavaScript fájlok gyorsítótárázására, minifizálására és tömörítésére. A WP Rocket segített gyorsabb betöltési idők elérésében azáltal, hogy csökkentette az összfájlméretet, és statikus gyorsítótározott oldalakat szolgált az ismétlődő látogatóknak.

9) Adatbázis optimalizálás és tisztítás

A régi webhely jelentős mennyiségű “junk” adatot halmozott fel a Elementor’s felfúvódása és a nem hatékony adatbázis-struktúra miatt. Az új oldal zökkenőmentes működése érdekében alapos adatbázis-tisztítást és optimalizálást végeztünk.

• Régi Elementor adatok eltávolítása

Ahogy korábban említettük, még a Elementor deaktiválása után is a stílusai és beállításai még mindig be voltak ágyazva az adatbázisba. Egyéni lekérdezéseket használtunk a felesleges adatok törlésére és az adatbázis megtisztítására. Ezenkívül eltávolítottuk a fel nem használt médiafájlokat, a bejegyzések revízióit és a lejárt tranzienseket, amelyek az idők során felhalmozódtak.

• Adatbázis indexelés

Az adatbázist úgy is optimalizáltuk, hogy indexeket adtunk a gyakran lekérdezett oszlopokhoz, így biztosítva, hogy az adatbázis-lekérdezések gyorsabbak és hatékonyabbak legyenek. Például index hozzáadása a későbbre keltez rovat felgyorsította a legutóbbi bejegyzésekkel kapcsolatos lekérdezéseket, javítva ezzel blogoldalaink teljesítményét.

Következtetés

Az új webhely nulláról történő felépítésére vonatkozó döntést a régi webhely korlátai és hatástalanságai vezérelték. A téma egyszerű váltása nem volt járható megoldás a tervezési következetlenségek, a dagadt stílusok és a Elementor által okozott teljesítményproblémák miatt. Egy új webhely létrehozásával egyéni fejlesztéssel és Advanced Custom Fields-szel hatékonyabb, összetartóbb és professzionálisabb webhelyet értünk el, amely javítja a felhasználói élményt, miközben lehetővé teszi az egyszerűsített frissítéseket és az A/B tesztelési funkciókat. Ez az új oldal szilárd alapot biztosít a jövőbeli növekedéshez és fejlesztésekhez.