Vodnik za razvoj WordPress otrok teme

Obstaja več razlogov, da razvijalci WordPressa začenjajo uporabljati podrejene teme. Omogočajo vam, da prilagodite edinstveno postavitev na vrhu druge obstoječe teme. To je kot nalašč za začetnike, ki se želijo igrati s svojimi temami.

Poleg tega bo veliko premijskih modelov sčasoma izdalo nove posodobitve. Če spreminjate osnovne datoteke tem, bodo pri nadgradnji prepisane, vendar so podrejene teme ločene in lepo umaknjene. To pomeni, da lahko zgradite obstoječe premijske teme in prihranite veliko časa v procesu.

V tem priročniku želim predstaviti osnovne koncepte oblikovanja WordPress otroka temo in zakaj je tako dobra ideja.

Kako začeti

Teme otrok niso tako težke, kot se zdi. Prednosti dela z nadrejeno temo pomeni, da vam ni treba pisati vse HTML / CSS iz nič. Otroška tema bo samodejno uporabila vse datoteke predlog, ki jih vključite, na primer sidebar.php ali footer.php. Toda, če manjkajo, bo vaša otroška tema povlekla iste datoteke iz svojega starša.

Ta funkcionalnost ponuja ogromno svobode pri prilagajanju že obstoječih predlog. Prav tako je super za dotikanje območij okoli vaše spletne strani za posebne dogodke, kot je dodajanje vzorcev oblikovanja za božič ali novo leto.

Zahtevane datoteke

Za nastavitev podrejene teme v WordPressu potrebujete samo eno. Prav tako morate v imeniku ustvariti nov imenik / wp-content / themes mapa, ki bo vsebovala vašo otrokovo temo. Bodite pozorni na vas niso ustvarjanje te mape v nadrejeni temi, toda skupaj z njo v istem imeniku tem.

Razvijalci pogosto vključujejo funkcije functions.php in screenshot.png v isti mapi kot vaša nova datoteka CSS. Posnetek zaslona se prikaže v skrbniški plošči programa WordPress, datoteka s temo funkcij pa se lahko uporabi za tone sprememb v ozadju.

Toda za zdaj se moramo osredotočiti na glavno slogovno tabelo. To se običajno imenuje style.css in vključuje glavo komentarja s meta informacijami ključa. To je pomembno, ker bo vaša tema prikazana kot otrok, če vključite ime starševskega imenika. Spodaj je primer komentar glave:

 / * Ime teme: Dvajset enajst otroških tem URI: http: //example.com/ Opis: Otroška tema za oblikovanje dvajsetih enajstih Avtor: Jake Rocheleau Avtor URI: http: //www.hongkiat.com/blog/ Predloga: twentyeleven Različica: 0,1 * / 

Vrednost za predlogo mora biti ime imenika za spremljano nadrejeno temo. Razen tega morajo biti vse druge oznake znane standardnim temam WordPress.

Čeprav bodo uporabljene vse nadrejene PHP predloge, bo prvotni staršev slog.css ne uvozi samodejno. Če želite odpraviti prvotne sloge, ga boste morali vključiti na vrh vašega otrokovega slog.css dokumenta. Spodaj je primer, vključno s temo WP Twenty Eleven.

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

Nastavitev novih slogov

Uveljavljanje pravil CSS za vašo temo je tako enostavno kot urejanje izvirnika. Če veste, katere elemente morate ciljati, uporabite iste selektorje v lastni podrejeni temi.

Lahko bi demo z nekaj res enostavno spremembe povezav in odstavkov. Za ciljanje različnih elementov sem uporabil kodo iz prvotne teme Twenty Eleven. Včasih je treba uporabiti natančnejši izbirnik, da preglasimo starejšo obliko.

 telo polnilo: 0 1.4em;  #page margin: 1.667em auto; max-width: 900px;  a barva: # 5281df; dekoracija besedila: nobena; družina pisav: Calibri, Tahoma, Arial, sans-serif;  a: fokus, a: aktivno, a: hover text-decoration: underline;  

V teh spremembah sem zmanjšal celotno velikost telesa in tudi odstranil nekaj oblazinjenja z robov. Vse te selektorje lahko najdete v izvirnem dokumentu .css. Pomembno je, da spreminjam tudi nekatere lastnosti za vse sidrne povezave, ki vsebujejo drugačno izbiro pisav in barv.

Pomembne stvari

CSS ima posebno izjavo, ki označuje prednost pred drugimi slogi. Sintaksa je prikazana kot !pomembno začenši s klicajem in se zaključi na koncu vaše lastnosti CSS. To je potrebno, če imate kaskadne sloge iz nadrejene teme, ki preglasijo lastna pravila po meri.

 a color: # 5281df! important; dekoracija besedila: nobena; družina pisav: Calibri, Tahoma, Arial, sans-serif;  

