WordPress Tutorial: vývoj WordPress Téma od nuly

víte, HTML, CSS a JavaScript. Můžete vytvořit krásné webové stránky. Možná jste slyšeli o WordPress, ale nejsou zcela jisti, jak jej implementovat, nebo proč byste mohli potřebovat. Možná, že klient požádal o WordPress, ale nejste opravdu obeznámeni s ním. Možná jste pracoval s ním dříve, ale nevím, jak vytvořit svůj vlastní téma od nuly. V každém případě je tento článek pro vás.

předpoklady

vše, co potřebujete ke spuštění, je webová stránka. Jakýkoli web bude dělat., Nemusíte znát žádné PHP, nebo mají nějaké předchozí zkušenosti s WordPress. Vaše webové stránky mohou být vlastní, nebo postaven na Bootstrap/nějaký jiný rámec.

potřebujete vědět, jak nastavit prostředí místního serveru. Naštěstí, pokud nevíte jak, napsal jsem krátký, sladký článek o nastavení s jedním. Bude to trvat jen několik minut, takže pokračujte a udělejte to jako první.,

Cíle

• Instalace WordPress lokálně
• existující HTML stránky a převést jej do vlastní WordPress téma

náhradní Díly

jsem“jsem udělal další návody přidat na tento jeden.

co pro mě může WordPress udělat?

WordPress byl původně postaven jako blogovací platforma,ale nyní je známý jako systém správy obsahu CMS.

jakýkoli web, na který chcete provést aktualizace, může mít prospěch z CMS. Pokud je to blog, chcete být schopni přidat příspěvky. Pokud se jedná o webové stránky Restaurace, chcete být schopni přidat a aktualizovat menu., Pokud je to webové stránky společnosti, chcete být schopni aktualizovat ceny, balíčky, a tak dále.

Pokud vám někdo platí za vytvoření webové stránky, je to proto, že neví, jak nebo nemá čas se vypořádat s kódem. Pro klienta musí být co nejjednodušší. WordPress může pomoci se všemi těmito a dalšími.

Začínáme: design

nemohu dostatečně zdůraznit, kolik nezáleží na tom, co používáte pro svůj design – Bootstrap, nadace, kostra, vlastní CSS. Jde o to, že máte webové stránky a Líbí se vám, jak to vypadá.,

Chystám se vzít existující jednoduchou startovací šablonu a převést ji na WordPress pro tento článek. Zde je šablona blogu Bootstrap. Toto je jeden z výchozích témat na oficiálních stránkách Bootstrap.L

pohodlně jsem nastavil úložiště kódu GitHub, který můžete vytáhnout do místního adresáře a následovat se mnou.

nevíte, jak používat Git / GitHub? Můžete to napravit tím, že si přečtete můj Začínáme s článkem Git., Pokud chcete jen začít bez jednání s Git, stačí vytvořit adresář v počítači s indexem.html a blog.css a jste připraveni jít.

Instalace WordPress

Existuje spousta článků o tom, jak nainstalovat WordPress. Dělají tento proces se zdají dlouhé a děsivé, a poprvé, co to uděláte, to může být určitě trochu matoucí. Zde je oficiální průvodce nastavením.

protože používáme místní server a MAMP, už vím, že máte všechny předpoklady k instalaci a FTP není nutné.,

vytvořte místo pro WordPress k životu

Vytvořte někde prázdný adresář v počítači a nasměrujte svůj localhost nebo virtuální hostitel do tohoto adresáře.

Stáhněte si WordPress

přejděte na stránku pro stahování WordPress a stáhněte si nejnovější verzi WordPress.

rozbalte WordPress

rozbalte WordPress a vložte obsah složky do adresáře.

vytvořte databázi

Update 2017: nejnovější verze MAMP nejsou dodávány s předinstalovaným phpmyadminem., Místo toho budete stahovat SequelPro na Mac, nebo SQLYog na Windows, oba bezplatné programy. Pro vstup do databáze po stažení, přihlaste se k hostiteli locahost (nebo 127.0.0.1), s uživatelské jméno root a heslo root. Zbytek pokynů bude stejný.

