A Guide To The Options For WordPress Theme Development
- 14 min read
- WordPress,Techniques (WP)
- Saved for offline reading
- Share on Twitter, LinkedIn
A közelmúltbeli edinburgh-i WordCampen részt vettem egy panelbeszélgetésen a WordPress témafejlesztésről és a fejlesztők számára a témák készítésekor rendelkezésre álló lehetőségekről. Az ülésen elhangzott legfontosabb következtetés az volt, hogy nincs mindenre egyforma válasz, és hogy a legjobb módszer a weboldal igényeitől és a fejlesztő képességeitől függ.
De ha most kezdesz WordPress témákat készíteni, vagy ki akarsz alakítani egy rendszert a hatékonyabb vagy robusztusabb építésükhöz, hogyan döntsd el, hogy melyik megközelítést válaszd? Ebben a cikkben röviden ismertetjük a WordPress-témák működését, majd megvizsgáljuk a fejlesztésük néhány különböző megközelítését, és tippeket adunk arra vonatkozóan, hogy melyik megközelítés lehet a legmegfelelőbb az Ön weboldalához és körülményeihez.
További olvasnivalók a SmashingMag-on:
- A weboldal WordPressre való áttelepítése könnyebb, mint gondolná
- A WP_Query használata a WordPressben
- Események ütemezése a WordPress Cron használatával
- Hogyan javítható a WordPress-webhelyek telepítése
Hogyan működik egy WordPress téma?
A WordPressben a témák irányítják a webhelyet, és meghatározzák, hogy mit tartalmaz, hogyan viselkedik és hogyan néz ki. A téma elkülönül a tartalomtól, amelyet az adatbázisban tartanak. Ez azt jelenti, hogy ugyanazt a témát több weboldalon is használhatod, függetlenül a weboldalak tartalmától – amit talán már meg is tettél, ha letöltötted a témákat a WordPress tématárából.
A téma több sablonfájlból áll, amelyek mind a téma mappában vannak tárolva, amelyet a WordPress telepítésedben a wp-content/themes mappában találsz. Minden WordPress témának legalább két fájlt kell tartalmaznia: index.php és style.css. Az index fájl határozza meg, hogy milyen tartalmat jelenítsen meg a téma, a stíluslap pedig (kitaláltad) stilizálja azt, valamint meta információkat tartalmaz a témáról, amelyeket a WordPress a téma helyes működéséhez használ.
A legtöbb témának van még néhány további fájlja:
-
header.phpTartalmazza az egyes oldalak<head>részét, valamint a weboldal dizájnjának fejlécét. -
sidebar.phpTartalmazza az oldalsávot, beleértve az esetleges widget területeket. -
footer.phpTartalmazza a láblécet, amely tartalmazhat vagy nem tartalmazhat widget területeket. -
functions.phpTartalmazza a témára jellemző funkciókat. A függvények fájljáról a WordPress Codexben tájékozódhatsz. - A hurkot tartalmazó fájlok, amelyek az adatbázisból hívják a tartalmat. Attól függően, hogy a weboldal melyik részén dolgozol, ez többféle fájl egyike lehet:
-
page.phpStatikus oldalakhoz -
single.phpEgyedi bejegyzésekhez (például blogbejegyzésekhez) -
index.php,archive.php,category.phpstb. Több bejegyzést felsoroló oldalakhoz
-
Yoast írt egy nagyszerű vizuális ábrázolást a témafájlok működéséről, és a WordPress Codex tartalmaz egy részletes leírást a témákról, beleértve a különböző fájlok részleteit és azt, hogy mikor hívják őket.
Azt állítom, hogy a stíluslap azonban a legfontosabb fájl, és valószínűleg azzal fogod kezdeni, mert egy “gyermektémának” (erről hamarosan többet) akkor is szüksége van stíluslapra, ha semmi mást nem tartalmaz. A stíluslap fontos metainformációkat tartalmaz magáról a témáról, ami az összes stílus előtt ki van kommentálva. Az alábbiakban a WordPress jelenlegi alapértelmezett témájának, a Twenty Eleven-nek a nyitó megjegyzései találhatók:
Ez az információ ki van kommentálva, így a böngészők nem olvassák, de a WordPress olvassa, és információt nyújt mindenkinek, aki a témádat használja. Erre rövidesen visszatérünk, amikor megvizsgáljuk, hogyan hozzunk létre egy gyermektémát.
Most, hogy tudod, hogyan működnek a témák, a következő lépés az, hogy kitaláld, hogyan kezdj hozzá a sajátod elkészítéséhez. Mielőtt belekezdenél, érdemes lenne átgondolnod néhány olyan pontot, amelyek segítenek a döntés meghozatalában.
Mit kell figyelembe venni egy WordPress téma fejlesztésénél?
Mielőtt eldöntenéd, hogy milyen megközelítést válassz a témád fejlesztéséhez, azonosítsd a korlátaidat. Ezek valószínűleg a következők:
- Idő. Mennyi időd van a téma kifejlesztésére, vagy annak megtanulására?
- Költségvetés. Ez az időhöz kapcsolódik, de azzal is összefügg, hogy megengedheted-e magadnak, hogy prémium témát vagy témakeretet fizess.
- Képesség. Mennyire vagy jártas a témafejlesztésben, a CSS-ben és a PHP-ben, valamint a témák működésében? Ha nem ismeri, mennyit akar tanulni?
- Jövőbiztosság. Szükség lesz a téma frissítésére a jövőben? Más fejlesztők is fognak rajta dolgozni rajtad kívül? Ha igen, akkor a megközelítésednek a lehető legstabilabbnak kell lennie.
- Ismétlés. Gondolod, hogy a jövőben több hasonló témát fogsz fejleszteni? Ha igen, akkor a megközelítésének lehetővé kell tennie a kód újrafelhasználását.
A cikk végén visszatérünk ezekre a megfontolásokra, és meghatározzuk, hogy a különböző helyzetekben mely fejlesztési lehetőségek a legmegfelelőbbek.
Témafejlesztés:
A téma vagy témák fejlesztésére néhány lehetőség áll rendelkezésre, és érdemes ezeket megvizsgálni, mielőtt feltűrné az ingujját és elkezdené a kódolást. A megfelelő megközelítés kiválasztása jobb témát eredményez, robusztusabb kóddal, és minimálisra csökkenti a későbbiekben elvégzendő átdolgozások számát. Ez segíteni fog abban is, hogy hatékonyabban építse fel a témát.
A lehetőségek, amelyeket itt megnézünk, a következők:
- Témát készíteni a semmiből,
- Egy meglévő téma szerkesztése (vagy egyesek szerint “hackelése”),
- A téma testreszabója használata egy meglévő téma finomhangolásához,
- Készítsen egy gyermektémát egy meglévő téma módosításához,
- Készítsen saját szülő témát (a fenti megközelítések valamelyikével) és gyermektémákat,
- Használjon egy téma keretrendszert.
1. Építsünk témát a semmiből
Ez a megközelítés a legnehezebb, ha tapasztalatlanok vagyunk. De ha gyakorlott WordPress-fejlesztő vagy, akkor ez adja a legnagyobb kontrollt. Ez lehet a legmegfelelőbb módszer, ha egy meglévő statikus webhelyről importálja a HTML-t, amelyet egyéb változtatások nélkül frissít a WordPressre.
A weboldal WordPressre való átvitelénél azonban jó ötlet a folyamat részeként elvégezni annak felülvizsgálatát, ahelyett, hogy egyszerűen átmásolná a kódot. Ha egy statikus webhelyet másol át, akkor a kódot alaposan szemmel kell tartania, hogy az tiszta, hatékony és érvényes legyen.
2. Egy meglévő téma szerkesztése (vagy feltörése)
A legtöbb ember így kezdi a WordPress témafejlesztést: egy letöltött témán dolgozva látják, hogy néhány stílusjegy nem teljesen megfelelő, ezért belemerülnek a stíluslapba, és elvégeznek néhány szerkesztést. Az ilyen módon való kezdés csábító, mert gyors és egyszerű módszernek tűnik a kívánt hatás eléréséhez. De van néhány veszélye:
- Ha valaha témát vált, a frissítés felülírja a korábban elvégzett módosításokat.
- Egyszerűen ismétlődő kódot adhatunk hozzá, ha a stíluslapban lejjebb új stílusokat adunk hozzá, amelyek felülírják a feljebb lévő stílusokat, ahelyett, hogy eltávolítanánk, amire nincs szükségünk.
- A weboldal a végén sokkal több kódot tartalmazhat, mint amennyire szüksége van.
- Ha a téma eleve nem jól van kódolva vagy kommentálva, nagyobb zűrzavarba keveredhet, és úgy találhatja, hogy sok javítást kell elvégeznie.
A téma feltörése azonban működhet, ha nyitott szemmel megy bele. Ez akkor lehet egy lehetőség, ha a következők igazak:
- A téma, amit használsz, jól megírt, érvényes és kommentált (Pl, az alapértelmezett WP téma, a Twenty Eleven);
- A változtatások, amelyeket végrehajtasz, olyan drasztikusak, hogy nem lenne szükséged az eredeti téma frissítésére;
- Megérted a témában található PHP-t és CSS-t, és kényelmesen tudod szerkeszteni, hozzáadni és eltávolítani anélkül, hogy tönkretennéd a témát.
Ha úgy döntesz, hogy ezt az utat választod, fontos az eredeti témáról biztonsági másolat készítése és a kód alapos kommentálása. Azt is tanácsolnám, hogy kommentálj ki minden olyan kódot, amit nem akarsz, majd teszteld, hogy mi történik, mielőtt bármit is törölnél.
3. Használd a téma testreszabóját egy meglévő téma finomhangolásához
A téma testreszabója a WordPress 3.4-es verziójával jelent meg. Lehetőséget ad a téma testreszabására kódírás nélkül, egyszerűen egy WYSIWYG felület segítségével. Attól függően, hogy a testreszabó mennyire van beleírva magába a témába, használhatod a képek, címek, színek és akár az elrendezés megváltoztatására is. Várhatóan egyre több olyan téma lesz, amelybe a testreszabót beépítették.
A téma testreszabója külön fájlban tárolja a változtatásokat, nem a téma stíluslapjában, így ismétlődő kód lesz.
Bővebb információért tekintse meg az Otto on WordPress videós bemutatóját vagy útmutatóját a téma testreszabó integrálásához a saját témáihoz.
4. Gyermektéma létrehozása a meglévő téma módosításához
Ez a megközelítés hasonló a meglévő téma szerkesztéséhez, de biztonságosabb. Ez egy vadonatúj téma létrehozásából áll, amelyet a meglévő téma gyermektémájaként definiál. Ha a gyermektémának nincs egy adott fájlja, de a szülő témának van, akkor azt fogja használni. Ahol a gyermektémának van fájlja, az a fájl felülírja a szülői téma megfelelőjét. Nézzünk egy példát:
| szülő témafájlok | gyermek témafájlok |
|---|---|
. |
|
A fenti példában, A WordPress a következő fájlokat használná a tartalomszolgáltatáshoz:
-
style.cssa gyermek témából, -
page.phpa gyermek témából, -
single.phpa szülő témából, -
archive.phpa szülő témából, -
header.phpa gyermek témából, -
sidebar.phpa szülő témából, -
footer.phpa szülő témából.
Elképzelhető, hogy ez hasznos lehet, ha a szülő téma jelöléseinek nagy részét használni akarod, de meg akarod változtatni a fejléc tartalmát (hozzáadva például a logódat és a címed adatait) és bármely statikus oldalt (esetleg megváltoztatva a meta adatok megjelenítésének módját).
Az egyetlen fájl, amellyel minden gyermektémának rendelkeznie kell ahhoz, hogy működjön, a stíluslap, mert ez tartalmazza azokat az információkat, amelyekre a WordPressnek szüksége van ahhoz, hogy a gyermektéma megfelelően működjön. Ehhez adj hozzá néhány extra kódot a stíluslap megjegyzéseihez:
Az extra sorokat észreveszed? Az első:
Template: twentyelevenEz a sor közli a WordPress-szel, hogy a téma egy gyermektéma, és hogy a Twenty Eleven a szülője. A szülő téma könyvtárának nevét kellene hozzáadni, nem a teljes nevét.
A második pedig:
@import url("../twentyeleven/style.css");Ez a sor azt mondja a böngészőnek, hogy töltse be a szülő téma stíluslapját, mielőtt az aktuális stíluslap bármelyik stílusát megjelenítené. Ez megszabadít attól, hogy duplikálnod kelljen a szülő téma minden olyan stílusát, amelyet használni szeretnél.
Így működnek a gyermek témák. De mikor ez a legjobb megközelítés? A következő esetekben javasolnám a használatát:
- Már van egy (szülő témaként használandó) témád, amely tartalmazza a legtöbbet abból, amire szükséged van a témádhoz;
- Szeretnéd, ha frissíteni tudnád a szülő témádat (például amikor egy WordPress-frissítést követően témafrissítések jelennek meg);
- Nem akarsz csomóba kötni egy meglévő téma feltörése miatt;
- Meg akarod adni a lehetőséget, hogy visszatérj a szülő témához, vagy a jövőben egy másik hasonló témát fejlessz (ami egy új gyermektéma lenne);
- Egy sor hasonló weboldalt fejlesztesz néhány kisebb stilisztikai vagy tartalmi különbséggel (én ezt csináltam, amikor hasonló weboldalakat építettem egy olyan ügyfélnek, akinek több cége volt);
- A gyermek és a szülő téma közötti különbség nem olyan nagy, hogy a nulláról kelljen kezdened, vagy nem olyan nagy, hogy a gyermek téma kódja felülírjon mindent, amit a szülő téma frissítései befolyásolnak.
5. Saját szülő téma (a fenti megközelítések valamelyikének használatával) és gyermektémák létrehozása
Az imént említett helyzet, amikor egy több céggel rendelkező ügyfél számára készít egy sor webhelyet, olyan alkalom, amikor létrehozhat egy szülő témát, majd létrehozhat gyermektémákat az egyes webhelyekhez. A következő esetekben is érdemes lehet ezt tennie:
- A jövőben sok hasonló tartalmú és jelölésű webhely fejlesztését tervezi (nem csak egy ügyfél számára);
- Sok webhelyet kezel, és rendszeresen bele kell merülnie mindegyikbe, és azt szeretné, ha a kód nagyon hasonló lenne;
- Kényelmesen létrehozza a saját szülő témáját, és a kódot úgy szerkeszti, hogy egy robusztus szülő témát hozzon létre, amely jól működik a gyermektémákkal.
Ha úgy döntesz, hogy ezt a megközelítést választod, akkor vagy a semmiből készítheted el a szülő témádat, vagy meghekkelhetsz egy meglévő témát. Az általam készített webhelyek többségénél egy szülő témát használok, amelyet a Twenty Ten téma, a WordPress korábbi alapértelmezett témájának hackelésével fejlesztettem ki. Annyi változtatást végeztem, hogy már nem volt szükségem az eredeti téma frissítéseinek aktiválására. A téma kódjával is megbarátkoztam, és jelentős változtatásokat akartam végrehajtani rajta, csökkentve a kódot, átszerkesztve a munkamódszeremnek megfelelően, és eltávolítva azokat a kódokat, amelyekről tudtam, hogy nem lesz rájuk szükségem.
Egy meglévő téma alapján létrehozhatsz egy gyermektémát is, majd létrehozhatsz hozzá gyermektémákat – gyakorlatilag az eredeti téma unokáit. Ennek az az előnye, hogy nem írja felül az eredeti téma kódját, miközben rugalmasan módosíthatja a gyermektémát, ami átkerül az unokatémákba. Egy figyelmeztető szó azonban itt is elhangzik: három témát használva könnyen összezavarodhatsz, és a végén rengeteg felesleges kódot kaphatsz.
6. Használj témakeretet
Az utolsó lehetőséget WordPress-felhasználók és -fejlesztők ezrei használják. Számos téma-keretrendszer létezik, amelyeket egyfajta szülő témaként használhatsz, de sokkal több funkcionalitással, és egyes esetekben azzal a lehetőséggel, hogy egészen fantáziadús elrendezés- és stílusváltozásokat hajthatsz végre anélkül, hogy egy sor kódot írnál. Egyes keretrendszerek ingyenesek, míg mások prémium kategóriásak. A Smashing Magazine-on már részletesen áttekintettük őket, de a főbbeket az alábbiakban felsoroljuk:
Ingyenes WordPress keretrendszerek:
- A Theme Hybrid számtalan horgot és widget területet tartalmaz, amelyek segítségével testre szabhatod a témáidat. Néhány gyermektéma is rendelkezésre áll. A keretrendszer és a gyermektémák mind ingyenesek, de ha támogatást szeretnél, fizetned kell érte a Theme Hybrid weboldalán történő regisztrációval. A vele való munka meglehetősen bonyolult lehet, hacsak nem értesz a PHP-hoz, vagy nem használod az egyik gyermektémát.
- A Wonderflux egy rugalmas rácsrendszerre épül. Lehetőségekkel rendelkezik az elrendezés és a stílusok beállítására anélkül, hogy kódot kellene írni, és rengeteg horgot és widgetterületet tartalmaz. Használata ingyenes, és a WordPress fórumokon keresztül támogatott.
- A Carrington az ingyenes keretrendszerek közül a legmegalapozottabb, és számos gyermektémával rendelkezik.
- A Thematic-ot az Automattic fejlesztette, amely magát a WordPress-t is fejleszti. Számos horgot, szűrőt és widget területet tartalmaz.
Premium WordPress keretrendszerek:
- A fejlesztői a Genesis-t “az iparági szabványként” jellemzik. Gyermektémák széles választékával, kódírás nélküli testreszabási lehetőségekkel és SEO funkciókkal rendelkezik.
- A Thesis a másik nagy prémium keretrendszer, és ez is lehetőséget ad a gyermektémák kódírás nélküli testreszabására.
Összefoglaló: A megközelítés kiválasztása
Valószínű, hogy ezt elolvasva már van elképzelése arról, hogy melyik megközelítést válassza. De ha még mindig vakargatod a fejed, íme egy összefoglaló arról, hogy mikor melyik módszer a megfelelő:
| megközelítés | idő | költség | kapacitás | jövőbeli-proofing | Repetíció | |
|---|---|---|---|---|---|---|
| Build from scratch | High | Low | High | Low | Low | |
| Hack meglévő téma | Low | Low | Low | közepes | alacsony | alacsony |
| Téma testreszabó használata | alacsony | alacsony | alacsony | Low | Low | Low |
| Külső téma létrehozása a meglévő szülő alapján | Medium | Low | Medium | High | High | |
| Creatate parent theme | High | Low | High | High | High | |
| Téma keretrendszer (ingyenes) | Medium | Low | Medium | High | High | |
| Theme framework (premium) | közepes | magas | alacsony vagy közepes | magas | magas |
Összességében, minden megközelítésnek megvan a maga helye; csak a weboldaltól és Öntől függ. A lényeg az, hogy az előnyök és hátrányok mérlegelése után válasszon egy megközelítést – ne csak úgy belevágjon, és próbálkozzon, hogy aztán rájöjjön, hogy tönkretett egy témát, vagy hogy rengeteg átdolgozást okozott magának.
És mint mindig, bárhogy is dönt, ne felejtsen el biztonsági mentéseket készíteni!
(al)