Tällä oppitunnilla opit kuinka WordPress lataa sisältöä riippuen siitä, millä sivulla olet, ja teemamallitiedostojen hierarkian mukaan. Opit myös, mitä kelvolliseen teemaan tarvitaan. Ja lopuksi luomme teemamme ja aktivoimme sen.
Teemamallitiedostot
Koneen takana WordPress selvittää, mikä malli ladataan URL-osoitteesi perusteella. Jos WordPress on asennettu verkkotunnukseen "example.com/wordpress/", sinun pitäisi nähdä etusivun malli. Siirryttäessä osoitteeseen "example.com/wordpress/category/news/" saat oletuksena luettelon uutiskategoriaan kuuluvista viesteistä käyttämällä luokkamallia.
WordPress noudattaa hierarkiaa siitä, mitkä mallit ladataan ja minkä mallin se valitsee riippuen siitä, mitä malleja sinulla on teemassasi. Esimerkiksi "example.com/wordpress/category/news" WordPress etsii ensin mallia, joka on luokkaa "uutiset". Jos sitä ei löydy, WordPress etsii luokkatunnukselle ominaista mallia. Jälleen, jos sitä ei löydy, WordPress etsii yleisen luokan mallia. Jos sitä ei löydy, WordPress etsii vielä yleisemmän mallin arkistoja varten. Ja niin edelleen.
WordPress Codex, joka on WordPressin dokumentaatiosivusto, pitää hyödyllisen ja päivitetyn kuvan, joka havainnollistaa teemamallitiedostojen hierarkiaa; https://codex.wordpress.org/File:Template_Hierarchy.png#file
Älä huoli, jos kuva näyttää aluksi liian hämmentävältä! Kun etenemme opetusohjelmassa, huomaat palaamassa tähän kuvaan löytääksesi, mitä malleja haluat ottaa käyttöön teemassasi.
Voit lukea kuvan siirtymällä vasemmalta oikealle. Sen perusteella, millä sivulla olet, mallit ovat hyvin tarkkoja, ja mitä enemmän etenet oikealle puolelle, sitä yleisempiä mallit ovat. Viimeinen varmistus on oikeanpuoleisin; index.php, joka ladataan, jos muita sovitusmalleja ei löydy.
Kaikkien yllä olevassa kuvassa lueteltujen mallitiedostojen on sijaittava teemasi juurikansiossa, ja ne on nimettävä tarkasti ilmoitetulla tavalla. Et voi sijoittaa malleja alikansioihin organisatorisia tarkoituksia varten, koska silloin WordPress ei löydä niitä!
Aloitamme yksinkertaisesta! Tänään luomme vain muutamia tiedostoja, joita WordPress tarvitsee tunnistaakseen sen teemaksi, ja laajennamme sitten sieltä.
WordPress-teeman anatomia
Tarvitset vain kaksi tiedostoa kelvollisen WordPress-teeman luomiseen.
Huomasitko mallihierarkian havainnollistamisessa äärioikeiston; kutsutaan index.php? Tämä on viimeinen varamalli, jos WordPress ei löydä mallia. Se on yksi vaadituista tiedostoista. Toinen tiedosto on tyylitaulukkotiedosto (.css). Siinä ei välttämättä tarvitse olla CSS:ää, mutta sen täytyy sisältää kommenttilohko, joka tarjoaa WordPress-tietoa teemastasi. Nämä kaksi asiaa ovat kaikki mitä tarvitset kelvolliseen WordPress-teemaan.
Luodaan teemamme luomalla nämä kaksi tiedostoa!
Ensimmäisen teemasi luominen
Kaikkien teemojen on oltava jokaisessa erillisessä kansiossa alikansion sisällä /wp-content/themes/. Jos siirryt tähän kansioon tiedostonavigaattorissa, näet todennäköisesti jo muutaman teemakansion täällä; Kaksikymmentäyhdeksäntoista, kaksikymmentäseitsemäntoista jne. Nämä ovat teemoja, jotka sisältyvät WordPressiin oletuksena.
Luo /wp-content/themes/uusi kansio kohteessa. Nimeä se asianmukaisesti (pienet kirjaimet, ei välilyöntejä, ei sama kuin mikään muu kansio). Yleensä kansion nimi on slug-versio teemasi nimestä. Tätä opetusohjelmaa varten annan teemakansiolleni nimen " wptutorial".
Kirjoita teemakansiosi ja luo uusi, tyhjä tiedosto nimeltä index.php. Muokkasin tiedostoa ja lisäsin vain satunnaista tekstiä, jotta näemme helpommin, kun se on käytössä:
Olemme jo puolivälissä! Luodaan toinen vaadittu tiedosto. Luo teemakansioosi uusi, tyhjä tiedosto nimeltä style.css.
Avaa style.csstiedosto ja aloita välittömästi kommenttilohko (/*ja sulje se -painikkeella */). Tämän kommenttilohkon sisällä meidän on noudatettava joitain WordPressin sääntöjä teemamme määrittelemisessä. Vähintään meidän on määritettävä teemamme nimi. Mutta voimme myös lisätä tietoja kirjoittajasta, kotisivun, versionumeron, lisenssitiedot ja paljon muuta. Katso WordPress-dokumentaatio siitä, mitä voit lisätä.
Tässä opetusohjelmassa pidämme sen yksinkertaisena; lisäämme teeman nimen ja kirjoitat oman nimesi tekijäksi. Voit mennä eteenpäin ja käyttää mitä tahansa nimiä, joita haluat, olen kirjoittanut tähän style.css:
/*
Theme Name: A White Pixel Theme
Author: Alex White
*/Tallenna ja sulje tiedosto (tämä opetusohjelma ei kosketa tätä tiedostoa uudelleen), ellet halua kirjoittaa CSS:ää teemaasi varten.
Onnittelut! Olet nyt luonut kelvollisen WordPress-teeman!
Aktivoidaan teemaasi
Siirrytään WordPressin hallintapaneeliin ja siirrytään kohtaan "Ulkoasu > Teemat" ja katsotaan, löydämmekö teemamme sieltä.
Napsauta Aktivoi-painiketta ja siirry sivustollesi. Sinun pitäisi nähdä mitä kirjoitit index.php!
Tätä index.phpmallia käytetään riippumatta siitä, millä sivulla olet. Yritä katsoa yksittäinen viesti, niin näet saman. Teemassa tulisi olla vähintään 5–10 mallia eri sisällön käsittelemiseksi. Älä huoli, me pääsemme perille.
Mahtavaa, meillä on teema! Seuraavalla oppitunnilla alamme itse koodata sitä ja saada sen tekemään asioita.