Drupal-teeman rakentaminen
X-Telnet Oy:n wiki
Tässä artikkelissa käydään läpi valmiin HTML/CSS-layoutin muuntaminen Drupalissa toimivaksi teemaksi.
Sisällysluettelo |
[muokkaa] Perustietoa teemoittamisesta
Kuten moni sisällönhallintajärjestelmä, Drupal erottelee sivuston ulkonäön varsinaisesta sisällöstä. Ulkonäköön kuuluvat tyylit, kuvat jne. muodostavat kokonaisuuden, jota kutsutaan teemaksi. Sivuston teemaa voi vaihtaa parilla klikkauksella, ja saada siitä näin täysin toisen näköisen.
[muokkaa] Yleiskäyttöisyys
Drupalin perusasennuksessa on runsaasti valinnaisia toimintoja ja moduuleja. Teeman suunnittelijalta vaaditaan melko lailla työtä, jotta kaikki valinnaiset ominaisuudet ja niiden yhdistelmät näyttävät teemassa järkeviltä. Toisaalta, jos teema suunnitellaan vain yhtä sivustoa varten, ei yleiskäyttöisyydellä ole niin väliä.
[muokkaa] Oletusteemat
Jokainen Drupalin moduuli, joka tuottaa käyttäjälle näkyvää sisältöä sisältää yksinkertaisen oletusteeman. Näitä oletusteemoja käytetään aina, kun teema ei erikseen määrittele, miten jokin asia tulee esittää.
Teeman ei periaatteessa tarvitse sisältää kuin nimen. Tällöin oletusteemat tuottavat yksinkertaisen mutta hyvin tylsän HTML-rungon.
Drupal 6:ssa teeman voi tuottaa luomalla CSS-tyylitiedoston, joka tekee HTML-rungosta kauniimman. Tässä artikkelissa lähdemme kuitenkin toisesta suunnasta, eli yritämme saada Drupalin tuottamaan HTML:ää, joka sopii valmiiksi luotuun CSS-tyyliin.
[muokkaa] Ennen kuin aloitat
Tässä artikkelissa ei käydä läpi Drupalin asentamista. Oletuksena on valmis Drupal-asennus, jossa on jo jonkin verran sisältöä.
Artikkeli on kirjoitettu Drupal 6.0:aa varten. Lukijalta vaaditaan yksinkertaisia HTML-perustietoja, kuten mistä tagi alkaa ja päättyy.
[muokkaa] Valmis sivupohja
Verkosta löytyy monia vapaasti hyödynnettäviä sivupohjia, joita voi käyttää oman sivuston rakentamiseen. Tässä käytämme nodethirtythreen tekemää Terra Firma -nimistä sivupohjaa, joka löytyy osoitteesta http://www.oswd.org/design/preview/id/3557.
Klikkaa "download", ja pura zip-paketti haluamaasi hakemistoon. Tarkista, että tiedostot aukeavat kuten pitääkin.
[muokkaa] Teeman alkuaskeleet
Käytännön kannalta teema on hakemisto, joka sisältää tiettyjä vakiotiedostoja. Mene hakemistoon, johon olet asentanut Drupalin ja etsi hakemisto sites/all. Jos se ei vielä sisällä hakemistoa themes, luo se nyt. Luo hakemistoon themes hakemisto terrafirma.
Hakemistopuun tulisi nyt näyttää tältä: [Drupalin juuri]/sites/all/themes/terrafirma
Huom: Drupalin juuressa on hämäävästi hakemisto themes, mutta tämä on tarkoitettu vain Drupalin omia teemoja varten, ei käyttäjän tekemiä.
[muokkaa] .info-tiedosto
Luo terrafirma-hakemistoon tekstitiedosto nimeltä terrafirma.info, ja kopioi siihen seuraavat rivit:
name = Terra Firma description = Muokattu avoimen koodin teema opiskelua varten. core = 6.x engine = phptemplate regions[right] = Oikea laita regions[content] = Sisältö
.info-tiedosto on Drupal 6.0:n uusi ominaisuus. Se sisältää tietoja teemasta, sekä joitakin asetuksia jotka oli aikaisemmin hajautettu eri paikkoihin.
Ensimmäiset rivit kertovat teeman käyttöliittymässä näkyvän nimen ja kuvauksen. Teemalla on myös järjestelmän sisäinen nimi, joka on sama kuin .info-tiedoston nimi. Tämä ei saa olla sama kuin minkään moduulin nimi.
Kolmas ja neljäs rivi kertovat, millä Drupalin versiolla ja template-moottorilla teemaa voi käyttää.
Viides ja kuudes rivi määrittelevät sivun sisältöalueet. Sivulla on usein monta aluetta, jolle voi sijoittaa erilaisia sisältölohkoja. Yksinkertainen sivupohjamme sisältää vain pääasiallisen sisältöalueen ja laitapalkin.
[muokkaa] Otetaan käyttöön
Mene nyt Drupalin admin-valikkoon, ja valitse, että ylläpitäjän teemana käytetään jotakin valmista teemaa (esim. Garland). Tällä tavoin ylläpito pysyy toimivana, vaikka Terra Firmassa olisi vikoja. Valitse tämän jälkeen teemoista Terra Firma käyttöön ja oletukseksi.
[muokkaa] Valmiiden tiedostojen muokkaaminen
Drupalin etusivu näyttää nyt aika karulta. Kopioi siis valmiin sivupohjan tiedostot samaan hakemistoon .info-tiedoston kanssa.
Kopioi index.html-tiedosto, ja anna sille nimeksi page.tpl.php. Tämä tiedosto määrittää koko sivun rakenteen.
Avaa etusivu uudelleen. Lopputuloksen pitäisi olla valmiin sivupohjan täytesisältöä, mutta CSS-muotoilut ovat kadonneet jonnekin. Tämä johtuu siitä, että CSS-tiedoston polku on muuttunut. Korjaa asia muuttamalla page.tpl.php-tiedoston rivi
<link rel="stylesheet" type="text/css" href="default.css" />
muotoon
<?php print $styles ?>
Vaihda tämän jälkeen default.css-tiedoston nimeksi style.css.
Tyylien pitäisi nyt toimia, ja lopputuloksen muistuttaa alkuperäistä sivupohjaa. (Muutama kuva saattaa olla rikki, mutta älä hätäänny siitä.)
Korvasimme äsken staattisen HTML-rivin PHP-kielisellä käskyllä, joka saa Drupalin kirjoittamaan kyseiseen kohtaa tietoa dynaamisesti – tässä tapauksessa kirjoittamaan tyylitiedoston oikean polun. Törmäsimme myös yhteen Drupalin käytännöistä: se odottaa, että teeman tyylitiedoston nimi on style.css. Tämän voi kiertää, mutta on tavallisesti helpompaa seurata käytäntöä.
[muokkaa] Sisältö paikalleen
Teeman muokkaamisen perustana on etsiä täytesisällön pätkiä ja korvata ne sopivalla PHP-koodin pätkillä. Ota aluksi
<div id="primarycontent">
ja tyhjennä sen koko sisältö päättävään div-tagiin saakka. Laita tilalle PHP-käsky niin että lopputulos näyttää seuraavalta:
<div id="primarycontent"> <?php print $content?> </div>
Etusivulla ei pitäisi olla enää sivupohjan puppusisältöä, vaan oikeita Drupal-kirjoituksia.
