Vodič za WordPress Dijete Teme razvoja

Postoje brojni razlozi zbog kojih programeri WordPressa počinju koristiti dječje teme. Pružaju vam mogućnost da prilagodite jedinstveni izgled na vrhu druge postojeće teme. To je savršeno za početnike koji se žele zaigrati s izgradnjom vlastitih tema.

Osim toga, mnogi vrhunski dizajni s vremenom će objaviti nova ažuriranja. Ako mijenjate datoteke jezgrene teme, one će biti prepisane prilikom ažuriranja, ali dječje teme su odvojene i uredno skrivene. To znači da možete izgraditi postojeće premium teme i uštedjeti mnogo vremena u tom procesu.

U ovom vodiču želim predstaviti osnovne koncepte izgradnje WordPress dijete teme i zašto je to tako dobra ideja.

Početak rada

Teme djece nisu tako teške kao što se mogu pojaviti. Prednosti rada s nadređenom temom znači da ne morate pisati sve HTML / CSS ispočetka. Djetetova će tema automatski koristiti datoteke predložaka koje uključite, kao što je sidebar.php ili footer.php. Ali ako oni nedostaju, onda će vaša dječja tema povući iste datoteke s roditelja.

Ova funkcionalnost nudi ogromnu slobodu u prilagođavanju već postojećih predložaka. To je također izvrsno za dodirivanje područja oko vaše web-lokacije za posebne događaje, kao što je dodavanje dizajna uzoraka za Božić ili Novu godinu.

Potrebne datoteke

Potrebna vam je samo jedna .css stylesheet za postavljanje podređene teme u WordPressu. Također trebate stvoriti novi direktorij u izborniku / wp-content / teme mapu koja će sadržavati temu vašeg djeteta. Obratite pozornost na vas nisu stvaranje ove mape unutar nadređene teme, ali uz nju u istom direktoriju tema.

Programeri često uključuju funkcije.php i screenshot.png u istu mapu kao i vaša nova CSS datoteka. Slika zaslona prikazana je u WordPress admin panelu i funkcija teme datoteka može se koristiti za tona backend promjene.

Ali za sada se trebamo usredotočiti na glavnu stilsku ploču. To se obično naziva style.css i uključuje zaglavlje komentara s meta informacijama ključa. To je važno jer će se tema prikazivati ​​kao dijete samo ako uključite ime direktorija roditelja. U nastavku je primjer komentara zaglavlja:

 / * Ime teme: Dvadeset jedanaest dječjih tema URI: http: //example.com/ Opis: Dječja tema za dizajn Dvadeset jedanaest Autor: Jake Rocheleau Autor URI: http: //www.hongkiat.com/blog/ Verzija: 0,1 * / 

Vrijednost za predložak treba biti naziv direktorija za nadređenu roditeljsku temu. Osim toga, sve ostale oznake trebaju biti poznate standardnim WordPress temama.

Iako će se koristiti svi roditeljski PHP predlošci, izvorni roditelj's style.css će ne automatski uvesti. Ako želite ukloniti originalne stilove, morat ćete ga uključiti na vrh vašeg stila. Slijedi primjer, uključujući temu WP Twenty Eleven.

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

Postavljanje novih stilova

Primjena pravila CSS-a na vašu temu jednako je jednostavna kao i uređivanje izvornika. Ako znate koje elemente trebate ciljati, upotrijebite iste selektore u vlastitoj temi.

Mogli bismo demonstrirati neke vrlo jednostavne promjene veza i odlomaka. Koristio sam kod iz izvorne dvadeset jedanaest tema za ciljanje različitih elemenata. Ponekad je potrebno upotrijebiti određeniji izbornik za nadjačavanje starijeg dizajna.

 tijelo punjenje: 0 1.4em;  #page margin: 1.667em auto; max-width: 900px;  a color: # 5281df; text-decoration: none; obitelj fontova: Calibri, Tahoma, Arial, sans-serif;  a: fokus, a: aktivno, a: hover text-decoration: underline;  

U tim promjenama smanjio sam ukupnu veličinu tijela i uklonio neke obloge s rubova. Svi ovi selektori mogu se naći navedeni u izvornom .css dokumentu. Značajno je da i ja mijenjam neka svojstva za sve sidrene veze koje uključuju različite fontove i izbor boja.

Važne stvari

CSS ima posebnu deklaraciju za označavanje prioriteta iznad drugih stilova. Sintaksa se prikazuje kao !važno počevši s uskličnikom i završavajući na kraju CSS svojstva. To je potrebno ako imate kaskadne stilove iz nadređene teme koja nadjačava vlastita prilagođena pravila.

 a color: # 5281df! text-decoration: none; obitelj fontova: Calibri, Tahoma, Arial, sans-serif;  

