Útmutató a WordPress gyermek témák fejlesztéséhez

Számos oka van annak, hogy a WordPress fejlesztői gyermek témákat használnak. Lehetőséget nyújtanak arra, hogy egyedi elrendezést testreszabjanak egy másik meglévő téma tetején. Ez tökéletes azoknak a kezdőknek, akik saját témáikat építik.

Ezen túlmenően számos prémium formatervezési minta idővel új frissítéseket tesz lehetővé. Ha módosítja az alapvető témafájlokat, akkor a frissítés végrehajtása során felülírják őket, de a gyermek témák különállóak és szépen el vannak húzva. Ez azt jelenti, hogy kiépítheti a meglévő prémium témákat, és időt takaríthat meg a folyamatban.

Ebben az útmutatóban szeretném bemutatni a WordPress gyermek témájának kiépítésének alapfogalmát, és miért van ez egy jó ötlet.

Elkezdeni

A gyermek témái nem olyan nehézkesek, mint amilyenek megjelenhetnek. A szülői téma használatának előnyei azt jelentik, hogy nem kell semmilyen HTML / CSS-t írni semmiből. A gyermek témája automatikusan használni fogja az Ön által használt sablonfájlokat, például: sidebar.php vagy footer.php. De ha hiányoznak, akkor a gyermek témája ugyanazokat a fájlokat húzza a szülőjéből.

Ez a funkció hatalmas szabadságot biztosít a már létező sablonok testreszabására. Ez is nagyszerű ahhoz, hogy megérintje a webhelyén található területeket különleges rendezvények, mint pl. Karácsonyi vagy újévi tervezési minták hozzáadása.

A szükséges fájlok

Csak egy .css stíluslapra van szükséged, hogy beállítsd a gyermek témát a WordPress-ben. Létre kell hoznia egy új könyvtárat is a / Wp-content / themes mappát, amely a gyermek témáját tartalmazza. Ügyeljen arra, hogy te nem a mappa létrehozása a szülő témakörben, de ezzel együtt ugyanabban a témakörben.

A fejlesztők gyakran tartalmaznak egy függvényeket .php és screenshot.png ugyanabban a mappában, mint az új CSS fájl. A képernyőkép megjelenik a WordPress admin panelen, és a függvények témafájlja felhasználható tonna backend változásokhoz.

De most a fő stíluslapra kell összpontosítanunk. Ezt általában nevezik style.css és tartalmaz egy megjegyzést tartalmazó fejlécet a legfontosabb metainformációkkal. Ez azért fontos, mert a téma csak gyermekként jelenik meg, ha a szülő könyvtárnevét is tartalmazza. Az alábbiakban egy fejléc-megjegyzés szerepel:

 / * Téma neve: Húsz tizenegy gyermek téma URI: http: //example.com/ Leírás: Gyermek témája a húsz tizenegy tervezőnek Szerző: Jake Rocheleau Szerző URI: http: //www.hongkiat.com/blog/ Sablon: twentyeleven Változat: 0.1 * / 

Az érték sablon a mellékelt szülői téma könyvtárának neve legyen. Eltekintve attól, hogy az összes többi címke ismerős legyen a szabványos WordPress témakörben.

Bár az összes szülő PHP sablon használható, az eredeti szülő stílusa .css lesz nem automatikusan importálható. Ha le szeretné dolgozni az eredeti stílusokat, akkor azt a gyermek style.css dokumentumának tetején kell elhelyeznie. Az alábbiakban egy példa a WP Twenty Eleven témakörre.

 @import url ("… /twentyeleven/style.css"); 

Új stílusok beállítása

A CSS szabályok alkalmazása a témához ugyanolyan egyszerű, mint az eredeti szerkesztése. Ha tudod, hogy melyik elemeket kell célozni, akkor ugyanazt a választót használd a saját gyermek témádban.

A linkek és bekezdések néhány egyszerű változtatásával demót tudtunk bemutatni. Az eredeti Twenty Eleven témakörét használtam a különböző elemek célzásához. Időnként szükség van egy speciálisabb választó használatára, hogy felülírja a régebbi tervezést.

 test padding: 0 1.4em;  #page margin: 1.667em auto; max. szélesség: 900px;  a szín: # 5281df; szöveg-dekoráció: nincs; font-család: Calibri, Tahoma, Arial, sans-serif;  a: fókusz, a: aktív, a: lebeg szöveg-dekoráció: aláhúzás;  

Ezekben a változásokban csökkentem a teljes testméretet, és eltávolítottam néhány betétet a szélekről. Ezek a szelektorok az eredeti .css dokumentumban találhatók. Figyelemre méltó, hogy az összes horgonycsatolás egyes tulajdonságait is megváltoztatom, amelyek különböző betűkészleteket és színválasztást tartalmaznak.

A fontos dolgok

A CSS-nek speciális nyilatkozata van, hogy a többi stílust a prioritás fölé jelölje. A szintaxis a következőképpen jelenik meg: !fontos a felkiáltójellel kezdődik és a CSS tulajdonságának végén fejeződik be. Ez akkor szükséges, ha a szülői témakörből álló kaszkádstílusok vannak, amelyek felülírják a saját egyéni szabályait.

 a szín: # 5281df! fontos; szöveg-dekoráció: nincs; font-család: Calibri, Tahoma, Arial, sans-serif;  