Zgoraj sem kopiral svoje prvotne spremembe in uredil barvo sidrnega besedila s pomembno določbo. To bo imelo prednost pred vsemi drugimi slogi iste izbirne globine. Bolj opredeljeni elementi (kot npr #access li: hover> a) običajno imajo svoje lastne sloge, razen če. \ t barve je bil še vedno podedovan iz našega prvotnega selektorja. V tem primeru naša nadrejena tema ne postavi lastnost družine pisav na sidrne povezave, zato se ne bomo srečevali z nobenim vprašanjem dedovanja..

Če imate težave s spremembami, poskusite izpisati eno od teh pomembnih oznak na koncu izjave o lastnostih. To ni popolna rešitev za vsak problem v zvezi z dedovanjem, vendar je zelo uporaben veliko pogosteje, kot si mislite.

Kloniranje funkcij.php

Za razliko od glavne slogovne podlage bo vaša podrejena tema samodejno uvozila funkcije svojih staršev. To pomeni, da vam ni treba kopirati preko nobene kode PHP, da bi jo še vedno aktivirali v vaši novi temi. Če pa želite ponovno definirati nekatere funkcije, lahko zgradite še eno od funkcij.php in vnesete novo kodo z vsemi spremembami.

Kot primer sem zgradil funkcijo, ki razčleni nekaj JavaScript datotek, ko se predloge zažene. S tem boste odstranili vse starejše različice skriptov jQuery in SWFObject, hkrati pa dodali najnovejše različice wp_head območje.

 // vrsti js datoteke za funkcijo nalaganja 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); 

Moram poudariti, da če uvažate kodo iz nadrejenih funkcij.php, boste morali uporabiti drugo ime funkcije. V nasprotnem primeru bo PHP izdal usodno napako in morali boste v strežnik FTP popraviti napako.

Delo z datotekami teme

Najbolj široka kategorija theming ustvarja postavitve po meri in vrste strani. Privzeto bo vaša podrejena tema podedovala vse datoteke svojih staršev. Vendar pa imate možnost ustvariti nove datoteke za otroke, WP pa jih bo registriral kot "primarno" predlogo.

Na primer archive.php in index.php se uporabljajo za prikaz arhivov poątnih arhivov in zaslona domače strani. Če želite spremeniti spremembe, ki zahtevajo spremembe v HTML-ju, boste varnejši, če klonirate nadrejene datoteke in jih urejate v imeniku otrokove teme..

Predloge za strani po meri

Medtem ko govorimo o predlogi datotek, želim tudi uvesti del WordPress funkcionalnosti, s katerim mnogi niso seznanjeni. Ustvarite lahko predloge za strani in objave, ki jih lahko izberete na skrbniški plošči pri ustvarjanju nove vsebine. Tudi če nadrejena tema nima nove datoteke s predlogami po meri, bo WordPress še vedno uporabljal otroka namesto a page.php ali single.php.

Najprej ustvarite novo datoteko z imenom page-offer.php. To bo a “Posebna ponudba” promocijsko stran, ki je tematsko drugačna od vseh drugih. Tukaj lahko kopirate nad izvirno kodo strani ali celo popolnoma zgradite temo. Edina koda, ki jo moramo vedeti o tej novi predlogi, je nastavitev komentarjev v PHP-ju.

Druga možnost za to metodo je izdelava strani po meri, poimenovane po enolični identifikacijski številki. Torej namesto nalaganja privzete archive.php za strani avtorja lahko ustvarite datoteko, kot je author-ID.php kjer je ID uporabnikova edinstvena ID številka za WordPress. Čeprav je ta sistem bolj obdavčljiv, ker morate ustvariti novo datoteko predloge za vsakega avtorja na vašem spletnem mestu.

To postane bolj uporabno, če lahko kombinirate teh dveh tehnik z drugimi predlogami datotek. Zlasti kategorije in oznake dobro delujejo s svojimi tematskimi datotekami. Tudi če se povežete s prilogami v vaši vsebini, boste želeli razmisliti o različnih možnih postavitvah predlog za vsak tip mime. Spodaj sem vključil hierarhijo predlog za preprosto prilogo slike JPEG:

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

Koristna orodja za WordPress

WordPress ima vsestranski sistem dodatkov, ki lahko upravlja veliko prilagoditev. Ker so podrejene teme tako nove, ni povsem narejene izdaje tretjih oseb (še). Vendar pa obstaja nekaj orodij, ki jih lahko preverite, da bo vaš razvojni čas nekoliko krajši.

Očitna omemba je vtičnik Theme z enim klikom, ki je bil izdelan in preizkušen za najnovejšo različico WordPress 3.x. V Admin doda povezavo z menijem “Teme” za samodejno izdelavo otroka s trenutno aktivno temo. To je fantastično, če ne želite, da se zmešate z FTP-jem in iščete nekaj novih idej.

Če nameravate urediti te datoteke v skrbniški plošči, boste imeli tudi jasnejše sintakse. To ni na voljo v WordPress privzeto, vendar lahko namestite Advanced Code Editor za nekaj zelo izboljšane funkcionalnosti. Zaradi tega je prehod preko blokov PHP kode in HTML / CSS veliko bolj obvladljiv.

Dodatni viri

Skupaj z vsemi nasveti v tem priročniku želim deliti niz pomembnih povezav za razvijalce tem. Obstaja že tako veliko člankov in brezplačnih tem, ki jih lahko preberete, da bi se poglobili v to temo. Spodaj sem dodal čudovito zbirko teh virov:

• 8 Free Twenty Eleven Themes
• WordPress Online Codex »Teme otrok
• Kako zgraditi WordPress Child Theme z uporabo Hooks in Filtri
• Nekaj ​​besed o temah otrok
• Kako ustvariti, spremeniti in uporabiti otroške teme v WordPressu

Zaključek

Upam, da bo proces oblikovanja tem WordPress otroka jasnejši za vas po branju tega članka. Poskušal sem pojasniti, kako lahko podrejene teme podedujejo CSS in PHP predloge od staršev. Poleg tega je zelo preprosto manipulirati z določenimi datotekami in ustvariti svoje edinstvene teme.

.