Sprievodca WordPress Dieťa Témy Vývoj

Existuje niekoľko dôvodov, prečo vývojári programu WordPress začínajú používať motívy detí. Dajú vám možnosť prispôsobiť jedinečné usporiadanie nad ostatnú existujúcu tému. To je ideálne pre začiatočníkov, ktorí chcú hrať s vlastnými témami.

Navyše veľa prémiových návrhov prinesie nové aktualizácie v priebehu času. Ak vykonávate zmeny v hlavných súboroch tém, budú pri vykonávaní aktualizácie prepísané, ale detské témy sú oddelené a úhľadne zastrčené. To znamená, že môžete vytvoriť existujúce prémiové témy a ušetriť veľa času v procese.

V tejto príručke by som chcel predstaviť základné pojmy budovania témy motívu WordPress a prečo je to tak dobrý nápad.

Začíname

Detské motívy nie sú také ťažké, ako sa môžu objaviť. Výhody spracovania nadradenej témy znamená, že nemusíte písať všetky HTML / CSS od začiatku. Podradená téma automaticky použije všetky súbory šablón, ktoré zahrniete, napríklad sidebar.php alebo footer.php. Ale ak chýbajú, potom vaše tému dieťa vytiahne rovnaké súbory od svojho rodiča.

Táto funkcia ponúka obrovské množstvo voľnosti na prispôsobenie už existujúcich šablón. Je tiež skvelé, keď sa dotýkajte oblastí okolo vašej webovej lokality pre špeciálne udalosti, ako napríklad pridanie návrhových vzorov na Vianoce alebo na Nové roky.

Vaše požadované súbory

Potrebujete iba jediný štýl šablóny .css, aby ste v programe WordPress vytvorili podriadenú tému. Musíte tiež vytvoriť nový adresár v adresári / WP-obsah / motívy priečinok, ktorý bude obsahovať tému vášho dieťaťa. Venujte pozornosť tomu nie sú vytvára tento priečinok v nadradenej téme, ale priamo vedľa neho v rovnakom adresári tém.

Vývojári budú často obsahovať funkcie functions.php a screenshot.png v rovnakom priečinku ako váš nový súbor CSS. Záber obrazovky sa zobrazí v administrátorskom paneli aplikácie WordPress a súbor tém súborov funkcií môže byť použitý pre množstvo backendových zmien.

Teraz by sme sa však mali zamerať na hlavný štýl. To sa bežne nazýva style.css a obsahuje hlavičku komentárov s kľúčovými meta informáciami. Toto je dôležité, pretože vaše téma sa zobrazí iba ako dieťa, ak zahrniete meno adresára rodiča. Nižšie je príklad záhlavia komentár:

 / * Názov témy: Twenty Eleven Child Theme URI: http: //example.com/ Popis: Detská téma pre Twenty Eleven design Autor: Jake Rocheleau Autor URI: http: //www.hongkiat.com/blog/ Šablóna: twentyeleven Verzia: 0.1 * / 

Hodnota pre šablóna by mal byť názov adresára pre sprievodnú nadradenú tému. Iné ako to, že všetky ostatné tagy by mali byť oboznámené s bežnou témou WordPress.

Aj keď sa použijú všetky šablóny šablóny PHP, originálny rodičovský style.css bude nie importovať automaticky. Ak chcete pracovať s originálnymi štýlmi, musíte ich zaradiť do hornej časti dokumentu style.css vášho dieťaťa. Nižšie je uvedený príklad vrátane témy WP Twenty Eleven.

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

Nastavenie nových štýlov

Aplikácia pravidiel CSS na tému je rovnako jednoduchá ako úprava originálov. Ak viete, ktoré elementy musíte zacieliť, použite rovnaké selektory vo svojej vlastnej detskej téme.

