A WordPress webhely testreszabása CSS-sel: 3 egyszerű módszer

A WordPress az évek során fejlődött, és ma már meglehetősen rugalmas és könnyen testreszabható platform a Gutenberg blokkszerkesztője révén. Ennek ellenére előfordulhatnak olyan esetek, amikor egy kicsit nagyobb elérésre van szükséged, mint amennyit a Gutenberg-szerkesztő biztosít.

Itt jön jól az egyéni CSS. A CSS-stílus lehetővé teszi a színek, a térközök, a betűtípusok, az elrendezések és gyakorlatilag minden más vizuális elem szerkesztését a WordPress-webhelyen, így pontosan úgy alakíthatja ki, ahogyan szeretné.

Ebben a cikkben végigvezetjük a WordPress-webhely CSS-sel történő testreszabásának alapvető lépésein.

Miért szabja testre webhelyét CSS segítségével?

Az egyéni CSS hozzáadása csak egyike azon módszereknek, amelyek segítségével finomhangolhatja webhelye megjelenését. Egyéb módszerek közé tartozik az a jól felszerelt prémium WordPress témavagy oldalkészítő telepítése.

Míg ez a két módszer egy kicsit könnyebben használható kezdők számára, és nem igényel kódolási ismereteket, az egyéni CSS használata két fő szempontból előnyösebb:

Nulla költség

A prémium témák és a WordPress oldalkészítők hasznosak lehetnek, de költséggel járnak – dollárban és centben. Másrészt az egyéni CSS írásának ismeretével felvértezve ugyanazokat a hatásokat érheti el anélkül, hogy további kiadások merülnének fel.

Minimális puffadás

Az oldalkészítők és a jól felszerelt témák úgy lettek kialakítva, hogy nagyobb rugalmasságot és lehetőségek széles skáláját biztosítsák webhelyeik testreszabásához. Emiatt hajlamosak felduzzadni a webhelyeken, ami potenciálisan lelassítja azokat.

Egyéni CSS írásakor viszont csak a szükséges funkciókat adja hozzá, ami általában könnyebb webhelyeket és gyorsabb betöltési sebességet eredményez.

3 egyszerű módszer a WordPress-webhely testreszabására CSS segítségével

Remélhetőleg már tudod hogyan kell CSS-t írni. Miután megismerte az alapokat, a következő módszerek bármelyikével adhat egyéni CSS-t WordPress webhelyéhez:

1. módszer: Használja a WordPress testreszabót

A WordPress 4.7 vagy bármely későbbi verziójával közvetlenül az adminisztrációs területről adhat hozzá egyéni CSS-t. Ez a legegyszerűbb módszer, és mivel elérhető az élő előnézet, valós időben láthatja a változtatásokat.

Ez egyben a leginkább ajánlott, mivel az összes végrehajtott változtatást magában a WordPress menti. Ez azt jelenti, hogy még ha módosítja vagy frissíti is a témát, nem veszíti el egyéni CSS-jét.

Íme a lépések:

1. lépés: Navigáljon ide Megjelenés > Testreszabás.

Ezzel megnyílik a WordPress téma-testreszabó, amely megmutatja a webhely élő előnézetét a jobb oldalon, valamint néhány testreszabási lehetőséget a bal oldalon. Görgessen le a bal oldali panel aljára, és talál egy További CSS lapon.

2. lépés: Kattintson a További CSS Tab.

Ezzel megnyílik egy kis doboz a bal oldali ablaktáblában, ahol hozzáadhatja egyéni CSS-jét. Tetszőleges számú CSS-kódsort írhat be. Az a nagyszerű ebben a szerkesztőben, hogy ellenőrzi a kódot, és figyelmeztet, ha bármilyen hiba van.

3. lépés: A módosítások közzététele.

Minden hozzáadott érvényes CSS-szabály megjelenik a jobb oldali élő előnézeti területen. A módosítások webhelyén való alkalmazásához kattintson a gombra Közzététel gombot a bal oldali ablaktábla tetején, ha elégedett. Ha nem szeretné, hogy a változtatások azonnal életbe lépjenek, a közzétételt későbbre is ütemezheti, vagy vázlatként mentheti a munkáját.

Fontos megjegyezni, hogy a testreszabóval végzett változtatások az aktuális témához kapcsolódnak. Ha valaha másik témára vált, a módosítások elvesznek, hacsak nem másolja át az egyéni CSS-t, és nem adja hozzá az új témához. Jó gyakorlat, ha a témához hozzáadott összes egyéni CSS-t egy jegyzettömbre menti. Így egyszerűen kimásolhatja a kódot, és beillesztheti a „További CSS” szakaszba egy másik témához.

Ha ez túl sok munkának tűnik, és olyan megoldást részesít előnyben, amely lehetővé teszi az egyéni CSS alkalmazását bármely használt WordPress-témára, a következő módszer az Ön számára.

2. módszer. Használjon beépülő modult

