Výukový program WordPress: Ako vytvoriť tému WordPress z HTML (1. časť)

  1. 1. Aktuálne čítanie: Výukový program WordPress: Ako vytvoriť tému WordPress z HTML (1. časť)
  2. 2. Výučba WordPress: Ako vytvoriť tému WordPress z HTML (2. časť)
  3. 3. Úvod do anatómie témy WordPress

Ak ste začali s webovými stránkami HTML (+ CSS), nemusíte ich pri prechode na WordPress vyhodiť. Môžete previesť HTML na WordPress a spustiť (teraz výkonnejšiu) webovú stránku na dynamickej platforme WordPress.


Alebo to tak nie je. Možno sa len čudujete, ako previesť dizajn HTML klienta na plnohodnotnú tému WordPress. Alebo by ste sa chceli naučiť základné programovanie WordPress (+ PHP) zo známejšej stránky HTML.

Nech už ste tu dnes, bez ohľadu na dôvod, tento tutoriál WordPress vám predstaví základy vytvárania témy WordPress z HTML. Podľa tohto sprievodcu môžete vytvoriť svoju tému od nuly alebo sa môžete vydať na Github a stiahnuť si úvodnú tému WPExplorer, ktorá poskytuje „prázdne plátno“ na vytvorenie témy so všetkými potrebnými súbormi šablón a kódmi, aby ste mohli začať. Takže ak ste jedným z tých ľudí, ktorí sa radšej učia čítaním kódu, stiahnite si úvodnú tému, preskočte sprievodcu a pozrite sa, ako veci fungujú … Inak získajte editor kódu (používam a odporúčam notepad++, alebo Sublime Text) a je pripravený prehliadač, potom postupujte podľa tohto jednoduchého sprievodcu až do konca.

Pomenovanie témy WordPress

Najprv musíme najprv pomenovať tému jedinečným názvom, čo nie je potrebné, ak vytvárate tému iba pre svoj web. Bez ohľadu na to je potrebné pomenovať tému, aby sa pri inštalácii dalo ľahko identifikovať.

Všeobecné predpoklady v tomto okamihu:

  • Máte pripravenú šablónu index.html a CSS.
  • Máte funkčnú inštaláciu WordPress s aspoň jednou témou, napr. Dvadsať štrnásť
  • Vytvorili ste už priečinok s témami, do ktorého uložíte svoju novú tému WordPress ��

Vráťme sa k pomenovaniu témy WordPress. Otvorte editor kódu a skopírujte obsah šablóny štýlov do nového súboru a uložte ho ako style.css v priečinku s témami. Pridajte nasledujúce informácie do úplne hornej časti stránky novo vytvorený štýl.css:

/ *
Názov témy: Názov témy
URI témy: URL vašej témy
Popis: Stručný popis témy
Verzia: 1.0 alebo akákoľvek iná verzia, ktorú chcete
Autor: Vaše meno alebo užívateľské meno WordPress.org
URI autora: Vaša webová adresa
Značky: Značky na vyhľadanie vašej témy v úložisku tém WordPress
* /

Nenechajte vynechať značky komentárov (/ * … * /). Uložte zmeny. Táto informácia hovorí WordPress o názve témy, autorovi a podobných doplnkových materiáloch. Dôležitou súčasťou je názov témy, ktorá vám umožňuje vybrať a aktivovať tému prostredníctvom hlavného panela WP.

Rozdeľte svoju šablónu HTML na súbory PHP

Tento tutoriál ďalej predpokladá, že máte šablónu HTML usporiadanú zľava doprava: hlavička, obsah, bočný panel, päta. Ak máte iný dizajn, možno budete musieť s kódom trochu hrať. Je to zábavné a super ľahké.

Ďalším krokom je vytvorenie štyroch súborov PHP. Pomocou editora kódu vytvorte index.php, header.php, sidebar.php a footer.php a uložte ich do priečinka s témami. Všetky súbory sú v tomto okamihu prázdne, preto neočakávajte, že budú robiť čokoľvek. Na ilustráciu používam nasledujúce súbory so súbormi šablón index.html a CSS:

index.html




Ako previesť šablónu HTML na tému WordPress - WPExplorer



Toto je časť hlavičky. Sem vložte svoje logo a ďalšie podrobnosti.

Toto je hlavná oblasť obsahu.

A toto je päta.

CSS STYLESHEET

