WordPressi teemaõpetus algajatele – 6. osa: teema funktsioonid.php
Täna õpime, kus ja kuidas lisada koodi väljaspool meie teema malle. Teeme seda teema functions.phpfaili lisamisega. Teel õpime ka seda, kuidas stiililehti ja skripte õigesti lisada.
Teema funktsioonid.php fail
Teema peab kuhugi paigutama koodi, mis ei ole mallide osa. Alati on hulk koodi, mida kõik teemad peavad funktsionaalsuse kasutamiseks lisama. Näiteks WordPressi esiletõstetud piltide funktsiooni lubamine (kas märkasite, et see puudub?), menüüde, vidinate tugi, stiilitabelite ja skriptide lisamine (õigel viisil) ja palju muud.
See fail on functions.php. WordPress laadib selle faili automaatselt ja alati, kui see on teie teemas olemas. See on alati laaditud nii administraatorisse kui ka kasutajaliidesesse.
Funktsioonide.php faili lisamine meie teemasse
Loome oma juurteema kaustas uue tühja faili ja paneme sellele nimeks functions.php.
Selles failis alustage kohe PHP-i avamärgendiga (<?php) ja ärge lisage lõpumärgendit. Fail on mõeldud functions.phpPHP-koodi, mitte HTML-i jaoks. Teie teema võib puruneda (või isegi mõjuda imelikult), kui selles failis on märke või reavahetusi väljaspool PHP-silte. Ilmselgelt saate HTML-i väljastamiseks PHP-märgenditest välja murda, kuid seda tuleb teha funktsioonide või konksude sees. Lubage mul selgitada seda katsega.
Testime seda faili, et näha, kuidas see töötab. Kirjutage sisse functions.phpkaja mõnele näilikule tekstile:
Värskendage oma esiosa. Ilmub näiv tekst. Kui aga uurite või vaatate HTML-i allikat, näete, et tekst kuvatakse enne <html>. See muudab täiesti kehtetu HTML-i!
Minge oma administraatoripaneelile ja klõpsake nuppu Värskenda. See teeb sama asja ka seal (see võib olla administraatoririba taha peidetud, kuid see on seal HTML-is).
Nagu näete, functions.phplaadib teie mis tahes kood meie mallides enne midagi muud. Seetõttu peavad reeglina kõik väljundid (HTML väljaspool PHP-silte või echo) olema õigel ajal käivitatavate funktsioonide sees, mis on tavaliselt seotud toimingute või filtritega.
Tuletage meelde, kui saime WordPressi teemaõpetuse algajatele 3 osas teada ja lisasime konksud. Viis, kuidas me konksul koodi käivitame, on konksule funktsiooni kinnitamine nupuga add_action(). Testime midagi muud; teeme funktsiooni konksuga konksuga, mille oleme oma mallides juba määratlenud; wp_footer.
Väljas functions.phpEemaldage echolisasime testimise eesmärgil ja kirjutage selle asemel:
Vajutage esiotsas refresh ja vaadake, et string ilmuks täpselt teie määratud kohas wp_footer, vahetult enne sulgemist </body>. Samuti pange tähele, et see ei kaja administraatoris midagi. Seda seetõttu wp_footer, et konks, mida juhitakse ainult esiservas.
Teeme oma esimesed korralikud toimingud aastal functions.php!
Märkus: PHP-s ei ole võimalik omada kahte täpselt sama nimega funktsiooni. See hõlmab funktsioonide nimesid WordPressis, teie teemat ja kõiki aktiveeritud pistikprogramme! Järgige parimaid tavasid ja lisage oma funktsioonide ette oma teema, nagu ülaltoodud näites: " wptutorial_<function_name>". See vähendab oluliselt WordPressi surmavat kokkujooksmist identsete funktsioonide nimede tõttu.
Märkus 2. Pole vahet, millises järjekorras funktsioone ja konkse omale lisate functions.php. Pidage meeles, et konksud jooksevad nagunii teatud kontrollpunktides, mitte nende asukohas functions.php. Ainus erand on see, kui kaasate muid faile või lähtestate oma klasse.
Õige viis stiilide ja skriptide lisamiseks vs vale viis
Mõned teist ehk mäletavad 3 osast, kus lisasime wp_headkonksu oma header.php. Pärast seda, kui me seda tegime, suutis WordPress laadida oma stiilid ja skriptid, sealhulgas administraatoririba. Võib-olla arvate, et laaditabelite lisamiseks peame laaditabeli külge ühendama funktsiooni wp_headja väljastama selle <link>… Tavaliselt on teil õigus!
Kuid WordPressis on skriptide ja stiilide lisamiseks spetsiaalne viis. Seda peamiselt laadimisjärjestuse haldamiseks ja dubleerivate teekide laadimise vältimiseks. Näiteks võite teema autorina soovida lisada jQueryteegist sõltuvaid Javascripte. Seejärel peate veenduma, et see jQuerylaaditakse enne faile. Kuid WordPressil ja kõigil pistikprogrammidel on sama vajadus, et veenduda, et need jQuerylaaditakse enne nende skripte. Te ei saa teeki mitu korda laadida, jQuerykuna see põhjustab probleeme. Seega on WordPressil võimalus hallata, millises järjekorras skripte ja laaditabeleid laaditakse.
Stiilitabelite lisamine (õigel viisil)
Mis tahes stiilide ja javascriptide lisamiseks kasutame konksu nimega wp_enqueue_scripts. Jah, te kasutate seda konksu ka stiilide jaoks, hoolimata selle nimest. Skriptide ja stiilide lisamist nimetatakse "järjekorraks" – nagu järjekorda panemine. Paneme oma laaditabeli järjekorda (lisagem), kasutades funktsiooni wp_enqueue_style meie functions.php:
Funktsioon wp_enqueue_stylevõtab vähemalt kaks parameetrit. Esimene on kordumatu nimi (käepide või "nälkja ID") ja teine faili asukoht. Käepide peab olema kordumatu, kuna seda identifikaatorit kasutab WordPress duplikaatide tuvastamiseks.
Teema tagasipöördumiseks on saadaval palju funktsioone. Eespool kasutasin seda get_stylesheet_directory_uri(), mis tagastab teie teemakausta URL-i, ja seejärel lisasin ülejäänud tee meie stiililehele.
PS: WordPress pakub eraldi funktsiooni täieliku URL-i tagastamiseks teie teema style.css: get_stylesheet_uri(). Kasutasin teist ülaltoodud funktsiooni, kuna sellega on kasulikum tutvuda. Kasutate seda kõigi muude failide jaoks, mille peate järjekorda panema.
Funktsioon wp_enqueue_styleaktsepteerib rohkem kasulikke parameetreid, nagu sõltuvused (millised teised css-failid tuleb enne laadida) ja versiooninumber (kasulik vahemällu salvestamiseks).
Värskendage oma kasutajaliidest ja veenduge, et teie stiilileht on <head>märgendisse laaditud!
Kui olete üks neist, kes soovib oma teemat kodeerimise ajal ilusamaks muuta, siis siin on teie võimalus. Soovitan teil alustada oma HTML-i, klasside ja ümbriste määratlemist ning lisada oma style.css. Lisame selle õpetuste seeria käigus rohkem sisu, mis vajab stiili.
Skriptide lisamine (õige viis)
Vaatame, kuidas me oma teemasse JavaScripti lisame. Seda tehakse sama konksu abil (nii et saate selle kõik ühe funktsiooni sisse panna). Kuid skriptide jaoks kasutame veidi teistsugust funktsiooni.
Skripti järjekorda panemiseks kasutage wp_enqueue_script(). Parameetrid on samad, mis wp_enqueue_style(). Esimene on kordumatu käepide ja teine on skripti tee. Kolmas (valikuline) on sõltuvuste massiiv. Neljanda (valikulise) parameetrina määrate versiooninumbri. Ja lõpuks viiendaks (valikuline) määrate, kas skript tuleks laadida <head>sildis või märgendi lõpus või mitte </body>.
WordPressiga on juba kaasas suur hulk teeke. Need pole alati kõik laaditud, kuid vajaduse korral saadaval. Kui soovite lisada tavalise teegi skripti, kontrollige esmalt, kas WordPressil on see juba olemas. Näiteks jQuery, kõik jQuery kasutajaliidese moodulid, allkriips ja selgroog.
Kui lisate sõltuvusena ühe WordPressi kaasatud skriptidest, ei pea te seda skripti järjekorda panema! Teeme seda praktikas.
Looge meie teemakaustas kaust assetsja selle sees alamkaust jsning seejärel lisage uus tühi main.jsfail. Oletame, et see skript nõuab jQueryteeki, seega määrasime selle sõltuvuseks. Teame, et WordPressiga on kaasas jQuerypaketid ja selle käepide on jquery. Paneme oma skripti järjekorda järgmiselt:
Kui värskendate esiserva ja kontrollite lähtekoodi, peaksite nägema, et teie skript main.json lisatud, aga ka see jQueryteek on laaditud. Ja jQuerylaaditakse enne teie faili!
Nüüd olete õppinud stiile ja skripte lisama. Rohkemate failide lisamiseks lisage iga uue faili jaoks wp_enqueue_style()või .wp_enqueue_script()