Good Mood

Tohle bude zábavný výukový program, kde jsme se zkontrolovat, jak vytvořit svůj vlastní WordPress Téma od začátku. Ve skutečnosti začneme absolutně nulovými soubory a nulovými řádky kódu. Jediný způsob, jak pochopit, jak WordPress Témata fungují, je opravdu Skočit na nízké úrovni a dělat každou věc sami. Ano, Je lákavé se tomu vyhnout, protože můžete WordPress udělat vše pro vás, aniž byste pochopili kód, který ho napájí., Mohlo by to být PHP, JavaScript, CSS nebo dokonce základní HTML. Na konci tohoto tutoriálu WordPress téma Krok za krokem pochopíte, jak vše zapadá dohromady a jak snadno ohýbat WordPress podle vaší vůle.

při spuštění webu WordPress máte k dispozici tolik bezplatných témat. Kromě bezplatných témat se můžete také rozhodnout zaplatit prémii za profesionálně vytvořená témata WordPress, která vypadají skvěle a mají fantastické funkce. Tak proč se naučit, jak vytvořit vlastní téma od nuly?, Odpověď je, že bez ohledu na to, jaké téma používáte, přijde čas, kdy chcete na svém webu provést jednoduché změny. Některé z těchto změn by mohly být ubytovány jednoduchým pluginem nebo widgetem. Mnohokrát, nicméně, to dává větší smysl, aby pochopili, co to je, co chcete změnit, jak to změnit, a vyhnout soustružení váš WordPress stránky do nepořádku z pluginů a add-ons, které se stávají nepraktické. S trochou znalostí na úrovni nadace budete mít jistotu, že změníte své téma nebo jednoduše vytvoříte své vlastní od nuly., Budete vědět, který soubor chcete upravit a jaký kód přidat nebo upravit, abyste vytvořili požadovaný výsledek.

Krok 1: Vytvořte složku pro uložení souborů motivu.

Pokud budeme vytvářet témata, musíme vědět, kde soubory, které tvoří téma WordPress, žijí v instalaci WordPress. To je docela snadné. Víme, že instalace WordPress má obvykle kořenový adresář s názvem wordpress. Takto vypadá náš kořenový adresář v PHP Storm.,

Tento adresář obsahuje následující soubory a složky:

Soubory

Složky

• wp-admin
• wp-content
• wp-includes

Na složku, kterou jsme největší zájem je teď wp-obsah složku. Ve složce wp-content je složka s názvem témata. Víte, k čemu je tato složka určena? Jo, přesně tak! Je to složka, která obsahuje jedno nebo více témat, která byste chtěli použít s vaším webem WordPress., V této složce témat najdeme tři další složky twentyfifteen, twentysixteen a twentyseventeen. Tyto složky obsahují tři témata, která WordPress ve výchozím nastavení dodává. Níže si všimněte, že je také složka s názvem customtheme. Pokračujte a vytvořte tuto složku také v instalaci, protože zde budeme vytvářet naše téma WordPress od nuly.

Krok 2: vytvořit styl.css a index.php ve složce s vlastním motivem

nyní víme, kde jsou soubory motivů WordPress v systému souborů., Také jsme vytvořili novou složku s názvem customtheme v naší složce témata. V tomto adresáři nyní vytvoříme dva prázdné soubory. Jeden se nazývá index.php a druhý se nazývá styl.element.

Pojďme nyní naplnit tyto soubory s minimálním musíme získat nové téma děje v WordPress.

styl.css

WordPress ve skutečnosti čte komentáře, které umístíte ve stylu.soubor css. Zde zadáte konkrétní informace o tématu, které vytváříte.

styl.,css je soubor stylů (CSS) potřebný pro každé téma WordPress. Řídí prezentaci (vizuální design a rozvržení) webových stránek.

V našem úryvku tady jsme jednoduše přiřadit Téma, Název, Autor, Autor URI, a číslo Verze našeho tématu.,

index.,php

v tomto souboru chceme jen něco na obrazovku, abychom dokázali, že naše vlastní téma funguje.

Skvělá Práce! Věřte tomu nebo ne, vytvořili jste své první téma WordPress.,

3. Krok: Aktivovat vaše téma WordPress Dashboard

V tomto bodě jsme mohou navštívit naše WordPress Dashboard a přejděte na Vzhled->Témata a ejhle, vidíme nové téma jsme vytvořili.

klikněte na „Podrobnosti Téma“ drill-down na naše vlastní téma a zjistíte, že informace, které jsme vstoupili do stylu.soubor css fungoval. Můžeme vidět, že mají název customtheme, s verzí 1.0, autorem Vegibitem, a odkaz na URI, který jsme poskytli. Velmi cool.,

a nyní okamžik pravdy! Pokračujte a klikněte na“ Aktivovat “ na novém customtheme a pak navštivte web. Nebude to vyhrát žádné ceny Webby, ale máme naše já dobrý start na nové vlastní téma!

