Vodič za WordPress: Kako stvoriti WordPress temu iz HTML-a (1. dio)

  1. 1. Trenutno čitam: Vodič za WordPress: Kako stvoriti WordPress temu iz HTML-a (1. dio)
  2. 2. Vodič za WordPress: Kako stvoriti WordPress temu iz HTML-a (2. dio)
  3. 3. Uvod u anatomiju WordPress teme

Ako ste započeli s web stranicom HTML (+ CSS), ne morate to sve bacati prilikom prelaska na WordPress. Možete pretvoriti svoj HTML u WordPress i pokrenuti svoju (sada snažniju) web stranicu na dinamičnoj WordPress platformi.


Ili to možda nije tako Možda se samo pitate kako pretvoriti klijentov HTML dizajn u cjelovitu temu WordPressa. Ili možda želite naučiti osnovno WordPress (+ PHP) programiranje s poznatije HTML strane.

Bez obzira na razlog zbog kojeg ste danas ovdje, ovaj WordPress vodič će vas upoznati s osnovama stvaranja WordPress teme iz HTML-a. Slijedite ovaj vodič da biste kreirali temu ispočetka ili se prebacite na Github i preuzmite temu pokretača WPExplorer koja pruža „prazno platno“ da biste stvorili svoju temu sa svim potrebnim datotekama predloška i kodom da biste započeli. Dakle, ako ste jedan od onih ljudi koji radije uče čitajući šifru, preuzmite početnu temu, preskočite vodič i pogledajte kako stvari funkcioniraju … Inače, nabavite uređivač koda (koristim i preporučujem blokčić za bilješke++, ili SublimeText) i spreman preglednik, a zatim slijedite ovaj jednostavan vodič do kraja.

Imenovanje WordPress teme

Prvo moramo svojoj temi dati jedinstveno ime, a to nije neophodno ako gradite temu samo za svoju web lokaciju. Bez obzira na to, moramo imenovati vašu temu kako bismo je lakše prepoznali nakon instalacije.

Opće pretpostavke u ovom trenutku:

  • Spremni ste svoj indeksni indeks.html i CSS tablica.
  • Imate radnu WordPress instalaciju s barem jednom temom, npr. Dvadeset četrnaest
  • Već ste stvorili mapu tema u koju ćete spremati novu WordPress temu ��

Vratimo se imenovanju vaše WordPress teme. Otvorite uređivač koda i kopirajte i zalijepite sadržaj tablice stilova u novu datoteku i spremite je kao style.css u mapi s temama. Na vrhu vrha dodajte sljedeće podatke novostvoreni stil.css:

/ *
Naziv teme: Ime vaše teme
URI teme: URL vaše teme
Opis: kratak opis teme
Verzija: 1.0 ili bilo koju drugu verziju koju želite
Autor: Vaše ime ili korisničko ime za WordPress.org
URI autora: Vaša web adresa
Oznake: Oznake za pronalaženje vaše teme u skladištu tema WordPressa
* /

Ne izostavljajte (/ *… * /) oznake komentara. Spremite promjene. Ove informacije WordPressu govore naziv vaše teme, autor i slične besplatne stvari. Važan dio je naziv teme koji vam omogućuje odabir i aktiviranje teme putem WP nadzorne ploče.

Razbijanje HTML predloška u PHP datoteke

Ovaj vodič dalje pretpostavlja da imate HTML predložak uređen s lijeva na desno: zaglavlje, sadržaj, bočna traka, podnožje. Ako imate drugačiji dizajn, možda ćete se morati malo poigrati s kodom. Zabavno je i super jednostavno.

Sljedeći korak uključuje stvaranje četiri PHP datoteke. Pomoću uređivača koda stvorite index.php, header.php, sidebar.php i footer.php i spremite ih u svoju temu teme. Sve su datoteke u ovom trenutku prazne, pa ne očekujte da će oni išta poduzeti. Za ilustraciju koristim sljedeće datoteke index.html i CSS stilova:

index.html




Kako pretvoriti HTML predložak u WordPress temu - WPExplorer



Ovo je zaglavlje odjeljka. Ovdje stavite svoj logotip i ostale detalje.

Ovo je glavno područje sadržaja.

A ovo je podnožje.

CSS STYLESHEET

