Tänään opimme, missä ja kuinka lisätä koodia teemamme mallien ulkopuolelle. Teemme tämän lisäämällä teematiedoston functions.php. Matkan varrella opimme myös lisäämään tyylisivut ja skriptit oikealla tavalla.
Teeman functions.php-tiedosto
Teema tarvitsee jonnekin sijoittaa koodin, joka ei ole osa malleista. Kaikkiin teemoihin on aina lisättävä joukko koodia toiminnallisuuden hoitamiseksi. Esimerkiksi WordPressin kuvien ottaminen käyttöön (huomasitko sen puuttuvan?), tuki valikoille, widgeteille, tyylisivujen ja komentosarjojen lisääminen (oikea tapa) ja paljon muuta.
Tuo tiedosto on functions.php. WordPress lataa automaattisesti ja aina tämän tiedoston, jos se on teemassasi. Se on aina ladattu sekä adminissa että käyttöliittymässä.
Funktio.php-tiedoston lisääminen teemaamme
Luodaan uusi, tyhjä tiedosto juuriteemakansioomme ja nimetään se functions.php.
Aloita kyseisessä tiedostossa välittömästi avaavalla PHP-tunnisteella (<?php) äläkä sisällytä lopputunnistetta. Tiedosto functions.phpon tarkoitettu PHP-koodille, ei HTML:lle. Teemasi voi rikkoutua (tai jopa vain toimia oudosti), jos sinulla on merkkejä tai rivinvaihtoja PHP-tunnisteiden ulkopuolella tässä tiedostossa. Voit luonnollisesti murtautua pois PHP-tageista HTML-tulostusta varten, mutta se on tehtävä funktioiden tai koukkujen sisällä. Selitän tämän kokeella.
Testataan tätä tiedostoa nähdäksesi kuinka se toimii. Kirjoita sisälle functions.phpkaiku jostain huijaustekstistä:
Päivitä käyttöliittymäsi. Tyhjennysteksti tulee näkyviin. Mutta jos tarkastelet tai tarkastelet HTML-lähdettä, näet, että teksti tulee näkyviin ennen avaamista <html>. Tämä tekee HTML:stä täysin virheellisen!
Siirry hallintapaneeliin ja paina Päivitä. Se tekee saman asian myös siellä (se saattaa olla piilotettu hallintapalkin taakse, mutta se on siellä HTML-koodissa).
Kuten näet, mikä tahansa koodi functions.phplatautuu ennen mitään muuta malleissamme. Siksi pääsääntöisesti kaikkien tulosteiden (HTML PHP-tunnisteiden ulkopuolella tai echo) on oltava funktioiden sisällä, jotka suoritetaan oikeaan aikaan ja jotka on yleensä kytketty toimiin tai suodattimiin.
Muista, kun opimme ja lisäsimme koukut WordPress-teeman aloittelijoille tarkoitetun opetusohjelman osassa 3 . Tapa, jolla käytämme koodia koukussa, on liittää funktio koukkuun add_action(). Testataan jotain muuta; tehdään funktio koukussa koukkuun, jonka olemme jo määrittäneet malleissamme; wp_footer.
functions.phpPoista -kohdassa echolisäsimme testitarkoituksiin ja kirjoita sen sijaan:
Paina refresh käyttöliittymässä ja katso, että merkkijono näkyy kauniisti täsmälleen määrittämässäsi paikassa wp_footerjuuri ennen sulkemista </body>. Huomaa myös, että tämä ei toista mitään adminissa. Tämä johtuu siitä, että wp_footerse on koukku, jota käytetään vain käyttöliittymässä.
Tehdään ensimmäiset kunnolliset toimenpiteemme sisään functions.php!
Huomautus: PHP:ssä ei voi olla kahta funktiota, joilla on täsmälleen sama nimi. Se sisältää funktioiden nimet WordPressissä, teemasi ja kaikki aktivoidut laajennukset! Noudata parhaita käytäntöjä ja liitä funktioiden eteen teemasi, kuten yllä olevassa esimerkissä: " wptutorial_<function_name>". Tämä vähentää huomattavasti WordPressiä kaatumasta kohtalokkaasti identtisten toimintonimien vuoksi.
Huomautus 2: Ei ole väliä, missä järjestyksessä lisäät toimintoja ja koukkuja functions.php. Muista, että koukut ajetaan joka tapauksessa tietyissä tarkastuspisteissä, ei siinä järjestyksessä, missä ne ovat functions.php. Ainoa poikkeus on, jos sisällytät muita tiedostoja tai alustat omia luokkaasi.
Oikea tapa lisätä tyylejä ja komentosarjoja vs. väärä tapa
Jotkut teistä saattavat muistaa osasta 3, johon lisäsimme wp_headkoukun meidän header.php. Kun teimme tämän, WordPress pystyi lataamaan tyylinsä ja komentosarjansa, mukaan lukien hallintapalkin. Saatat ajatella, että tyylisivujemme lisäämiseksi meidän on liitettävä funktio wp_headja tulostettava <link>tyylisivulle… Yleensä olet oikeassa!
WordPressissä on kuitenkin erityinen tapa lisätä komentosarjoja ja tyylejä. Tämä on tarkoitettu pääasiassa latausjärjestyksen hallintaan ja päällekkäisten kirjastojen lataamisen välttämiseksi. Esimerkiksi sinä teeman kirjoittajana saatat haluta lisätä Javascriptejä, jotka ovat riippuvaisia jQuerykirjastosta. Sitten sinun on varmistettava, että se jQueryladataan ennen tiedostosi. Mutta WordPressillä ja kaikilla laajennuksilla on sama tarve varmistaa, että jQueryne ladataan myös ennen niiden komentosarjoja. Et voi ladata jQuerykirjastoa useita kertoja, koska se aiheuttaa ongelmia. Joten WordPressillä on tapa hallita, missä järjestyksessä komentosarjat ja tyylisivut ladataan.
Tyylisivujen lisääminen (oikea tapa)
Tyylien ja javascriptien lisäämiseen käytämme koukkua nimeltä wp_enqueue_scripts. Kyllä, käytät tätä koukkua myös tyyleihin sen nimestä huolimatta. Komentosarjojen ja tyylien lisäämistä kutsutaan "jonoamiseksi" – kuten laitetaan jonoon. Jonotetaan (lisätään) tyylitaulukkomme käyttämällä funktiota wp_enqueue_style :functions.php
Funktiolla on wp_enqueue_stylevähintään kaksi parametria. Ensimmäinen on yksilöllinen nimi (kahva tai "slug ID") ja toinen tiedoston sijainti. Kahvan on oltava yksilöllinen, koska tätä tunnistetta WordPress käyttää määrittääkseen, onko olemassa kaksoiskappaleita.
Mitä tulee polun palauttamiseen teemaasi, käytettävissä on paljon toimintoja. Yllä käytin get_stylesheet_directory_uri()joka palauttaa URL-osoitteen teemakansioosi, ja sitten liitin loput polusta tyylitaulukkoomme.
PS: WordPress tarjoaa erillisen toiminnon koko URL-osoitteen palauttamiseksi teemasi style.css: get_stylesheet_uri(). Käytin toista yllä olevaa toimintoa, koska se on hyödyllisempää tutustua. Käytät sitä kaikille muille tiedostoille, jotka sinun täytyy asettaa jonoon.
Funktio wp_enqueue_stylehyväksyy hyödyllisempiä parametreja, kuten riippuvuudet (jotka muut css-tiedostot on ladattava ennen) ja versionumero (hyödyllinen välimuistiin tallentamiseen).
Päivitä käyttöliittymäsi ja tarkista, että tyylisivusi on ladattu <head>tagiin!
Jos olet yksi niistä, jotka haluavat tehdä teemastasi kauniimman koodauksen aikana, tässä on tilaisuutesi. Kehotan sinua aloittamaan HTML-koodin, luokkien ja kääreiden määrittelyn ja lisäämään tyyliä style.css. Lisäämme lisää sisältöä, joka vaatii muotoilua, kun etenemme tässä opetusohjelmasarjassa.
Skriptien lisääminen (oikea tapa)
Katsotaanpa, kuinka lisäämme javascriptit teemaomme. Se tehdään samalla koukulla (joten voit laittaa kaiken yhden toiminnon sisään). Mutta skripteille käytämme hieman erilaista toimintoa.
Käytä komentosarjan jonoon wp_enqueue_script(). Parametrit ovat samat kuin wp_enqueue_style(). Ensimmäinen on ainutlaatuinen kahva ja toinen on polku komentosarjaan. Kolmas (valinnainen) on joukko riippuvuuksia. Neljänneksi (valinnaiseksi) parametriksi asetat versionumeron. Ja lopuksi viidenneksi (valinnainen) määrität, ladataanko skripti <head>-tunnisteeseen vai -tunnisteen loppuun </body>.
WordPress sisältää jo suuren valikoiman kirjastoja. Niitä ei aina ole ladattu, mutta niitä on saatavilla tarvittaessa. Jos haluat lisätä yleisen kirjastoskriptin, tarkista ensin, onko WordPressillä jo se. Esimerkkejä ovat jQuery, kaikki jQueryn käyttöliittymämoduulit, alaviiva ja selkäranka.
Jos lisäät jonkin WordPressin mukana tulleista skripteistä riippuvuudeksi, sinun ei tarvitse asettaa kyseistä komentosarjaa jonoon! Tehdään tämä käytännössä.
Luo kansio assetsja sen sisällä alikansio jsteemakansioomme ja lisää sitten uusi tyhjä main.jstiedosto. Oletetaan, että tämä komentosarja vaatii jQuerykirjaston, joten asetamme sen riippuvuudeksi. Tiedämme, että WordPressin mukana tulee jQuerynippuja ja sen kahva on jquery. Laitamme skriptimme jonoon näin:
Jos päivität käyttöliittymän ja tarkistat lähdekoodin, sinun pitäisi nähdä, että komentosarjasi main.json lisätty, mutta myös jQuerykirjasto on ladattu. Ja jQueryse ladataan ennen tiedostoasi!
Olet nyt oppinut lisäämään tyylejä ja komentosarjoja. Lisää tiedostoja lisäämällä wp_enqueue_style()tai wp_enqueue_script()jokaiselle uudelle tiedostolle.