Průvodce WordPress Child Témata rozvoj

Existuje mnoho důvodů, proč vývojáři WordPress začínají používat podřízené motivy. Dávají vám možnost přizpůsobit jedinečné rozvržení na další existující téma. To je ideální pro začátečníky, kteří si chtějí hrát s budováním vlastních témat.

Navíc mnoho prémiových návrhů uvolní nové aktualizace v průběhu času. Pokud provádíte změny v základních souborech motivů, budou při provádění aktualizace přepsány, ale podřízená témata jsou oddělená a úhledně zastrčená. To znamená, že můžete vytvořit stávající prémiová témata a ušetřit spoustu času v procesu.

V této příručce chci představit základní pojmy budování dětského tématu WordPress a proč je to dobrý nápad.

Začínáme

Dětské motivy nejsou tak složité, jak se mohou objevit. Výhody práce s nadřazeným motivem znamenají, že nemusíte psát všechny HTML / CSS od nuly. Podřízený motiv automaticky použije všechny soubory šablony, které zahrnete, například sidebar.php nebo footer.php. Pokud ale chybí, potom vaše dítě téma vytáhne stejné soubory z jeho rodiče.

Tato funkce nabízí obrovské množství svobody přizpůsobit již existující šablony. Je to také skvělé pro dotýkání se oblastí kolem vašich webových stránek pro speciální události, jako je přidání vzorů designu pro Vánoce nebo Nový rok.

Požadované soubory

Potřebujete pouze jeden .css stylesheet nastavit dětské téma ve WordPressu. Musíte také vytvořit nový adresář / wp-content / themes složka, která bude obsahovat vaše dítě téma. Věnujte pozornost tomu, že jste nejsou vytvoření této složky uvnitř nadřazeného motivu, ale vpravo vedle ní ve stejném adresáři motivů.

Vývojáři budou často obsahovat function.php a screenshot.png ve stejné složce jako váš nový soubor CSS. Snímek obrazovky je zobrazen ve vašem administračním panelu programu WordPress a soubor motivů funkcí lze použít pro tuny změn backendu.

Ale teď bychom se měli zaměřit na hlavní styly. Toto je obyčejně pojmenované style.css a obsahuje záhlaví komentáře s klíčovými informacemi meta. To je důležité, protože motiv se zobrazí pouze jako podřízený, pokud zahrnete název adresáře nadřazeného uživatele. Níže je uveden příklad záhlaví záhlaví:

 / * Téma Jméno: Dvacet jedenáct dítě téma URI: http: //example.com/ Popis: Dětské téma pro design dvacet jedenáct Autor: Jake Rocheleau Autor URI: http: //www.hongkiat.com/blog/ Šablona: 20theleven Verze: 0.1 * / 

Hodnota pro šablona by měl být název adresáře doprovázeného nadřazeného motivu. Jiné, než že všechny ostatní značky by měly být obeznámeni se standardním WordPress tématikou.

Ačkoliv budou použity všechny rodičovské šablony PHP, původní styl rodičů bude ne importovat automaticky. Chcete-li se zbavit původních stylů, musíte je zahrnout do horní části dokumentu vašeho stylu .css. Níže je uveden příklad WP Twenty Eleven.

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

Nastavení nových stylů

Použití pravidel CSS na téma je stejně snadné jako úpravy originálu. Pokud víte, které prvky potřebujete zacílit, použijte stejné selektory ve vašem vlastním podřízeném tématu.

Mohli bychom demo s některými opravdu snadnými změnami odkazů a odstavců. Použil jsem kód z původního tématu Twenty Eleven pro cílení na různé prvky. Občas je nutné použít přesnější volič pro přepsání staršího návrhu.

 body padding: 0 1,4em;  #page margin: 1.667em auto; max-width: 900px;  a color: # 5281df; text-decoration: žádný; font-family: Calibri, Tahoma, Arial, sans-serif;  a: focus, a: active, a: hover text-decoration: underline;  

V těchto změnách jsem snížil celkovou velikost těla a také odstranil některé polstrování od okrajů. Všechny tyto selektory lze nalézt v originálním dokumentu .css. Je pozoruhodné, že jsem také změnil některé vlastnosti pro všechny kotevní odkazy, které obsahují jiný zásobník písem a výběr barev.

Důležité věci

CSS má zvláštní deklaraci označit prioritu nad jinými styly. Syntaxe je zobrazena jako !Důležité začíná vykřičníkem a končí na konci vaší vlastnosti CSS. To je nezbytné, pokud máte kaskádové styly z nadřazeného motivu, které přepíší vaše vlastní vlastní pravidla.

 a color: # 5281df! důležité; text-decoration: žádný; font-family: Calibri, Tahoma, Arial, sans-serif;  

Nahoře jsem zkopíroval své původní změny a upravil barvu textu kotvy důležitou klauzuli. To bude mít přednost před všemi ostatními styly stejné hloubky výběru. Více definovaných prvků (jako např #access li: hover> a) bude obvykle držet své vlastní styly, pokud barva byl stále zděděn po našem původním voliči. V tomto případě naše nadřazené téma nenastavuje vlastnost font-family na kotevních odkazech, takže jako takové nebudeme narazit na žádné problémy s dědictvím.

Máte-li potíže s prováděním změn, zkuste na konci svého prohlášení o vlastnostech vyskakovat jednu z těchto důležitých značek. To není perfektní fix pro každý problém dědictví, ale to přijde vhod mnohem častěji, než si myslíte.

Klonovací funkce

Na rozdíl od hlavního stylesheetu bude vaše dítě automaticky importovat funkce svého rodiče. To znamená, že nemusíte kopírovat přes kterýkoli kód PHP, aby byl stále aktivní ve vašem novém tématu. Pokud však chcete znovu definovat některé z funkcí, můžete vytvořit další function.php a napsat nový kód s jakýmikoli změnami.

Jako příklad jsem vytvořil funkci, která při inicializaci šablony analyzuje několik souborů JavaScriptu. Tím odstraníte všechny starší verze skriptů jQuery a SWFObject a současně přidáte nejnovější verze wp_head plocha.

 // fronta souborů js pro funkci 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); 

Měla bych zdůraznit, že pokud importujete kód z rodičovských funkcí, musíte použít jiný název funkce. Jinak PHP vydá fatální chybu a budete muset FTP do serveru opravit chybu.

Práce se soubory motivů

Nejrozšířenější kategorií je vytváření vlastních rozvržení a typů stránek. Ve výchozím nastavení podřízený motiv zdědí všechny soubory motivu svého nadřazeného uživatele. Máte však možnost vytvořit nové podřízené soubory a WP je zaregistruje jako primární šablonu.

Například archive.php a index.php slouží k zobrazení poštovních archivů a obrazovky domovské stránky. Pokud chcete provést změny, které vyžadují úpravy kódu HTML, budete bezpečnější klonování nadřazených souborů a jejich úpravy v adresáři motivů dítěte..

Vlastní šablony stránek

Zatímco hovoříme o souborech se šablonami, chci také představit funkci WordPress, kterou mnozí neznají. Při vytváření nového obsahu můžete vytvářet šablony stránek a příspěvků, které lze vybrat z panelu Správce. I když rodičovský motiv nemá nový soubor vlastní šablony WordPress bude stále používat dítě místo a page.php nebo single.php.

Nejprve vytvořte nový soubor s názvem page-offer.php. To bude “speciální nabídka” propagační stránku, která je tematicky odlišná od všech ostatních. Zde můžete kopírovat přes původní kód stránky, nebo dokonce vytvořit téma úplně od nuly. Jediný kód, který potřebujeme, aby WordPress věděl o této nové šabloně, je nastavení poznámek v PHP.

Další alternativou této metody je vytváření vlastních stránek pojmenovaných po jedinečné identifikační číslo. Takže místo načtení výchozí archive.php pro stránky autora můžete vytvořit soubor jako autor-ID.php kde ID je jedinečné číslo ID uživatele WordPress. Ačkoli tento systém je více zdanitelný, protože byste museli vytvořit nový soubor šablony pro každého z autorů na vašem webu.

Je užitečnější, pokud můžete tyto dvě techniky kombinovat s jinými soubory šablony. Zejména kategorie a značky fungují dobře pomocí vlastních motivových souborů. Také pokud jste odkaz na přílohy ve vašem obsahu pak budete chtít zvážit různé možné šablony rozložení pro každý typ mime. Níže uvádíme hierarchii šablony pro jednoduchou přílohu obrázku JPEG:

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

Užitečné nástroje WordPress

WordPress sám má univerzální pluginy systém, který může spravovat spoustu přizpůsobení. Vzhledem k tomu, že dětská témata jsou tak nová, neexistuje celý nápor třetího vydání (zatím). Nicméně existuje několik nástrojů, které můžete vyzkoušet, aby se váš vývoj čas o něco kratší.

Zřejmá zmínka je plugin One-Click Child Theme vytvořený a testovaný na nejnovější verzi WordPress 3.x. Přidá odkaz do menu Správce “Témata” sekce pro automatické vytvoření dítěte pomocí aktuálně aktivního tématu. To je fantastické, pokud nechcete, aby se nepořádal s FTP a hledáte hrát s novými nápady.

Pokud budete chtít tyto soubory upravovat v rámci administračního panelu, budete také mít jasnější zvýraznění syntaxe. Ve výchozím nastavení není tato funkce nabízena ve WordPressu, ale pro některé mnohem vylepšené funkce můžete nainstalovat Advanced Code Editor. Díky tomu je brodění bloků kódu PHP a HTML / CSS mnohem zvládnutelnější.

Dodatečné zdroje

Spolu se všemi tipy v této příručce chci sdílet řadu důležitých odkazů pro vývojáře motivů. Existuje již tolik skvělých článků a volných dětských témat, které můžete vyzkoušet, abyste se do tohoto tématu mohli hlouběji podívat. Přidal jsem úžasnou sbírku těchto zdrojů:

• 8 Zdarma dvacet jedenáct dětských témat
• WordPress Online Codex »Dětská témata
• Jak vytvořit WordPress Child Theme pomocí háků a filtrů
• Několik slov na dětská témata
• Jak vytvořit, upravit a použít podřízené motivy v aplikaci WordPress

Závěr

Doufám, že proces budování WordPress dětské témata je jasnější pro vás po přečtení tohoto článku. Snažil jsem se vysvětlit, jak mohou dětské motivy zdědit šablony CSS a PHP od rodiče. Navíc je velmi jednoduché manipulovat se specifickými soubory a vytvářet vlastní jedinečná témata.

.