Menü
A laboreszközök forgalmazásával foglalkozó, dániai székhelyű CAPP 2017 óta ügyfele a Netwerk Media Kft-nek. Egy 2020-ban végbement akvizíció során a CAPP része lett Európa egyik legnagyobb, laboreszközöket forgalmazó cégének, az AHN-nek. Csapatunk először a CAPP oldalának Drupal managementjét vállalta el, majd később, az AHN-nel történt egyesülés után az AHN Bio oldal elkészítésére is megbízást kaptunk. Ez az oldal már WordPress alapokon jött létre. Később még két újabb website követte ezt, a Maxxline Bio és a Shieldline, ez utóbbi a pandémiára reflektálva egy önálló maszkmárka a németországi piacon.
A CAPP oldala a capp.dk Drupal CMS-sel készült el korábban, és hosszú idő alatt nagyon jó SEO helyezéseket ért el a találati listában. Az oldal megújításának egyik legnagyobb kihívása pedig pontosan az volt, hogy ezeket a helyezéseket úgy tartsa meg az oldal, hogy a mögötte lévő tartalom managelő rendszert teljesen lecseréljük. Egy másik fontos tényező volt, amit végig szem előtt kellett tartanunk, hogy az ügyfélnek ugyanolyan könnyen átlátható és logikusan felépített admin felületet biztosítsunk, amit már a Drupal felületén megszokott. Azonban ezek mellett új igények is megfogalmazódtak. Ügyfelünk mindenképpen szerette volna tartalmilag változatosabbá tenni az egyes oldaltípusokat, mint pl. a kategória vagy a termék végoldalakat. Cél volt, hogy a szokványos szöveges tartalom mellett minél több vizuálisan látványos elem jelenjen meg a frontend oldalon. Ilyen elemek a Call to Action blokk, termék sliderek, feature szekciók. Nagyon fontos volt az is, hogy ezek rugalmasan legyenek kezelve és számos beállítási opciót tartalmazzanak.
Mielőtt részletesebben bemutatásra kerülne a fentebb vázolt igények megvalósítása, először vizsgáljuk meg, hogy mi a lényeges különbség a két CMS motor, a Drupal és a WordPress között.
Népszerűséget tekintve a világ összes weboldalának 64,2%-a WordPress rendszerrel készült és csupán 1,8%-uk Drupallal. Ebből tisztán látszik, hogy a WordPress rendszer lényegesen kedveltebb.
De vajon mi lehet ennek az oka? Első körben nézzük meg a rendszer használhatóságát!
A Drupalról elmondható, hogy alapvetően egyszerű feltelepíteni egy új rendszert, azonban a tartalom feltöltésén túl, minden további változtatás már komolyabb PHP és HTML ismeretet követel meg. A rendszer frissen tartásához is ugyanígy szükségesek ezek az ismeretek, tehát elmondható, hogy nehéz feladat naprakészen tartani.
A WordPress ezzel szemben – amellett, hogy szintén könnyen feltelepíthető – a sokféle téma és plugin használatával nagyon könnyen bővíthető funkcionálisan bármilyen programozói tudás megléte nélkül is. A rendszer naprakészen tartása is sokkal egyszerűbb, főleg az automatikus frissítések használatával.
A használhatóság után vizsgáljuk meg a rendszerek sebességét és teljesítményét!
A Drupal site-okról elmondható, hogy gyors betöltődésűek, hiszen nincs nagy erőforrás igényük. Valamint léteznek a rendszerhez olyan modulok, amik lehetővé teszik a weboldal cachelését is.
A WordPress ezen a fronton némiképp hátrányba kerül. Semmiképpen sem mondható lassúnak ez a webmotor sem. Alapvetően az alaprendszer itt is villámgyors, azonban a kinézetet biztosító téma és a plusz funkcionalitást adó pluginok lassíthatják a rendszert. Azonban a weboldalunk megfelelő optimalizálásával itt sem lehet probléma a gyorsasággal. Ehhez a rendszerhez is elérhetőek cache pluginok, amik még gyorsabbá tehetik az oldalt.
Harmadik pontként vessünk egy pillantást a rendszerek biztonságára!
A Drupalról elmondhatjuk, hogy az egyik legbiztonságosabb CMS rendszer a piacon, azonban a múltban ennél is kiderültek sebezhetőségi pontok, leginkább az adatbázis oldalról lehetett támadni.
A WordPress is egy nagyon biztonságos rendszer, a sebezhetőségét leginkább a rosszul megírt 3. féltől származó pluginok okozzák, illetve az extrém népszerűségből adódóan, a hackerek elsődleges célpontja is. Azonban a folyamatos frissítésekkel és megbízható pluginok használatával garantálható ezen rendszer biztonsága is.
Végül pedig nézzük meg a két webmotor SEO-ját!
Elmondható mindkét rendszerről, hogy a SEO követelményeinek eleget téve épül fel a kódbázisuk, valamint olyan modul is telepíthető hozzájuk, amely segíti az oldalak megfelelő keresőoptimalizálását.
A projekt legnagyobb kihívása talán a jelenlegi Google pozíciók megtartása volt. A fejlesztés során végig szem előtt kellett tartanunk, hogy a korábban jól SEO-zott oldalak megtartsák a jelenlegi pozíciójukat a kereső találati listájában. Első lépésként tehát kellő figyelmet fordítottunk az adatok migrálására. Nagyon fontos volt, hogy a Drupal rendszerben felrögzített meta címsorok és leírások változtatás nélkül kerüljenek át a WordPress rendszerbe.
Az oldalak fő tartalmi blokkját is a régi rendszerből hoztuk át, majd ezeket alakítottuk át flexibilis szekciókká, ügyelve arra, hogy a szövegezés és a szövegen belüli linkek változatlanok maradjanak. Végül ez egészült ki további látványt javító szekciókkal, mint például a termék sliderek és a CTA szekciók.
Amikre ezek mellett figyelnünk kellett még, azok a média tartalmak voltak. A korábbi oldalhoz képest a médiák mappa szerkezetét bizonyos mértékben módosítanunk kellett, hogy informatívabb legyen az URL. Mivel így módosultak az URL-ek egy adott logika alapján, regex-es átirányításokat kellett alkalmaznunk annak érdekében, hogy a korábban beindexelt média tartalmak a megfelelő helyre mutassanak továbbra is.
A WordPress rendszer számos lehetőséget ad arra, hogy a tartalmakat egyszerűen és változatosan tudjuk szerkeszteni az adminisztrációs felületen.
A rendszer által kínált szerkesztő felületek
Először is ott van rögtön a Gutenberg szerkesztő, melynél a WordPress fejlesztő csapata alapjaiban újragondolta a tartalmak vizuális szerkesztését és egy React alapú, drag & drop-os felületet alkotott meg a WordPress újabb verzióiban.
Emellett sokaknál a WordPress szerves része már az Elementor page builder, ami az egyik legnépszerűbb a piacon, ezért a cégünk is sok projektnél használja.
Mindkét megoldásnak előnye, hogy nagyon sok beállítási lehetőséggel rendelkeznek és gyakorlatilag kódolási ismeret nélkül is nagyon színes layoutok alakíthatóak ki velük. Azonban ez némiképp a hátrányuk is egyben. Egy olyan projektnél, ahol megvannak a konkrét elvárások, hogy pontosan milyen típusú szekciókat szeretnénk az oldalra és azoknak milyen beállítási lehetőségei legyenek, ez a sok opció könnyen kontraproduktívvá teheti a munkát. Illetve, bár ezeknél a szerkesztőknél ki lehet alakítani layoutokat, mint egyfajta vázakat, ezek kötött struktúrát eredményeznek. Ennél a projektnél azonban fontos elvárás volt, hogy az oldalon megjelenő szekciók tetszőleges sorrendben rendezhetőek legyenek.
A projekthez választott szerkesztő felület
Ezen kritériumok okán született meg az a döntés, hogy az ACF flexible content megoldását fogjuk alkalmazni. A WordPress a custom fieldek segítségével lehetőséget biztosít arra, hogy egyes entitásokhoz (oldalak, bejegyzések vagy termékek) egyedi adatot kapcsoljunk. Az Advanced Custom Field (ACF) bővítménnyel a WordPress ezen rendszerét így egy sokkal magasabb és felhasználóbarátabb szintre tudjuk emelni. A custom fieldek itt már nem csak egyszerű szöveges mezők lehetnek, hanem akár választógombok, képek, ismétlődő mezőcsoportok, sőt előre definiált, rugalmas mezőcsoportok is, amire jelen projektnél is szükségünk volt.
Hogyan került kialakításra a felület?
A projekt során az ügyfél igényeit figyelembe véve létrehoztunk különféle szekció típusokat a flexible content mezőcsoportjaként. Olyan szekciók lettek kialakítva, mint pl. CTA Related posts vagy Related products.
Minden szekció rendelkezik pár alapértelmezett mezővel, mint címsor vagy bevezető szöveg, illetve néhány alapértelmezett beállítási paraméterrel, mint a szövegek tájolása vagy a háttérszín, amik listából választhatóak ki. Azért döntöttünk a színlistából választhatóság mellett, hogy az oldal minden esetben egységes arculatot mutasson. A betűtípusok állíthatósága pedig szintén ezen okok miatt nem került be paraméterként sehova. Lényeges volt, hogy az egység és látvány, amit megálmodtunk, minden tekintetben megmaradjon.
Ezek a flexibilis szekciók rendelkezésre állnak az oldalaknál, termékkategóriáknál, termékeknél és cikkeknél is. A szekciók sorrendje szabadon változtatható, ami nagymértékű rugalmasságot biztosít.
A termékeknél a flexibilis szekciók mellett kialakításra kerültek még a termékspecifikus mezők is. Ezek segítségével nagyon egyszerűen megjeleníthetőek a termékhez tartozó képek, videók és specifikációk. Lényeges, hogy az admin felületen csak a tartalmat kell feltölteni, a kódírás nem szükséges, az minden esetben a háttérben épül fel, tehát véletlenül sem lehet elrontani azt a tartalmak módosítása során.
A termék képeknél egy egyedi funkció is kialakításra került. A beállított kép egyes részeihez szöveges leírásokat kellett kapcsolni olyan formában, hogy a képen egy ponttal megjelölünk egy részt, majd abból egy vonal vezet a hozzátartozó leíráshoz. Ezt úgy alakítottuk ki, hogy az admin felületen nagyon könnyen megadható legyen ez a pont a képen és beírható legyen a hozzátartozó szöveg.
Különleges funkció még az oldalon a másodlagos navigáció termék vagy termékkategória. Az egyes beállított szekcióknál megadható, hogy a másodlagos navigációból odagörgethető-e az oldal, így segítve a látogatót az oldalon történő navigálásban.
A fent leírtak alapján elmondható, hogy egy nagyon izgalmas és kihívásokkal teli projekt került megvalósításra. Végeredményben pedig egy olyan oldal jöhetett létre, amivel mind az ügyfél, mind a fejlesztői csapatunk elégedett lehetett. Ügyfél oldalról fontos továbbá az is, hogy most már az általa kezelt oldalak mindegyike WordPress alapokra épül, így könnyebb számára a tartalmak menedzselése.
Személyre szabott, minden igényt kielégítő weboldalt szeretnél?
Fordulj hozzánk bizalommal és kérj tőlünk árajánlatot!
Hungarian
English
German