WordPressi õpetus: kuidas luua HTML-ist WordPressi teema (1. osa)

  1. 1. Praegu loeb: WordPressi õpetus: kuidas luua HTML-ist WordPressi teema (1. osa)
  2. 2. WordPressi õpetus: kuidas luua WordPressi teema HTML-ist (2. osa)
  3. 3. Sissejuhatus WordPressi teema anatoomiasse

Kui alustasite HTML (+ CSS) veebisaidiga, ei pea te WordPressi kolimisel seda kõike ära viskama. Saate oma HTML-i teisendada WordPressiks ja käivitada oma (nüüd võimsam) veebisaiti dünaamilisel WordPress-platvormil.


Või äkki see pole nii. Võib-olla mõtled teile lihtsalt, kuidas teisendada kliendi HTML-i kujundus täieõiguslikuks WordPressi kujunduseks. Või tahaksite ehk õppida WordPressi (+ PHP) programmeerimist tuttavama HTML-i küljelt.

Ükskõik, mis põhjusel te täna siin olete, tutvustab see WordPressi õpetus teile WordPressi teema HTML-ist loomise põhitõdesid. Teema loomiseks nullist järgige seda juhist või liikuge üle Githubi ja laadige alla WPExploreri käivitusteema, mis pakub „tühja lõuendit”, et luua oma teema koos kõigi vajalike mallifailide ja koodiga, et alustada. Nii et kui olete üks neist inimestest, kes pigem õpib koodi lugedes, laadige siis alla käivitusteema, jätke juhend vahele ja vaadake, kuidas asjad toimivad … Muidu hankige koodiredaktor (ma kasutan ja soovitan Märkmik++, või SublimeText) ja brauser on valmis, siis järgige seda lihtsat juhendit lõpuni.

WordPressi teema nimetamine

Esiteks peame andma teie teemale kordumatu nime, mis pole vajalik, kui loote teema ainult oma veebisaidile. Vaatamata sellele peame teie teema nime panema, et see oleks installimisel hõlpsasti tuvastatav.

Üldised eeldused sel hetkel:

  • Teil on oma index.html ja CSS stiilileht valmis.
  • Teil on töötav WordPressi install vähemalt ühe teemaga, nt. Kakskümmend neliteist
  • Olete juba loonud teemakausta, kuhu salvestate oma uue WordPressi teema ��

Tuleme tagasi oma WordPressi teema nimetamise juurde. Avage oma koodiredaktor ja kopeerige-kleepige oma stiililehe sisu uude faili ja salvestage see kujul stiil.css oma teemakausta. Lisage järgmine teave lehe ülaosas vastloodud stiil.css:

/ *
Teema nimi: teie teema nimi
Teema URI: teie teema URL
Kirjeldus: teie teema lühikirjeldus
Versioon: 1.0 või mõni muu soovitud versioon
Autor: Teie nimi või WordPress.org kasutajanimi
Autori URI: teie veebiaadress
Sildid: sildid oma teema leidmiseks WordPressi teemahoidlas
* /

Ärge jätke (/ *… * /) kommentaarimärke välja. Salvestage muudatused. See teave ütleb WordPressile teie teema nime, autori ja sellised tasuta asjad. Oluline osa on teema nimi, mis võimaldab teil valida ja aktiveerida oma teema WP juhtpaneeli kaudu.

Teie HTML-malli purustamine PHP-failideks

Lisaks eeldab see õpetus, et teie HTML-mall on paigutatud vasakult paremale: päis, sisu, külgriba, jalus. Kui teil on erinev kujundus, peate võib-olla natuke koodiga mängima. See on lõbus ja ülilihtne.

Järgmine samm hõlmab nelja PHP-faili loomist. Looge oma koodiredaktori abil index.php, header.php, sidebar.php ja footer.php ning salvestage need teemakausta. Kõik failid on praegu tühjad, nii et ärge oodake, et nad midagi teeksid. Näitlikustamiseks kasutan järgmisi index.html ja CSS stiilitabelifaile:

INDEX.HTML




Kuidas HTML-malli teisendada WordPressi teemaks - WPExplorer



See on päise osa. Pange siia oma logo ja muud üksikasjad.

See on peamine sisuala.

Ja see on jalus.

CSS STYLESHEET