Krok 4: Přidat Kód Výstup Název Příspěvku a Příspěvek Text

Máme mít svobodu naplnit pár příklad příspěvky v databázi, takže s tím můžeme pracovat údajů v tomto návodu. Právě teď, naše téma jen výstupy vlastní téma!, na stránku, když navštívíme naše stránky bez ohledu na to, kolik příspěvků je v databázi. Přejděme nyní k načtení některých dat z databáze a jejich výstupu na stránku. Konkrétně chceme načíst název příspěvku a zveřejnit obsah všech příspěvků a zobrazit je na domovské stránce. Teď to zkusíme. Nejprve se podívejme, co máme pro příspěvky na panelu WordPress.

využití smyčky WordPress

Nyní můžeme mluvit trochu o smyčce WordPress. WordPress Loop je opravdu motor, který dělá WordPress běh., Prostřednictvím této smyčky vývojáři motivů kontrolují příspěvky a podle potřeby je zobrazují na stránce. Pokud následuje formát následujícím způsobem. Pokud má databáze příspěvky, přepojme je, zatímco stále existují příspěvky, jinak dáme uživateli vědět, že neexistují žádné příspěvky. Vypadá to takto v PHP kódu.,

Všimněte si, že Smyčka využívá dvě funkce v jeho nejzákladnější podobě. Jsou to have_posts () a the_post (). Funkce have_posts () dělá pouze jednu věc. To vám řekne, jestli existují nějaké příspěvky v databázi smyčky přes., Tato funkce vrátí buď true nebo false a to je vše. Pokud vrátí true, pak jsou k dispozici příspěvky pro smyčku. Pokud vrátí false, pak nejsou žádné příspěvky, které by se mohly přepojit. Druhá funkce, the_post () nic nevrátí. Úkolem je připravit WordPress na výstupní příspěvky. Konkrétně načte další příspěvek, nastaví příspěvek, nastaví vlastnost in_the_loop na true., Zatím naše stránka nebude poskytovat žádné informace o našich blogových příspěvcích, ale můžeme je nyní aktualizovat v našem indexu.php soubor.

Ok cool. Nyní jsme využili dvě další funkce WordPress, the_title () a the_content (). Nejčastěji se tyto funkce používají uvnitř smyčky a to, co dělají, je načíst název a obsah každého příspěvku, protože smyčka iteruje nad každým z nich v databázi. Takže když smyčka běží, narazí na první příspěvek., V té době the_title() funkce bude výstup název příspěvku na stránku a the_content () bude výstup tělo tohoto příspěvku na stránku. V další smyčce tyto funkce znovu načtou další název a obsah a vyvedou je na stránku. Takže s těmito na místě bychom nyní měli vidět nějaké informace o tom, jak se naše příspěvky posílají na obrazovku. Zkusíme to! Navštívíme http://wordpresstutorial.dev a uvidíme, že to funguje!,

Krok 5: Přidejte odkaz na každý příspěvek

a co propojení na každý jednotlivý příspěvek, abychom si mohli zobrazit příspěvek spíše než jako součást domovské stránky. Můžeme to udělat docela snadno, opět se speciálními funkcemi, které WordPress poskytuje. Pro tento úkol můžeme využít funkci the_permalink (). Náš kód můžeme aktualizovat takto:

nyní můžeme kliknout na každý jednotlivý název příspěvku a přejít na stránku, která má právě tento jeden příspěvek. Velmi cool!,

Krok 6: Přidání Záhlaví a Zápatí Do Vlastní Téma

Název a Obsah Příspěvku jsou zásadní pro vytvoření dobré téma. Téměř stejně důležité je mít záhlaví a zápatí části vašeho tématu. Tyto sekce by obsahovaly obsah, který je vždy viditelný na všech stránkách webu. Tyto sekce jsou nad a pod obsahem příspěvku. Chcete-li to provést, uhodli jste to, využijeme speciální funkce poskytované WordPress k získání záhlaví a získání zápatí. Vidíte vzor, který se začíná rozvíjet?, Téměř vše, co můžete udělat jako vývojář motivů v WordPress, již bylo pro vás provedeno prostřednictvím těchto vlastních funkcí. Takže zjistíte, že se vyplatí zapamatovat si tyto běžně používané funkce ve vývoji motivů WordPress. Pojďme do toho a přidejte funkce get_header() a get_footer () do našeho tematického souboru.

no podívali byste se na to?! Vidíme, že naše vlastní téma má nyní oblast záhlaví a oblast zápatí., V záhlaví je název a slogan webu, zatímco v zápatí vidíme známý text, WordPress Tutorial je hrdě poháněn WordPress. Toto jsou výchozí možnosti záhlaví a zápatí při používání těchto funkcí. A co když chceme mít vlastní záhlaví a zápatí? Už jdu!

od 2 tématických souborů po 4

zatím v tomto tutoriálu máme dva soubory, které žijí v naší složce customtheme (která je sama ve složce témata). Ty soubory jsou ve stylu.css a index.Linux. V tomto okamžiku budeme muset přidat další soubory, abychom se dostali dále., Pokračujte a vytvořte dva nové soubory ve složce customtheme. Tyto soubory budou pohodlně nazývány záhlaví.php a zápatí.Linux.

Nyní, co tyto soubory se udělat, je přepsat výchozí nastavení záhlaví a zápatí rozložení dispozici ve výchozím nastavení, když voláte buď get_header() nebo get_footer() funkce. Ve skutečnosti, pokud obnovíme naše webové stránky, vypadá to, že záhlaví a zápatí jsou pryč. Je to proto, že jsme do těchto souborů ještě nepřidali žádné značky. Jen pro úsměv, nastavte soubory jako tak, abyste to vyzkoušeli.

záhlaví.,php

footer.,php

Working with header.,php

náš výše uvedený příklad fungoval skvěle a ukazuje nám, jak tento soubor funguje na nejzákladnější úrovni. Záhlaví.PHP soubor je ve skutečnosti velmi důležité, nicméně, takže pojďme se lesknout nad detaily to příliš rychle! Zde zahrnete kód, ke kterému budou všechny stránky na vašem webu potřebovat přístup tak či onak. Za prvé, všechny stránky HTML budou mít doctype. To byste určili v tomto souboru. Kromě toho budou mít všechny stránky Otevírací značku html, hlavovou sekci a otevírací značku těla. To vše může jít do záhlaví.php soubor., Pojďme rychle přidat některé z těchto věcí, které by všechny webové stránky využily. Využijeme zde také několik nových funkcí WordPress. Ty budou language_attributes (), bloginfo () a body_class ().

záhlaví.php

Když jsme znovu načíst stránku a potom zobrazit zdroj stránky, v našem prohlížeči, můžeme získat představu, co tyto funkce dělají. Jsme zvýraznit řádky, které mají výstup, který přišel z těchto funkcí níže:

Opět, můžeme vidět velmi liberální použití WordPress funkce při vytváření vlastních témat WordPress., Ve skutečnosti jsme ještě nenapsali žádný vlastní kód. Jednoduše se učíme, co nám různé funkce WordPress mohou nabídnout, a pak je uvedeme do práce v našem vlastním tématu.

včetně wp_head ()

wp_head () je druh speciální funkce, když pracujete s tématy WordPress. Není to tak jednoduché jako všechny ostatní, na které jsme se dosud dívali. Účelem této funkce je dokončit výstup v <> sekce záhlaví.php soubor., Ve skutečnosti má jít těsně před uzavřením </head> tag. To je důležité, když začnete přidávat různé pluginy na váš web. Vytiskne skripty nebo data ve značce head na předním konci. To je dobrá praxe, aby vždy obsahovat nezahrnují wp_head() ve vašem motivy jako mnoho dalších pluginů se může spolehnout na tento háček přidat styly, skripty, nebo meta prvků do <> oblast stránky. Přidáme ji jako takovou zde:

záhlaví.PHP

dokončení zápatí.,php

dokončili jsme přidání základů toho, co budeme potřebovat v záhlaví.php soubor. Pojďme do toho a zaokrouhlíme zápatí.php soubor. To je pár věcí, které musíme udělat. Připomeňme si to v naší hlavičce.PHP soubor máme otevření HTML a body tagy. Ty musí být v určitém okamžiku uzavřeny. Zápatí.php soubor je ideálním místem k tomu, že. Takže budeme přidávat zavírání </html> </> značky kromě volání do wp_footer() funkce.
zápatí.,php

Změna Stránky, Informace, V palubní Desce WordPress

možná se divíte, proč jsme museli využít všechny tyto fantazie funkcí vybudovat naše téma. Například, když jsme chtěli vypsat název a slogan našeho webu, využili jsme funkci bloginfo () procházející parametry jména a popisu., Důvodem je to, že obecně, nikdy nechcete tvrdě kódovat tyto hodnoty na váš web. To jsou informace, které se mohou změnit. Kromě toho, pokud zpřístupníte své téma veřejnosti, budou mít pro své webové stránky své vlastní jméno a slogan. Měli by být schopni jednoduše navštivte panelu admin WordPress a aktualizovat jejich Obecné Nastavení, aby vidět tyto údaje automaticky vyplní.

vytvoření odkazu na název webu na domovskou stránku

většina témat nabídne možnost kliknout na titulní text webu a nasměrovat uživatele na domovskou stránku webu., Tímto způsobem, bez ohledu na to, kde může být uživatel na webu, mohou vždy kliknout na tento titulní text a vrátit se zpět na hlavní stránku webu. Přidáme tento odkaz nyní v záhlaví.Linux.

