WordPress graafikoille: Osa1 – Intro

Tässä sarjassa käydään läpi WordPressin kustomointia ja teknistä toimintaa. Sarjassa käydään läpi vain tekniikkaa, eikä sivuston suunnittelua. Aika moni tuttu graafinen suunnittelija on kysellyt silloin tällöin WordPressistä, jota me Löylyllä useimmiten käytämmekin nettisivuprojekteissa. Jos tulee jotain kysymyksiä tai toiveita mitä sarjassa haluat käsiteltävän, niin jätä kommentti! Rakennamme sarjan aikana ihan oikean nettisivuston oikeaan käyttöön. Meillä on design, jonka pohjalta luomme ensin xhtml-layoutin, josta teemme sitten WP-teeman.

Aloitetaan alusta. WordPress on vapaan lähdekoodin sisällönhallintajärjestelmä, joka on alunperin tarkoitettu bloggaamiseen. Nykyään se on kuitenkin aika monipuolinen ja helposti kustomoitava melkein mihin tahansa nettisivuprojektiin. Ulkoasu ja toiminta on erillään, joten ulkoasun muokkaaminen omiin tarpeisiin on helppoa. Koodi on selkeää ja funktioiden nimistä voi päätellä, mitä ne tekevät.

Oletetaan, että tehdään vakioasennus ja WordPress asennetaan nettisivuston juureen. Ulkoasuteeman tiedostot sijaitsevat hakemistossa wp-content/themes/teeman_nimi. Jos aloittaa luomaan uutta teemaa, kannattaa se rakentaa olemassaolevan päälle. Eli versiosta 3 eteenpäin kyseessä on twentyten. HUOM! Tässä vaiheessa kannattaa olla tarkkana ja tarkastaa, millä kielellä WordPressin on asentanut ja millä kielellä vakioteema on. Tämä säästää aika paljon aikaa ja vaivaa, jos teema on oikealla kielellä, turha kääntäminen vain nyt ei oikein kannata. Syy, minkä takia vakioteemasta kannattaa ottaa kopio, eikä vain rakentaa sen päälle, on päivitykset. Päivitykset saattavat automaattisesti jyrätä vaivalla rakentamasi teeman, eikä se ole kovin mukavaa.

Tiedostorakenne

Avaa teemakansiossa oleva index.php, ja katsele koodia:

<?php ja ?> ovat tageja, joiden sisään kaikki php-koodi tulee. Niiden sisällä on funktioita kuten get_header(), joka hakee teeman yläosan eli headerin. Headerista voi olla eri versioita eri sivuille, vaikkapa niin, että etusivulla on joku iso kuva ennen varsinaista sisältöä. Tämä header-versio kerrotaan WordPressille parametrillä. Eli get_header() ilman mitään parametrejä liittää sivun alkuun tiedoston header.php. Jos haluat luoda eri versioita, nimeä ne header-xxx.php, missä xxx on haluamasi versio. Nämä kannattaa nimetä jotenkin järkevästi – esimerkiksi header-index.php, jota käytetään funktiolla get_header(‘index’). Sama pätee get_footer()-funktioon. Jos ero tavalliseen versioon on pieni, niin kannattaa miettiä onko järkevää pitää monta eri versiota, jotka ovat melkein samoja. Pieniä muutoksia voi tehdä myös esim. muuttujilla. Tämän sarjan aikana tulee varmaan väkisinkin vähän tutustumaan php-koodiin, mutta lupaan pitää sen yksinkertaisena. Palataan tähän kuitenkin vasta myöhemmin.

get_template_part( ‘loop’, ‘index’ ) on uuden WordPress-version myötä uusi tapa käyttää looppia, joka siis on koko sisällönhallinnan sydän. Looppi hakee sisältöä ja näyttää sitä sen mukaan millä sivulla ollaan, mitä parametreja sille annetaan jne. Sen jälkeen tulee get_sidebar(), joka hakee sivupalkin. “Sivupalkin” ei tietenkään tarvitse olla sivupalkki sinänsä, siinä voi olla mitä tahansa, jota haluaa käyttää uudelleen tietyissä paikoissa. Sitten ollaankin lopussa. Footer eli sivun loppuosa haetaan sivulle ja siinä onkin sitten kaikki.

Teeman kansiossa olevien tiedostojen nimistä voi päätellä mitä ne ovat. Page on teema staattisille sivuille, Single on teema yksittäisille artikkeleille (artikkelit voivat olla blogitekstejä, uutisia tai mitä vain, mitä esitetään aikajärjestyksessä), style.css on tyylitiedosto jne. Nämä kaikki tulevat vielä tutuksi.

Jatketaan sitten tästä ensi kerralla.