Iznad sam kopirao svoje izvorne promjene i uredio boju sidrenog teksta s važnom odredbom. To će imati prednost nad svim ostalim stilovima iste dubine selektora. Više definiranih elemenata (kao što su #access li: hover> a) obično drže vlastite stilove osim ako boja još uvijek je naslijedio od našeg izvornog selektora. U ovom slučaju naša nadređena tema ne postavlja svojstvo font-obitelji na sidrene veze, tako da se ne nailazimo na probleme s nasljeđivanjem.

Ako imate poteškoća s promjenama, pokušajte na kraju svoje izjave o imovini umetnuti jednu od tih važnih oznaka. Ovo nije savršeno rješenje za svaki problem u nasljeđivanju, ali to je mnogo korisnije nego što mislite.

Kloniranje functions.php

Za razliku od glavne stilske tablice, vaša će dijete automatski uvesti funkcije svojih roditelja. To znači da ne morate kopirati preko bilo kojeg PHP koda da biste ga još uvijek aktivirali u novoj temi. Ipak, ako želite ponovno definirati neke funkcije, možete izgraditi još jednu functions.php i upisati svoj novi kôd sa svim promjenama.

Kao primjer sam izgradio funkciju koja parsira nekoliko JavaScript datoteka kada se predložak inicira. To će ukloniti sve starije verzije jQuery i SWFObject skripti, dok će istovremeno dodati najnovije verzije wp_head područje.

 // redovi js datoteka za funkciju učitavanja mytheme_js () if (is_admin ()) return; 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_action ('init', mytheme_js); 

Trebao bih istaknuti da ako uvezete kôd iz nadređenih functions.php onda ćete morati koristiti drugo ime funkcije. Inače će PHP dati fatalnu pogrešku i morat ćete FTP u poslužitelj popraviti pogrešku.

Rad s datotekama tema

Najšire kategorije tema su izrada prilagođenih izgleda i vrsta stranica. Prema zadanim postavkama, dijete će naslijediti sve datoteke tema svojih roditelja. Ali imate mogućnost stvaranja novih datoteka za dijete i WP će ih registrirati kao 'primarni' predložak.

Na primjer archive.php i index.php koriste se za prikaz post arhiva i zaslona početne stranice. Ako želite napraviti izmjene koje zahtijevaju uređivanje HTML-a, tada biste bili sigurniji da klonirate nadređene datoteke i uređujete ih u imeniku teme djeteta.

Prilagođeni predlošci stranica

Dok govorimo o datotekama predložaka, također želim predstaviti dio WordPress funkcionalnosti s kojim mnogi nisu upoznati. Možete izraditi predloške za stranice i postove koji će se moći odabrati s upravne ploče prilikom izrade novog sadržaja. Čak i ako nadređena tema nema novu datoteku prilagođenog predloška, ​​WordPress će i dalje koristiti dijete umjesto mjesta page.php ili single.php.

Prvo izradite novu datoteku pod nazivom page-offer.php. Ovo će biti “posebna ponuda” promotivnu stranicu koja je drugačije tematizirana od svih ostalih. Ovdje možete kopirati preko izvornog koda stranice ili čak u potpunosti izraditi temu od nule. Jedini kod koji trebamo dopustiti da WordPress sazna za ovaj novi predložak je postavljanje komentara u PHP-u.

Druga alternativa ovoj metodi je izrada prilagođenih stranica imenovanih prema jedinstvenom ID broju. Dakle, umjesto učitavanja zadanog archive.php za stranice autora možete stvoriti datoteku kao što je autor-ID.php gdje je ID korisnikov jedinstveni ID broj za WordPress. Iako je ovaj sustav više oporeziv, jer trebate stvoriti novu datoteku predloška za svakog autora na vašoj web-lokaciji.

To postaje korisnije ako možete kombinirati ove dvije tehnike s drugim datotekama predložaka. Posebno kategorije i oznake dobro funkcioniraju koristeći vlastite datoteke s temama. Isto tako, ako se povežete s privicima u svom sadržaju, razmislite o različitim mogućim izgledima predložaka za svaki mime tip. Dolje sam uključio hijerarhiju predložaka za jednostavan privitak JPEG slike:

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

Korisni alati za WordPress

Sam WordPress ima svestrani sustav dodataka koji može upravljati mnoštvom prilagodbi. Budući da su dječje teme tako nove, nema cijelog tiraža trećih izdanja (još). Međutim, postoji nekoliko alata koje možete provjeriti kako bi vaše vrijeme razvoja bilo kraće.

Očigledan spomen je One-Click Child Theme plugin izgrađen i testiran za najnoviju WordPress 3.x verziju. Dodaje poveznicu izbornika u vašu administraciju “teme” da biste automatski izradili dijete pomoću trenutačno aktivne teme. Ovo je fantastično ako se ne želite petljati s FTP-om i želite se igrati s nekim novim idejama.

Ako planirate uređivati ​​te datoteke unutar admin panela, također ćete uživati ​​u jasnijem označavanju sintakse. To nije ponuđeno u WordPress-u po defaultu, ali možete instalirati Advanced Code Editor za neke mnogo poboljšane funkcionalnosti. To čini wading kroz PHP kod blokova i HTML / CSS puno više rukovanje.

Dodatna sredstva

Uz sve savjete u ovom vodiču želim podijeliti niz važnih veza za programere tema. Već postoji toliko mnogo članaka i besplatnih dječjih tema koje možete provjeriti kako biste učili dublje u ovu temu. U nastavku sam dodao prekrasnu zbirku tih resursa:

• 8 Free Dvadeset Jedanaest Dijete Teme
• WordPress Online Codex »Dijete Teme
• Kako izgraditi WordPress dijete teme pomoću kuke i filteri
• Nekoliko riječi o dječjim temama
• Kako stvoriti, mijenjati i koristiti dijete Teme u WordPress

Zaključak

Nadam se da je proces izgradnje WordPress dijete teme jasnije za vas nakon čitanja ovog članka. Pokušao sam objasniti kako dječje teme mogu naslijediti i CSS i PHP predloške od roditelja. Osim toga, vrlo je jednostavno manipulirati određenim datotekama i stvoriti vlastite jedinstvene teme.

.