{"id":233574,"date":"2023-02-17T19:58:00","date_gmt":"2023-02-17T16:58:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233574"},"modified":"2022-11-11T00:25:40","modified_gmt":"2022-11-10T21:25:40","slug":"wordpressi-teemaopetus-algajatele-2-osa-mallid","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/wordpressi-teemaopetus-algajatele-2-osa-mallid\/","title":{"rendered":"WordPressi teema\u00f5petus algajatele \u2013 2. osa: mallid"},"content":{"rendered":"\n

See algajatele m\u00f5eldud WordPressi teema\u00f5petuse \u00f5ppetund \u00f5petab teile, kuidas struktureerida teema peamisi ehitusplokke ja alustada mallide loomist. Hakkame looma HTML-v\u00e4ljundit ja seda, kuidas lisada ehitusplokke meie teema mallidesse. Eelmises etapis<\/a> seadistasime WordPressi teema miinimumi ja aktiveerisime selle. Kuid praeguse seisuga ei t\u00f6\u00f6ta see kuigi palju ega sisalda isegi veebilehe jaoks kehtivat HTML-i. Teeme selle korda.<\/p>\n

P\u00e4ise ja jaluse (ja k\u00fclgriba) ehitusplokid<\/h2>\n

Meie mallifailides vajame kehtivat HTML-i. V\u00f5iksime kirjutada t\u00e4ieliku HTML-i struktuuri (alates <html><\/code>, <head><\/code>ja t\u00e4is <body><\/code>) keeles index.php<\/code>, kuid see muutub ebapraktiliseks, kui oma teemas s\u00e4ilitate mitu mallifaili. Kujutage ette, et olete loonud hulga malle ja m\u00f5istate, et vajate p\u00e4ise osas v\u00e4ikest muudatust; siis peate muutma k\u00f5iki malle, et need j\u00e4\u00e4ksid j\u00e4rjepidevaks. See pole tark.<\/p>\n

\"WordPressi<\/a><\/p>\n

Lahenduseks on kogu HTML-i struktuuri jagamine m\u00f5istlikeks osadeks; ehituskivid. Iga plokk asub oma failis ja kui me neid mallis vajame, lisame need. K\u00f5ige tavalisemad ja m\u00f5istlikumad plokid on \u00fcks p\u00e4ise, \u00fcks jaluse ja \u00fcks sisu jaoks, kuid kui teie teemal on k\u00fclgriba, peaks k\u00fclgriba olema ka eraldi hoone.<\/p>\n

Need, kes on PHP-ga rohkem tuttavad, tunnevad t\u00f5en\u00e4oliselt meetodeid include()<\/code>v\u00f5i require()<\/code>. T\u00e4pselt seda me teemegi, kuid kasutame WordPressi funktsioone muude failide kaasamiseks, kuna nendega kaasnevad t\u00e4iendavad eelised.<\/p>\n

Selles \u00f5ppet\u00fckis loome ehitusplokkidena p\u00e4ise, jaluse ja k\u00fclgriba. K\u00fclgribad on aga veebilehtedel \u00fcha harvemaks muutunud, kuid rakendame oma teemas siiski parempoolset k\u00fclgriba. Need kolm ehitusplokki on k\u00f5igi WordPressi teemade puhul levinud praktika \u2013 ja see on tegelikult nii tavaline, et WordPress pakub nende kolme asja jaoks automatiseerimist.<\/p>\n

P\u00e4ise, jaluse ja k\u00fclgriba mallide loomine<\/h2>\n

Loome uue t\u00fchja faili nimega header.php<\/code>meie teemakausta. Lisame praegu v\u00e4ga lihtsa HTML-i (\u00e4rge muretsege, hiljem lisame korralikuma HTML-i).<\/p>\n

<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=\"utf-8\">\n        <title>A White Pixel Theme<\/title>\n    <\/head>\n<body><\/code><\/pre>\n
Looge oma teemakataloogis uus fail footer.php<\/code>. K\u00f5ik, mida me vajame (praegu) selles failis, on meie HTML-i struktuuri sulgemine.<\/p>\n
    <\/body>\n<\/html><\/code><\/pre>\n
Ja l\u00f5puks looge uus t\u00fchi fail nimega sidebar.php<\/code>. Lisame <aside><\/code>sisse ainult HTML-m\u00e4rgendi.<\/p>\n
<aside class=\"sidebar\">\n<\/aside><\/code><\/pre>\n
Sealhulgas ehitusplokid<\/h2>\n
Tuleme tagasi oma index.php<\/code>faili juurde. K\u00f5ik, mida peame n\u00fc\u00fcd tegema, on WordPressile \u00fctlema, kuhu tahame p\u00e4ise ja jaluse faili lisada. Ilmselgelt tahame laadida p\u00e4ise selle faili alguses ja jaluse selle faili l\u00f5pus.<\/p>\n
WordPress pakub nende ehitusplokkide kaasamiseks lihtsaid funktsioone; get_header()<\/code>ja get_footer()<\/code>vastavalt p\u00e4ise ja jaluse faili jaoks. P\u00e4ris intuitiivne eks? Lisame need meie index.php-sse ja vaatame, mis juhtub.<\/p>\n
<?php get_header(); ?>\nHello :)\n<?php get_footer(); ?><\/code><\/pre>\n
V\u00e4rskendage oma kasutajaliidest ja kontrollige v\u00f5i vaadake HTML-i allikat, et n\u00e4ha, et oleme \u00fchendanud mitu ehitusplokki tervikliku HTML-i struktuuri loomiseks.<\/p>\n
\"WordPressi<\/a><\/p>\n
N\u00fc\u00fcd saate sisu index.php<\/code>p\u00e4isest ja jalusest s\u00f5ltumatult redigeerida!<\/p>\n
Lisame ka k\u00fclgriba. Pidage meeles, et v\u00f5iksite oma teema puhul kaaluda juhtumeid ja malle, kus te k\u00fclgriba ei soovi, n\u00e4iteks esileht.<\/p>\n
K\u00fclgriba kaasamine on sama lihtne kui p\u00e4is ja jalus; selleks kasutame get_sidebar()<\/code>. Lisame selle saidile index.php vahetult enne jaluse hankimist.<\/p>\n
<?php get_header(); ?>\nHello :)\n<?php get_sidebar(); ?>\n<?php get_footer(); ?><\/code><\/pre>\n
V\u00e4rskendage ja peaksite n\u00e4gema HTML-i allikat, sealhulgas meie <aside><\/code>. \u00c4rge muretsege, hilisemas etapis \u00f5pime, kuidas muuta see tegelikuks k\u00fclgribaalaks, kuhu saate vidinaid paigutada.<\/p>\n
Meie teema on praegu \u00fcsna staatiline. Selle WordPressi teema\u00f5petuste seeria j\u00e4rgmises \u00f5ppet\u00fckis<\/a> hakkame l\u00f5puks korralikult sukelduma WordPressi funktsioonidesse, et laadida WordPressi sisu ja teavet d\u00fcnaamiliselt oma mallidesse.<\/p>\n
Kasutatud meetodite dokumentatsioon<\/h2>\n