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 az Elementor. Minden oldal és blokk saját beépített stílust tartalmazott, ami azt jelenti, hogy a változtatásokat nem lehetett globálisan végrehajtani. Ha frissíteni akarnánk az oldal stílusát, akkor minden egyes oldalt végig kellene mennünk, és minden blokkot manuálisan frissítenünk kellene, ami időigényes és nem hatékony. Ezt szem előtt tartva nyilvánvalóvá vált, hogy egyetlen megoldásunk az, hogy a semmiből új weboldalt készítünk. 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 továbbítsuk.

2) Miért döntöttünk úgy, hogy nem használjuk az Elementort?

Az Elementor a WordPress egyik legnépszerűbb oldalkészítője. A felszínen egy nagyszerű eszköznek tűnik, amely lehetővé teszi a gyors és egyszerű oldalkészítést. Azonban, miután alaposan dolgoztunk vele, számos korlátba ütköztünk, amelyek miatt úgy döntöttünk, hogy eltávolodunk az Elementortól, és inkább egy egyedi tervezésű webhelyet választunk.

Az Elementor korlátai és kihívásai:

1. Hibák és hibák : Bár az Elementor számos hasznos funkciót kínál, technikai problémáktól sem mentes. Például amikor lemásoltunk egy oldalt, és megpróbáltuk szerkeszteni, az új oldal gyakran másként nézett ki, mint az eredeti, még a változtatások elvégzése előtt is. Gyakran voltak 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, következetlenséghez vezet : Az Elementor egyik legfontosabb értékesítési pontja az, hogy mindent személyre szabhat. Ez a rugalmasság azonban kétélű fegyver lehet, különösen, ha több szerkesztő is dolgozik az oldalon. A nem szakemberek számára könnyen előfordulhat, hogy akaratlanul is következetlen tervezésű oldalakat hoznak létre. Láttunk például olyan eseteket, amikor a szerkesztők rózsaszín szöveget használtak a rózsaszín gombokon, vagy repülő narancssárga háromszögeket adtak a háttérhez, ami zsúfolt és zavaros megjelenést eredményezett. Szigorú tervezési rendszer nélkül lehetetlenné vált az összefüggő vizuális identitás fenntartása.
3. Korlátozott testreszabás a speciális funkciókhoz : Míg az Elementor az alapvető oldalépítésben jeleskedik szöveggel és képekkel, ez még nagyobb kihívást jelent, ha egyéni funkciókat kell hozzáadnia. Gyakran 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, az Elementor korlátai egyre nyilvánvalóbbá váltak.
4. Felfújt kóddal és teljesítménnyel kapcsolatos problémák : Az Elementor oldalépítési módszere az elemek túlzott egymásba ágyazását vezeti be. Például az Elementor automatikusan többszöröst generál
   konténerek máson belül

   elemek, mindegyiknek saját stíluskészlete van. Ez felduzzadt szerkezetet 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 rangsorolását. Amikor sebességteszteket futtattunk, az eredmények folyamatosan gyengék voltak, és nagyrészt az Elementor által generált nehéz kód volt a felelő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. Az 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 a webhelyet látja, ami korlátozza a tervezési elemek, például a színek, gombformák és 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. Database Bloat : Az Elementor talán egyik legjelentősebb hátránya a stílusok és a tartalom kezelése. Az Elementor stílusokat, beágyazott szerkezeteket és egyéb szükségtelen címkéket tárol az adatbázisban lévő tartalommal keverve. Ez felduzzadt adatbázishoz vezet, amely még akkor sem tisztul meg, ha az Elementort letiltják vagy eltávolítják. Ennek eredményeként az új témára vagy keretrendszerre 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, egy fenntarthatóbb és rugalmasabb megközelítés mellett.

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 az Elementor bonyolult blokkrendszerére hagyatkozna, a WordPress tartalomszerkesztője sokkal letisztultabb, lehetővé téve a gyors frissítéseket és az egyszerű testreszabást. A szerkesztő alatt találhatók az Advanced Custom Fields (ACF) beállításai, amelyek már konfigurálva vannak, 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.csvfá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 Elementor használatával épített eredeti webhelyen problémák voltak a lassú betöltési időkkel és az optimálistól elmaradó SEO gyakorlattal a felduzzadt kód és az optimalizálatlan 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",
"sameAs": [
"https://www.facebook.com/#{1} #",
"https://twitter.com/conveythis"
]

';

add_action( 'wp_head' , 'add_schema_markup' );


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árazás és kicsinyítés : A WP Rocketet használtuk a HTML-, CSS- és JavaScript-fájlok gyorsítótárazására, kicsinyítésére é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 a teljes fájlméretet, és az oldalak statikus gyorsítótárazott változatait szolgálta ki az ismétlődő látogatók számára.

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

A régi webhely jelentős mennyiségű „szemét” adatot halmozott fel az Elementor felfúvódása és nem hatékony adatbázis-struktúrája 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, az Elementor deaktiválása után is a stílusok és a beállítások az adatbázisba ágyazva voltak. 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 az idővel felhalmozódott fel nem használt médiafájlokat, közzétettük a revíziókat és a lejárt tranzienseket.

• 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 akésőbbre keltezrovat felgyorsította a legutóbbi bejegyzésekkel kapcsolatos lekérdezéseket, javítva ezzel blogoldalaink teljesítményét.

Következtetés

Azt a döntést, hogy a semmiből új weboldalt készítsünk, a régi oldal korlátai és nem megfelelő hatékonysága indokolta. A téma egyszerű váltása nem volt járható megoldás a tervezési következetlenségek, a felfújt stílusok és az Elementor okozta teljesítményproblémák miatt. Azáltal, hogy új webhelyet hoztunk létre egyedi fejlesztéssel és speciális egyéni mezőkkel, hatékonyabb, egységesebb é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 webhely szilárd alapot biztosít a jövőbeli növekedéshez és fejlesztésekhez.