Mohli by sme demonštrovať niekoľko skutočne jednoduchých zmien odkazov a odsekov. Použil som kód z pôvodnej témy Twenty Eleven na zacielenie na rôzne prvky. V niektorých prípadoch je potrebné použiť špecifikovaný selektor na prekonanie staršieho dizajnu.

 teleso výplň: 0 1,4;  #stranka margin: 1.667em auto; max-šírka: 900 pixlov;  a farba: # 5281df; textová výzdoba: žiadne; font-family: Calibri, Tahoma, Arial, sans-serif;  a: zaostrenie, a: aktívny, a: vznášať text-decoration: underline;  

V týchto zmenách som znížil celkovú veľkosť tela a tiež odstránil nejaké polstrovanie z okrajov. Všetky tieto voliče nájdete v pôvodnom dokumente .css. Je pozoruhodné, že tiež meniť niektoré vlastnosti pre všetky kotviace odkazy, ktoré obsahujú iný typ písma a výber farieb.

Dôležité veci

CSS má špeciálne vyhlásenie na označenie priority nad ostatnými štýlmi. Syntax sa zobrazí ako !dôležitý začínajúc výkričníkom a končí na konci vášho vlastníctva CSS. Je to potrebné, ak máte kaskádové štýly z nadradenej témy, ktoré prevyšujú vaše vlastné pravidlá.

 a farba: # 5281df! textová výzdoba: žiadne; font-family: Calibri, Tahoma, Arial, sans-serif;  