Nyní, pokud máte jít na váš místní server v prohlížeči, za předpokladu, že jsou servery a všechno míří správným směrem, you“ll získat tuto zprávu.

naučíte se tuto zprávu milovat., V MAMP klikněte na Open WebStart page. Najděte to v horní části:

klikněte na phpMyAdmin. Klikněte na Databases > create database. Budu volat můj startwordpress. To je vše, co musíte udělat v phpMyAdmin!

Configure WordPress

v pořádku, poslední krok. Najděte wp-config-sample.php ve vašem adresáři.

bude to vypadat přesně takto.

nebuďte nervózní. Změňte název databáze, uživatelské jméno a heslo z tohoto:

k tomu:

Najděte toto:

a změňte jej na doslova cokoli jiného s čísly a písmeny. Kvůli bezpečnosti. xyz_ nebo 735hjq9 _ atd.

uložte soubor jako wp-config.php ve vašem adresáři.

Nyní, když se vrátíte na svůj web a obnovíte, měli byste vidět tuto obrazovku.

„budete muset zadat několik věcí – uživatelské jméno, heslo, e-mailovou adresu, a pak budete“znovu udělal. Gratulujeme, úspěšně jste nainstalovali WordPress!, Budete přesměrováni na / WP-login.php, kde můžete zadat své pověření pro přihlášení do backendu. Pokud přejdete na hlavní adresu URL, uvidíte výchozí blog WordPress a “ Dobrý den, svět!“ příspěvek.

Vytváření své vlastní téma

Mimo konfigurace WordPress, téměř všechno, co děláte v WordPress bude v wp-content složka; všechno ostatní je základní kód, a vy don“t chtějí, aby nepořádek s tím.

od tohoto okamžiku se kodex WordPress a StackOverflow stanou vašimi nejlepšími přáteli., Ukážu vám, jak vytvořit základní téma, ale jak se rozhodnete přizpůsobit své motivy nad rámec toho, co je zcela na vás.

ve Finderu postupujte podle cesty wp-content > témata, abyste se dostali do složky témata. Uvidíte WordPress výchozí témata-twentyfifteen, twentyfourteen, twentythirteen-a index.Linux. Vytvořte nový adresář pro vaše téma; nazval jsem můj startwordpress.

téma WordPress potřebuje k existenci pouze dva soubory – styl.css a index.Linux.

ve vlastní složce motivu vytvořte styl.element., Jednoduše obsahuje komentář, který upozorní WordPress, že zde existuje téma. Změňte jméno, autora, popis a tak dále.

Zapamatujte si zdrojový kód blogu Bootstrap z dřívějška v článku? Přesuňte tyto dva soubory – index.html a blog.css – do vlastní složky motivu. Přejmenovat index.html na index.php.

vaše téma bylo nyní vytvořeno. Přejděte na panel WordPress a klikněte na Appearance > Themes., Uvidíte téma ve sbírce se všemi výchozími tématy.

aktivujte téma a vraťte se zpět na hlavní adresu URL. Jo, je to tak jednoduché. Technicky jste již vytvořili vlastní téma. Samozřejmě, že to nedělá nic ještě nad rámec toho, co statické HTML stránky mohou dělat, ale jste vše nastaveno nyní.

existuje jedna věc, kterou si můžete všimnout – blog.css není načten. Bootstrap je hlavní CSS a JS soubory se načítají přes CDN, ale můj místní CSS soubor není načítání. Proč?,

Moje lokální URL může být startwordpress.dev, ale je to opravdu tahání z wp-content/themes/startwordpress. Pokud odkazuji na blog.css s <link href="blog.css"> se pokusí načíst startwordpress.dev/blog.css, který neexistuje. Naučte se právě teď, že nikdy nemůžete odkazovat na nic na stránce WordPress bez nějakého PHP.

Poznámka: Chrome již neumožňuje.dev místní adresy URL. Tento příklad použije .dev, ale můžete použít .test nebo něco jiného podle vašeho výběru.,

naštěstí se to snadno napraví. Existuje několik způsobů, jak to udělat, ale ukážu vám nejjednodušší způsob, jak začít.

vyhledejte, kde jste odkazovali na CSS stylesheet v hlavě indexu.Linux. Takhle to teď vypadá, ale musíme to změnit.

