JohdantoTässä oppaassa opit pääpiirteittäin, kuinka upotat Wordpress-blogin sivustoosi. Emme tarjoa mitään täydellistä totuutta tähän, mutta yhden toteutustavan yhdellä esimerkki ulkoasulla. Toivottavasti tämä helpottaa omaa lähestymistäsi asiassa ja neuvomme ongelmatilanteissa.
Vaatimukset:
- Osaat asentaa Wordpressin (vaatii PHP ja MySQL tuen)
- Hallitset HTML:n + CSS:n perusteet
TiedostorakenneWordpressin tiedostorakenne on aika yksinkertainen ja selattavia kansioita on vähän. Meillä on pääkansio, jonka sisällä on blogin peruskäyttöön liittyviä tiedostoja. Pääkansion sisällä on myös kolme (3) kansiota
wp-admin,
wp-content sekä
wp-includes. Näistä tarvitsemme vain kansiota wp-content blogin upottamiseen.
Wp-content sisältää blogin lisäosat (plugins) sekä teemat (themes). Teema-kansio sisältää kaksi softan mukana tullutta teemaa, joista valitsemme toisen ja sen päälle alamme rakentamaan omaa teemaamme. Tämä teema tulee toimimaan upotuksena eli luomme siis vain pääsivustomme ulkoasun uudestaan vastaavaksi blogin ympärille. Teema sisältää pääsivuston navigaation yms.
Käytämme tässä oppaassa pohjana classic-teemaa, koska se ei sisällä kuvia ja sen tyylitiedosto on pienempi, joten meillä on pienempi riski, että omat määrittelymme menevät ristiin blogin määrittelyjen kanssa. Tälle pohjalle on siis hyvä aloittaa rakentamaan omaa teemaa, meidän ei tarvitse tehdä pohjatöitä (poistaa turhia kuvia, joita emme tarvitse) vaan voimme aloittaa lähes suoraan upottamisen. Aluksi kopioimme classic-teeman kansion ja nimeämme sen uudelleen oman mielemme mukaan (vaikkapa sivun nimen mukaan). Tämä ei ole pakollista ellet halua säilyttää classic-teemaa.
Teeman tekeminenAvaa nyt uusi teemasi kansio eli se, jonka äsken kopioit. Kansion pitäisi sisältää seuraavat tiedostot:
comments.php
comments-popup.php
footer.php
functions.php
header.php
index.php
sidebar.php
style.css
Näistä tarvitsemme tiedostoja:
header.php,
footer.php sekä
style.css. Kahdessa ensimmäisessä meillä on tarvitsemamme html:t ja viimeisessä kaikki teemaan tyylimäärittelyt.
Upotamme wordpressin
tähän ulkoasuun. Tiedän, että kyseessä ei ole mikään maailman hienoin ulkoasu, mutta tämä ei olekaan tarkoitus vaan upotamme sen syystä mahdollisimman yksinkertaiseen ulkoasuun. Opas venyisi turhan pitkäksi monimutkaisemman ulkoasun kanssa, koska tämä prosessi ei ole yksinkertainen, jos on paljon päällekkäisiä määrittelyjä. Avataan aluksi tiedosto
header.php. Voimme jättää käsittelemättä kokonaan sivuston headerin, koska käytämme wordpressin omaa, jotta voimme muuttaa hallintapaneelista tietoja.
Etsitään kohta
ja lisätään väliin tarvitsemamme html:t suoraan sivupohjastamme eli siis pääsisällön alkuun bodyn alusta. Tämä kohta näyttää sen jälkeen tältä.
<body>
<div id="logo">
<h1>Testi</h1>
</div>
<div id="main">
<div id="navigation">
<ul>
<li><a href="#">Testi</a></li>
<li><a href="#">Testi</a></li>
<li><a href="#">Testi</a></li>
<li><a href="#">Testi</a></li>
</ul>
</div>
<div id="con">
<div id="rap">
Avataan nyt
footer.php, jossa suljemme auki olevat tagit (<div id="main"> sekä <div id="con">). Etsitään </body>-tagi ja lisätään sen yläpuolelle sulkutagit.
<?php wp_footer(); ?>
</div>
</div>
</body>
Olemme nyt lisänneet ulkoasuumme tarvitsemamme html:t. Katsotaan, miltä ulkoasumme näyttää nyt.
(
kuva suurenee sitä klikkaamalla, 1280x800)
CSSKuten huomaat niin ulkoasumme ei oikein vastaa alkuperäistä ajatustamme, koska meiltä puuttuu vielä css-määrittelyt kokonaan. Avataan siis style.css ja lisätään esimerkki ulkoasumme css muun perään. Voimme tarkistaa määritysten päällekkäisyydet yksinkertaisesti validoimalla css-tiedostomme
täällä. Tässä tapauksessa on kuitenkin helppo huomata, että validoinnissa tulee vain virheitä, jotka eivät johdu omista määrittelyistämme. Kuitenkin voimme huomata, että meillä on body-määrittelyjä kahdessa paikkaa, joten voimme yksinkertaisesti yhdistää ne. Muita päällekkäisyyksiä meiltä ei löydykään omiemme ja wordpressin määrittelyjen kesken.
Tarkastetaan taas, miltä ulkoasumme näyttää.
Meillä on nyt pari ongelmaa vielä. Ulkoasut eivät vastaa toisiaan: sivun ympärillä on reunat, fontit eivät vastaa toisiaan ja linkkien muotoilut eivät ole yhtenevät. Pääsemme näistä helposti eroon tiukentamalla joko pääsivuston tai blogin tyylimäärittelyjä. Lisäksi sivuvalikkomme menee sivun yli. Poistetaan aluksi turhat reunukset sivujen ympäriltä
Poistetaan bodysta kohdat
border: 2px solid #565;
border-bottom: 1px solid #565;
border-top: 3px solid #565;
Muutetaan linkit ja fontit vastaaviksi kuin ulkoasussamme. Voimme siis joko poistaa määrittelyjä tai lisätä. Itse päätin tässä tapauksessa poistaa määrityksiä, koska pidän yksinkertaisista linkeistä.
Poistetaan
a {
color: #675;
}
a img {
border: none;
}
a:visited {
color: #342;
}
a:hover {
color: #9a8;
Lisätään päälogoon ja navigaatioon fonttimäärittelyjä
#logo-kohtaan
font-family: serif;
}
Navigaation linkkeihin voisimme lisätä pääsivustolle muotoiluja, mutta emme tee sitä nyt säästääksemme vähän aikaa ja tämä on vain esimerkki. Sivuvalikon saamme korjattua pienillä muokkauksilla. Lisätään <div style="clear:both;" /> footeriin seuraavasti
</div>
<div style="clear:both;" />
<?php wp_footer(); ?></div>
- Muutetaan #menu kohtaa position:absolute muotoon float:right
- .credit kohtaan lisätään loppuun float:left sekä width: 99%
- #contentiin tulee float:left.
Lopputulos
Kuten lopputuloksesta huomaat tässä on vielä paljon hiomista (väriteemojen yhdistäminen, linkkien muokkaaminen yhteneväisiksi yms.), mutta tämän oppaan tarkoitus oli opettaa perusteet upotuksesta. Jokainen upotus on erilainen, joten on mahdotonta tehdä yleispätevää opasta aiheesta.
Oppaaseen liittyvät kysymykset voit laittaa tähän aiheeseen.
Ongelmat.org
Kirjoittaja