#wrap {margin: 0 auto; laius: 95%; veerise ülaosa: -10 pikslit; kõrgus: 100%;}
.päis {laius: 99,8%; ääris: 1 piksel tahke # 999; kõrgus: 135 pikslit;}
.sisu {laius: 70%; ääris: 1 piksel tahke # 999; veerise ülaosa: 5 px;}
.külgriba {ujuk: paremal; ülaosa: -54 pikslit; laius: 29%; ääris: 1 piksel # 999;}
.jalus {laius: 99,8%; ääris: 1 piksel kindel # 999; veerise ülaosa: 10 pikslit;}

Võite haarata mõlemad koodid, kui teil pole midagi teha. Kopeerige ja kleepige need lihtsalt oma koodiredaktorisse, salvestage need, looge neli äsja mainitud PHP-faili ja olge valmis järgmiseks osaks. Avage oma vastloodud (ja tühi) header.php. Logige sisse oma olemasolevasse WordPressi installi, liikuge aadressile Välimus – >> toimetaja ja avatud header.php. Kopeerige kogu kood sildid ja kleepige see faili header.php. Järgmine on kood, mille sain failist header.php teemas Kakskümmend neliteist:




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




Seejärel avage oma register.html faili ja kopeerige päisekood (st

jaotis) otse päisesse .php allpool näidatud sildid:




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







See on päise osa. Pange siia oma logo ja muud üksikasjad.

Seejärel lisage…

… Ükskõik kus sildid failis header.php, et linkida teie stiilileht. Ärge unustage ka panna ja siltide avamine päises.php, nagu ülal näidatud. Salvestage kõik muudatused.

Kopeerige teine ​​jaotis (st.

alates index.html kuni vastloodud indeks.php , ja lisage …

… Ülaosas ja…


… Absoluutse põhjani. Need kolm rida tõmbavad päised.php, külgriba.php ja jalus.php (selles järjekorras) ja kuvavad need indeksis phph, mis paneb teie koodi uuesti kokku. Salvestage kõik muudatused. Sel hetkel peaks teie index.php fail välja nägema:



Seejärel kopeerige sisu oma index.html-i külgriba ja jaluse jaotistest vastavalt külgribalephp ja footer.php.

Postituste lisamine

Teie HTML-i mall on muutumas WordPressi teemaks. Peame lihtsalt teie postitused lisama. Kui teie ajaveebis on postitusi, siis kuidas kuvaksite need oma kohandatud teemal „HTML-to-WordPress”? Kasutate spetsiaalset tüüpi PHP-funktsiooni, mida nimetatakse Silmus. Loop on lihtsalt spetsialiseeritud kood, mis kuvab teie postitused ja kommentaarid kuhu iganes te asetate.

Nüüd oma postituste kuvamiseks sisu jaotis malli index.php jaoks kopeerige ja kleepige järgmine kood

ja

allpool näidatud sildid:

>

See hoolitseb teie postituste eest. Lihtne kui ABC. Sel hetkel (ja kasutades selles õpetuses toodud näidisfaile) peaks teie header.php välja nägema järgmine:




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




Teie külgriba.php peaks välja nägema selline:

Teie jalus.php peaks välja nägema selline:

Ja see on jalus

Kas märkasite sulgemist? ja sildid jaluses? Ärge unustage lisada ka neid.

Teie stiil.css peaks välja nägema umbes selline:

/ *
Teema nimi: WordPressi teema loomine HTML-ist
Teema URI: http://wpexplorer.com
Kirjeldus: see teema näitab teile, kuidas WordPressi teemasid HTML-ist luua
Versioon: 1.0
Autor: Freddy jaoks @WPExplorer
Autori URI: http://WPExplorer.com/create-wordpress-theme-html-1/
Sildid: wpexplorer, kohandatud teema, HTML WordPressile, WordPressi teema loomine
* /
keha {
fondiperekond: arial, helvetica, verdana;
kirjasuurus: 0,8em;
laius: 100%;
kõrgus: 100%;
}

.päis {
taustavärv: # 1be;
varu-vasak: 14%;
ülemine: 0;
piiri laius: 0,1em;
äärisevärv: # 999;
äärise stiil: kindel;
laius: 72%;
kõrgus: 250 pikslit;
}

.sisu {
taustavärv: # 999;
varu-vasak: 14%;
veerise ülaosa: 5 pikslit;
ujuk: vasak;
laius: 46%;
piiri laius: 0,1em;
äärisevärv: # 999;
äärise stiil: kindel;
}

.külgriba {
taustavärv: # 1d5;
paremäär: 14%;
veerise ülaosa: 5 pikslit;
ujuk: paremal;
piiri laius: 0,1em;
äärisevärv: # 999;
äärise stiil: kindel;
ülaosa: 180 pikslit;
laius: 23%;
}

.jalus {
taustavärv: punane;
varu-vasak: 14%;
ujuk: vasak;
veerise ülaosa: 5 pikslit;
laius: 72%;
kõrgus: 50 pikslit;
piiri laius: 0,1em;
äärisevärv: # 999;
äärise stiil: kindel;
}

Ja teie index.php peaks välja nägema sarnane:





Jällegi – see põhineb vasakult paremale suunatud veebisaidil päise, sisu, külgriba ja jaluse paigutusega. Kas jälgid? Kõik viis faili tuleks salvestada teemakausta. Pange kaustale nimi, mida soovite, ja tihendage see ZIP-arhiivi, kasutades WinRari või samaväärset programmi. Laadige oma uus teema üles oma WordPressi installimisse, aktiveerige see ja vaadake, kuidas teisendatud teema töötab!

See oli lihtne, eks? Saate oma teema stiili kujundada vastavalt oma soovile, kuid enamik WordPressis meile meeldivaid funktsioone on endiselt passiivsed, kuna … see õpetus hõlmab HTML-mallide WordPressiks teisendamise põhitõdesid ja see peaks teile kui algajale väga väärtuslik olema. Järgmises õpetuses võtame asju kõrgemale ja mängime ümber WordPressi programmeerimise muude aspektide (nt Mallifailid ja Mallimärgendid), mis võimaldab teil muuta oma HTML-i malle vastavalt soovile. Olge kursis!

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