{"id":233406,"date":"2023-02-13T16:41:00","date_gmt":"2023-02-13T13:41:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233406"},"modified":"2022-11-10T23:31:05","modified_gmt":"2022-11-10T20:31:05","slug":"wordpress-teeman-opetusohjelma-aloittelijoille-osa-6-teeman-funktiot-php","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/wordpress-teeman-opetusohjelma-aloittelijoille-osa-6-teeman-funktiot-php\/","title":{"rendered":"WordPress-teeman opetusohjelma aloittelijoille \u2013 Osa 6: Teeman funktiot.php"},"content":{"rendered":"\n

T\u00e4n\u00e4\u00e4n opimme, miss\u00e4 ja kuinka lis\u00e4t\u00e4 koodia teemamme mallien ulkopuolelle. Teemme t\u00e4m\u00e4n lis\u00e4\u00e4m\u00e4ll\u00e4 teematiedoston functions.php<\/code>. Matkan varrella opimme my\u00f6s lis\u00e4\u00e4m\u00e4\u00e4n tyylisivut ja skriptit oikealla tavalla.<\/p>\n

Teeman functions.php-tiedosto<\/h2>\n

Teema tarvitsee jonnekin sijoittaa koodin, joka ei ole osa malleista. Kaikkiin teemoihin on aina lis\u00e4tt\u00e4v\u00e4 joukko koodia toiminnallisuuden hoitamiseksi. Esimerkiksi WordPressin kuvien ottaminen k\u00e4ytt\u00f6\u00f6n (huomasitko sen puuttuvan?), tuki valikoille, widgeteille, tyylisivujen ja komentosarjojen lis\u00e4\u00e4minen (oikea tapa) ja paljon muuta.<\/p>\n

Tuo tiedosto on functions.php<\/code>. WordPress lataa automaattisesti ja aina t\u00e4m\u00e4n tiedoston, jos se on teemassasi. Se on aina ladattu sek\u00e4 adminissa ett\u00e4 k\u00e4ytt\u00f6liittym\u00e4ss\u00e4.<\/p>\n

Funktio.php-tiedoston lis\u00e4\u00e4minen teemaamme<\/h2>\n

Luodaan uusi, tyhj\u00e4 tiedosto juuriteemakansioomme ja nimet\u00e4\u00e4n se functions.php<\/code>.<\/p>\n

Aloita kyseisess\u00e4 tiedostossa v\u00e4litt\u00f6m\u00e4sti avaavalla PHP-tunnisteella (<?php<\/code>) \u00e4l\u00e4k\u00e4 sis\u00e4llyt\u00e4 lopputunnistetta<\/strong>. Tiedosto functions.php<\/code>on tarkoitettu PHP-koodille, ei HTML:lle. Teemasi voi rikkoutua (tai jopa vain toimia oudosti), jos sinulla on merkkej\u00e4 tai rivinvaihtoja PHP-tunnisteiden ulkopuolella t\u00e4ss\u00e4 tiedostossa. Voit luonnollisesti murtautua pois PHP-tageista HTML-tulostusta varten, mutta se on teht\u00e4v\u00e4 funktioiden tai koukkujen sis\u00e4ll\u00e4. Selit\u00e4n t\u00e4m\u00e4n kokeella.<\/p>\n

Testataan t\u00e4t\u00e4 tiedostoa n\u00e4hd\u00e4ksesi kuinka se toimii. Kirjoita sis\u00e4lle functions.php<\/code>kaiku jostain huijaustekstist\u00e4:<\/p>\n

<?php\necho 'This is an experiment';<\/code><\/pre>\n
P\u00e4ivit\u00e4 k\u00e4ytt\u00f6liittym\u00e4si. Tyhjennysteksti tulee n\u00e4kyviin. Mutta jos tarkastelet tai tarkastelet HTML-l\u00e4hdett\u00e4, n\u00e4et, ett\u00e4 teksti tulee n\u00e4kyviin ennen avaamista <html><\/code>. T\u00e4m\u00e4 tekee HTML:st\u00e4 t\u00e4ysin virheellisen!<\/p>\n
\"WordPress-teeman<\/a><\/p>\n
Siirry hallintapaneeliin ja paina P\u00e4ivit\u00e4. Se tekee saman asian my\u00f6s siell\u00e4 (se saattaa olla piilotettu hallintapalkin taakse, mutta se on siell\u00e4 HTML-koodissa).<\/p>\n
Kuten n\u00e4et, mik\u00e4 tahansa koodi functions.php<\/code>latautuu ennen mit\u00e4\u00e4n muuta malleissamme. Siksi p\u00e4\u00e4s\u00e4\u00e4nt\u00f6isesti kaikkien tulosteiden (HTML PHP-tunnisteiden ulkopuolella tai echo<\/code>) on oltava funktioiden sis\u00e4ll\u00e4, jotka suoritetaan oikeaan aikaan ja jotka on yleens\u00e4 kytketty toimiin tai suodattimiin.<\/p>\n
Muista, kun opimme ja lis\u00e4simme koukut WordPress-teeman aloittelijoille tarkoitetun opetusohjelman osassa 3 .<\/a> Tapa, jolla k\u00e4yt\u00e4mme koodia koukussa, on liitt\u00e4\u00e4 funktio koukkuun add_action()<\/code>. Testataan jotain muuta; tehd\u00e4\u00e4n funktio koukussa koukkuun, jonka olemme jo m\u00e4\u00e4ritt\u00e4neet malleissamme; wp_footer<\/code>.<\/p>\n
functions.php<\/code>Poista -kohdassa echo<\/code>lis\u00e4simme testitarkoituksiin ja kirjoita sen sijaan:<\/p>\n
<?php\nadd_action('wp_footer', 'wptutorial_print_footer');\nfunction wptutorial_print_footer() {\n    echo 'This sentence will appear in footer!';\n}<\/code><\/pre>\n
Paina refresh k\u00e4ytt\u00f6liittym\u00e4ss\u00e4 ja katso, ett\u00e4 merkkijono n\u00e4kyy kauniisti t\u00e4sm\u00e4lleen m\u00e4\u00e4ritt\u00e4m\u00e4ss\u00e4si paikassa wp_footer<\/code>juuri ennen sulkemista <\/body><\/code>. Huomaa my\u00f6s, ett\u00e4 t\u00e4m\u00e4 ei toista mit\u00e4\u00e4n adminissa. T\u00e4m\u00e4 johtuu siit\u00e4, ett\u00e4 wp_footer<\/code>se on koukku, jota k\u00e4ytet\u00e4\u00e4n vain k\u00e4ytt\u00f6liittym\u00e4ss\u00e4.<\/p>\n
Tehd\u00e4\u00e4n ensimm\u00e4iset kunnolliset toimenpiteemme sis\u00e4\u00e4n functions.php<\/code>!<\/p>\n
Huomautus: PHP:ss\u00e4 ei voi olla kahta funktiota, joilla on t\u00e4sm\u00e4lleen sama nimi. Se sis\u00e4lt\u00e4\u00e4 funktioiden nimet WordPressiss\u00e4, teemasi ja kaikki aktivoidut laajennukset! Noudata parhaita k\u00e4yt\u00e4nt\u00f6j\u00e4 ja liit\u00e4 funktioiden eteen teemasi, kuten yll\u00e4 olevassa esimerkiss\u00e4: " wptutorial_<function_name><\/code>". T\u00e4m\u00e4 v\u00e4hent\u00e4\u00e4 huomattavasti WordPressi\u00e4 kaatumasta kohtalokkaasti identtisten toimintonimien vuoksi.<\/p>\n
Huomautus 2: Ei ole v\u00e4li\u00e4, miss\u00e4 j\u00e4rjestyksess\u00e4 lis\u00e4\u00e4t toimintoja ja koukkuja functions.php<\/code>. Muista, ett\u00e4 koukut ajetaan joka tapauksessa tietyiss\u00e4 tarkastuspisteiss\u00e4, ei siin\u00e4 j\u00e4rjestyksess\u00e4, miss\u00e4 ne ovat functions.php<\/code>. Ainoa poikkeus on, jos sis\u00e4llyt\u00e4t muita tiedostoja tai alustat omia luokkaasi.<\/p>\n
Oikea tapa lis\u00e4t\u00e4 tyylej\u00e4 ja komentosarjoja vs. v\u00e4\u00e4r\u00e4 tapa<\/h2>\n
Jotkut teist\u00e4 saattavat muistaa osasta 3<\/a>, johon lis\u00e4simme wp_head<\/code>koukun meid\u00e4n header.php<\/code>. Kun teimme t\u00e4m\u00e4n, WordPress pystyi lataamaan tyylins\u00e4 ja komentosarjansa, mukaan lukien hallintapalkin. Saatat ajatella, ett\u00e4 tyylisivujemme lis\u00e4\u00e4miseksi meid\u00e4n on liitett\u00e4v\u00e4 funktio wp_head<\/code>ja tulostettava <link><\/code>tyylisivulle\u2026 Yleens\u00e4 olet oikeassa!<\/p>\n
WordPressiss\u00e4 on kuitenkin erityinen tapa lis\u00e4t\u00e4 komentosarjoja ja tyylej\u00e4. T\u00e4m\u00e4 on tarkoitettu p\u00e4\u00e4asiassa latausj\u00e4rjestyksen hallintaan ja p\u00e4\u00e4llekk\u00e4isten kirjastojen lataamisen v\u00e4ltt\u00e4miseksi. Esimerkiksi sin\u00e4 teeman kirjoittajana saatat haluta lis\u00e4t\u00e4 Javascriptej\u00e4, jotka ovat riippuvaisia jQuery<\/code>\u200b\u200bkirjastosta. Sitten sinun on varmistettava, ett\u00e4 se jQuery<\/code>ladataan ennen tiedostosi. Mutta WordPressill\u00e4 ja kaikilla laajennuksilla on sama tarve varmistaa, ett\u00e4 jQuery<\/code>ne ladataan my\u00f6s ennen niiden komentosarjoja. Et voi ladata jQuery<\/code>kirjastoa useita kertoja, koska se aiheuttaa ongelmia. Joten WordPressill\u00e4 on tapa hallita, miss\u00e4 j\u00e4rjestyksess\u00e4<\/strong> komentosarjat ja tyylisivut ladataan.<\/p>\n
Tyylisivujen lis\u00e4\u00e4minen (oikea tapa)<\/h2>\n
Tyylien ja javascriptien lis\u00e4\u00e4miseen k\u00e4yt\u00e4mme koukkua nimelt\u00e4 wp_enqueue_scripts<\/code>. Kyll\u00e4, k\u00e4yt\u00e4t t\u00e4t\u00e4 koukkua my\u00f6s tyyleihin sen nimest\u00e4 huolimatta. Komentosarjojen ja tyylien lis\u00e4\u00e4mist\u00e4 kutsutaan "jonoamiseksi" \u2013 kuten laitetaan jonoon. Jonotetaan (lis\u00e4t\u00e4\u00e4n) tyylitaulukkomme k\u00e4ytt\u00e4m\u00e4ll\u00e4 funktiota wp_enqueue_style<\/a> :functions.php<\/code><\/p>\n
<?php\nadd_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');\nfunction wptutorial_enqueue_scripts() {\n    wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'\/style.css');\n}<\/code><\/pre>\n
Funktiolla on wp_enqueue_style<\/code>v\u00e4hint\u00e4\u00e4n kaksi parametria. Ensimm\u00e4inen on yksil\u00f6llinen nimi (kahva tai "slug ID") ja toinen tiedoston sijainti. Kahvan on oltava yksil\u00f6llinen, koska t\u00e4t\u00e4 tunnistetta WordPress k\u00e4ytt\u00e4\u00e4 m\u00e4\u00e4ritt\u00e4\u00e4kseen, onko olemassa kaksoiskappaleita.<\/p>\n
Mit\u00e4 tulee polun palauttamiseen teemaasi, k\u00e4ytett\u00e4viss\u00e4 on paljon toimintoja. Yll\u00e4 k\u00e4ytin get_stylesheet_directory_uri()<\/code>joka palauttaa URL-osoitteen teemakansioosi, ja sitten liitin loput polusta tyylitaulukkoomme.<\/p>\n
PS: WordPress tarjoaa erillisen toiminnon koko URL-osoitteen palauttamiseksi teemasi style.css<\/code>: get_stylesheet_uri()<\/code>. K\u00e4ytin toista yll\u00e4 olevaa toimintoa, koska se on hy\u00f6dyllisemp\u00e4\u00e4 tutustua. K\u00e4yt\u00e4t sit\u00e4 kaikille muille tiedostoille, jotka sinun t\u00e4ytyy asettaa jonoon.<\/p>\n
Funktio wp_enqueue_style<\/code>hyv\u00e4ksyy hy\u00f6dyllisempi\u00e4 parametreja, kuten riippuvuudet (jotka muut css-tiedostot on ladattava ennen) ja versionumero (hy\u00f6dyllinen v\u00e4limuistiin tallentamiseen).<\/p>\n
P\u00e4ivit\u00e4 k\u00e4ytt\u00f6liittym\u00e4si ja tarkista, ett\u00e4 tyylisivusi on ladattu <head><\/code>tagiin!<\/p>\n
Jos olet yksi niist\u00e4, jotka haluavat tehd\u00e4 teemastasi kauniimman koodauksen aikana, t\u00e4ss\u00e4 on tilaisuutesi. Kehotan sinua aloittamaan HTML-koodin, luokkien ja k\u00e4\u00e4reiden m\u00e4\u00e4rittelyn ja lis\u00e4\u00e4m\u00e4\u00e4n tyyli\u00e4 style.css<\/code>. Lis\u00e4\u00e4mme lis\u00e4\u00e4 sis\u00e4lt\u00f6\u00e4, joka vaatii muotoilua, kun etenemme t\u00e4ss\u00e4 opetusohjelmasarjassa.<\/p>\n
Skriptien lis\u00e4\u00e4minen (oikea tapa)<\/h2>\n
Katsotaanpa, kuinka lis\u00e4\u00e4mme javascriptit teemaomme. Se tehd\u00e4\u00e4n samalla koukulla (joten voit laittaa kaiken yhden toiminnon sis\u00e4\u00e4n). Mutta skripteille k\u00e4yt\u00e4mme hieman erilaista toimintoa.<\/p>\n
K\u00e4yt\u00e4 komentosarjan jonoon wp_enqueue_script()<\/code>. Parametrit ovat samat kuin wp_enqueue_style()<\/code>. Ensimm\u00e4inen on ainutlaatuinen kahva ja toinen on polku komentosarjaan. Kolmas (valinnainen) on joukko riippuvuuksia. Nelj\u00e4nneksi (valinnaiseksi) parametriksi asetat versionumeron. Ja lopuksi viidenneksi (valinnainen) m\u00e4\u00e4rit\u00e4t, ladataanko skripti <head><\/code>-tunnisteeseen vai -tunnisteen loppuun <\/body><\/code>.<\/p>\n
WordPress sis\u00e4lt\u00e4\u00e4 jo suuren valikoiman kirjastoja. Niit\u00e4 ei aina ole ladattu, mutta niit\u00e4 on saatavilla tarvittaessa. Jos haluat lis\u00e4t\u00e4 yleisen kirjastoskriptin, tarkista ensin, onko WordPressill\u00e4 jo se<\/a>. Esimerkkej\u00e4 ovat jQuery, kaikki jQueryn k\u00e4ytt\u00f6liittym\u00e4moduulit, alaviiva ja selk\u00e4ranka.<\/p>\n
Jos lis\u00e4\u00e4t jonkin WordPressin mukana tulleista skripteist\u00e4 riippuvuudeksi, sinun ei tarvitse asettaa kyseist\u00e4 komentosarjaa jonoon! Tehd\u00e4\u00e4n t\u00e4m\u00e4 k\u00e4yt\u00e4nn\u00f6ss\u00e4.<\/p>\n
Luo kansio assets<\/code>ja sen sis\u00e4ll\u00e4 alikansio js<\/code>teemakansioomme ja lis\u00e4\u00e4 sitten uusi tyhj\u00e4 main.js<\/code>tiedosto. Oletetaan, ett\u00e4 t\u00e4m\u00e4 komentosarja vaatii jQuery<\/code>kirjaston, joten asetamme sen riippuvuudeksi. Tied\u00e4mme, ett\u00e4 WordPressin mukana tulee jQuery<\/code>nippuja ja sen kahva on jquery<\/code>. Laitamme skriptimme jonoon n\u00e4in:<\/p>\n
<?php\nadd_action('wp_enqueue_scripts', 'wptutorial_enqueue_scripts');\nfunction wptutorial_enqueue_scripts() {\n    wp_enqueue_style('theme-main-style', get_stylesheet_directory_uri().'\/style.css');\n    wp_enqueue_script('theme-main-script', get_stylesheet_directory_uri().'\/assets\/js\/main.js', ['jquery']);\n}<\/code><\/pre>\n
Jos p\u00e4ivit\u00e4t k\u00e4ytt\u00f6liittym\u00e4n ja tarkistat l\u00e4hdekoodin, sinun pit\u00e4isi n\u00e4hd\u00e4, ett\u00e4 komentosarjasi main.js<\/code>on lis\u00e4tty, mutta my\u00f6s jQuery<\/code>kirjasto on ladattu. Ja jQuery<\/code>se ladataan ennen tiedostoasi!<\/p>\n
\"WordPress-teeman<\/a><\/p>\n
Olet nyt oppinut lis\u00e4\u00e4m\u00e4\u00e4n tyylej\u00e4 ja komentosarjoja. Lis\u00e4\u00e4 tiedostoja lis\u00e4\u00e4m\u00e4ll\u00e4 wp_enqueue_style()<\/code>tai wp_enqueue_script()<\/code>jokaiselle uudelle tiedostolle.<\/p>\n
Dokumentaatio k\u00e4ytetyist\u00e4 menetelmist\u00e4<\/h2>\n