Vodič za WordPress: Kako ustvariti WordPress temo iz HTML-ja (1. del)

  1. 1. Trenutno bere: Vodič za WordPress: Kako ustvariti WordPress temo iz HTML-ja (1. del)
  2. 2. Vodič za WordPress: Kako ustvariti WordPress temo iz HTML-ja (2. del)
  3. 3. Uvod v anatomijo WordPress teme

Če ste začeli s spletnim mestom HTML (+ CSS), vam pri premikanju na WordPress ni treba vsega zavreči. HTML lahko pretvorite v WordPress in na dinamični platformi WordPress zaženete svoje (zdaj bolj zmogljivo) spletno mesto.


Ali pa morda ni tako Morda se samo sprašujete, kako pretvoriti strankin dizajn HTML v popolno temo WordPress. Lahko pa bi se radi naučili osnovnega programiranja WordPressa (+ PHP) z bolj znane strani HTML.

Ne glede na razlog, da ste danes tukaj, vas bo ta WordPress vadnica seznanila z osnovami ustvarjanja teme WordPress iz HTML-ja. Sledite tem navodilom, da ustvarite svojo temo iz nič, ali pa se pomaknete na Github in naložite temo za zagon WPExplorer, ki ponuja “prazno platno”, da ustvarite svojo temo z vsemi potrebnimi datotekami predloge in kodo, da začnete. Če ste eden tistih ljudi, ki se raje učijo z branjem kode, nato prenesite začetno temo, preskočite vodnik in poglejte, kako stvari delujejo… V nasprotnem primeru poiščite urejevalnik kod (uporabljam in priporočam Beležnica++, ali SublimeText) in brskalnik pripravljen, nato pa sledite temu preprostemu vodniku do konca.

Poimenovanje vaše WordPress teme

Najprej moramo tej temi dati edinstveno ime, ki pa ni potrebno, če temo gradite samo za svoje spletno mesto. Ne glede na to moramo poimenovati vašo temo, da jo bomo lažje prepoznali ob namestitvi.

Splošne predpostavke na tej točki:

  • Pripravljeni ste tabela slogi index.html in CSS.
  • Imate delujočo namestitev WordPress z vsaj eno temo, npr. Dvajset štirinajst
  • Ustvarili ste že tematsko mapo, v katero boste shranili svojo novo temo WordPress ��

Vrnimo se k poimenovanju vaše WordPress teme. Odprite urejevalnik kod in kopirajte in prilepite vsebino tabele v novo datoteko ter jo shranite kot style.css v mapi teme. Naslednje podatke dodajte na samem vrhu na novo ustvarjen slog.css:

/ *
Ime teme: Ime vaše teme
URI teme: URL vaše teme
Opis: Kratek opis teme
Različica: 1.0 ali katero koli drugo različico, ki jo želite
Avtor: Vaše ime ali uporabniško ime WordPress.org
URI avtorja: vaš spletni naslov
Oznake: Oznake za iskanje teme v repozitoriju teme WordPress
* /

Ne puščajte (/ *… * /) komentarjev. Spremembe shranite. Te informacije povedo WordPressu ime vaše teme, avtorja in podobne podobne stvari. Pomemben del je ime teme, ki vam omogoča, da izberete in aktivirate svojo temo na nadzorni plošči WP.

Razčlenitev predloge HTML v datoteke PHP

Ta vadnica nadalje predvideva, da imate predlogo HTML urejeno levo proti desni: glava, vsebina, stranska vrstica, podnožje. Če imate drugačen dizajn, se boste morda morali nekoliko poigrati s kodo. Je zabavno in zelo enostavno.

Naslednji korak vključuje ustvarjanje štirih datotek PHP. Z urejevalnikom kod ustvarite index.php, header.php, sidebar.php in footer.php in jih shranite v tematsko mapo. Na tem mestu so vse datoteke prazne, zato ne pričakujte, da bodo naredili nič. Za ponazoritev uporabljam naslednje datoteke indeksnih datotek index.html in CSS:

INDEX.HTML




Kako spremeniti predlogo HTML v temo WordPress - WPExplorer



To je naslov razdelka. Tukaj dodajte svoj logotip in druge podrobnosti.

To je glavno vsebinsko področje.

In to je podnožje.

CSS STYLESHEET