#wrap {margina: 0 auto; Širina: 95%; margin-top: -10px; visina: 100%;}
.zaglavlje {širina: 99,8%; obrub: 1 px kruta # 999; visina: 135px;}
.Sadržaj {širina: 70%; obrub: 1 px kruta # 999; margina-vrh: 5px;}
.bočna traka {float: desno; margin-top: -54px, širina: 29%; obrub: 1 px kruta # 999;}
.podnožje {širina: 99,8%; obrub: 1 px čvrsto # 999; margina-vrh: 10px;}

Oba koda možete zgrabiti ako nemate s čim raditi. Samo ih kopirajte i zalijepite u uređivač koda, spremite ih, kreirajte četiri PHP datoteke koje smo upravo spomenuli i pripremite se za sljedeći dio. Otvorite novootvoreni (i prazan) header.php. Prijavite se u postojeću WordPress instalaciju, idite na Izgled – >> Urednik i otvoriti header.php. Kopirajte sav kôd između oznake i zalijepite ga u datoteku header.php. Slijedi kôd koji sam dobio iz datoteke header.php u temi Dvadeset četrnaest:



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

/js/html5.js">


Zatim otvorite svoj index.html datoteku i kopirajte kod zaglavlja (tj. kôd u

odjeljak) u svoj header.php odmah ispod oznake kao što je prikazano u nastavku:



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






Ovo je zaglavlje odjeljka. Ovdje stavite svoj logotip i ostale detalje.

Zatim dodajte…

… Bilo gdje između oznake u datoteci header.php za povezivanje vaše tablice stilova. Ne zaboravite staviti i otvaranje oznaka u header.php kao što je prikazano gore. Spremite sve promjene.

Kopirajte drugi odjeljak (tj.

od index.html do novostvoreni index.php , i dodaj…

… Na samom vrhu i…


… Do apsolutnog dna. Ove tri retke dohvaćaju header.php, sidebar.php i footer.php (tim redoslijedom) i prikazuju ih u index.php, koji vaš kôd ponovno sastavlja. Spremite sve promjene. U ovom bi trenutku datoteka index.php trebala izgledati:



Zatim kopirajte sadržaj s odjeljaka bočne trake i podnožja u indeksu.html u bočnu traku.php odnosno footer.php odnosno.

Dodavanje postova

Vaš HTML predložak uskoro će se pretvoriti u WordPress temu. Samo trebamo dodati vaše postove. Ako na svom blogu imate postove, kako biste ih prikazali u prilagođenoj temi “HTML-u-WordPress”? Koristite posebnu vrstu PHP funkcije poznate kao Petlja. Petlja je samo specijalizirani dio koda koji prikazuje vaše postove i komentare gdje god ga postavite.

Sada, za prikazivanje svojih postova u odjeljak o sadržaju predloška index.php, kopirajte i zalijepite sljedeći kôd između

i

oznake kao što je prikazano u nastavku:




To će se pobrinuti za vaše postove. Jednostavno kao ABC. U ovom trenutku (i pomoću primjera datoteka navedenih u ovom vodiču), header.php bi trebao izgledati ovako:



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

/js/html5.js">


Vaš sidebar.php trebao bi izgledati ovako:

Vaš footer.php trebao bi izgledati ovako:

A ovo je podnožje

Jeste li primijetili zatvaranje i oznake u podnožju? Ne zaboravite uključiti i njih.

Vaš style.css trebao bi izgledati ovako:

/ *
Naziv teme: Izrada WordPress teme iz HTML-a
URI teme: http://wpexplorer.com
Opis: Ova tema pokazuje kako stvoriti WordPress teme iz HTML-a
Verzija: 1.0
Autor: Freddy za @WPExplorer
Autor URI: http://WPExplorer.com/create-wordpress-theme-html-1/
Oznake: wpexplorer, prilagođena tema, HTML u WordPress, kreirajte WordPress temu
* /
tijelo {
obitelj fontova: arial, helvetica, verdana;
veličina fonta: 0,8em;
širina: 100%;
visina: 100%;
}

.Zaglavlje {
boja pozadine: # 1be;
margina-lijevo: 14%;
vrh: 0;
širina obruba: 0,1em;
obrub: # 999;
obrub: čvrst;
širina: 72%;
visina: 250px;
}

.sadržaj {
boja pozadine: # 999;
margina-lijevo: 14%;
margina-top: 5px;
plovak: lijevo;
širina: 46%;
širina obruba: 0,1em;
obrub: # 999;
obrub: čvrst;
}

.bočna traka {
pozadinska boja: # 1d5;
margina-desno: 14%;
margina-top: 5px;
plutati: desno;
širina obruba: 0,1em;
obrub: # 999;
obrub: čvrst;
vrh: 180px;
širina: 23%;
}

.footer {
boja pozadine: crvena;
margina-lijevo: 14%;
plovak: lijevo;
margina-top: 5px;
širina: 72%;
visina: 50px;
širina obruba: 0,1em;
obrub: # 999;
obrub: čvrst;
}

I vaš index.php trebao bi izgledati slično:





Opet – to se temelji na web mjestu s lijeva na desno s izgledom zaglavlja, sadržajem, bočnom trakom, podnožjem. Pratite li? Svih pet datoteka treba biti spremljeno u mapu tema. Dajte mapi naziv što god želite i komprimirajte ga u ZIP arhivu pomoću WinRar ili sličnog programa. Pošaljite novu temu u svoju WordPress instalaciju, aktivirajte je i pogledajte pretvorenu temu u akciji!

To je bilo lako, zar ne? Možete stilizirati temu kako god želite, ali većina značajki koje volimo u WordPressu i dalje su neaktivne jer… ovaj vodič obuhvaća osnove pretvaranja HTML predložaka u WordPress i trebao bi vam biti od velike važnosti kao početniku. U sljedećem ćemo vodiču uzeti stvari viši i poigrati se s drugim aspektima WordPress programiranja (poput Datoteke predložaka i Oznake predloška) pomoću kojih možete okrenuti HTML predloške na način na koji želite. Ostanite u toku!

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