A WordPress-téma testreszabása (5 lépésről-lépésre)

Ha telepített egy WordPress-témát, de ez nem éppen megfelel Önnek, csalódottnak érezheti magát. Rengeteg lehetőség áll rendelkezésre a WordPress-témák testreszabására.

A kihívás a megfelelő módszer megtalálása.

Ebben a bejegyzésben végigvezetek a a WordPress téma testreszabásának lehetőségei, segítsen eldönteni, melyik áll az Ön számára, és megmutatja, hogyan kell biztonságosan és hatékonyan csinálni.

Szeretné megnézni a videó verziónkat? Kattintson az alábbi játékra:

Lehetőségek a téma testreszabására

Mielőtt belevágnánk és elkezdjük változtatni a témáját, érdemes megérteni, hogy milyen lehetőségek vannak, mivel azok megfelelnek a különböző helyzeteknek.

Íme egy áttekintés a rendelkezésre álló lehetőségekről:

• Ha funkciókat szeretne hozzáadni a témához, telepítsen egy beépülő modult.
• Használja a A WordPress adminisztrátori képernyőinek testreszabása a betűtípusok, a színek és az elrendezés testreszabásához is, a témától függően.
• Ha oldalkészítő témával dolgozik, használja annak szolgáltatásait a webhely tervezésének testreszabásához.
• Ha telepített egy kerettémát, használja a rendelkezésre álló alárendelt témák egyikét a webhely testreszabásához, valamint az esetleges testreszabási lehetőségekkel együtt az adminisztrációs képernyőkön.
• Ha a témája saját webhelyére jellemző, és kényelmesen csinálja, szerkessze közvetlenül a téma kódját.
• Ha egy harmadik féltől származó téma kódját szeretné szerkeszteni, hozzon létre gyermek témát.

Ha szerkeszteni szeretné a kódot , számos lehetőség áll rendelkezésére, a blokkszerkesztő használatától kezdve a Testreszabásig, egészen a fájlok szerkesztéséig. Mindegyiket megnézzük ebben a bejegyzésben, de kezdjük a legegyszerűbb lehetőséggel: egy plugin telepítésével.

Valóban meg kell szabnod a témádat?

Néha nem teszed meg Egyáltalán nem kell testre szabnia a témát: ehelyett telepítenie kell egy beépülő modult.

A témák diktálják a webhely kialakítását: a megjelenés és a tartalom megjelenítésének módját. A beépülő modulok extra funkcionalitást adnak.

Ha a módosítások a funkcionalitásra és nem a tervezésre összpontosítanak, fontolja meg, hogy maga telepít egy plugint. Ez lehet egy plugin, amelyet írnia kell, egy letölthető a plugin könyvtárából, vagy egy, amelyet vásárol.

Ha úgy találja, hogy a témában szeretné szerkeszteni a functions.php fájlt, akkor tegye fel a következő kérdést:

Meg szeretném tartani ezt a funkciót, ha a jövőben témát váltanék?

Ha a válasz igen, akkor ennek a kódnak egy pluginben kell szerepelnie, nem pedig a témájában.

Jó példák arra, hogy miként használna egy plugint a téma helyett, ideértve a modulok hozzáadását, az egyedi bejegyzéstípusok és taxonómiák regisztrálását , egyéni mezők létrehozása és extra funkciók, például áruház vagy SEO fejlesztések hozzáadása.

A WordPress-téma testreszabása a WordPress rendszergazdai képernyőin keresztül

Ha a végrehajtandó módosítások a tervezésre összpontosítanak és viszonylag egyszerű, előfordulhat, hogy elkészítheti őket az admin képernyőkön keresztül. A Testreszabó számos lehetőséget kínál a téma módosítására: az Ön számára elérhető témáktól függ. És előfordulhat, hogy a Megjelenés menüben lát egy Szerkesztő nevet. Távol tartsa magát ettől, olyan okok miatt, amelyeket röviden leírok.

A téma testreszabása a Testreszabón keresztül

A WordPress téma testreszabásának legegyszerűbb módja a WordPress Customizer használata.

Ezt kétféleképpen érheti el:

• Webhelye megtekintésekor (amikor be van jelentkezve), kattintson a képernyő tetején lévő adminisztrációs sávon található Testreszabás linkre.
• Az adminisztrátori képernyőkön kattintson a Megjelenés > Testreszabás elemre.

Ez a Testreszabóhoz vezet.

