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':
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':
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:
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">