Hore som skopíroval pôvodné zmeny a upravil farbu textu kotvy s dôležitou klauzulou. Toto bude mať prednosť pred všetkými ostatnými štýlmi s rovnakou hĺbkou výberu. Viac definované prvky (napr #access li: hover> a) zvyčajne budú mať svoje vlastné štýly, pokiaľ to nie je farba bol ešte zdedený z nášho pôvodného selektora. V tomto prípade rodičovská téma nenastaví vlastnosť rodinného písma na kotvených odkazoch, takže v takýchto prípadoch nemôžeme naraziť na žiadne problémy s dedičstvom.

Ak máte problémy s vykonaním zmien, skúste vynechať jednu z týchto dôležitých značiek na konci výpisu vlastníctva. To nie je dokonalá oprava pre každý problém s dedičstvom, ale príde vhod oveľa častejšie, ako by ste si mysleli.

Klonovanie funkcií.php

Na rozdiel od hlavného štýlu šablón vaše dieťa tému automaticky importuje funkcie rodiča. To znamená, že nepotrebujete skopírovať žiaden z PHP kódu, aby ste ho stále mali aktívnu vo svojej novej téme. Napriek tomu, ak by ste chceli znova definovať niektoré z funkcií, môžete vytvoriť ďalšie funkcie.php a zapísať do nového kódu všetky zmeny.

Ako príklad som vytvoril funkciu, ktorá analyzuje niekoľko súborov JavaScriptu pri iniciovaní šablóny. Tým sa odstránia všetky staršie verzie skriptov jQuery a SWFObject, pričom súčasne sa pridajú najnovšie verzie wp_head rozloha.

 // queue js súbory pre funkciu load 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); 

Mal by som poukázať na to, že ak importujete kód z nadradených funkcií.php, potom budete musieť použiť iný názov funkcie. V opačnom prípade PHP dá fatálnu chybu a budete musieť FTP na server opraviť chybu.

Práca s témami

Najrozšírenejšou kategóriou tém je vytváranie vlastných rozložení a typov stránok. V predvolenom nastavení bude téma vášho dieťaťa dediť všetky súbory tém svojej rodičov. Ale máte možnosť vytvoriť nové súbory témy a WP ich zaregistruje ako "primárnu" šablónu.

Napríklad archive.php a index.php sa používajú na zobrazenie archívov príspevkov a domovskej stránky. Ak existujú zmeny, ktoré by ste chceli urobiť, ktoré vyžadujú úpravu kódu HTML, potom by ste boli bezpečnejšie klonovať nadradené súbory a upravovať ich v adresári motívu dieťaťa.

Šablóny vlastnej stránky

Aj keď hovoríme o súboroch šablón, chcem tiež predstaviť funkciu WordPress, ktorú mnohí nie sú oboznámení. Môžete vytvárať šablóny stránok a príspevkov, ktoré sa dajú vybrať z panelu Správca pri vytváraní nového obsahu. Aj keď nadradená téma nemá nový vlastný súbor šablóny, WordPress bude používať dieťa namiesto a page.php alebo single.php.

Najprv vytvorte nový súbor s názvom page-offer.php. Toto bude a “špeciálna ponuka” propagačná stránka, ktorá je odlišná od všetkých ostatných. Tu môžete skopírovať pôvodný kód stránky alebo dokonca vytvoriť celú tému úplne od začiatku. Jediný kód, ktorý potrebujeme nechať WordPress vedieť o tejto novej šablóne, je nastavenie komentára v PHP.

Ďalšou alternatívou tejto metódy je vytvorenie vlastných stránok s názvom jedinečného identifikačného čísla. Takže namiesto načítania predvoleného archive.php pre stránky autorov by ste mohli vytvoriť súbor ako napr autor-ID.php kde ID je jedinečné ID používateľa WordPress. Hoci tento systém je viac zdanenie, pretože budete musieť vytvoriť nový súbor šablóny pre každého z autorov na vašich stránkach.

Stane sa užitočnejšie, ak môžete kombinovať tieto dve techniky s inými šablónovými súbormi. Najmä kategórie a značky fungujú dobre pomocou vlastných súborov tém. Tiež ak odkazujete na prílohy vo vašom obsahu, potom budete chcieť zvážiť rôzne rozloženia šablón pre každý typ mime. Zahrala som hierarchiu šablón nižšie pre jednoduchý príklad obrázkov JPEG:

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

Užitočné nástroje WordPress

WordPress sám o sebe má všestranný pluginy systém, ktorý dokáže spravovať celý rad prispôsobení. Vzhľadom na to, že motívy dieťaťa sú tak nové, ešte nie je celá náporná verzia tretích strán (zatiaľ). Existuje však niekoľko nástrojov, ktoré môžete skontrolovať, aby sa váš vývojový čas trochu kratší.

Zrejmou zmienkou je modul One-Click Child Theme, ktorý je postavený a testovaný na najnovšiu verziu WordPress 3.x. Pridá k nej odkaz na menu “témy” aby ste automaticky vytvorili dieťa pomocou aktuálne aktívnej témy. To je fantastické, ak nechcete, aby sa s FTP a chcú hrať sa s niektorými novými nápadmi.

Ak máte v pláne upraviť tieto súbory v administrátorskom paneli, budete mať aj jasnejšie zvýraznenie syntaxe. V programe WordPress sa to v predvolenom nastavení neponúka, ale môžete nainštalovať rozšírený editor kódov pre niektoré výrazne vylepšené funkcie. To robí brodenie cez PHP kód bloky a HTML / CSS oveľa viac zvládnuteľné.

Dodatočné zdroje

Spolu so všetkými tipmi v tejto príručke chcem zdieľať súbor dôležitých odkazov pre vývojárov tém. Existuje už toľko skvelých článkov a voľných motívov pre deti, ktoré môžete preskúmať, aby ste sa podrobnejšie zaoberali týmto predmetom. Pridal som nádherný súbor týchto zdrojov:

• 8 slobodných dvadsaťjeden dieťa Témy
• WordPress Online Codex »Dieťa Témy
• Ako vytvoriť motív WordPress Child pomocou hákov a filtrov
• Niekoľko slov o detských témach
• Ako vytvoriť, upraviť a používať motívy v programe WordPress

záver

Dúfam, že proces budovania motívov WordPress je pre vás jasnejší po prečítaní tohto článku. Pokúsil som sa vysvetliť, ako môžu detské témy zdediť šablóny CSS a PHP od rodičov. Navyše je veľmi jednoduché manipulovať s konkrétnymi súbormi a vytvoriť si vlastné jedinečné témy.

.