A fenti képernyőképen telepített egy ingyenes, ColorMag nevű témát, amely rengeteg testreszabási lehetőséggel rendelkezik. A testreszabott részekhez hozzáadta a tervezési funkciókat, beleértve a fejlécképet, a közösségi médiát, a kategória színeit és a Tervezési beállítások lapot, amely további lapokra vezet, ahol módosíthatja a webhely elrendezését és kialakítását. >

A különböző témáknak különböző testreszabási lehetőségeik vannak, de úgy tűnik, hogy az újabb témák egyre többet adnak belőlük. Ha talál egy olyan témát, amely tetszik, de ez nem éppen megfelelő az Ön számára, akkor azt tapasztalhatja, hogy a testreszabása pontosan megadja a szükséges dizájnt és elrendezést.

A Témaszerkesztő (és a Miért nem használható it)

Az adminisztrátori képernyőkön észreveheti a Témaszerkesztő nevű opciót, amelyet a Megjelenés > Témaszerkesztőn keresztül alkalmazhat.

Ez hozzáférést biztosít a témájában lévő fájlokhoz , ami azt jelenti, hogy közvetlenül szerkesztheti őket.

Ne.

Még akkor is, ha Ön kedveli a CSS vagy a PHP írását, a témában lévő fájlok ilyen szerkesztése nagyon rossz ötlet, két okból:

• Ha vásárolt vagy letöltött egy harmadik féltől származó témát, a végrehajtott módosítások elvesznek a téma következő frissítésekor (és biztonsági okokból frissíteni kell a témát).
• Ennél is fontosabb, ha a webhelyet megszakító változás, nem követi nyomon, és a fájl előző verziója sem változik. Visszavonhatatlanul feltörheti az oldalt.

Ha szerkeszteni szeretné a témában lévő kódot, akkor azt egy kódszerkesztővel kell megtennie (nézze meg a legjobb ingyenes HTML-szerkesztőket), és nem szabad Addig ne szerkessze az élő webhelyén található fájlokat, amíg nem teszteli azt egy átmeneti oldalon. Ha egy harmadik féltől származó témát kell szerkesztenie, akkor ezt egy gyermek témán keresztül kell megtennie. Mindkettőről bővebben később, ebben a bejegyzésben.

A WordPress tudja, mennyire nem biztonságos használni a téma szerkesztőt: még figyelmeztetést is ad, amikor megpróbálja elérni.

Tehát fogadja meg a WordPress tanácsát: ne használja a téma szerkesztőt!

Az oldalkészítők és a keretrendszerek használata a WordPress-téma testreszabásához

A WordPress-témák nagy részének vannak testreszabási lehetőségei, vagyis a tervezésen és az elrendezésen keresztül változtathat a Testreszabó.

De egyes témák ezt tovább viszik, és kibővítésre, valamint jelentős testreszabásra tervezték. Ezeket a témákat téma keretrendszereknek nevezzük.

Egy másik lehetőség egy olyan plugin használata, amely lehetővé teszi webhelyének felhasználóbarát felületen történő megtervezését: ezeket oldalépítőknek hívják.

Oldal használata A Builder a téma testreszabásához

Az Oldalkészítő beépülő modulokat úgy tervezték, hogy megkönnyítsék a webhely kialakításának beállítását egy olyan felületen keresztül, amely lehetővé teszi, hogy lássa, mit kap.

Telepít egy kompatibilis témával rendelkező oldalépítő plugint, majd az általa adott lehetőségekkel pontosan úgy alakíthatja ki a webhelyét, ahogyan szeretné.

Az egyik legismertebb oldalépítő az Elementor, de az alternatívákról az oldalépítők összesítésében tájékozódhat.

Az oldalépítők lehetővé teszik a bejegyzések és oldalak szerkesztését a fogd és vidd felületen, vagyis láthatod, hogyan fog kinézni a tartalmad és egyedivé teheti az egyes oldalakat.

Az alábbiakban az Elementor oldalkészítőt használom a Hello Elementor témával, amely kompatibilis vele.

Az oldalkészítők nagy rugalmasságot biztosítanak az oldalak elrendezésében és kialakításában. Ha hozzászokott egy olyan weboldal-készítőhöz, mint a Wix, ezek segíthetnek a WordPressre való áttérésben. És ha inkább a WYSIWYG felületet részesíti előnyben a WordPress-tartalmai számára, akkor ezek segíthetnek az oldalai gyors megtervezésében.

Témakeret használata a téma testreszabásához

Az oldalépítők alternatívája a téma keretek. Ezek olyan témák készletei, amelyeket együtt dolgoznak. Van egy szülő téma, amely a keretrendszer, és a gyermek témák közül választhat, amelyekkel testre szabhatja a fő témát, és a kívánt módon kinézheti.

