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

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

Selle õpetuse esimeses osas käsitlesime HTML-i malli teisendamise WordPressi teemadeks põhitõdesid. Kui olete pisut uudishimulik, õppisime mõnda asja HTML-i mallide PHP-failidesse jagamise, nende kokku panemise, WordPressi teemade kujundamise ja nimetamise kohta. Tõepoolest, me õppisime palju ja soovite selle teise serveerimise nautimiseks tutvuda mõistetega, mida käsitlesime meie esimeses õpetuses. Tänases postituses võtame asju astme võrra kõrgemale. Katame veel mõned valdkonnad, nii et saate luua täielikult funktsionaalse WordPressi teema. Niisiis, ilma täiendava vaevata, läheme edasi.


Piltide ja JavaScripti failide seadistamine

Kui teil oleks originaalses HTML-mallis pilte (register.html), siis märkasite, et pärast malli tükeldamist PHP-failideks nad enam ei näidanud. Ärge üldse muretsege, see on lihtsalt selline, nagu PHP on. Näiteks kui teil oleks päiseosas logo, näiteks nii …

teie_logo_alt_tekst

… peate koodiga natuke ringi mängima. Kood, mille ma mõne aja pärast avaldan, aitab brauseritel teie logot (või muud pilti) teie kataloogist leida pilte kaust, mis on (või peaks olema) teie teema peakataloogi alamkaust. Niisiis, oma logo kuvamiseks päises jaotises, avage fail header.php ja asendage ülaltoodud kood järgmisega:

teie_logo_alt_tekst

Funktsioon get_template_directory_uri () tagastab teie teemakataloogi URL-i. Niisiis, kui lisate oma logo piltide kausta, haarab kood selle logo.

Kas märkate mingit erinevust? Ilmselt parandab see kood ainult teie logo. Muude piltide parandamiseks peate nende koodid sarnaselt ümber kirjutama. Lihtne herneste värk.

Liigume edasi JavaScripti. Kui teie HTML-i veebisait kasutas JavaScripti, looge kaust nimega js ja pange oma skriptid sinna. Neile saab helistada failis header.php, kasutades järgmist koodi:

Ülaltoodud kood kasutab näide.js illustratsioonina. Ärge unustage seda osa oma JavaScripti faili nimega asendada.

Muidugi, kui loote teema kellelegi teisele, peaksite oma JP-failid laadima koos wp_enqueue_scripts’iga. Checkout AJ postitused JavaScripti lisamiseks WordPressi teemadele lisateabe ja näpunäidete saamiseks.

Mallifailid

Selle õpetuse esimeses osas mainisime nelja põhifailide faili index.php, header.php, külgriba.php ja jalus.php. Mallifailid määravad, kuidas teie veebisaiti veebis kuvatakse. Mallid saavad teavet teie WordPressi MySQL-i andmebaasist ja tõlgivad selle HTML-koodiks, mida kuvatakse veebibrauserites. Teisisõnu on mallifailid WordPressi teemade ehitusplokid. Mallide paremaks mõistmiseks uurime mõistet, mida tuntakse kui mallihierarhia.

Me kasutame analoogiat. Kui külastaja klõpsab kategooria lingil (st lingil kategooriasse), näiteks http://www.sündmused.com/blog/kategooria/te oma-kategooria/, kasutab WordPress mallihierarhiat, et genereerida õige fail (ja sisu) selgitatud allpool:

  • Esiteks otsib WordPress mallifaili, mis vastaks kategooria ID-le
  • Kui kategooria ID on näiteks 2, otsib WordPress mallifaili nimega kategooria 2.php
  • Kui kategooria-2.php pole saadaval, otsib WordPress üldise kategooria mallifaili, näiteks kategooria.php
  • Kui see mallifail pole samuti saadaval, otsib WordPress üldist arhiivimalli, näiteks archive.php
  • Kui üldist arhiivimalli ei eksisteeri, langeb WordPress tagasi peamise mallifaili index.php juurde

Nii töötavad WordPressi mallid ja saate neid faile kasutada oma WordPressi teema kohandamiseks vastavalt teie vajadustele. Muud mallifailid hõlmavad järgmist:

kodu.php või indeks.phpKasutatakse ajaveebi postituste indeksi renderdamiseks
esileht.phpKasutatakse staatiliste lehtede või viimaste postituste renderdamiseks, nagu esilehel kuvatud
single.phpKasutatakse ühe postituse lehe renderdamiseks
üksik- {post-type} .phpKasutatakse kohandatud postitustüüpide renderdamiseks, nt kui postitüüp oli toode, kasutaks WordPress üksust-product.php
leht.phpKasutatakse staatiliste lehtede renderdamiseks
kategooria.php või arhiiv.phpKasutatakse kategooriaarhiivi indeksi renderdamiseks
autor.phpKasutatakse autori renderdamiseks
kuupäev.phpKasutatakse kuupäeva renderdamiseks
otsing.phpKasutatakse otsingutulemuste renderdamiseks
404.phpKasutatakse serveri 404 tõrkelehe renderdamiseks

See on vaid lühike nimekiri, neid on veel palju WordPressi mallid. Mallide teema on suur ja parim viis mallifailidega mängimise õppimiseks on lugeda põhjalikku Teema arendamine raamatukogu WordPressis. Teise võimalusena saate lugeda lühemat WordPressi kodeksi mallide jaotis.

Malli sildid

Nähes, et tutvustasime just mallifaile, on õiglane mainida ainult mõnda või teist mallimärgenditest ja nende rollist WordPressis. WordPress.org väidab, et “… teie ajaveebi mallis kasutatakse mallimärgiseid teabe dünaamiliseks kuvamiseks või ajaveebi muul viisil kohandamiseks, pakkudes tööriistu, mis muudavad selle teie jaoks nii individuaalseks kui ka huvitavaks.”

Meie eelmises õpetuses tutvusite mõne mallimärgendiga, näiteks get_header, get_sidebar, get_footer ja bloginfo. Järgmises jaotises lisame oma äsjaloodud WordPressi teemale paar mallisilti. Eeldan, et olete juba lisanud DOCTYPE deklaratsiooni oma päises.php faili. Kui teil seda pole, siis siin on kood:

DOCTYPE deklaratsioon annab teie HTML-koodile tähenduse. Kui see pole võimalik, muutkem avatavat HTML-silti. Kaasame atribuudi lang, kasutades keele_atribuutide silt meeldib nii:

Ülaltoodud kood loob järgmise:

Kui DOCTYPE deklaratsioon ja keel_atribuuti silt on paigas, on teie teema ülesehitus seadustatud ja brauserid saavad teie koodist aru. Kui loote ajaveebi teemat, on oluline paigutada oma peas linke oma pingback URL-i ja RSS-vooga. Lisage oma päises.php järgmine kood:

Kas märkasite, kuidas me bloginfo silt lisada RSS-voog (‘rss2_url’) ja pingback (‘pingback_url’)? Enne päise.php-faili salvestamist lisage ka järgmine kood:

Ülaltoodud märgend wp_head tõmbab sisse teie pluginate jaoks vajalikud stiililehed ja JavaScripti failid. Kui jätate selle pisikese kooditüki välja, ei pruugi teie pluginad soovitud viisil töötada. Kui see pole võimalik, lisageme oma WordPressi teemale lehepealkirjad, kasutades veel kord bloginfo silti. Lisage oma faili header.php järgmine kood:

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

Esimene silt wp_title lisab teie lehe või postituse pealkirja ja teine ​​silt bloginfo (‘nimi’) lisab teie ajaveebi nime. Nüüd, kui teie WordPressi teemal on lehepealkirjad, kuidas saaksime luua oma teema jaoks ekraanipildi, pakkida teema ümber ja puhata?

Oma teema jaoks ekraanipildi loomine

Kui laadisite testteema esimest korda üles, siis peate kindlasti märkama, et sellel puudus WordPressi teemapaneelil ekraanipilt. See näis üksluine, eriti kui teil oleks muid värviliste ekraanipiltidega teemasid. Kuid ärge muretsege, teema jaoks ekraanipildi loomine on väga lihtne. Looge lihtsalt pilt oma lemmikpildiredaktori abil (nt Adobe Photoshop) või võtke oma teema ekraanipilt. Veenduge, et teie pilt oleks 600 pikslit lai ja 450 pikslit kõrge. Salvestage pilt kujul ekraanipilt.png oma teemakausta. Salvestage kõik muudatused, tihendage teema kaust ZIP-arhiivi. Laadige teema üles ja aktiveerige see, et näha oma uusi muudatusi ��

Järeldus

Tahan uskuda, et see teine ​​õpetus pakkus teile põhjalikumat teavet WordPressi teema loomiseks staatilisest HTML-ist. Lähitulevikus tutvustan teile muid WordPressi nendega seotud aspekte, kuid vahepeal olen teile ette valmistanud järgmised ressursid:

Õnnelik loomine!

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