Az egyéni CSS-bővítmények az egyéni CSS-t a témától elkülönítve tárolják, lehetővé téve a változtatások alkalmazását a használt témától függetlenül. Ezek a beépülő modulok olyan extra funkciókkal is rendelkeznek, mint az automatikus kiegészítés, amelyek megkönnyítik a CSS hozzáadását.

Az egyetlen hátránya, hogy ezek harmadik féltől származó szoftverek, ami azt jelenti, hogy potenciálisan lelassíthatják webhelyét. A legtöbb ilyen beépülő modul azonban könnyű, így általában csekély hatással vannak webhelye teljesítményére. Íme néhány a legjobb egyéni CSS-bővítmények, amelyeket használhat:

• Egyszerű egyéni CSS

Egyszerű egyéni CSS az egyik legnépszerűbb egyéni CSS bővítmény. Könnyű, könnyen használható, és nagyszerű funkciókat kínál. Beállítása egyszerű. Mindössze annyit kell tennie, hogy telepíti és aktiválja a bővítményt. Ezután navigáljon a Megjelenés szakaszt az irányítópult bal oldali ablaktábláján.

Egy új opciót fog látni, melynek neve Egyedi CSS. Ha rákattint, megnyílik egy szerkesztő, ahol hozzáadhatja egyéni CSS-jét. Kattints a Frissítse az egyéni CSS-t gombot a változtatások mentéséhez. A változások megtekintéséhez egyszerűen frissítse webhelyét.

• Egyszerű egyéni CSS és JS

Ha még több funkcióra vágyik, a Egyszerű egyéni CSS és JS bővítmény egy nagyszerű lehetőség. A CSS hozzáadása mellett lehetővé teszi JavaScript bejegyzések hozzáadását is.

• CSS hős

Ha nem szeretne egyetlen kódsort sem írni, a CSS Hero bővítmény tökéletes az Ön számára. Ez a beépülő modul vizuális CSS-szerkesztőt kínál legördülő menükkel és beviteli mezőkkel, amelyek segítségével szinte bármilyen CSS-stílust szerkeszthet a webhelyen anélkül, hogy kódot kellene írnia.

3. módszer. Szerkessze a nyers kódot

A fent leírt két módszer lehetővé teszi, hogy egyéni CSS-t adjon webhelyéhez anélkül, hogy hozzá kellene nyúlnia a témafájlokhoz. Bizonyos esetekben azonban érdemes lehet szerkeszteni a téma CSS-jét, vagy közvetlenül hozzáadni egyéni CSS-t a téma kódjához.

Ehhez hozzá kell férnie a webhely stíluslapjához. Ezt a stíluslapot egyszerűen elérheti a Témaszerkesztő a WordPress irányítópultján.

Mielőtt azonban továbbmennénk, néhány biztosítékot meg kell tennie. Első, készítsen biztonsági másolatot a webhelyéről. A témafájlok szerkesztése közben könnyen elkövethet olyan hibákat, amelyek összeomolhatják webhelyét.

A biztonsági másolat biztosítja, hogy legyen működőképes webhelye, amelyre visszatérhet. Következő, hozzon létre egy gyermektémát. Ha közvetlenül módosítja a szülőtémát, a módosítások a téma frissítésekor elvesznek.

Ha ezek a biztosítékok érvényesek, jelentkezzen be a WordPress háttérrendszerébe. Menj Megjelenés > Témaszerkesztő. Ha rákattint a témaszerkesztő lehetőségre, megjelenik egy felugró ablak, amely figyelmezteti, hogy ne módosítsa közvetlenül a témafájlokat. Ha követi a fenti lépéseket, készen áll.

Kattintson Megértem A folytatáshoz.

A kattintás után alapértelmezés szerint látnia kell webhelye stíluslapját. Ha nem, egyszerűen nézze meg a jobb oldali ablaktáblát, és kattintson rá stílus.css alatt Stíluslap választási lehetőség.

Innen közvetlenül módosíthatja a témafájlokat. Csak ne felejts el kattintani Mentés és frissítés ha végeztél.

Vegye át az irányítást webhelye megjelenése felett az egyéni CSS segítségével

A kezdőknek időbe telhet, ha megtanulják, hogyan írhatnak egyéni CSS-t a WordPress-en, de ez valódi kontrollt biztosít a webhely megjelenése felett. Ez pedig nulla költséggel és minimális hatással van webhelye teljesítményére.

Ha azonban nem szeretne manuális tervezést végezni, más módokon is elvégezheti a munkát, például a WordPress egyik legjobb oldalkészítőjének használatával.

5 WordPress oldalkészítő, amelyek segítségével csodálatos webhelyeket hozhat létre

Szeretné, hogy WordPress webhelye csodálatosan nézzen ki, de nem engedheti meg magának egy fejlesztőt? Próbálja ki inkább ezeket a WordPress oldalkészítőket.

Olvassa el a következőt

A szerzőről