Hogyan lehet testreszabni egy WordPress témát CSS-sel
ha meg akarja tanulni, hogyan lehet testreszabni egy WordPress témát CSS-sel, akkor az egyik első dolog, amit tudnia kell, az a fájlok szerkesztése magában a témában.
a témafájlok szerkesztésének folyamata gyakorlatilag ugyanaz, függetlenül attól, hogy a CSS-t vagy a HTML-t szeretné testreszabni, és a sorozat korábbi oktatóanyagaiban már lefedtük ezt a folyamatot a HTML módosítása céljából.
tehát annak elkerülése érdekében, hogy ugyanazon a talajon újrafutózzon, nézze meg a “hogyan szerkesztheti a HTML-t egy WordPress-témában” és a “hogyan telepítheti a WordPress-t helyileg a XAMPP-vel” :
- fájlok szerkesztése a témaszerkesztőn keresztül
- fájlok letöltése és feltöltése FTP-n vagy távoli kapcsolaton keresztül
- miért érdemes fontolóra venni a változtatások végrehajtását egy gyermek témán belül
- offline szerkesztés XAMPP-n keresztül
a már lefedett témafájlok szerkesztésének módszereivel ebben az oktatóanyagban Arra koncentrálunk, hogyan lehet szerkeszteni a CSS-t a WordPress-ben azáltal, hogy megismerjük ezeket a témákat:
- hogyan lehet egyéni CSS-t hozzáadni a theme customizer segítségével
- hogyan lehet azonosítani a stíluslap(oka) t, amelyet egy téma használ
- hogyan lehet azonosítani, hogy melyik CSS-t kell megváltoztatni, és hol, a téma egy adott részének testreszabásához
Megjegyzés: Ez a cikk feltételezi, hogy alapvető ismeretekkel rendelkezik a CSS-ről, de nem feltétlenül arról, hogy CSS szerkesztése a WordPress programban.
prémium WordPress témák és bővítmények
mielőtt elkezdenénk, ne felejtsük el, hogy felfedezheti a Themeforest WordPress témák ezreit és a CodeCanyon WordPress bővítményeit. Vásárolja meg ezeket a kiváló minőségű WordPress témákat és bővítményeket, és javítsa a webhely élményét az Ön és a látogatók számára.
hogyan lehet szerkeszteni a CSS-t a WordPress Theme Customizer-ben
a WordPress rendelkezik egy dedikált területtel, ahol hozzáadhatja saját egyéni CSS-kódját. Ez a kód a megfelelő időben kerül betöltésre annak érdekében, hogy felülbírálja a téma alapértelmezett stílusát, és ezzel a megközelítéssel nem történik közvetlen változás a témafájlokban.
a WordPress admin panel bal oldalsáv menüjében lépjen a megjelenés > Testreszabás menüpontra:
ez elviszi a téma testreszabási területét, ahol rákattinthat a menüpontra további CSS:
megjelenik egy nagy mező, amelybe tetszőleges egyedi CSS-t adhat hozzá:
mentse el a módosításokat a bal oldalsáv tetején található Kék Közzététel gombra kattintva, Ha befejezte az egyéni kód hozzáadását.
hogyan lehet azonosítani a téma stíluslapjait
ha nem szeretné használni a kiegészítő CSS területet a téma testreszabásában, és ehelyett közvetlenül szeretné szerkeszteni a téma CSS-jét, akkor meg kell találnia, hogy a téma mely fájlokat használja a stílushoz.
a legtöbb esetben a témák a WordPress szabványos struktúráját használják, és “style” nevű fájljuk van.css ” a téma gyökérkönyvtárában. Valójában ez egy alapvető témafájl, így mindig megtalálja bármilyen témában.
azonban amikor megnyitod szerkesztésre, előfordulhat, hogy üres a kód, és a fejlesztő máshonnan tölti be a stílust a témában. Vagy akár azt is megtalálhatja, hogy több stíluslapfájlba töltődnek be.
kétféle módon ellenőrizheti, hogy egy téma mely stíluslapokat használja.
ellenőrző Fej kód
az első módszer a téma <head> kódjának ellenőrzése. Ehhez kattintson a jobb gombbal az oldal bármely pontjára, válassza az Oldalforrás megtekintése lehetőséget, majd keresse meg a <head>...</head> címkéket.
a címkék között keresse meg a <link>elemeket, amelyek szintén rel='stylesheet' – vel rendelkeznek. Ezután nézze meg, hogy ezek közül melyik származik a téma könyvtárából. A stíluslapok URL-jei megmondják, hogy a téma struktúrájában hol találja meg őket.
ne feledje, hogy ha olyan plugint futtat, amely egyesíti és tömöríti a webhely összes stíluslapját egy fájlba, ez a technika nem fog működni, mert csak az adott fájl URL-jét fogja látni. Ehelyett használja a második technikát, ellenőrizze a függvényfájlt.
a
Függvényfájl ellenőrzése amikor egy téma stíluslapot használ, a wp_enqueue_style() nevű függvényen keresztül meg kell mondania a WordPress-nek, hogy melyik fájlt szeretné használni. Így pontosan láthatjuk, hogy a téma mely stíluslap(oka) t tölti be, ha megtaláljuk ennek a funkciónak a használatát.
minden témához tartozik egy “functions” nevű fájl.php ” a gyökérkönyvtárában található. A wp_enqueue_style() függvény használata általában ebben a fájlban található, ezért nyissa meg, és kezdje el keresni a függvény nevét.
amikor megkeresi a wp_enqueue_style() függvény példányait, keresse meg a zárójelek között a második paramétert, azaz az első vessző utáni szöveget. Ez a szöveg megmutatja a stíluslap helyét. Például:
wp_enqueue_style('main-style', get_template_directory_uri() . '/css/mainstyle.css');
a fenti kódban a második paraméter:
get_template_directory_uri() . '/css/mainstyle.css')
ez azt mondja nekünk, hogy a stíluslap egy “css” nevű téma alkönyvtárban van, a fájl neve pedig “mainstyle.css”.
hogyan lehet azonosítani, hogy melyik CSS-t kell megváltoztatni
miután megtudta, hogyan kell hozzáadni vagy szerkeszteni a téma CSS-t, a következő dolog, amit meg kell tanulni, hogyan lehet megtudni, hogy melyik kódot kell módosítania.
ennek legjobb módja a böngésző fejlesztői eszközeinek használata, ideális esetben a Chrome vagy a Firefox az eszközök minősége miatt.
tegyük fel például, hogy meg akarja változtatni a bejegyzés címeinek betűméretét. Kattintson a jobb gombbal az egyik bejegyzés címére, majd válassza az ellenőrzés lehetőséget:
ezzel megnyílik a fejlesztői eszközök panel. Keresse meg a stílusok lapon a font-size tulajdonságot.
ha nem lát egyet, akkor a böngésző szülő-vagy gyermekelemet jeleníthet meg, ezért az elemek lapon kattintson a közeli elemekre, amíg meg nem talál egy olyan elemet, amely pontosan kiemeli a bejegyzés címének szövegét, és rendelkezik egy font-size tulajdonsággal:
most a stílusok lapon próbálja meg megváltoztatni a font-size tulajdonság értékét. Ha látja a szöveget méretváltozás a böngészőablakban tudja, hogy megtalálta a megfelelő CSS-t.
ha meg szeretné tudni, hogy a stíluslapban hol található ez a CSS, keresse meg a font-size értéket szerkesztett hely jobb felső sarkában. Látnia kell egy fájlnevet, majd kettőspontot, majd egy számot.
a fájlnév megmondja, hogy melyik stíluslapon van a kód, a kettőspont utáni szám pedig azt, hogy melyik sorban találja meg a kódot. Például a fenti képen a “stílus.css ” fájl a 4054-es vonalon. Ha közvetlenül szerkeszti a téma stíluslapját, akkor most megnyithatja, lépjen a kérdéses sorszámra, és módosítsa a CSS-t.
ha a Theme Customizer kiegészítő CSS mezőjében vagy egy gyermek témán belül dolgozik, akkor ugyanazt a választót kell megcéloznia, mint az eredeti CSS, így felülbírálhatja a saját stílusával.
a böngésző fejlesztői eszközeiben keresse meg azt a választót, amely az imént módosított font-size tulajdonság felett van. Ez a stíluslap fájl és a sorszám specifikáció bal oldalán található, amelyet most néztünk meg.
másolja az egész választót, illessze be az egyéni kódba, majd használja a módosított font-size érték helyes célzásához.
mindig ellenőrizze a beépített téma opciókat
mielőtt a CSS testreszabásával foglalkozna, mindig ellenőrizze a téma testreszabásában azokat a lehetőségeket, amelyeket a fejlesztő már sütött a témába.
a témák gyakran meglehetősen átfogó testreszabási lehetőségekkel rendelkeznek, amelyek nem igényelnek egyedi kódot. Tehát a CSS szerkesztése előtt sok időt takaríthat meg magának, ha megnézi, hogy van-e már nyomógombos módja a szükséges változtatásnak.
hogyan lehet testreszabni egy WordPress témát lépésről lépésre
most, hogy beszéltünk arról, hogyan lehet testreszabni egy WordPress téma CSS-jét és HTML-jét, kissé bizonytalan lehet abban, hogy hol kezdje. Tehát forraljuk le a dolgokat a követendő lépések alapvető listájára:
- ellenőrizze a Theme Customizer, hogy ha van már egy lehetőség áll rendelkezésre, amely megkönnyítheti a kívánt változtatást
- ha nem, és meg kell adni néhány egyszerű egyéni CSS, használja a további CSS mező a Theme Customizer
- ha kell, hogy szélesebb körű testreszabási HTML vagy CSS, fontolja meg, hogy azokat a gyermek téma
- hogy a kis módosításokat közvetlenül a a téma, használja a WordPress beépített téma szerkesztő
- további mélyreható változások közvetlenül a téma, Használja akár FTP, egy távoli kapcsolat, vagy a munka teljesen offline a XAMPP
- miután kiválasztotta a szerkesztési módszert, azonosítsa a téma stíluslapjait a webhely
<head>kódjának ellenőrzésével vagy a téma “funkcióinak” megtekintésével.php ” awp_enqueue_style() - funkció használatához keresse meg a módosítani kívánt CSS-sorokat és a hozzájuk kapcsolódó választókat a Chrome vagy a Firefox developer tools
ha a fentiekbe belemerül, és megismeri, akkor látni fogja, hogy mennyire testreszabható a WordPress.
mielőtt észrevennéd, saját teljesen eredeti gyermek témákat készítesz, és saját terveket készítesz.
és ez csak azért történik, hogy a tanulás “hogyan készítsünk egy gyermek téma WordPress” a következő bemutató jön ebben a sorozatban. Maradjanak velünk!