A témakeretekre példa a Divi, amely testreszabási lehetőségek, amelyek lehetővé teszik a gyermek téma tervezésének további finomítását, beleértve az oldalépítőkéhez hasonló drag and drop felületet.

A WordPress-téma kódjának szerkesztése

Ha Ön kényelmesen szerkeszti a CSS-t és / vagy a PHP-t, akkor a téma testreszabásához szerkessze a témában található kódot.

Ez biztosítja a legnagyobb mértékű irányítást.

Ha a saját témáját szerkeszti, amely az Ön webhelyére jellemző, és kifejezetten hozzá lett kifejlesztve, akkor közvetlenül szerkesztheti a témát. De ha harmadik féltől származó témával dolgozik, és azt szeretné szerkeszteni, akkor hozzon létre egy gyermek témát, hogy elkerülje a módosítások elvesztését a téma következő frissítésekor.

Témafájlok szerkesztése

A WordPress-téma szerkesztésének első lépése annak megértése, hogy melyik témafájlok mit irányítanak, és melyeket kell szerkesztenie.

A stíluslap

Minden WordPress-témához tartozik egy stíluslap, az úgynevezett style.css. Ez tartalmazza a webhely stílusának összes kódját: elrendezést, betűtípusokat, színeket és egyebeket.

Ha például módosítani szeretné a témája színeit, akkor szerkesztéseket végezhet a stíluslapon. Ha új betűtípust szeretne hozzáadni, akkor a stíluslap segítségével alkalmazhatja azt különböző elemekre, például a törzsszövegre és a címsorokra.

Ügyeljen a stíluslap szerkesztésekor: a specifitás azt jelenti, hogy egy elem kódja nem mindig onnan származik, ahonnan azt hiszem.Az elemek örökölni fogják a stílust más elemektől, amelyek az oldal hierarchiájában felettük vannak, hacsak nem adunk hozzá az alsó elemre jellemző stílust.

Ha meg szeretné tudni, hogy a CSS milyen elemeket befolyásol az oldalon, akkor használja a böngészője ellenőrzőjét a CSS (ebben a példában a Chrome DevTools) megtekintéséhez:

Ezután új CSS-t írhat, amely az egyes elemeket, vagy az elemek vagy osztályok tartományát célozza meg az oldalon.

Ha mindez az elemekről, osztályokról és sajátosságokról szóló újdonság Önnek, érdemes elkerülnie a téma CSS-jének közvetlen szerkesztését. Legalábbis addig, amíg többet nem tud meg a CSS-ről és annak működéséről.

A Functions File

Egy másik, nagyjából minden témához tartozó fájl a függvényfájl (functions.php). . Ez az a fájl, amely egy csomó dolgot működtet a témában. Belül kódot talál a téma funkcióinak, például a kiemelt képek, a widgetek és egyebek regisztrálásához.

Ha kedvet kap funkcionális kód hozzáadásához a témához, akkor itt fogja hozzáadni. De vigyázz: a legtöbb esetben valóban plugint kell írnod. Kérdezd meg magadtól:

Szeretném megőrizni ezt a funkciót, ha a jövőben témát váltanék?

Ha a válasz igen, írjon egy plugint ahelyett, hogy kódot adna a függvényfájlhoz. A beépülő moduloknak nem feltétlenül kell nagynak lenniük: semmi sem akadályozhatja meg egy pár sornyi kód létrehozásában.

A függvényfájl mind PHP-ben van írva, ezért ismernie kell a hogy. Ne másolja vakon a Google-keresés során talált kódot: szánjon időt arra, hogy kiderítse, mit csinál a kód, és megértse azt. Így kevésbé valószínű, hogy olyan kódot ad hozzá, amely nem olyan jó, mint amilyennek lennie kellene.

A sablonfájlok

A témában található fájlok többsége sablonfájl . Ezek azok a fájlok, amelyek meghatározzák, hogy a WordPress milyen tartalmat jelenít meg egy adott oldalon, és a sablonhierarchia szerint kerülnek kiválasztásra.

Ha módosítani kívánja a tartalom kimenetét egy adott bejegyzés típusán, oldalon vagy archívumban , vagy szerkesztenie kell ezeket a fájlokat, vagy létre kell hoznia egy újat.

Például tegyük fel, hogy a témának van egy archive.php fájlja, amelyet kategóriák és címkék archív oldalainak kiadására használnak. Módosítani szeretné a címkék kimenetét. Tehát létrehoz egy “tag.php” nevű fájlt, amely az archive.php-n alapulna a módosításaival.

Ismételten vigyázzon a fájlok szerkesztésével: ezek összetörhetik a webhelyét. Mindig teszteljen egy helyi telepítés olyan eszközzel, mint a DevKinsta és / vagy az átmeneti webhely.

Bármelyik fájltípust kell szerkesztenie, azt helyesen kell elvégeznie. Olvassa el az alábbi részt a bevált módszerekről, hogy megtudja, hogyan szerkesztheti a kódot úgy, hogy ne törje meg a webhelyét, és ne okozzon biztonsági fejfájást.

Harmadik féltől származó téma testreszabása gyermek témával

Ha a téma a webhelyen futó harmadik féltől származik, és szerkeszteni szeretné a kódot, létre kell hoznia egy gyermek témát.

Ennek az az oka, hogy ha közvetlenül szerkeszti a témát, majd frissíti ( elveszíti az összes elvégzett módosítást.

A gyermek téma létrehozása négy lépésből áll:

1. Hozzon létre egy új mappát a wp-content / témák.
2. Ebben a mappában hozzon létre egy stíluslapot. Ebben a stíluslapban tel l WordPress, hogy ez a meglévő téma gyermek témája.
3. Adja hozzá a szerkeszteni kívánt fájlok másolatait a gyermek témához, és szerkessze azokat ott.
4. Aktiválja a gyermek témát a az Ön webhelye.

A WordPress mindig a gyermek témájából származó fájlt használja a tartalom megjelenítéséhez, hacsak a szülőtéma hierarchiájában nincs magasabb fájl. Ha ugyanannak a fájlnak két verziója van, akkor az a gyermek téma verzióját használja. Ez azt jelenti, hogy a gyermek témában az új fájl felülírja a szülő témához tartozó fájlt.

A WordPress-témák testreszabásának bevált módszerei

Tehát a téma testreszabását tervezi. Mielőtt folytatná a változtatásokat, kövesse ezeket a tippeket, hogy megbizonyosodjon arról, hogy biztonságosan cselekszik, és hogy nem fogja feltörni a webhelyét, nem teszi sebezhetővé a támadásokkal szemben vagy elveszíti a kódját.

Ha lehetséges , Testreszabás a kód szerkesztése nélkül

Ha testreszabásait elvégezheti a Testreszabón vagy az adminisztrátori képernyőkön, ez biztonságosabb, mint a kód szerkesztése.

Csak akkor szerkessze a kódot, ha vigyáz ismeri a CSS-t (a stíluslaphoz) és a PHP-t (más témafájlokhoz), és tudja, hogyan kell biztonságosan csinálni.

Helyi fejlesztési webhely használata a változtatásokhoz

Ha a témában lévő kódot szerkeszted, vagy gyermek témát hozol létre a módosítások elvégzéséhez, akkor a fejlesztési munkát egy a WordPress helyi telepítése a telepített témával és a tartalom másolásával az élő webhelyről.

Így van egy élő webhelyének tükre, hogy tesztelje a változtatásokat. A helyi webhelyen végzett munkavégzésnek nincs hatása az élő webhelyére, és gyorsabb lehet.

Még akkor is, ha a Testreszabót használja, hasznos lehet a webhelyének helyi verzióját használni teszteléshez, miközben Ön közzéteheti a változtatásokat és kipróbálhatja őket anélkül, hogy befolyásolná az élő webhelyet.

Miután tesztelte a témájában végrehajtott változtatásokat, feltöltheti az élő webhelyére, vagy ami még jobb, kipróbálhatja egy állomáshely, majd nyomja meg, hogy éljen.

Használja a Verziókezelést

Amikor módosítja a témáját, akkor a verziókezelést kell használnia a változások nyomon követésére.

Ez a legegyszerűbben azt jelenti, hogy megváltoztatja a téma verziószámát és megőrzi mindkét változat másolatát. De ha a verziójának felügyeletét megfelelően végzi, akkor a GitHub-hoz hasonló szolgáltatást kell használnia a módosítások nyomon követésére.

Így, ha egy változás problémát okoz, akkor könnyedén visszaguríthatja azt anélkül, hogy manuálisan kellene elkészítenie. szerkesztések.

A verziókezelés még hasznosabb, ha egy csapat tagjaként dolgozik, mivel láthatja, hogy mit csinálnak a többi tag. Ne felejtse el elolvasni a git vs Github útmutatót.

Használjon átmeneti oldalt a változások teszteléséhez

Ha hozzáférése van egy átállási webhelyhez (például a Kinsta ingyenes állomásához, amely mindenhez tartozik tervek), ennek tesztelése, mielőtt a téma (vagy az új gyermek téma) új verzióját aktiválná az élő webhelyen, a legbiztonságosabb módja a továbblépésnek.

Ez azért van, mert bármely helyi webhelynek vannak bizonyos eltérései az Ön élő webhelyétől: egy másik (egy lehet, hogy a PHP vagy bármely más eszköz futtatja a webhelyét.

Készítsen másolatot élő webhelyéről az átmeneti kiszolgálón, majd töltse fel és aktiválja az új téma. Alaposan tesztelje webhelyét, hogy megbizonyosodjon róla, hogy minden működik, majd áttöltheti a változtatásokat az élő webhelyére.

Tegye érzékenyebbé a témáját

A témában végrehajtandó bármilyen változtatásnak dolgozzon mobilon és asztali számítógépen egyaránt.

Ha egyre többen interneteznek mobiltelefonon keresztül, és a Google a Mobile-first indexet kapja, valószínűleg most fontosabb, hogy témája mobilon működjön asztali számítógépen végez. Tehát a témában végzett bármilyen módosításnak mobilbarátnak, vagy adott esetben elsősorban mobilnak kell lennie.

Ez főként a stílusában vagy az elrendezésében végrehajtott bármilyen változtatásra vonatkozik: ellenőrizze, hogy az új elrendezés működik-e. mobilon, és média lekérdezéseket adott hozzá, hogy az elrendezés a különböző képernyőméretekhez igazodjon.

Ha a témája nem reagál, negatívan befolyásolja a keresőmotorok rangsorolását és a konverziós arányokat.

Ha sok különböző mobileszközhöz nincs hozzáférése teszteléshez, akkor a BrowserStack-hez hasonló eszközzel megnézheti, hogyan néz ki webhelye különböző eszközökön. Használhatja a böngészője fejlesztői eszközeit és a Customizer adaptív nézeteit is.

Győződjön meg arról, hogy a testreszabásai nem befolyásolják az akadálymentességet

A témájának bármilyen változtatásának hozzáférhetőnek kell lennie a fogyatékkal élő vagy érzékszervi felhasználók számára is .

Ez nem csak azt jelenti, hogy webhelye működjön a képernyőolvasókon: más szempontok, például a színsémák és a betűméretek sok ember számára fontosak.

Ha a változások Téma szerint a színeket élénkebbé vagy a szöveget kisebbé szeretné tenni, gondolja át: ez megnehezítheti az emberek számára az Ön webhelyének olvasását vagy interakcióját.

Mielőtt bármilyen változtatást életbe léptetne, használjon akadálymentesség-ellenőrzőt a webhely teszteléséhez, és győződjön meg arról, hogy az nem zárja ki az embereket.

Tartsa be a WordPress kódolási szabványokat

Ha a témában lévő kódot szerkesztette vagy létrehoz egy chi ld téma, meg kell győződnöd arról, hogy a kódod összhangban van-e a WordPress kódolási szabványaival.

Ezek a szabványok léteznek a kód következetes és minőségi biztosítása, valamint a rendetlenség elkerülése érdekében. Vannak szabványok a PHP-re, a CSS-re és a JavaScript-re, ezért szánjon egy kis időt arra, hogy ellenőrizze az Ön számára relevánsakat, és kövesse azokat.

Ha a meglévő WordPress-témája jól kódolt, és minden újat írsz kódot úgy, hogy az összhangban legyen ezzel, akkor úton van a kód megfelelőségének biztosítására. Ne felejtsen el megjegyzést fűzni a témában végrehajtott bármilyen változtatáshoz, hogy Ön vagy mások tudják, mit tettek, amikor a jövőben visszatérnek a kódra.Gondolhatja, hogy nem felejti el, de néhány hónap elteltével meglepően könnyű elfelejteni, miért szerkesztett egy kódsort.

Testre kell szabnia a #WordPress témát, hogy egyedivé váljon? Rengeteg lehetőség van! Válassza ki a megfelelőt a részletes útmutatónkban! 👚👔Kattintson a tweetelésre

Összegzés

A WordPress-téma testreszabása nem olyan nehéz. Előfordul, hogy a Customizer használatával egyszerű változtatni a betűtípusokon vagy a színeken (feltétlenül olvassa el a WordPress betűtípusokról szóló részletes útmutatónkat). Máskor létre kell hoznia egy új gyermektémát, hogy új sablonfájlt adhasson hozzá a témához.

A téma testreszabásának lehetőségei közé tartozik a plugin vagy a Customizer használata, a WordPress téma kódjának közvetlen szerkesztése. , vagy gyermek téma létrehozása.

Határozza meg a megfelelő opciót, és biztonságosan hajtsa végre testreszabását, mindezt a webhely megsértése nélkül.