#wrap {marža: 0 samodejno; širina: 95%; zgornja meja: -10px; višina: 100%;}
.glava {širina: 99,8%; obroba: 1px trdna # 999; višina: 135px;}
.vsebina {širina: 70%; obroba: 1px trdna # 999; zgornja meja: 5px;}
.stranska vrstica {float: right; zgornja meja: -54px; širina: 29%; obroba: 1px trdna # 999;}
.footer {širina: 99,8%; obroba: 1px solid # 999; rob za zgornjo mejo: 10px;}

Obe kodi lahko zgrabite, če nimate s čim delati. Samo jih kopirajte in prilepite v urejevalnik kod, jih shranite, ustvarite štiri datoteke PHP, ki smo jih pravkar omenili, in pripravite se na naslednji del. Odprite novo ustvarjeno (in prazno) header.php. Prijavite se v obstoječo namestitev WordPress, pojdite na Videz – >> Urednik in odprite header.php. Kopirajte vso kodo med oznake in ga prilepite v datoteko header.php. Sledi koda, ki sem jo dobil iz datoteke header.php v temi Twenty Fourteen:




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




Nato odprite svoje index.html datoteko in kopirajte glavo kode (tj. kodo v

odsek) v svoj header.php tik pod oznake, kot je prikazano spodaj:





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







To je naslov razdelka. Tukaj dodajte svoj logotip in druge podrobnosti.

Nato dodajte…

… Kjerkoli med oznake v datoteki header.php za povezavo vaše tabele. Ne pozabite dodati tudi in odpiranje oznak v header.php, kot je prikazano zgoraj. Shrani vse spremembe.

Kopirajte drugi odsek (tj.

od index.html do na novo ustvarjen index.php , in dodaj…

… Na samem vrhu in…


… Do absolutnega dna. Te tri vrstice pridobijo header.php, sidebar.php in footer.php (v tem zaporedju) in jih prikažejo v index.php, ki kodo ponovno sestavi. Shrani vse spremembe. Na tej točki naj bo datoteka index.php videti tako:



Nato kopirajte vsebino iz razdelkov stranske vrstice in podnožja v indeksu.html v stransko.php oziroma footer.php oz..

Dodajanje objav

Vaša predloga HTML se bo spremenila v temo WordPress. Dodati moramo le vaše objave. Če imate na svojem blogu objave, kako bi jih prikazali v svoji prilagojeni temi “HTML-v-WordPress”? Uporabljate posebno vrsto funkcije PHP, znano kot Zanka. Zanka je le specializiran del kode, ki prikazuje vaše objave in komentarje, kamor koli ga postavite.

Zdaj pa, da svoje objave prikažete v vsebinski del predloge index.php, kopirajte in prilepite naslednjo kodo med

in

oznake, kot je prikazano spodaj:

>

To bo poskrbelo za vaše objave. Enostavno kot ABC. V tem stičišču (in z uporabo vzorčnih datotek v tej vadnici) mora biti header.php videti tako:




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




Vaša sidebar.php naj bo videti tako:

Vaš footer.php naj bo videti tako:

In to je podnožje

Ste opazili zaprtje in oznake v nogi? Ne pozabite vključiti tudi teh.

Vaš style.css mora izgledati nekako takole:

/ *
Ime teme: Ustvarjanje WordPress teme iz HTML-ja
URI teme: http://wpexplorer.com
Opis: Ta tema prikazuje, kako ustvariti teme WordPress iz HTML-ja
Različica: 1.0
Avtor: Freddy za @WPExplorer
URI avtorja: http://WPExplorer.com/create-wordpress-theme-html-1/
Oznake: wpexplorer, tema po meri, HTML v WordPress, ustvarite WordPress temo
* /
telo {
družina pisav: arial, helvetica, verdana;
velikost pisave: 0,8em;
širina: 100%;
višina: 100%;
}

.glava {
barva ozadja: # 1be;
marža-levo: 14%;
vrh: 0;
meja-širina: 0,1em;
obrobna barva: # 999;
obroba: trdna;
širina: 72%;
višina: 250px;
}

.vsebina {
barva ozadja: # 999;
marža-levo: 14%;
zgornja meja: 5px;
plovec: levo;
širina: 46%;
meja-širina: 0,1em;
obrobna barva: # 999;
obroba: trdna;
}

.stranska vrstica {
barva ozadja: # 1d5;
marža-desno: 14%;
zgornja meja: 5px;
plovec: desno;
meja-širina: 0,1em;
obrobna barva: # 999;
obroba: trdna;
zgoraj: 180px;
širina: 23%;
}

.podnožje {
barva ozadja: rdeča;
marža-levo: 14%;
plovec: levo;
zgornja meja: 5px;
širina: 72%;
višina: 50px;
meja-širina: 0,1em;
obrobna barva: # 999;
obroba: trdna;
}

In vaš index.php bi moral biti podoben:





Spet – to temelji na spletnem mestu od leve proti desni z glavo, vsebino, stransko vrstico, postavitvijo podnožja. Spremljate? Vseh pet datotek naj bo shranjenih v mapi teme. Poimenite mapo po želji in jo stisnite v ZIP arhiv z WinRar ali enakovrednim programom. Naložite novo temo v namestitev WordPress-a, jo aktivirajte in si oglejte pretvorjeno temo v akciji!

To je bilo enostavno, kajne? Svojo temo lahko poljubno izbirate, vendar je večina funkcij, ki jih imamo v WordPressu še vedno neaktivne, saj… ta vadnica zajema osnove pretvorbe predlog HTML v WordPress in bi vam kot začetniku morala predstavljati veliko vrednost. V naslednjem tutorialu bomo stvari pobrali višje in se poigrali z drugimi vidiki programiranja WordPressa (npr. Datoteke predloge in Oznake predlog), s katerimi lahko spremenite svoje predloge HTML, kamor koli želite. Ostani na vezi!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me