Fölöttem az eredeti változásaimat, és egy fontos záradékkal szerkesztettem a horgonyszöveg színét. Ez elsőbbséget élvez az azonos választómélység többi stílusával szemben. Több meghatározott elem (például #access li: hover> a) általában saját stílusuk van, kivéve, ha a szín az eredeti szelektorból örökölt. Ebben az esetben a szülői téma nem állít be betűkészlet-családtulajdonságokat a horgony linkeken, így nem lépünk fel öröklési problémákkal.

Ha problémái vannak a változtatások betartásával, próbálkozzon az egyik fontos jelzéssel az ingatlanjelentés végén. Ez nem tökéletes megoldás minden öröklési problémára, de sokkal gyakrabban jön létre, mint gondolnád.

Klónozási funkciók.php

A fő stíluslaptól eltérően a gyermek témája automatikusan importálja a szülő funkcióit. Ez azt jelenti, hogy nem kell másolnia a PHP-kód bármelyikét, hogy még aktív legyen az új témában. Mégis, ha újra szeretné definiálni néhány funkciót, akkor egy másik függvényt is létrehozhat..

Példaként építettem egy olyan funkciót, amely néhány sablonfájlt elemez, amikor a sablon megkezdi. Ez eltávolítja a jQuery és az SWFObject parancsfájlok régebbi verzióit, ugyanakkor hozzáadja a legújabb verziókat a wp_head terület.

 // a js fájlok sora a mytheme_js () betöltési függvényhez] if (is_admin ()); wp_deregister_script ( 'jQuery'); wp_register_script ('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); wp_enqueue_script ( 'jQuery'); wp_deregister_script ( 'swfobject'); wp_register_script ('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'); wp_enqueue_script ( 'swfobject');  add ('init', mytheme_js); 

Rámutatnék, hogy ha a szülőfunkciókból importál kódot.php, akkor más funkciónevet kell használnod. Ellenkező esetben a PHP végzetes hibát ad ki, és a hiba elhárításához az FTP-t kell a kiszolgálóba beírnia.

A Theme Files használatával

A témakör legszélesebb kategóriája az egyéni elrendezések és az oldaltípusok építése. Alapértelmezés szerint a gyermek témája örökli az összes szülői témafájlt. De lehetőséged van új gyermek témakönyvek létrehozására, és a WP ezeket az elsődleges sablonokat regisztrálja.

Például archive.php és index.php a levélarchívumok és a kezdőlap képernyő megjelenítéséhez. Ha vannak olyan módosítások, amelyeket szeretne módosítani, amelyek a HTML-szerkesztést igénylik, akkor biztonságosabb lesz a szülőfájlok klónozása és szerkesztése a gyermek témakönyvtárában.

Egyéni oldal sablonok

Miközben sablonfájlokról beszélünk, szeretnék bemutatni egy olyan WordPress funkciót is, amelyet sokan nem ismernek. Az új tartalom létrehozásakor az adminisztrátori panelen kiválasztható oldalakat és postai sablonokat készíthet. Még akkor is, ha a szülői téma nem rendelkezik az új egyéni sablonfájlokkal, a WordPress továbbra is használja a gyereket a page.php vagy single.php.

Először hozzon létre egy új, page-offer.php nevű fájlt. Ez lesz a “különleges ajánlat” promóciós oldal, amely másként témájú. Itt átmásolhatja az eredeti oldal kódját, vagy akár teljesen felépítheti a témát. Az egyetlen kód, amit meg kell adnunk ahhoz, hogy a WordPress tudjon erről az új sablonról, egy megjegyzés a PHP-ben.

Ennek a módszernek egy másik alternatívája az egyedi azonosító szám alapján megnevezett egyedi oldalak létrehozása. Tehát az alapértelmezett betöltése helyett archive.php szerzői oldalakhoz létrehozhat egy olyan fájlt, mint például szerző-ID.php ahol az azonosító a felhasználó egyedi WordPress azonosító száma. Bár ez a rendszer több adót vet fel, mivel új sablonfájlt kell létrehoznia a webhely minden szerzőjének.

Hasznosabbá válik, ha ezeket a két technikát más sablonfájlokkal kombinálhatja. Nevezetesen a kategóriák és a címkék jól működnek saját témájukkal. Továbbá, ha a tartalomhoz csatolt mellékletekhez is csatlakozik, akkor meg kell fontolnia az egyes mime típusok különböző lehetséges sablon elrendezéseit. Egy egyszerű JPEG-kép melléklethez az alábbi sablonhierarchiát vettem fel:

• image.php
• jpeg.php
• image_jpeg.php
• attachment.php

Hasznos WordPress eszközök

A WordPress maga is sokoldalú pluginrendszerrel rendelkezik, amely sok testreszabást képes kezelni. Mivel a gyerek témák olyan újok, nincsenek a harmadik felek kiadásai (még). Van azonban néhány eszköz, amellyel ellenőrizheti, hogy a fejlesztési ideje kicsit rövidebb legyen.

Nyilvánvaló megemlítendő az egykattintásos gyermek témájú plugin, amelyet a legújabb WordPress 3.x verzióra építettek és teszteltek. Ez hozzáad egy menü hivatkozást az adminisztrátorhoz “Témák” szakasz, hogy automatikusan építsen egy gyermeket az aktuálisan aktív témával. Ez fantasztikus, ha nem akarja az FTP-vel rendetlenséget tenni, és néhány új ötletet szeretne játszani.

Ha ezeket a fájlokat az admin panelen kívánja szerkeszteni, akkor világosabb szintaxis-kiemelést is élvezhet. Ez alapértelmezés szerint nem áll rendelkezésre a WordPressben, de a továbbfejlesztett kódszerkesztőt telepítheti néhány sokkal jobb funkcióra. Ezáltal a PHP kódblokkok és a HTML / CSS átvitele sokkal jobban kezelhető.

További források

Az útmutatóban szereplő összes tipp mellett szeretném megosztani egy fontos linket a témafejlesztők számára. Már olyan sok nagyszerű cikk és ingyenes gyermek témája van, amellyel mélyebben tanulmányozhatod ezt a témát. Az alábbi forrásokból csodálatos gyűjteményt készítettem:

• 8 Ingyenes húsz tizenegy gyermek témája
• WordPress Online Codex »Gyermek témák
• Hogyan építsünk WordPress Gyermek témát a kampókkal és a szűrőkkel
• Néhány szó a gyermek témákról
• Hogyan lehet létrehozni, módosítani és használni a gyermek témákat a WordPress programban

Következtetés

Remélem, hogy a WordPress gyermek témák építésének folyamata világosabb lesz, miután elolvasta ezt a cikket. Megpróbáltam elmagyarázni, hogy a gyermek témák hogyan örökölhetik a szülőtől mind a CSS, mind a PHP sablonokat. Ezenkívül nagyon egyszerű az egyes fájlok manipulálása és saját egyedi témák létrehozása.

.