WordPress-teema on tiedostokokonaisuus, joka määrittää WordPress-sivuston ulkoasun. Teeman asentaminen ja vaihtaminen onnistuu suoraan backendistä. Valmiita (ilmaisia) teemoja voi etsiä suoraan WordPress-hallintapaneelista tai WordPress Theme Directory:sta. Huolimatta valtavasta valikoimasta ilmaisia vaihtoehtoja, teeman rakentamiseen päädytään usein tarpeesta luoda täysin yksilöllinen sivuston ulkoasu ja sitä tukeva toiminnallisuus.

Tämä tutoriaali käy läpi vaiheet teeman luomiseksi käyttäen hyväksi suosittua Bootstrap-frameworkia. Lukijalla on hyvä olla jonkin verran taustaa web-kehityksestä. PHP-ympäristön käyttö ja MySQL-tietokannan luonti on rajattu pois tästä tutoriaalista.

WordPress

5 minuutin asennus

  1. Aloita asentamalla WordPress, lataa paketti WordPress.org-sivulta.
  2. Laita paketin sisältö palvelimelle tai käytä esimerkiksi MAMP (Mac) tai XAMP (Windows)
  3. Luo tarvittava MySQL-tietokanta.
  4. Mene selaimella sen kansion juureen, mihin asensit WordPress-paketin
  5. Seuraa ohjeita

 

WordPress-sisältötyypit

WordPress-perusasennus sisältää neljä erilaista sisältötyyppiä, jotka ovat:

  • artikkelit (posts)
  • sivut
  • kommentit
  • media

Tämä sisältö on muuttuvaa, sivuston ylläpitäjän luomaa materiaalia joka tallennetaan tietokantaan ja esitetään kävijälle erilaisten sivupohjien (template) avulla.

1. Teeman rakenteen luonti

Teeman tiedostot sijaitsevat wp-content/themes/ -kansiossa. Teema sisältää kaikki CSS-, JavaScript-, ja template-tiedostot sekä kuvat ja muun median – älä sekoita näitä tiedostoja WordPress-sisällön kanssa. WordPressissä pyritään erottamaan sisältö, ulkoasu ja toiminnallisuus toisistaan.

Luo kansio teemaa varten wp-content/themes/ -kansioon, nimeä se haluamallasi nimellä. Tämän jälkeen luo kansioon seuraavat tiedostot:

  • style.css
  • header.php
  • footer.php
  • index.php
  • functions.php
  • screenshot.png

screenshot.png -tiedosto näkyy teeman valintasivulla teeman kuvana, sen koko on 600 x 450 px, voit käyttää vieressä olevaa esimerkki-kuvaa.

2. Teeman päätiedosto: style.css

Tässä tiedostossa määritellään css-koodin lisäksi teeman otsaketiedot, jotka sijoitetaan heti tiedoston alkuun seuraavasti:

 

3. Otsake-tiedosto: header.php

Tässä tiedostossa määritellään html-sivun head-osio. Title-tagin sisälle annetaan wp_title()-funktio (käärittynä PHP-tagiin). WordPressissä tähän osioon ei kuitenkaan lisätä suoraan viittauksia CSS- tai JavaScript-tiedostoihin tai kirjastoihin, vaan tähän tiedostoon lisätään viimeiseksi ennen head-tagin sulkemista wp_head()-funktion kutsu.

Tässä tiedostossa olen myös määrittänyt Bootstrap-valikon käyttäen hyväksi bootstrap_navwalker-luokkaa, jonka voit ladata GitHubista, ja asettaa teemasi kansioon. GitHubista löydät myös tarkemmat ohjeet luokan käytöstä.

Huomionarvoisia kohtia ylläolevassa koodissa:

  • body_class() – Lisää body-tagille luokan, joka kertoo millä sivulla ollaan
  •  wp_head() – Tämän ansiosta functions.php-tiedostossa määritellyt CSS-, JavaScript- ja fontti-määrittelyt tulevat mukaan suoritukseen
  • nav-elementissä esitelty wp_bootstrap_navwalker-luokan käyttö Bootstrap-navigoinnin liittämiseksi osaksi WordPress-navigointia

 

4. Yleispohja: index.php

Tämä tiedosto on pakollinen WordPress-teemassa. Vaikka nimi onkin index.php, se ei tarkoita, että tätä pohjaa käytettäisiin etusivun muodostamisessa. Tämä pohjatiedosto on käytössä, jos mitään spesifimpää pohjaa ei löydy tai ei ole määritetty. WordPress sisältää ns. templating engine -järjestelmän, jonka avulla määritettän, mitä pohjaa milloinkin käytetään. Pohjatiedostot ovat järjestetty hierakisesti ja hierarkiassa siirrytään aina askel yleisempään kunnes sopiva pohjatiedosto löytyy. Tutustu hierarkiaan WordPress Codexissa.

 

5. Alaosio – footer.php

Tässä määritellään sivun alaosaan tulevat tiedot, kuten footer-elementti ja viimeiseksi ladattavat JavaScript-kirjastot sekä suljetaan header.php-tiedostossa alkanut body-elementti. JavaScript-kirjastoja ei tässäkään tapauksessa laiteta suoraan script-tagiin, vaan ne lisätään functions.php-tiedoston kautta ja kutsutaan wp_footer()-funktiolla, joka lisätään viimeiseksi ennen footer-elementin sulkemista.

6. Teeman toiminnallisuus – functions.php

Teeman toiminnallisuus sijoitetaan tähän tiedostoon. Tässä tiedostossa sisällytetään myös kaikki CSS- ja JavaScript-tiedostot ja kirjastot, sekä web-fontit.

Käy getbootstrap.com -sivulla, klikkaa ”Download Bootstrap” ja valitse seuraavalta sivulta taas ”Download Bootstrap”. Saat tarvittavat CSS- ja JavaScript-tiedostot tästä. Avaa zip-paketti ja siirrä sen sisältämät kansiot suoraan teeman kansioon. Nyt tiedostorakenteesi pitäisi olla viereisen kuvan mukainen.

Tässä vaiheessa tärkeitä funktioita ovat:

Ja koukkujen (hooks) rekisteröintiin:

…ja CSS- ja JavaScriptin kanssa käytetään wp_enqueue_scripts -koukkua.

Näyttökuva-2015-04-08-kello-16.23.09

Tässä koodissa siis määritellään ensin funktiot tyylitiedostojen, JavaScriptien ja web-fonttien lisäämiseksi. Funktio ei yksinään riitä, vaan sitä tarvitsee vielä kutsua oikeassa paikassa. Tähän käytetään add_action()-funktiota, sen ensimmäinen parametri on wp_enqueue_scripts-koukku ja toisena juuri luodun funktion nimi.

7. Etusivu – front-page.php

Nyt päästään sivuston tärkeimmän sivun, eli etusivun käsittelyyn. Yleensä etusivu eroaa muotoilultaan kaikista muista. WordPressissä voidaan käyttää etusivuna joko listausta blogi-postauksista tai staattista etusivua.

Luo uusi tiedosto, front-page.php teemakansion juureen.

 

Seuraavaksi tulossa:

8. Sivun oletuspohja – page.php

9. Yksittäisen artikkelin pohja – single.php

10. Artikkelien listaus-sivu – home.php


Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *