Így a legegyszerűbb a CSS szerkesztése WordPress oldalakon

A WordPress tökéletes alap lehet szinte bármilyen weboldalhoz, különösen ha sikerül egy olyan sablont kiválasztanunk hozzá, amely kellően szabadon gyúrható, formázható. Ilyenekből több is van, mi például nemrég mutattuk be a DIVI nevű sablont, illetve a WPMU DEV csomag részeként érkező Upfront elnevezésű site-építőt. Ha egy ilyen oldalt ki tudunk még egészíteni olyan plug-inekkel, amelyek a szükséges funkciókat hiánytalanul megvalósítják, akkor már nyert ügyünk van. Sajnos azonban sokszor lenne még szükség egy kis felületi csiszolásra szinte minden sablon esetében. Erre tökéletes megoldást jelent a CSS kódok manipulálása, hiszen ezzel nem zavarunk bele az oldal működésébe, nem kell átvariálni a PHP fájlokat, s ha valami elrontunk, megússzuk a CSS kód gyors törlésével, nem kell visszamásolgatni a sablon eredeti állományait. Most megmutatjuk, hogyan a legegyszerűbb a CSS szerkesztése WordPress oldalakon. Ráadásul ezt azoknak is bátran merjük ajánlani, akik még csak most ismerkednek a CSS kódok rejtelmeivel.

 

A CSS szerkesztése WordPress oldalakon, egyszerűen

Az a helyzet, hogy aki programozásból él, nem riad meg a CSS-től sem. Tudja, hová érdemes nyúlni, mit kell átírni, miként lehet CSS kódból hivatkozni egy adott objektumra az oldalon. Viszont aki pont azért merült el a WordPress-ben, hogy megússza a kemény programozási munkát, annak komoly kihívást jelenthet, ha a sablonban vagy egy plug-inben módosítani kellene a megjelenés olyan jellemzőit, amelyekre a sablon készítői nem építettek be opciókat. Ilyenkor jön jól a CSS Hero plug-in, amely hihetetlenül leegyszerűsíti a CSS jellemzők testreszabását, ráadásul gyakorlatilag az oldalak bármely eleméhez hozzányúlhatunk vele.

 

CSS Hero: testreszabás kényelemesen és biztonságosan

A CSS Hero tulajdonképpen egy WordPress plug-in, amellyel könnyedén módosíthatjuk oldalaink elemeinek jellemzőit, beleértve a méretet, színeket, font jellemzőket, margót, hátteret, elrendezést, kitöltést stb. Bármit, amit CSS kódból módosítani lehet az adott objektumon. Egy sima gombból kreálhatunk látványos 3D-s változatot, a menüsor mögé becsempészhetünk képet stb.

Minden módosítás azonnal látszik az oldalon, ami sokkal kényelmesebb tervezést tesz lehetővé, mintha csak a kódot módosítgatnánk és a képzelőerőnkre kellene közben támaszkodnunk. Mindezt egyszerű fogd és vidd felületen, amelyet az admin fiókba belépve és a kívánt oldalra elnavigálva kapcsolhatunk be, egyetlen kattintással. Ha így teszünk, megjelenik a CSS Hero szerkesztő felülete. A kódszerkesztő és az opciók megadása egyetlen panelen elérhető. Nagyobb kijelzőkön ezt dokkolhatjuk, ha viszont fontos a szélesség, akkor átállíthatjuk lebegő üzemmódra is a panelt.

Ha a CSS Hero aktív, az egérrel könnyedén kiválaszthatjuk az oldal bármely összetevőjét, akár összetett objektumok egyes részeit is. Amint ez megvan, az opciók között válogatva minden jellemzőjét módosíthatjuk az adott elemnek. A szerkesztő felület kettéosztott, felül látjuk a rendelkezésre álló opciókat, alul pedig a módosításokkal létrejövő CSS kódot (a részek mérete változtatható, kinek melyikre van inkább szüksége). Hatalmas könnyebbség, hogy nem nekünk kell kitalálni, melyik objektumra miként lehet hivatkozni, s természetesen az is, hogy ha nem akarunk, írni egy másodpercre sem kell semmit, csak kattintgatni az opciókon. Ez a kezdőknek kész kánaán. A profik viszont annak fognak örülni, hogy a kód akár közvetlenül is szerkeszthető, így ha gyorsabbnak tűnik, akkor billentyűzetet ragadva is kiegészíthető bármivel. Minden jellemző kereshető, így ha valamit nem találunk, a beépített keresővel pillanatok alatt előkotorhatjuk.

Érdekesség a Snippets fül, ahol előre definiált CSS sablonokat találunk: különféle gomb stílusok, átmenetek, árnyékok, osztók, hátterek, ikonok sorakoznak, hogy egyetlen mozdulattal átszabjuk velük a kijelölt elemet.

Ha pedig már szóba kerültek a hátterek, akkor érdemes megemlíteni, hogy a plug-in integrált Unsplash keresőt is kapott, így ha nincs saját, feltölthető képünk, akkor hivatkozhatunk akár az Unsplash gyűjteményének valamelyik darabjára is. Ha végeztünk, csak egy kattintás a Save & Publish gombra és minden beállításunk mentve és aktiválva lesz.

A CSS Hero a módosításokat egyetlen CSS fájlba rakja (illetve eltárolja az adatbázisban is, külön táblában), ennek tartalmát, vagyis az összes CSS módosítást megtekinthetjük a Code Overview linkre kattintva a panel alján. Ekkor megjelenik a Project Output panel, ahol a teljes kód látható, s természetesen ha kell, utólag bármikor módosítható. Az egyes CSS jellemzőket itt egy kattintással ki- vagy bekapcsolhatjuk, de ha ennél nagyobb módosításra lenne szükség valamelyik objektumon, akkor az azonosítójára kattintva rögtön betölthetjük azt a szerkesztő panelbe, ahol aztán a megszokott vezérlőkkel, vagy a közvetlen kódszerkesztővel tudjuk alakítani.

Nagyjából ez a CSS Hero lényege, de itt azért még nincs vége teljesen a dolognak. Van ugyanis néhány extra eszköz is, mint például a Font Manager, ahol további Google vagy TypeKit betűkészletekkel bővíthetjük a választékunkat. De használhatunk még ezen felül változókat is, amelyekkel a gyakran használt értékeket tudjuk behelyettesíteni a kódszerkesztőben. Így adott esetben nem kell fejben tartani mondjuk számokat, elég, ha könnyen azonosítható nevet adunk egy változónak és megkapja a kérdéses értéket. A Bottom Navi eszköz bekapcsolásával nyomon követhetjük a kijelölt elemek teljes “elérési útját”, így láthatjuk, hogy az adott objektum hová kapcsolódik.

Mielőtt még elfelejtenénk említeni, a CSS Hero arra is lehetőséget ad, hogy az elkészült kódot exportáljuk (LESS, CSS, Assets, Project formátumokban), majd egy másik oldalon a segítségével importáljuk. Előfizetéstől függően a plug-int több oldalon is használhatjuk, így ez az átjárhatóság nagyon jól jön, amikor ugyanazokat a módosításokat végeznénk el máshol is, vagy éppen biztonsági mentést szeretnénk a kezünk ügyében tudni az újabb módosítások előtt egy adott állapotról. Persze mint már mondtuk, akkor sincs nagy gond, ha valamit végképp elrontunk CSS szinten, hiszen ilyenkor a plug-in által létrehozott kód akár teljes egészében törölhető (van Reset opció), s legfeljebb előről kezdjük a dolgokat. Tönkretenni egy oldalt nem igazán lehet vele, totálisan átszabni viszont abszolút. Akkor sincs nagy gond, ha a plug-int inaktívvá tesszük az oldalon. Ilyenkor ugyan automatikusan kikapcsolja a módosított CSS-t is, de ha exportáltuk és van az adott sablonban saját CSS kód megadására alkalmas mező, oda bemásolhatjuk a kódot és tudjuk tovább használni az oldalon. Módosítani persze ekkor már kézzel kell, ami így jóval macerásabb.

 

Szinte kötelező darab

Ahány ház, annyi szokás. Egy WordPress sablon megjelenését testreszabni számtalan módon lehet, de szerintünk annál egyszerűbben – és biztonságosabban – mint amit a CSS Hero kínál, aligha. Amikor már elértük a sablon saját szerkesztőjének határait (s ilyen van mindegyiknek, beleértve akár az általunk nagyon szeretett DIVI-t is), akkor a CSS módosítások rendkívül sokat jelentenek. Kvázi alkotói szabadságot biztosítanak. S bár a szerkesztést végezhetjük több módon is, a CSS Hero szerkesztő felülete egyszerűen annyira kényelmes, hogy ha az ember egyszer kipróbálta, képtelenség lemondani róla.

Megvásárolni a készítők oldalán lehet, több változatban. Vehetjük egy oldalhoz, öthöz, vagy akár 999-hez is. Ha oldalak építésével foglalkozunk, akkor ez utóbbi talán a legjobb választás, mert licencenként csak egy visszavonási lehetőségünk van, így azzal csak egy ideig lehet játszani, hogy az ember esetleg a beállítások elvégzése után exportálja a CSS kódot és törli a plug-int, majd beilleszti az exportált kódot az oldalba. Működhet a dolog, de előbb vagy utóbb elfogy a lehetőségünk és új licencet kell vásárolni az adott oldalhoz. Mindenesetre ha tényleg fontos egy weboldal gyors és lehetőleg kényelmes testreszabása, akkor a Starter változat 29 dolláros ára (ez egy éves támogatást és frissítést foglal magába) igazán nem nagy ár ezért. Adott esetben pedig bőven megéri a több licencet magába foglaló csomagok valamelyike is.

Ne maradjon le erről sem!

Mint a legtöbb weboldal, mi is használunk sütiket az oldalon. Elfogadom Adatkezelési tájékoztató