musíme to říct dynamicky odkazovat na složku témata. Nahraďte výše uvedený kód níže uvedeným kódem.

Pokud stránku znovu načtete,uvidíte, že se nyní načítá CSS., Pokud se nenačte, proveďte tvrdé obnovení. Koncept bude stejný pro obrázky, javascript a většinu dalších souborů, které máte ve složce témata, s výjimkou souborů PHP.

Pokud jste nebyli schopni úspěšně načíst CSS, klikněte na“ Zobrazit zdroj “ a najděte cestu k souboru CSS v kódu. Mělo by to být startwordpress.dev / wp-content / themes / startwordpress / blog.element. Ujistěte se, blog.css je uložen na správném místě.

Všimněte si, že to není nejpravděpodobnější způsob, jak načíst skripty do vašeho webu., Je to nejjednodušší pochopit, a to funguje, takže je to, jak budeme dělat to pro tuto chvíli.

rozdělení stránky na sekce

právě teď je vše v indexu.Linux. Ale samozřejmě chceme, aby záhlaví, zápatí a postranní panel na všech stránkách byly stejné, že? (Možná, že některé stránky budou mít mírné přizpůsobení, ale to přijde později.)

chystáme se rozdělit index.php do čtyř sekcí-záhlaví.php, zápatí.php, postranní panel.php a obsah.Linux.

zde je původní index.Linux. Nyní začneme řezat a vkládat.,

vše od <!DOCTYPE html> po hlavní záhlaví blogu bude v souboru záhlaví. Záhlaví obvykle obsahuje všechny potřebné styly hlavy a horní navigaci na web. Jediným přírůstkem, který k kódu udělám, je přidání <?php wp_head(); ?> těsně před uzavřením </head>.

většina webových stránek, zejména blogů, bude mít boční oblast pro zahrnutí obsahu, jako jsou archivy, značky, kategorie, reklamy a podobně. (Obsah odstraněn pro stručnost.)

Pokud je sidebar, kde jsou všechny sekundární informace jde, je obsah, kde jsou všechny články a hlavní obsah webové stránky jít. (Obsah odstraněn pro stručnost.)

Index

indexový soubor by měl být nyní velmi řídký. Ve skutečnosti by to mělo být pouze toto:

nyní přidáme vše zpět. Zde je váš nový index.php.

i když jste nikdy nepoužívali PHP dříve, tento kód je velmi samozřejmý., get_header();, get_sidebar(); a Jsou všechny funkce, které hledají jejich příslušné .PHP soubory a vložte kód. Samozřejmě, že všichni jdou dovnitř svých vlastních značek <?php ?>, aby server věděl, že je analyzuje jako HTML. Funkce obsahu je mírně odlišná, ale dělá to samé.

Pokud znovu načtete adresu URL, celý web je nyní načten, stejně jako dříve. Pokud jste přihlášeni na zadní konec, všimnete si horní lišty.,

Hlavní nastavení

než začneme tahat příspěvky a stránky, musíme nakonfigurovat některá hlavní nastavení WordPress. Například můj titul právě teď je „Bootstrap Blog“, tvrdě kódovaný v HTML. Chci, aby <title> a <h1> mého webu bylo proměnlivé přes zadní konec.

na palubní desce přejděte na Settings > General. Nastavte svůj titul.

v záhlaví.,php, změňte obsah titulní značky a hlavní značky h1 na tento Kód:

a popis tohoto.

konečně chci, aby mě titul vždy vzal zpět na hlavní stránku blogu. bloginfo("wpurl"); je kód, který to udělá.

zde je úplný kód v případě, že jste zmateni.

konečně jsme provedli první dynamickou změnu stránky. Přední konec by měl odrážet to, co jste vložili do nastavení.,

Nyní přejděte na Nastavení > Permalinks. Ve výchozím nastavení je WordPress nastaven na den a jméno, což je opravdu ošklivá struktura URL. Klikněte na název příspěvku a použijte změny.

smyčka

nejzajímavější částí je schopnost dynamicky vkládat obsah a ve WordPressu to děláme se smyčkou. Je to nejdůležitější funkce WordPress. Veškerý váš obsah je generován smyčkou.

