WordPress námskeið: Hvernig á að búa til WordPress þema úr HTML (1. hluti)

  1. 1. Lestur sem stendur: WordPress námskeið: Hvernig á að búa til WordPress þema úr HTML (1. hluti)
  2. 2. WordPress námskeið: Hvernig á að búa til WordPress þema úr HTML (hluti 2)
  3. 3. Kynning á líffærafræði á WordPress þema

Ef þú byrjaðir með HTML (+ CSS) vefsíðu þarftu ekki að henda öllu þegar þú flytur til WordPress. Þú getur umbreytt HTML í WordPress og keyrt vefsíðuna þína (nú öflugri) á kraftmiklum WordPress vettvangi.


Eða kannski er það ekki málið. Kannski ertu bara að spá í að umbreyta HTML hönnun viðskiptavinarins í fullkomið WordPress þema. Eða kannski myndir þú vilja læra grunn WordPress (+ PHP) forritun frá kunnuglegri HTML hliðinni.

Hver sem ástæðan er fyrir því að þú ert hér í dag, þetta WordPress námskeið mun kynna þér grunnatriðin við að búa til WordPress þema úr HTML. Þú getur fylgst með þessari handbók til að búa til þemað þitt frá grunni eða þú getur farið yfir í Github og hlaðið niður WPExplorer ræsideminu sem býður upp á „tóman striga“ til að búa til þemað með öllum nauðsynlegum sniðmátaskrám og kóða til að byrja. Svo ef þú ert einn af þessum einstaklingum sem frekar læra með því að lesa í gegnum kóða, þá halaðu niður startþema, slepptu leiðarvísinum og sjáðu hvernig hlutirnir virka… Annars, fáðu þér kóða ritstjóra (ég nota og mæli Notepad++, eða SublimeText) og vafra tilbúinn, fylgdu síðan þessari einföldu handbók til loka.

Nefna WordPress þema þitt

Fyrstur hlutur í fyrsta lagi verðum við að gefa þemu þínu sérstakt nafn, sem er ekki nauðsynlegt ef þú ert að byggja þema aðeins fyrir vefsíðuna þína. Burtséð frá því, við verðum að nefna þemað til að það sé auðvelt að bera kennsl á það við uppsetningu.

Almennar forsendur á þessum tímapunkti:

  • Þú hefur vísitölu index.html og CSS tilbúið.
  • Þú ert með vinnandi WordPress uppsetningu með að minnsta kosti einu þema t.d. Tuttugu og fjórtán
  • Þú hefur þegar búið til þemamöppu þar sem þú munt vista nýja WordPress þemað þitt ��

Við skulum snúa aftur til að nefna WordPress þemað þitt. Opnaðu kóða ritstjórann þinn og afritaðu innihald sniðmátsins þíns í nýja skrá og vistaðu sem style.css í þemamöppunni þinni. Bætið við eftirfarandi upplýsingum efst í nýbúinn style.css:

/ *
Þemaheiti: nafn þemans þíns
Þema URI: slóð þemans þíns
Lýsing: Stutt lýsing á þema þínu
Útgáfa: 1.0 eða önnur útgáfa sem þú vilt
Höfundur: Nafn þitt eða notendanafn WordPress.org
Höfundur URI: veffangið þitt
Merkimiðar: Merkimiðar til að finna þemað þitt í WordPress þema geymslu
* /

Ekki skilja eftir (/ *… * /) athugasemd merkin. Vistaðu breytingarnar. Þessar upplýsingar segja WordPress nafn þemans þíns, höfundinn og ókeypis efni svoleiðis. Mikilvægi hlutinn er nafn þemunnar, sem gerir þér kleift að velja og virkja þemað þitt í gegnum WP mælaborðið.

Brot upp HTML sniðmát þitt í PHP skrár

Í þessari kennslu er ennfremur gert ráð fyrir að HTML sniðmátinu þínu sé raðað frá vinstri til hægri: haus, innihald, skenkur, fót. Ef þú ert með aðra hönnun gætirðu þurft að spila með kóðanum aðeins. Það er skemmtilegt og frábær auðvelt.

Næsta skref felur í sér að búa til fjórar PHP skrár. Notaðu kóða ritstjórann þinn til að búa til index.php, header.php, sidebar.php og footer.php og vista þær í þemamöppunni þinni. Allar skrárnar eru tómar á þessum tímapunkti, svo ekki búast við að þær geri neitt. Til dæmis er ég að nota eftirfarandi index.html og CSS sniðmát skrár:

INDEX.HTML




Hvernig á að umbreyta HTML sniðmát í WordPress þema - WPExplorer



Þetta er haus hluti. Settu lógóið þitt og aðrar upplýsingar hér.

Þetta er aðal innihaldssviðið.

Og þetta er fóturinn.

CSS STYLESHEET

#wrap {margin: 0 auto; breidd: 95%; framlegð-toppur: -10px; hæð: 100%;}
.haus {breidd: 99,8%; jaðar: 1px solid # 999; hæð: 135px;}
.innihald {breidd: 70%; landamæri: 1px solid # 999; framlegð: 5px;}
.skenkur {fljóta: rétt; framlegð-toppur: -54px; breidd: 29%; landamæri: 1px solid # 999;}
.fótur {breidd: 99,8%; jaðar: 1px solid # 999; framlegð toppur: 10px;}

Þú getur grípt í báða kóða ef þú hefur ekkert að vinna með. Bara afritaðu og límdu þær í kóða ritilinn þinn, vistaðu þær, búðu til fjórar PHP skrár sem við nefndum og gerðu þig tilbúinn fyrir næsta hluta. Opnaðu nýstofnaða (og tóma) haus.php. Skráðu þig inn í núverandi WordPress uppsetningu, farðu til Útlit – >> Ritstjóri og opna haus.php. Afritaðu allan kóðann á milli merkir og límdu það í header.php skrána. Eftirfarandi er kóðinn sem ég fékk frá header.php skránni í tuttugu og fjórtán þema:




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




Opnaðu síðan þinn index.html skrá og afritaðu hausakóðann (þ.e.a.s. kóðinn í

kafla) til þinn header.php rétt fyrir neðan merki eins og sýnt er hér að neðan:




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







Þetta er haus hluti. Settu lógóið þitt og aðrar upplýsingar hér.

Bætið síðan við…

… Hvar sem er á milli merki í header.php skránni til að tengja stílsniðið þitt. Mundu líka að setja og að opna tags í hausnum.php eins og sýnt er hér að ofan. Vista allar breytingar.

Afritaðu seinni hlutann (þ.e.a.s..

frá index.html til nýstofnað index.php , og bæta við …

… Efst og…


… Til algers botns. Þessar þrjár línur sækja haus.php, sidebar.php og footer.php (í þeirri röð) og birta þær í index.php, sem setur kóðann þinn saman aftur. Vista allar breytingar. Á þessum tímapunkti ætti index.php skráin þín að líta út eins og:



Afritaðu síðan innihaldið af hliðarstikunni og fótfótarhlutunum í vísitölunni.html yfir í hliðarstikuna.php og fótinn.php.

Bætir við færslum

HTML sniðmátið þitt er að fara að breytast í WordPress þema. Við verðum bara að bæta við færslunum þínum. Ef þú ert með færslur á blogginu þínu, hvernig myndirðu þá birta í sérsmíðuðu þemað „HTML til WordPress“? Þú notar sérstaka gerð PHP aðgerða sem kallast Lykkja. The Loop er aðeins sérhæft kóða sem sýnir færslur og athugasemdir hvar sem þú setur hann.

Nú, til að birta færslur þínar í innihald kafla af sniðmáti index.php, afritaðu og límdu eftirfarandi kóða á milli

og

merki eins og sýnt er hér að neðan:

>

Það mun sjá um innlegg þín. Auðvelt eins og ABC. Á þessum tímamótum (og með því að nota sýnishornsskrárnar sem fylgja í þessari einkatími) ætti header.php þinn að líta svona út:




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




Sidebar.php ætti að líta svona út:

Footer.php þinn ætti að líta svona út:

Og þetta er fóturinn

Tókstu eftir lokuninni og merki í fót? Ekki gleyma að taka með þær líka.

Style.css þinn ætti að líta svona út:

/ *
Þemaheiti: Búa til WordPress þema úr HTML
Þema URI: http://wpexplorer.com
Lýsing: Þetta þema sýnir þér hvernig á að búa til WordPress þemu úr HTML
Útgáfa: 1.0
Höfundur: Freddy fyrir @WPExplorer
Höfundur URI: http://WPExplorer.com/create-wordpress-theme-html-1/
Merkingar: wpexplorer, sérsniðið þema, HTML í WordPress, búið til WordPress þema
* /
líkami {
leturfjölskylda: arial, helvetica, verdana;
leturstærð: 0,8 em;
breidd: 100%;
hæð: 100%;
}

.haus {
bakgrunnslitur: # 1be;
framlegð-vinstri: 14%;
efst: 0;
landamæri-breidd: 0,1 em;
landamæri litur: # 999;
landamærastíll: traustur;
breidd: 72%;
hæð: 250px;
}

.innihald {
bakgrunnslitur: # 999;
framlegð-vinstri: 14%;
framlegð-toppur: 5px;
fljóta: vinstri;
breidd: 46%;
landamæri-breidd: 0,1 em;
landamæri litur: # 999;
landamærastíll: traustur;
}

.skenkur {
bakgrunnslitur: # 1d5;
framlegð til hægri: 14%;
framlegð-toppur: 5px;
fljóta: rétt;
landamæri-breidd: 0,1 em;
landamæri litur: # 999;
landamærastíll: traustur;
toppur: 180px;
breidd: 23%;
}

.fótur {
bakgrunnslitur: rauður;
framlegð-vinstri: 14%;
fljóta: vinstri;
framlegð-toppur: 5px;
breidd: 72%;
hæð: 50px;
landamæri-breidd: 0,1 em;
landamæri litur: # 999;
landamærastíll: traustur;
}

Og index.php ætti að líta svipað út og:





Aftur – þetta er byggt á vefsíðu vinstra til hægri með haus, innihaldi, skenkur, fótfótum. Fylgist þú með? Allar fimm skrárnar ættu að vera vistaðar í þemamöppunni þinni. Nefndu möppuna hvað sem þú vilt og þjappaðu henni í ZIP skjalasafn með WinRar eða sambærilegu forriti. Settu nýja þemað upp í WordPress uppsetninguna þína, virkjaðu það og sjáðu umbreyttu þemað þitt í aðgerð!

Þetta var auðvelt, ekki satt? Þú getur stillt þemað þitt hvernig sem þú vilt en flestir eiginleikarnir sem við elskum í WordPress eru enn óvirkir þar sem … þessi kennsla nær yfir grunnatriðin í að umbreyta HTML sniðmátum í WordPress og ætti að vera mjög mikilvægt fyrir þig sem byrjandi. Í næsta námskeiði munum við taka hlutina hærra og leika okkur að öðrum þáttum WordPress forritunar (svo sem Sniðmát skrár og Sniðmátamerki) sem gerir þér kleift að snúa HTML sniðmátunum þínum hvernig sem þú vilt. Fylgstu með!

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