Bár egészen biztosan van, akit fűt a hév, amikor nekilát egy újabb WordPress alapú weboldal megalkotásának, azért biztosak vagyunk benne, hogy sokak fásultak már bele abba, hogy általában sok szempontból kötött sablonok segítségével kell összeállítaniuk az oldalak tartalmát, a menüket és egyéb összetevőket. Itt jön a képbe mai tesztalanyunk, amely valójában nem nevezhető hagyományos értelemben vett sablonnak, de még az olyan hagyományos oldalépítőktől is sok szempontból különbözik, mint mondjuk a DIVI, az Elementor vagy a WPBakery. Következzen egy Oxygen builder teszt, amelyből reményeink szerint kiderül, miért is olyan izgalmas ezzel az eszközzel nekivágni egy weboldal összerakásának, s hogyan valósítható meg vele a WordPress fejlesztés teljes alkotói szabadsággal.
Oxygen Builder: WordPress fejlesztés teljes alkotói szabadsággal
A WordPressben a sablonok persze jelentősen gyorsíthatják a munkát, s bár cserébe erősen megkötik a lehetőségeinket egy oldal megjelenését és kialakítását illetően, a legtöbb esetben ez elegendő lehet, feltéve, hogy találtunk egy jól összerakott sablont, aminél mindenre gondoltak a készítői.
Ezzel szemben az Oxygen Builder esetében szinte a nulláról kell építenünk, cserébe viszont teljes alkotói szabadságot kapunk. Kihasználhatjuk kreativitásunkat, hogy pixelre pontosan olyan megjelenést dolgozzunk ki, amilyet elképzeltünk (vagy amilyet az ügyfelünk kért). Ehhez az Oxygen Builder, amelyet bővítményként kell telepíteni a WordPressbe, egy elég merész lépéssel indít: teljesen kikapcsolja a WordPress sablonkezelő rendszerét. Bármilyen sablon van telepítve és alapértelmezettnek beállítva, az onnantól teljesen inaktív. Helyette az Oxygen Builer saját oldalépítő felületével tudunk dolgozni.
Ez hasonlít a megszokott oldalépítőkre, vagyis kapunk előre definiált modulokat, elemeket, amelyeket felhasználhatunk az oldalak felépítésekor, de van egy óriási különbség: ezen elemek minden apró részletét szabadon átszabhatjuk, emellett pedig kiegészíthetők egyedi JavaScript és CSS kódokkal. Szóval kódolhatunk egy halom jellemzőt manuálisan, de természetesen szinte minden létfontosságú érték beállítható egyszerűen, grafikus vezérlőkkel is. Ha valaki otthon van a HTML, PHP, CSS, JavaScript programozásban, ezzel az eszközzel a végsőkig kiélheti kreativitását, miközben abszolút egyszerűen tudja megtervezni az elemek elrendezését, megjelenését, képi világát is. A tulajdonság panelen közvetlenül állíthatjuk a CSS tulajdonságokat, így teljes kényelemben alakíthatunk át minden elemet.
Sőt, az egyéni mezők felvételével teljesen új szintre emelhetjük a tervezést, hiszen így ezeknek a mezőknek az értékét dinamikusan beemelhetjük például bármilyen szövegmezőbe, s egy halom adatot tudunk ily módon megjeleníteni az oldalakon, teljes kényelemben. Lehetővé teszi hurkok, feltételek és ismétlők használatát. Képes dinamikus hívásokat, posztokat, poszt típusokat megjeleníteni, sőt PHP függvényeket és komplex feltételeket használni az elemek megjelenítésének szabályozására.
Az Oxygen Builder tartalmaz egy Code Block nevű elemet, amelybe közvetlenül írhatunk be PHP és HTML kódot. Az ebben elhelyezett PHP kód ugyanúgy viselkedik, mintha egy WordPress sablonfájlban írnánk meg, vagyis elérheti a WordPress API függvényeit, lekérdezheti a bejegyzéseket, megjeleníthet egyedi mezőket stb. A Code Block eredménye a szerkesztőben azonnal látható, így gyorsan tesztelhetjük a megírt kódot.
Ráadásul az Oxygen Builder egyáltalán nem fapados, a gyorsabb haladás érdekében számtalan előre definiált komponens közül választhatunk benne, témánként kategorizálva. Ezeket csak rápakoljuk a vászonra és lecseréljük a képeket, szövegeket. Hasonlóan nagy segítséget jelentenek a template-ek, amelyekkel megtervezhetjük az alap oldal- vagy blogbejegyzés felépítéseket. Mindent teljesen egyedire szabhatunk, így adott esetben ez a megoldás a landing page-ektől a tartalomra fókuszáló online magazinok elkészítéséig mindenre alkalmas.
Szóval ha akarunk, ugyanolyan kényelmesen összedobálhatunk vele egy oldalt, mintha mondjuk a DIVI-t használnánk. Két különbség van csak: itt, ha nem tetszenek az előre beállított jellemzők, bármit megváltoztathatunk. Plusz zongorázni lehet a különbséget az Oxygen és a DIVI/Elementor alapon készített weboldalak betöltési sebessége között, az Oxygen javára. Ennek egyik oka, hogy az Oxygen meglepően tiszta, optimalizált kódot generál, amiben nincsenek felesleges DIV elemek és egyéb kódrészletek, amelyeknek amúgy semmi keresnivalójuk az adott lapon. Aki amúgy szeretne részletekbe menő összehasonlítást a DIVI és Elementor eszközökkel, annak javasoljuk ezt az oldalt.
Az Oxygen Builder természetesen lehetővé teszi az animációk és interakciók szerkesztését is. Kedvünkre alakíthatjuk az elemek minden rezzenését és funkcióját akár megjelenéskor, akár görgetésnél vagy egyéb eseményeknél. Emellett megvan a lehetőség arra is, hogy az összetett elemek megtervezése után azokat tetszőleges újrahasznosítsuk, így elég csak egyszer megalkotni ezeket, később pedig bárhol beemelhetők az oldalakba.
Ami még fontos: minden funkció villámgyorsan és egyszerűen érhető el az oldalépítő felületen. Ha egyszer betöltött a szerkesztő, onnantól nem igazán kell várnunk soha, semmire. Azonnal hozzáférünk a sablon elemekhez, a jellemzők módosítására szolgáló oldalsávokhoz és minden egyéb opcióhoz. Van viszont egy bökkenő, nevezetesen nem mindegy, hogy melyik verzióját választjuk az Oxygen Buildernek. Merthogy rögtön kettő is van belőle.
Oxygen Classic vs Oxygen 6
Máris elmeséljük az okát, hogy miért jelöltük cikkünk képeinél külön az Oxygen Classic és Oygen 6 változatokat. Az Oxygen 2016-ban jelent meg először, s meglehetősen hamar nagy népszerűségre tett szert, hiszen mint a fentiekből is kitűnik, gyors, végtelenül testreszabható, de ennek ellenére egészen könnyen használható is.
A készítők elképzelése, hogy egyszerűvé tegyék a vizuális oldalépítést, miközben megőrzik a kézi kódolás pontosságát, rugalmasságát és hatékonyságát. Ebből született egy olyan oldalépítő, amely egyben a WP sablonok funkcióit átvette, így egységesebb és tisztább kódot előállítva. Ez a kezdeti megoldás ma már Oxygen Classic névre hallgat, s jelen cikkünk készültekor egészen a 4.9.x-es verzióig terjed. A modern webfejlesztési gyakorlatok terjedésével azonban úgy tűnt, akadnak korlátai, így a fejlesztők újraterveztek mindent az alapoktól, s megszületett az Oxygen 6. Ez cikkünk írásakor még béta, de már megbízhatóan használható. Az ember ezek alapján arra következtethet, hogy mostantól akkor csak ez utóbbival érdemes foglalkozni, mert a másik halott. De nem!
A két változatot párhuzamosan fejlesztik tovább, aminek az egyik oka valószínűleg az, hogy nem igazán kompatibilisek, így a korábban az Oxygen Classic segítségével épített oldalakat az Oxygen 6 nem tudja átvenni. Kidobni viszont olyannyira nem kell ezeket, hogy az Oxygen Classic terméktámogatása továbbra is teljes marad. Az 5.x-es verziószámokat is fenntartották neki, hogy a jövőben még legyen hova számozni.
Aki viszont még modernebb fejlesztési filozófiára vágyik, annak már most is elérhető az Oxygen 6, amely jelentősen robosztusabb, hatékonyabb és funkciókban gazdagabb. Ennek megfelelően teljesen új felhasználói felülettel látták el, a panelek és a működés is sok esetben eltérnek az elődtől. Számos új képességet hoz magával, például a natív CSS változó támogatást, egy újrahasználható komponens rendszert, fejlett interakciós motort, jelentősen továbbfejlesztett CSS szelektorkezelést, valamint új munkafolyamat-funkciókat és gyorsbillentyűket, hogy növeljék a produktivitást. A felület eltérései miatt egyébként az Oxygen 6 használata valószínűleg döcögősen indul majd azoknak, akik megszokták az Oxygen Classic teljes kényelmét, de ha az ember szán egy kis időt a barátkozásra az új filozófiával, gyorsan belejön.
Természetesen, mivel még béta változatról van szó, hiányozhatnak belőle dolgok. Az elemkészlete például korlátozottabb még, mint amit az Oxygen Classicban kapunk. Cserébe viszont – ha megvettük – kapunk néhány Breakdance összefoglaló névvel illetett kiegészítőt, amellyel profi komponensek, űrlapok vagy éppen WooCommerce elemek használhatók az Oxygen 6-ban is. Egyelőre ezek is béták, szóval az elkövetkező hónapokban, években még jelentős fejlődésen mehetnek keresztül, de már most is nagyszerűen használhatók.
Összegzésül
Az Oxygen Builder tesztelése inkább csak abbahagyható, mint befejezhető. Bár elég időt szántuk rá, hogy kipróbáljuk mindkét verzió lehetőségeit, jó eséllyel még most is lenne mit tanulnunk róla. Azt viszont kijelenthetjük, hogy egyike a legjobb oldalépítő megoldásoknak, sőt, talán a legjobb azok közül, amelyeket ismerünk.
Precíz kontrollt kínál a HTML és a CSS felett, lehetővé téve a kézi kódolás folyamatát egy vizuális környezetben. A teljesítményre fókuszálásnak köszönhetően az így készített oldalak gyorsan lejönnek, hiszen kevesebb CSS/JS kódot kell betölteni, és kevesebb DOM elemet kell megjeleníteni a hagyományos oldalépítőkhöz képest. Megússzuk vele téma-alapú korlátozást is, mivel átveszi a teljes témafunkciót, megszüntetve ezzel a téma és az oldalépítő stílusainak esetleges konfliktusait és a duplikált kód okozta lassulást.
Ha ehhez még hozzávesszük, hogy van lifetime licenc vásárlási lehetőség is, amelynek megvásárlásával korlátlan számú oldalon használhatjuk az Oxygen Buildert, akkor bizony ár/érték arány tekintetében is igencsak érdemes elgondolkodni a beszerzésén. Egyébként a Classic változat megvásárlása esetében több variáció i van, attól függően, szükségünk van-e a WooCommerce vagy épp Gutenberg blokkok integrálására is. Hosszú távra viszont – szerintünk – érdemesebb a Lifetime Bundle csomagban gondolkozni, ott ugyanis megkapjuk az Oxygen Classic és az Oxygen 6 változatot egyaránt, s velük a további Breakdance bővítményeket is.
