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.

 WordPress témák a Themeforest oldalon. WordPress témák a Themeforest oldalon. WordPress témák a Themeforest oldalon.

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:

megjelenés testreszabása  megjelenés testreszabása  megjelenés testreszabása

ez elviszi a téma testreszabási területét, ahol rákattinthat a menüpontra további CSS:

további CSS  további CSS  további CSS

megjelenik egy nagy mező, amelybe tetszőleges egyedi CSS-t adhat hozzá:

CSS-stílusok hozzáadásaCSS-stílusok hozzáadásaCSS-stílusok hozzáadása

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.

 stílus.css stílus.cssstílus.css

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.

keresse meg a link elemeketkeresse meg a link elemeketkeresse meg a link elemeket

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:

cím ellenőrzésecím ellenőrzésecím ellenőrzése

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:

  1. 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
  2. ha nem, és meg kell adni néhány egyszerű egyéni CSS, használja a további CSS mező a Theme Customizer
  3. ha kell, hogy szélesebb körű testreszabási HTML vagy CSS, fontolja meg, hogy azokat a gyermek téma
  4. hogy a kis módosításokat közvetlenül a a téma, használja a WordPress beépített téma szerkesztő
  5. 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
  6. 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 ” a wp_enqueue_style()
  7. 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!

Leave a Reply

Az e-mail-címet nem tesszük közzé.