WordPressi teemaõpetus algajatele – 2. osa: mallid
See algajatele mõeldud WordPressi teemaõpetuse õppetund õpetab teile, kuidas struktureerida teema peamisi ehitusplokke ja alustada mallide loomist. Hakkame looma HTML-väljundit ja seda, kuidas lisada ehitusplokke meie teema mallidesse. Eelmises etapis seadistasime WordPressi teema miinimumi ja aktiveerisime selle. Kuid praeguse seisuga ei tööta see kuigi palju ega sisalda isegi veebilehe jaoks kehtivat HTML-i. Teeme selle korda.
Päise ja jaluse (ja külgriba) ehitusplokid
Meie mallifailides vajame kehtivat HTML-i. Võiksime kirjutada täieliku HTML-i struktuuri (alates <html>
, <head>
ja täis <body>
) keeles index.php
, kuid see muutub ebapraktiliseks, kui oma teemas säilitate mitu mallifaili. Kujutage ette, et olete loonud hulga malle ja mõistate, et vajate päise osas väikest muudatust; siis peate muutma kõiki malle, et need jääksid järjepidevaks. See pole tark.
Lahenduseks on kogu HTML-i struktuuri jagamine mõistlikeks osadeks; ehituskivid. Iga plokk asub oma failis ja kui me neid mallis vajame, lisame need. Kõige tavalisemad ja mõistlikumad plokid on üks päise, üks jaluse ja üks sisu jaoks, kuid kui teie teemal on külgriba, peaks külgriba olema ka eraldi hoone.
Need, kes on PHP-ga rohkem tuttavad, tunnevad tõenäoliselt meetodeid include()
või require()
. Täpselt seda me teemegi, kuid kasutame WordPressi funktsioone muude failide kaasamiseks, kuna nendega kaasnevad täiendavad eelised.
Selles õppetükis loome ehitusplokkidena päise, jaluse ja külgriba. Külgribad on aga veebilehtedel üha harvemaks muutunud, kuid rakendame oma teemas siiski parempoolset külgriba. Need kolm ehitusplokki on kõigi WordPressi teemade puhul levinud praktika – ja see on tegelikult nii tavaline, et WordPress pakub nende kolme asja jaoks automatiseerimist.
Päise, jaluse ja külgriba mallide loomine
Loome uue tühja faili nimega header.php
meie teemakausta. Lisame praegu väga lihtsa HTML-i (ärge muretsege, hiljem lisame korralikuma HTML-i).
Looge oma teemakataloogis uus fail footer.php
. Kõik, mida me vajame (praegu) selles failis, on meie HTML-i struktuuri sulgemine.
Ja lõpuks looge uus tühi fail nimega sidebar.php
. Lisame <aside>
sisse ainult HTML-märgendi.
Sealhulgas ehitusplokid
Tuleme tagasi oma index.php
faili juurde. Kõik, mida peame nüüd tegema, on WordPressile ütlema, kuhu tahame päise ja jaluse faili lisada. Ilmselgelt tahame laadida päise selle faili alguses ja jaluse selle faili lõpus.
WordPress pakub nende ehitusplokkide kaasamiseks lihtsaid funktsioone; get_header()
ja get_footer()
vastavalt päise ja jaluse faili jaoks. Päris intuitiivne eks? Lisame need meie index.php-sse ja vaatame, mis juhtub.
Värskendage oma kasutajaliidest ja kontrollige või vaadake HTML-i allikat, et näha, et oleme ühendanud mitu ehitusplokki tervikliku HTML-i struktuuri loomiseks.
Nüüd saate sisu index.php
päisest ja jalusest sõltumatult redigeerida!
Lisame ka külgriba. Pidage meeles, et võiksite oma teema puhul kaaluda juhtumeid ja malle, kus te külgriba ei soovi, näiteks esileht.
Külgriba kaasamine on sama lihtne kui päis ja jalus; selleks kasutame get_sidebar()
. Lisame selle saidile index.php vahetult enne jaluse hankimist.
Värskendage ja peaksite nägema HTML-i allikat, sealhulgas meie <aside>
. Ärge muretsege, hilisemas etapis õpime, kuidas muuta see tegelikuks külgribaalaks, kuhu saate vidinaid paigutada.
Meie teema on praegu üsna staatiline. Selle WordPressi teemaõpetuste seeria järgmises õppetükis hakkame lõpuks korralikult sukelduma WordPressi funktsioonidesse, et laadida WordPressi sisu ja teavet dünaamiliselt oma mallidesse.