#wrap {margin: 0 auto; šírka: 95%; margin-top: -10px; výška: 100%;}
.hlavičky {šírka: 99,8%; okraj: 1px plná # 999; výška: 135p;}
.Obsah {šírka: 70%; okraj: 1px plná # 999; horná hranica: 5px;}
.bočný panel {float: vpravo; margin-top: -54px; šírka: 29%; orámovanie: 1px plná # 999;}
.päta {width: 99,8%; okraj: 1px plná # 999; okraj: 10px;}

Ak nemáte nič, s čím by ste mohli pracovať, môžete oba kódy chytiť. Stačí ich skopírovať a vložiť do editora kódu, uložiť ich, vytvoriť štyri súbory PHP, ktoré sme práve spomenuli, a pripraviť sa na ďalšiu časť. Otvorte novovytvorený (a prázdny) header.php. Prihláste sa do svojej existujúcej inštalácie WordPress, prejdite na Vzhľad – >> Editor a otvorené header.php. Skopírujte celý kód medzi a prilepte ho do súboru header.php. Nasleduje kód, ktorý som získal zo súboru header.php v téme Dvadsaťštrnásť:




<?php wp_title( '|', true, 'right' ); ?>




Potom otvorte index.html súbor a skopírujte kód hlavičky (t. j. kód v

sekcia) do priečinka header.php tesne pod značky zobrazené nižšie:




<?php wp_title( '|', true, 'right' ); ?>







Toto je časť hlavičky. Sem vložte svoje logo a ďalšie podrobnosti.

Potom pridajte…

… kdekoľvek medzi značky v súbore header.php na prepojenie šablóny so štýlmi. Nezabudnite tiež dať a otváranie značiek v hlavičke header.php, ako je uvedené vyššie. Uložte všetky zmeny.

Skopírujte druhú časť (t.

z index.html na novo vytvorený index.php , a pridať…

… na samom vrchole a …


… úplne nadol. Tieto tri riadky vyzdvihnú header.php, sidebar.php a footer.php (v tomto poradí) a zobrazia ich v index.php, ktorý dá váš kód späť dokopy. Uložte všetky zmeny. V tomto okamihu by mal váš súbor index.php vyzerať takto:



Potom skopírujte obsah z sekcií bočného panela a päty v indexe.html do súboru sidebar.php a footer.php..

Pridávanie príspevkov

Vaša šablóna HTML sa chystá premeniť na tému WordPress. Potrebujeme iba pridať vaše príspevky. Ak máte vo svojom blogu príspevky, ako by ste ich zobrazovali v téme „HTML-to-WordPress“ na mieru? Používate špeciálny typ funkcie PHP známy ako slučka. Slučka je iba špecializovaný kód, ktorý zobrazuje vaše príspevky a komentáre kdekoľvek ich umiestnite.

Teraz, ak chcete zobraziť svoje príspevky v sekcia obsahu šablóny index.php, skopírujte a prilepte nasledujúci kód medzi

a

značky zobrazené nižšie:

>

To sa postará o vaše príspevky. Jednoduché ako ABC. V tomto okamihu (a pomocou vzorových súborov uvedených v tomto návode) by mal váš header.php vyzerať takto:




<?php wp_title( '|', true, 'right' ); ?>




Váš sidebar.php by mal vyzerať takto:

Váš footer.php by mal vyzerať takto:

A toto je päta

Všimli ste si zatváranie a značky v päte? Nezabudnite tiež zahrnúť tie.

Váš style.css by mal vyzerať asi takto:

/ *
Názov témy: Vytvorenie motívu WordPress z HTML
URI témy: http://wpexplorer.com
Popis: Táto téma vám ukáže, ako vytvoriť témy WordPress z HTML
Verzia: 1.0
Autor: Freddy pre @WPExplorer
URI autora: http://WPExplorer.com/create-wordpress-theme-html-1/
Značky: wpexplorer, vlastný motív, HTML na WordPress, vytváranie motívu WordPress
* /
telo {
rodina fontov: arial, helvetica, verdana;
veľkosť písma: 0,8em;
šírka: 100%;
výška: 100%;
}

.hlavička {
farba pozadia: # 1be;
ľavý okraj: 14%;
hore: 0;
šírka okraja: 0,1 m;
farba okraja: # 999;
orámovanie: pevné;
šírka: 72%;
výška: 250px;
}

.content {
farba pozadia: # 999;
ľavý okraj: 14%;
horná hranica: 5px;
plavák: vľavo;
šírka: 46%;
šírka okraja: 0,1 m;
farba okraja: # 999;
orámovanie: pevné;
}

.bočný panel {
farba pozadia: # 1d5;
zľava: 14%;
horná hranica: 5px;
plavák: vpravo;
šírka okraja: 0,1 m;
farba okraja: # 999;
orámovanie: pevné;
hore: 180px;
šírka: 23%;
}

.footer {
farba pozadia: červená;
ľavý okraj: 14%;
plavák: vľavo;
horná hranica: 5px;
šírka: 72%;
výška: 50px;
šírka okraja: 0,1 m;
farba okraja: # 999;
orámovanie: pevné;
}

A váš index.php by mal vyzerať podobne ako:





Opäť – vychádza to z webových stránok zľava doprava s hlavičkou, obsahom, bočným panelom, rozložením päty. Sledujete? Všetkých päť súborov by malo byť uložených v priečinku s témami. Pomenujte priečinok podľa vlastného uváženia a komprimujte ho do archívu ZIP pomocou programu WinRar alebo podobného programu. Nahrajte svoj nový motív do inštalácie WordPress, aktivujte ho a zobrazte prevedený motív v akcii!

Bolo to ľahké, však? Svoje motívy môžete upravovať podľa vášho želania, ale väčšina funkcií, ktoré milujeme v programe WordPress, je stále neaktívna, pretože … tento tutoriál pokrýva základy prevodu šablón HTML na program WordPress a mal by byť pre vás ako začiatočník veľkým prínosom. V ďalšom tutoriále si vezmeme veci o úroveň vyššie a pohrávame sa s ostatnými aspektmi programovania WordPress (napr Súbory šablón a Značky šablón), ktoré vám umožnia zmeniť šablóny HTML ľubovoľným spôsobom. Zostaňte naladení!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map