Krok 7: přidat funkce.PHP soubor na téma

v tomto okamžiku máme čtyři soubory v našem vlastním tématu. To jsou indexy.php, styl.css, hlavička.php a zápatí.Linux. Pravděpodobně dalším nejdůležitějším souborem, který musíme mít, jsou funkce.php soubor.

funkce.php soubor v WordPress dělá mnoho věcí pro vaše téma. Jedná se o soubor, do kterého umístíte kód pro změnu výchozího chování WordPress., Můžete téměř myslet na funkce.php jako forma plugin pro WordPress s několika klíčových bodů na paměti:

• nevyžaduje unikátní text Záhlaví
• Uložené ve složce, která drží svůj motiv soubory
• Provádí pouze tehdy, když v současné době aktivován téma je adresář
• Vztahuje se pouze na aktuální téma
• Může volat PHP funkce, WordPress funkce, nebo vlastní funkce

Jedna věc, kterou nutně potřebujeme v našem tématu je nějaký lepší styling! Pojďme vytvořit funkci v našich funkcích.php soubor zahrnout styl.soubor css do našeho tématu., Takto můžeme dosáhnout tohoto cíle.

tento kus kódu bude obsahovat nebo bude aktivní styl našeho vlastního motivu. Nyní byste se možná divili, proč používáme vlastní funkci, když se zdá, že bychom mohli stejně snadno ručně propojit stylesheet sami v záhlaví.php soubor. No, to přijde k tomu trochu více práce dopředu pro větší návratnost vašeho úsilí později. Vzhledem k tomu, že témata jsou složitější a přidávají se další aktiva, budete rádi, že budete mít tuto funkci, která zvládne všechny těžké zvedání pro vás.,

nyní je čas, aby věci vypadaly trochu hezčí. Nejprve přidejte obal < div> s třídou kontejneru. Otevření <div> bude v záhlaví.php, zatímco zavření < div> bude v zápatí.Linux. Také zabalíme výstup příspěvku do indexu.php s<article> tag, který má třídu post. To nám dá třídy, na které se zaměřujeme v našem stylu.,soubor css, abychom mohli mimo jiné nastavit šířku stránky. Přidáme také nějaký lepší styl do stylu.css v tomto kroku.

Krok 8: přidat nějaký styl na téma

záhlaví.php
přidání otvoru <div> do záhlaví.php soubor.

zápatí.php
přidání zavření </div> do zápatí.php soubor.

index.php
zabalení výstupu příspěvku pomocí<article> tag

style.,CSS
nakonec přidáme několik různých vylepšení stylu CSS, aby téma vypadalo trochu hezčí.

když nyní navštívíme náš testovací web v prohlížeči, můžeme vidět, že téma WordPress, které jsme vyvinuli krok za krokem v tomto tutoriálu, vypadá docela dobře!

WordPress Theme Development Tutorial Krok za krokem Shrnutí

podívejme se všechno, co jsme se naučili v této základní krok za krokem WordPress tutorial pro začátečníky., Naučili jsme se, jak vytvořit naše první vlastní téma v WordPress vytvořením vlastní složky na straně složky témat naší instalace WordPress. V této složce jsme přidali různé soubory, které odpovídají různým částem vašeho webu. V našem tutoriálu jsme začali s holými minimy, které byste měli mít v tématu WordPress. V budoucnu byste do této složky přidali mnohem více souborů než to, co jsme pokryli. Podívejme se na každý soubor, který jsme vytvořili v tomto tutoriálu, a co pro nás udělali.

• styl.,css tento soubor je místo, kde přidáte nějaké komentáře css, takže WordPress zná nějaké informace o vašem vlastním motivu. To také drží vlastní CSS styl, který se bude vztahovat na vaše téma.
• index.php tento soubor ovládá html a obecný výstup vašeho motivu. Jedná se o hlavní soubor používaný pro výstup dat na domovské stránce.
• záhlaví.,php Umožňuje určit oblast, kterou chcete mít důležité informace o vašich webových stránkách v <> oblasti, stejně jako, včetně otevření <html> <>, a ,<div class=“kontejner“> tagy.
• zápatí.PHP zápatí uzavře všechny Otevírací značky, které jste zadali v oblasti záhlaví, kromě toho, že vám dá místo pro volání funkce wp_footer ().
• funkce.,php umožňuje volat funkce, a to jak PHP a vestavěný WordPress, a definovat své vlastní funkce s cílem změnit výchozí chování WordPress

takže tam to máte! Byli jsme schopni vytvořit plně funkční vlastní WordPress Téma pouze s 5 soubory. To nám dává znalosti na úrovni nadace pro vytváření pokročilejších témat a funkcí WordPress. Skvělá Práce!