Tällä WordPress-teeman opetusohjelman aloittelijoille oppitunnilla opimme WordPressin koukuista ja lisäämme teemaamme muutamia koukkuja, joita tarvitaan, jotta teema toimisi kunnolla WordPressin ja laajennusten kanssa. Aloitamme myös pääsyn WordPressin dynaamiseen sisältöön otsikossamme, esimerkiksi saamaan automaattisesti nykyisen sivun otsikon.
Ensin meidän on opittava hieman WordPressin koukuista. Koukut ovat ydintoiminto, johon sinun on tutustuttava. En ole fani siitä, että näytät vain kokonaisen joukon koodia, jossa sinun täytyy kopioida + liittää tietämättä, mitä se todella tekee. Jos seuraat tätä opetusohjelmaa, haluat oppia tämän kunnolla, eikö niin?
Älä huoli, pidän sen toistaiseksi lyhyenä. Opimme näistä lisää myöhemmin tässä opetusohjelmassa.
Koukut WordPressissä
Lyhyesti; Koska WordPress suorittaa kaiken koodin sivun lataamista ja renderöintiä varten, on tiettyjä "tarkistuspisteitä" – joita kutsumme koukuiksi. Näissä pisteissä WordPress antaa kehittäjille mahdollisuuden muokata tai lisätä omaa koodiaan. WordPress on määritellyt joukon "tarkistuspisteitä", joissa, jokaisella on yksilöllinen nimi. Jos tiedät sen nimen, voit lisätä oman koodisi näihin tarkistuspisteisiin. Näin voit helposti käskeä WordPressiä suorittamaan koodisi, kun se saavuttaa kyseisen tarkistuspisteen osana prosessiaan.
Koukkuja on kahdenlaisia; toiminnot ja suodattimet. Toiminnot ovat koodin kohtia, joihin voit lisätä mukautetun koodin, esimerkiksi tulostaa jotain tai tehdä jotain omiin tarkoituksiinsa. Suodattimet ovat koodin kohtia, joissa voit muokata tiettyä muuttujaa ennen sen käyttöä tai tulostamista. Ne ovat hyvin samankaltaisia, mutta suodattimet on liitetty yhteen tiettyyn muuttujaan, mutta toiminnot eivät.
Laajennukset, teemat ja itse WordPress voivat "kiinnittää" koodinsa add_action()toimiin ja add_filter()suodattimiin. Nämä kaksi toimintoa käskevät WordPressin suorittamaan koukussa olevan koodin aina, kun suoritus saavuttaa nämä koukut.
Määrittääksesi koukut, joita käytät do_action()toimiin ja apply_filters()suodattimiin.
Kaikille, jotka ovat kiinnostuneita tietämään lisää, minulla on toinen viesti, jossa käsitellään yksityiskohtaisesti WordPressin koukkuja .
WordPress-teeman tulee sisältää tiettyjä tärkeitä koukkuja (toimintoja). Näiden koukkujen avulla WordPress, laajennukset ja itse teemamme voivat liittyä kriittisiin asioihin ja tehdä niitä. Katsotaanpa niitä kriittisiä koukkuja, jotka meidän on lisättävä.
Teeman ylä- ja alatunnisteen koukut
Kaikissa WordPress-teemoissa on oltava kaksi koukkua malleissa. Yksi toiminto on sijoitettava otsikkoon (<head>tunnisteen sisään) ja toinen alatunnisteeseen (juuri ennen </body>tagin sulkemista). Nämä kaksi koukkua ovat ehdottoman välttämättömiä, jotta WordPress, teemasi ja mikä tahansa laajennus voivat lisätä skriptit ja tyylikoodinsa teemaasi.
Tarvittavat koukut ovat wp_headja wp_footervastaavasti ylä- ja alatunnisteelle.
Normaalisti kun haluamme ajaa koukun, soitamme do_action(<hook name>). Mutta koska nämä kaksi koukkua ovat niin tärkeitä, WordPress on yksinkertaistanut niitä meille asettamalla ne yksinkertaiseen funktiokutsuun. Joten voit käyttää näitä kahta koukkua wp_head()ja wp_footer(). Taustalla nämä kaksi ajavat do_action().
Lisätään nämä kaksi koukkua (funktiokutsuja) ylä- ja alatunnistemalleihimme ja katsotaan mitä tapahtuu.
Napauta päivittämistä käyttöliittymässäsi. Jos olet kirjautunut sisään, sinun pitäisi nyt nähdä WordPressin hallintapalkki! Tämä tarkoittaa, että WordPress voi nyt onnistuneesti lisätä skriptit ja tyylit teemaasi.
Voit tarkistaa HTML-lähteesi ja nähdä, että otsikko sisältää nyt melkoisen määrän koodia. Tämä on koodi, jota et lisännyt teemaasi. Kuten näette, WordPress itse käyttää lisäämiämme koukkuja tehdäkseen omia juttujaan.
Siirrytään eteenpäin koukuista ja aletaan tutkia, kuinka voimme dynaamisesti hakea sisältöä WordPressistä ja tulostaa ne otsikkoon.
Dynaaminen sisältö otsikossa
Käsketään WordPressia asettamaan dynaamisesti asiakirjan otsikko (<title>tunnisteelle). Tätä varten käytämme funktiota, (jossa on muuten suodatin), nimeltä wp_title(). Kuten yllä opimme, koska wp_title()olet suodatin, sinä, WordPress tai laajennukset voit muokata tulosta. Lisäämme tähän suodattimen myöhemmin tässä opetusohjelmassa.
Funktiossa wp_title()on useita argumentteja, joita voit muokata mieleiseksesi, mutta lisään toistaiseksi tyhjän merkkijonon, jotta se näyttää vain sen sivun otsikon, jolla olemme.
Vaihda <title>tagisi header.phptähän:
Innokas olet ehkä huomannut, että etusivulle ei tule otsikkoa. Tämä on tavallista WordPress-käyttäytymistä, jonka korjaamme myöhemmin tässä opetusohjelmassa (teemme tämän suodattimen avulla). Jos vierailet yhdellä viestillä tai sivulla, sinun pitäisi saada viestin otsikko.
WordPressissä on näppärä toiminto, joka luo dynaamisesti joukon luokkia <body>tunnisteelle riippuen siitä, millä sivulla olemme; nimeltä body_class. Päivitä <body>tagi header.phptähän:
Päivitä ja katso kaikki <body>tunnisteeseen lisätyt luokat. Katso eri sivuja (etusivu, single, kategoria). Kaikki nämä luokat ovat erittäin hyödyllisiä muotoiluun ja erilaisten samanlaisten osien erottamiseen. Käytät todennäköisesti joitain näistä CSS:ssäsi.
Hyvien HTML-käytäntöjen noudattamiseksi meidän tulee ilmoittaa myös sivuston kieli HTML:ssä. Tätä varten käytämme WordPress-toimintoa saadaksemme kielen asetuksista; kielen_attribuutit.
Ja lopuksi haluaisin lisätä joitain metatageja ja sellaisia, jotka eivät ole WordPress-kohtaisia, mutta noudattavat yleisiä web-suunnittelukäytäntöjä. Tältä koko header.phptiedosto näyttää:
Tämän opetusohjelman seuraavaa vaihetta varten lähdemme header.phpja sukeltaamme index.phpoppiaksemme hakemaan dynaamisempaa sisältöä, kuten viestejä.