na palubní desce, pokud kliknete na příspěvky, uvidíte „Ahoj, svět!“post tam ve výchozím nastavení., Naším cílem je zobrazit tento příspěvek v blogu.

samotná smyčka je poměrně jednoduchá.

vysvětluje se-pokud existují příspěvky, zatímco existují příspěvky, zobrazte příspěvek. Cokoliv uvnitř smyčky se bude opakovat. Pro blog to bude název příspěvku, Datum, obsah a komentáře. Kde by měl každý jednotlivý příspěvek skončit, je místo, kde smyčka skončí. Přidáme smyčku do index.php.

zde je váš nový indexový soubor.

index.php

jediná věc uvnitř smyčky je obsah.,php, který bude obsahovat obsah jednoho příspěvku. Takže otevřený obsah.php a změnit obsah na toto:

úžasné. Pojďme, aby se postranní panel dynamický, také. Na postranním panelu by měl být popis a seznam archivů. Na palubní desce, Chystám se upravit svůj popis uživatele říci “ front end web developer a profesionální blbeček.“

odstraňte všechny<li>s pod archivy a změňte jej na tento kód.

pro můj popis budu stahovat metadata z mého uživatelského účtu.

nyní je tento obsah také dynamicky přitahován.

zde je můj blog tak daleko.

Menu a stránky

OK. Nyní víme, jak vytvořit blog a upravit nějaký obsah postranního panelu. Zůstává pouze jeden hlavní aspekt této stránky-navigace a kam vede. Existují dva hlavní aspekty WordPress-příspěvky a stránky., Jsou velmi podobné v tom, že oba používají smyčku. Nicméně, stránky jsou místo, kde si dát obsah, který není blogový příspěvek. Zde přichází aspekt CMS WordPress – každá jednotlivá Stránka může být přizpůsobena tak, jak chcete.

na palubní desce jsem přidal stránku, abychom mohli vidět dvě. Nejprve budeme upravovat navbar tak, aby odkazy vedly k stránkám. Zpět do záhlaví.php, najít a změnit tento kód.

záhlaví.php

wp_list_pages(); zobrazí seznam všech stránek, které máte v neuspořádaném seznamu., "title_li=" říká kódu, aby před seznamem nepřidával název „stránky“. Bohužel pro nás to vypadá hrozně; původní blog.css má odkazy kódované va tagy, ne li tagy.

naštěstí se jedná o velmi snadnou opravu. Chystám se použít styl z jednoho na druhého. Přidejte to do blogu.css

blog.css

nyní by se měl zobrazit správně., Pokud se však CSS nepoužívá, podívejte se na zdroj výstupu HTML a zjistěte, jaká je adresa URL vašeho CSS. Mělo by to být startwordpress.dev/wp-content/themes/startwordpress/blog.css. Ujistěte se, že udělat tvrdý refresh.

mnohem lépe.

stránky

chci, aby stránky měly jiné rozvržení než příspěvky na blogu; nechci na nich postranní panely. Myslete na index.php jako index blogu a page.php jako index stránky., Budu vytvářet page.php, který bude velmi podobný indexu, kromě toho, že bude mít plnou 12-širokou mřížku namísto 8-širokého obsahu a 4-širokého postranního panelu.

stránka.php

Když kliknu na ukázkovou stránku, rozložení je nyní jiné než rozložení blogu.

závěr

existuje mnoho, mnohem více informací o WordPress. Upřímně doufám, že tento článek vám otevřel svět možností. Nyní víte, že jakýkoli web lze převést na téma WordPress – bez použití pluginů, widgetů nebo tématu někoho jiného.,

Pokud bylo něco nejasné, dejte mi prosím vědět. Pokud jsem vyslán nějaké očividně nesprávné informace, dejte mi prosím vědět! Jakákoli zpětná vazba je velmi ceněna! Mým cílem bylo vytvořit článek, který bych si přál, abych měl před sebou, když jsem se poprvé začal učit, jak používat WordPress a PHP.

Pokud byste chtěli vědět, jak migrovat tuto místní instanci na živý server, podívejte se na tento malý tutoriál: