Julkaisujärjestelmässä nettisivujen sisältö ja ulkoasu ovat toisistaan riippumattomat. Ulkoasua voit vaihtaa napin painalluksella valitsemalla sivujen ylläpidosta mieleisesi ulkoasupohjan eli teeman (engl. 'Template' tai 'Theme') – kunhan joku on vain tehnyt sinua varten sellaisen.

Kun asennat Wordpressin, päällä on Wordpressin vakioulkoasu. Vaihda se 'Vihreät – De Gröna' -teemaan kilkkaamalla ko. teeman otsikkoa tai kuvaketta ylläpitovalikon kohdasta 'Ulkoasu':

wp33b

Ulkoasupohjan muokkaus [edistyneille ja koodaustaitoisille]

Jos tunnet jonkin verran html-koodia ja css-tyylejä, voit muokata ”Vihreät – De Gröna” -teemaa. Tämä onnistuu valitsemalla 'Ulkoasun' alta 'Teemojen muokkaus':

wp34

Ulkoasupohja koostuu useista tiedostoista, jotka kukin hoitavat yhtä sivujen osa-aluetta. 'Teemojen muokkauksesta' pääset käsittelemään näitä kaikkia:

Vihreät – De Gröna” -teema koostuu seuraavista tiedostoista:

wp35

Ulkoasun nk. tyylimääritykset eli css-tiedostot

  • valikko.css (määrittää vasemman laidan valikon ulkoasun)
  • rakenne.css (määrittää sivuston taiton eli keskeisten elementtien paikat suhteessa toisiinsa: yläpalkin, kolme palstaa ja alatunnisteen)
  • ulkoasu.css (määrittää erilaisia ulkoasuasetuksia perusrakenteen sisällä: värejä, marginaaleja, reunaviivoja)
  • teksti.css (määrittää otsikoiden, leipätekstin ja linkkien koot, fontit ja värit)
  • CSS-tyylitiedosto” eli style.css (ei tee itse mitään, vaan kokoaa yhteen yllämainitut neljä tiedostoa)
  • iehacks.css (Internet Explorer -selaimen virheitä korjaavat määritykset)

Sivujen sisältö eli html-koodi ja Wordpressin toimintaa säätelevä php-koodi

  • home.php (määrittää, missä muodossa etusivu näytetään; 'Uutta sivuilla' -laatikon muodostava koodi löytyy täältä)
  • page.php (määrittää, missä muodossa yksittäiset sivut näytetään)
  • category.php (määrittää, missä muodossa luokkaan – esim. 'Tiedotteet' – kuuluvat artikkelit listataan)
  • single.php (määrittää, missä muodossa yksittäinen artikkeli näytetään)
  • ”Ylätunniste” eli header.php (määrittää sivun hmtl-koodin <head>-osan sekä sivuston yläpalkin)
  • Alatunniste” eli footer.php (määrittää sivuston alareunan sekä päättää sivun html-koodin)
  • Sivupalkki” eli sidebar.php (määrittää, missä muodossa vasen palsta näytetään; valikon muodostava koodi löytyy täältä)
  • sidebar2.php (määrittää, missä muodossa oikea palsta näytetään; 'Uutisia Vihreiltä' -uutisvirran ja linkkilistan kutsuva koodi löytyy täältä)
  • searchform.php (määrittää yläpalkissa näkyvän 'Etsi'-laatikon)
  • Kommentit” ja ”Kommentti-ikkuna” eli comments.php ja comments-popup.php (määrittää, missä muodossa yksittäisen artikkelin perästä löytyvä kommentointilaatikko näytetään)
  • Arkisto” eli archive.php (määrittää, missä muodossa vanhojen artikkelien arkistoluettelo näytetään – ei käytössä tässä ulkoasupohjassa)
  • index.php (määrittää, missä muodossa sivuston ulkoasu näytetään, jos mitään tarkempaa tiedostoa – kuten home.php, page.php, category.php ja single.php – ei löydy)

Tarkempaa tietoa Wordpressin ulkoasupohjien toiminnasta löydät Wordpressin omilta sivuilta mm. seuraavista artikkeleista:

Kysymyksiä & vastauksia teemasta

- Miten saan oikean palstan kokonaan pois päältä joistakin osista sivustoani?

Jos haluat oikeasta palstasta eroon koko sivustolla tai osassa sitä, etsi ulkoasupohjan tiedostojen joukosta seuraavat tiedostot:

  • home.php (jos haluat oikean palstan pois etusivulta)
  • page.php, category.php (jos haluat oikean palstan pois näkyvistä muualla kuin etusivulla)
  • single.php (oikea palsta on jo poissa päältä täällä, lue allaolevat ohjeet, jos haluat palauttaa sen)

Etsi näistä koodinpätkä:

<div id="laatikko">

...ja korvaa se tällä (joka kääntää palsta nro 2:n pois päältä):

<div id="laatikko-ei-2">

Lisäksi etsi seuraava koodi:

<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>

...ja poista se kokonaan (ko. koodinpätkä hakee oikean palstan sisällön tiedostosta sidebar2.php; niinpä se on otettava pois, jos oikeasta palstata halutaan eroon).

- Entä miten palautan oikean palstan näkyviin?

Samalla tavoin kuin yllä, mutta käänteisessä järjestyksessä:

Etsi yllämainituista tiedostoista koodi:

</div> <!-- 'laatikko'-div paattyy tahan -->

Ja palauta sen yläpuolelle (aiemmin poistettu) rivi:

<?php include (TEMPLATEPATH . '/sidebar2.php'); ?>
</div> <!-- 'laatikko'-div paattyy tahan -->

Etsi myös koodi <div id="laatikko-ei-2"> ja korvaa se koodilla <div id="laatikko">

Jaa sivu: