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

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

Í hluta þessarar kennslu náðu við grunnatriðin í að umbreyta HTML sniðmát í WordPress þema. Ef þú ert svolítið forvitinn lærðum við nokkur atriði um að skipta HTML sniðmátum yfir í PHP skrár, setja þau aftur saman, stíll og nefna WordPress þemu. Raunverulega, við lærðum mikið og þú munt vilja kynna þér hugtökin sem við fjallaðum um í fyrsta námskeiðinu okkar til að njóta þessarar annarrar skammtar. Í færslu dagsins í dag munum við taka hlutina hærra. Við munum fjalla um nokkur svæði í viðbót svo þú getur búið til fullkomlega virkan WordPress þema. Svo, án frekari fjaðrafoks, hér förum við.


Stillir myndir og JavaScript skrár

Ef þú hefðir myndir í upprunalegu HTML sniðmátinu (index.html), þú tókst líklega eftir því að þeir hættu að birtast eftir að hafa sniðið sniðmátið upp í PHP skrár. Hafðu engar áhyggjur, þetta er bara eins og PHP er. Til dæmis, ef þú varst með lógó í haushlutanum eins og svo …

þinn_logo_alt_text

… Þú verður að leika þig með kóðanum aðeins. Kóðinn sem ég mun láta í ljós á augnabliki mun hjálpa vöfrum að finna lógóið þitt (eða aðrar myndir) á þínu myndir möppu, sem er (eða ætti að vera) undirmöppu í aðalskrá þemans. Svo til að birta lógóið þitt í hausnum skaltu opna haus.php skrána og skipta um ofangreindan kóða fyrir eftirfarandi:

þinn_logo_alt_text

Aðgerðin get_template_directory_uri () skilar url fyrir þemumöppuna þína. Svo ef þú bætir lógóinu við í myndamöppu, þá mun kóðinn grípa það merki.

Taktu eftir einhverjum mismun? Vitanlega, þetta stykki af kóða mun laga lógóið þitt. Til að laga aðrar myndir þarftu að umrita kóða þeirra á svipaðan hátt. Auðvelt peasy efni.

Leyfðu okkur að halda áfram á JavaScript. Ef HTML vefsíðan þín notaði JavaScript skaltu búa til möppu sem heitir js og settu skrif þín þar. Þú getur hringt í þá í header.php skránni með eftirfarandi kóða:

Ofangreindur kóði notar dæmi.js til dæmis. Ekki gleyma að skipta um þann hluta með nafni JavaScript skrárinnar.

Auðvitað, ef þú ert að búa til þema fyrir einhvern annan, þá ættirðu virkilega að hlaða js skrárnar þínar með wp_enqueue_scripts. Færslur AJ til að bæta JavaScript við WordPress þemu til að fá frekari upplýsingar og ráð.

Sniðmát skrár

Í einum hluta þessarar námskeiðs nefndum við fjórar grunn sniðmátaskrár, þ.e. index.php, header.php, sidebar.php og fót.php. Sniðmát skrár stjórna því hvernig vefsíðan þín verður birt á vefnum. Sniðmát fá upplýsingar úr MySQL gagnagrunni WordPress þinnar og þýða það sama yfir í HTML kóða sem birtist í vöfrum. Með öðrum orðum, sniðmátaskrár eru byggingarreitir í WordPress þemum. Til að öðlast betri skilning á sniðmátum skulum við kafa í hugtak sem kallast sniðmát stigveldi.

Við munum nota líkingu. Ef gestur smellir á hlekk á flokk (þ.e. hlekkur í flokk) eins og http://www.yoursite.com/blog/category/your-category/, notar WordPress sniðmálsveldi til að búa til rétta skrá (og innihald) sem útskýrt hér að neðan:

  • Í fyrsta lagi mun WordPress leita að sniðmátaskrá sem passar við kenni flokksins
  • Ef auðkenni flokksins er, til dæmis 2, mun WordPress leita að sniðmátaskrá sem heitir flokkur 2.php
  • Ef flokkur 2.php er ekki tiltækur mun WordPress fara í almenna sniðmát skrá flokka eins og flokkur.php
  • Ef þessi sniðmátaskrá er ekki tiltæk mun WordPress einnig leita að almennu skjalasafni eins og archive.php
  • Ef samheiti skjalasafnsins er ekki til fellur WordPress aftur á aðal sniðmátaskrána, index.php

Þannig virka WordPress sniðmát og þú getur notað þessar skrár til að sérsníða WordPress þemað þitt að þínum þörfum. Aðrar sniðmátaskrár eru:

home.php eða index.phpNotað til að birta bloggfærslur vísitölu
forsíða.phpNotað til að birta kyrrstæðar síður eða nýjustu færslur eins og settar eru á forsíðu skjásins
single.phpNotað til að birta eina færslusíðu
einn- {eftirgerð} .phpNotað til að skila sérsniðnum póstgerðum t.d. ef eftirgerð var vara myndi WordPress nota single-product.php
síðu.phpNotað til að gera kyrrstæðar síður
Category.php eða Archive.phpNotað til að birta skrá í skjalasafn
höfundur.phpNotað til að láta höfundinn í té
dagsetning.phpNotað til að birta dagsetningu
search.phpNotað til að birta leitarniðurstöður
404.phpNotað til að láta villa 404 vera villusíðu

Þetta er bara stuttur listi, það eru margir aðrir WordPress sniðmát. Umræðuefnið sniðmát er stórt og besta leiðin til að læra að spila með sniðmátaskrám er með því að lesa hið víðtæka Þemuþróun bókasafn hjá WordPress. Einnig er hægt að lesa styttri Sniðmátshluti hjá WordPress Codex.

Sniðmát

Að sjá að við kynntum sniðmát skrár, það er bara sanngjarnt að nefna eitt eða tvö um sniðmátamerki og hlutverkið sem þeir gegna í WordPress þema. Samkvæmt WordPress.org eru „… sniðmátamerki notuð í sniðmát bloggsins þíns til að birta upplýsingar á dynamískan hátt eða aðlaga bloggið þitt á annan hátt og veita verkfæri til að gera það eins einstaklingsbundið og áhugavert eins og þú ert.“

Í fyrri námskeiðinu okkar hittir þú nokkur sniðmátamerki eins og get_header, get_sidebar, get_footer og bloginfo. Í eftirfarandi kafla munum við bæta nokkrum sniðmátamerkjum við nýstofnaða WordPress þema okkar. Ég geri ráð fyrir að þú hafir þegar látið DOCTYPE yfirlýsinguna fylgja með í header.php skránni. Ef þú hefur það ekki, þá er hér kóðinn:

DOCTYPE yfirlýsingin gefur HTML kóða þínum merkingu. Með það úr vegi, skulum við breyta opnunar HTML merkinu. Við munum innihalda langa eiginleika með því að nota tungumál_attribute merki eins og svo:

Ofangreindur kóði býr til eftirfarandi:

Þegar DOCTYPE yfirlýsingin og language_attribute merkið eru til staðar er uppbygging þemans þín lögmæt og vafrar skilja kóðann þinn. Ef þú ert að búa til þema fyrir blogg er mikilvægt að setja tengla á pingback slóðina og RSS strauminn í höfuðið. Bættu við eftirfarandi kóða í haus þinn.php:

Tókstu eftir því hvernig við störfuðum hjá bloggfo tag til að innihalda RSS strauminn (‘rss2_url’) og pingback (‘pingback_url’)? Bættu við eftirfarandi kóða áður en þú vistar header.php skrána:

Ofangreint wp_head merki dregur inn sniðmát og JavaScript skrár sem krafist er af viðbætunum þínum. Ef þú sleppir þessu pínulitla kóða, gætu viðbótin þín ekki virkað eins og þú vilt. Með það úr vegi, við skulum bæta blaðatitlum við WordPress þemað með því að nota – enn og aftur – bloginfo merkið. Bætið eftirfarandi kóða við í header.php skránni:

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

Fyrsta merkið wp_title bætir við titli síðunnar eða færslunnar og annað merkið bloginfo („nafn“)) bætir bloggheiti þínu við. Nú þegar WordPress þemað þitt er með blaðatitlum, hvernig væri að búa til skjámynd fyrir þemað okkar, pakka þemað aftur og taka hvíld?

Að búa til skjámynd fyrir þemað þitt

Þegar þú hlóðst upp prófþema þínu í fyrsta skipti, verður þú að hafa tekið eftir því að það vantaði skjámynd í WordPress þemaplötunni. Það leit illa út, sérstaklega ef þú átt önnur þemu með litríkum skjámyndum. En hafðu ekki áhyggjur, það er mjög auðvelt að búa til skjámynd fyrir þemað þitt. Búðu bara til mynd með uppáhalds myndritlinum þínum (td Adobe Photoshop) eða taktu skjámynd af þema þínu. Gakktu úr skugga um að myndin þín sé 600px breið og 450px há. Vistaðu myndina sem screenshot.png í þemamöppunni þinni. Vistaðu allar breytingar, þjappaðu þemamöppunni þinni í ZIP skjalasafn. Settu þemað upp og virkjaðu það til að sjá nýju breytingarnar þínar ��

Niðurstaða

Ég vil trúa því að þessi önnur kennsla bauð þér dýpri innsýn í að búa til WordPress þema úr stöðluðum HTML. Á næstunni mun ég kynna þér aðra þætti í WordPress þema en á meðan hef ég undirbúið eftirfarandi úrræði bara fyrir þig:

Gleðilegt að skapa!

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