Tämä WordPress-teeman opetusohjelman aloittelijoille oppitunti opettaa sinulle, kuinka voit jäsentää teeman päärakennuspalikoita ja aloittaa mallien luomisen. Aloitamme HTML-tulosteen luomisen ja rakennuspalikoiden sisällyttämisen teemamme malleihin. Edellisessä vaiheessa määritimme WordPress-teeman vähimmäismäärän ja aktivoimme sen. Mutta tällä hetkellä se ei toimi kovinkaan paljon, eikä se edes sisällä kelvollista HTML-koodia verkkosivulle. Korjataan se.
Ylä- ja alatunnisteen (ja sivupalkin) rakennuspalikoita
Mallitiedostoissamme tarvitsemme kelvollisen HTML:n. Voisimme kirjoittaa täydellisen HTML-rakenteen (alkaen kirjaimella <html>, <head>ja koko <body>) kielellä index.php, mutta tästä tulee epäkäytännöllistä, kun ylläpidetään useita mallitiedostoja teemassasi. Kuvittele, että olet luonut joukon malleja ja huomaa sitten, että tarvitset pienen muutoksen otsikkoosaan. sinun on sitten muokattava kaikkia malleja, jotta ne pysyvät johdonmukaisina. Tämä ei ole älykästä.
Ratkaisu on jakaa koko HTML-rakenne järkeviin osiin; rakennuspalikoita. Jokainen lohko on omassa tiedostossaan, ja aina kun tarvitsemme niitä malliin, sisällytämme ne. Yleisimmät ja järkevimmät lohkot ovat yksi ylätunnisteelle, yksi alatunnisteelle ja yksi sisällölle, mutta jos teemassasi on sivupalkki, myös sivupalkin tulisi olla erillinen rakennus.
Ne teistä, jotka tuntevat PHP:n paremmin, tuntevat todennäköisesti menetelmät include()tai require(). Teemme juuri näin, mutta käytämme WordPressin toimintoja muiden tiedostojen sisällyttämiseen, koska niillä on lisäetuja.
Tällä oppitunnilla luomme ylätunnisteen, alatunnisteen ja sivupalkin rakennuspalikoihin. Sivupalkit ovat kuitenkin vähentyneet verkkosivuilla, mutta otamme silti käyttöön oikean sivupalkin teemassamme. Nämä kolme rakennusosaa ovat yleinen käytäntö kaikissa WordPress-teemoissa – ja se on itse asiassa niin yleistä, että WordPress tarjoaa automaation näihin kolmeen asiaan.
Ylä-, alatunniste- ja sivupalkkimallien luominen
Luodaan uusi tyhjä tiedosto nimeltä header.phpteemakansioomme. Lisäämme toistaiseksi hyvin perus-HTML-koodia (älä huoli, lisäämme oikeaa HTML-koodia myöhemmin).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A White Pixel Theme</title>
</head>
<body>Luo uusi tiedosto nimeltä footer.phpteemahakemistosi. Tarvitsemme (toistaiseksi) tässä tiedostossa vain HTML-rakenteen sulkemisen.
</body>
</html>Ja lopuksi luo uusi tyhjä tiedosto nimeltä sidebar.php. Lisäämme <aside>sisään vain HTML-tunnisteen.
<aside class="sidebar">
</aside>Mukaan lukien rakennuspalikat
Palataan index.phptiedostoomme. Meidän tarvitsee nyt vain kertoa WordPressille, mihin haluamme sisällyttää ylä- ja alatunnistetiedoston. Ilmeisesti haluamme ladata otsikon tämän tiedoston alkuun ja alatunnisteen aivan loppuun.
WordPress tarjoaa yksinkertaisia toimintoja näiden rakennuspalikoiden sisällyttämiseen; get_header()ja get_footer()vastaavasti ylä- ja alatunnistetiedostolle. Aika intuitiivista eikö? Lisätään ne index.php-tiedostoomme ja katsotaan mitä tapahtuu.
<?php get_header(); ?>
Hello :)
<?php get_footer(); ?>Päivitä käyttöliittymäsi ja tarkasta tai tarkastele HTML-lähdettä nähdäksesi, että olemme yhdistäneet useita rakennuspalikoita täydelliseksi HTML-rakenteeksi.
Nyt voit vapaasti muokata sisällön index.phpylä- ja alatunnisteesta riippumatta!
Otetaan mukaan myös sivupalkki. Muista, että teemassasi kannattaa harkita tapauksia ja malleja, joissa et halua sivupalkkia, esimerkiksi etusivulle.
Sivupalkin sisällyttäminen on yhtä helppoa kuin ylä- ja alatunniste; tätä varten käytämme get_sidebar(). Lisätään se index.php:hen juuri ennen alatunnisteen saamista.
<?php get_header(); ?>
Hello :)
<?php get_sidebar(); ?>
<?php get_footer(); ?>Päivitä ja sinun pitäisi nähdä HTML-lähdekoodi, mukaan lukien meidän <aside>. Älä huoli, myöhemmässä vaiheessa opimme muuttamaan sen todelliseksi sivupalkkialueeksi, johon voit sijoittaa widgetejä.
Teemamme on tällä hetkellä melko staattinen. Tämän WordPress-teeman opetussarjan seuraavalla oppitunnilla alamme vihdoin sukeltaa kunnolla WordPressin toimintoihin, jotta voimme ladata sisältöä ja tietoja WordPressistä dynaamisesti malleihimme.