WordPress-sivustosi (WordPress) on pystyssä, mutta näyttääkö se samalta kuin sadat muut? Sama vakio-teema, samat fontit, ei häivähdystäkään yksilöllisyydestä. Alusta tarjoaa valtavasti muokkausmahdollisuuksia; kysymys kuuluu, mistä aloittaa ilman, että sivusto hajoaa matkan varrella.

WordPress-sivuston ulkoasun muuttaminen ei välttämättä tarkoita täydellistä uudelleenrakennusta tyhjästä. Joskus kolme tai neljä kohdennettua säätöä riittää siihen, että sivustosi lakkaa näyttämästä geneeriseltä ja alkaa jäädä mieleen. Alla on vaiheittainen erittely: värimaailmasta faviconiin, konkreettisine työkaluineen ja ilman koodia siellä, missä pärjäät ilman.

💡 Nopea yleiskatsaus:

• Valitse 3 värin värimaailma käyttäen Adobe Coloria, Coolorsia tai ColorHexaa
• Määritä fontit Google Fontsin kautta, Use Any Font omia kirjasintyyppejä varten
• Muuta päivämäärän ja kellonajan muotoa yhdellä koodirivillä tai Mukauttimen kautta

Värimaailman valinta

Värit tekevät puolet vaikutelmasta. Vierailija ei ole vielä lukenut otsikkoa, mutta aistii jo, tuntuuko sivusto "premiumilta" vai "halvalta", tekniseltä vai luovalta, luotettavalta vai kyseenalaiselta. Värimaailma on brändisi visuaalinen ankkuri.

Optimaalinen lähestymistapa on kolme perusväriä: pääväri (tausta/teksti), korosteväri (painikkeet, linkit, tärkeät elementit) ja tukiväri (reunukset, jakajat, hover-tilat). Useampi kuin kolme tuo riskin visuaalisesta kohinasta; vähemmän on tylsää. Pääsääntö: käytä korosteväriä säästeliäästi, vain siellä, missä haluat herättää huomiota.

Mistä aloittaa värivalinta:

Adobe Color (entinen Kuler)

Adoben työkalu värimaailmojen luomiseen harmonia-sääntöjen pohjalta: yksivärinen, komplementaarinen, triadinen, analoginen. Konepellin alla on väriympyrä, jossa asetat perussävyn, ja järjestelmä valitsee loput automaattisesti. Voit poimia paletin ladatusta kuvasta, mikä on kätevää, jos sinulla on referenssi. Saatavilla ilmaiseksi osoitteessa color.adobe.com.

Coolors

Nopeuteen rakennettu palettigeneraattori. Paina välilyöntiä, saat uuden viiden värin yhdistelmän. Voit lukita minkä tahansa värin ja pyöräyttää loput. Tuloksena on valmiit HEX-koodit. Saatavilla on lisäosa Chromeen/Firefoxiin ja iOS-sovellus. Toimii osoitteessa coolors.co.

ColorHexa

ColorHexa ei ole pelkkä pipetti, vaan värien tietosanakirja. Syötä HEX, RGB tai nimi, niin saat sivun, jossa on täydentävät sävyt, liukuvärit, triadit, prosentuaalinen koostumus ja sokeusesikatselu (miltä väri näyttää eri värisokeustyyppejä sairastaville). Värisekoitin: syötä #ff0000+#0000ff+#ff00ff, saat tulokseksi #aa00aa täydellisellä erittelyllä. colorhexa.com.

Valmiit HTML-paletit

Jos et halua valita tyhjästä, nappaa valmiit väripaletit. htmlcolorcodes.com tarjoaa 216 verkkoturvallista väriä HEX-koodeineen, ja ne toimivat CSS:n, Photoshopin ja minkä tahansa grafiikkaohjelman kanssa. Palvelu Paletton (entinen Color Scheme Designer) tarjoaa väriteemoja, joita voi esikatsella sivuston mallipohjassa.

CSS-gradienttigeneraattori

Liukuvärit tekevät paluuta, eivätkä ne nyt tarkoita vuoden 2012 bändejä vaan hillittyjä siirtymiä osioiden taustoissa ja painikkeissa. ColorZilla Gradient Editor on Photoshopin kaltainen editori: aseta ankkuripisteet väreineen ja läpinäkyvyyksineen, siirrä keskipistettä ja kopioi valmis CSS. Se tukee lineaarisia, radiaalisia ja toistuvia liukuvärejä. Chromeen ja Firefoxiin on saatavilla lisäosa, jossa on pipettityökalu suoraan selaimessa.

Fonttien valinta ja käyttöönotto

Värit herättävät huomion, teksti pitää sen yllä. Fontti vaikuttaa luettavuuteen ja sävyn hahmottamiseen: jämäkkä päätteellinen fontti luo toimituksellisen laadun tuntua, kun taas puhdas päätteetön sans-serif viestii teknistä tunnelmaa.

Verkkofonttien ongelma on, että kävijät näkevät vain ne fontit, jotka on asennettu heidän tietokoneilleen, ellet käytä upotettuja (web) fontteja. Räätälöityyn ulkoasuun tarvitset siis aina ulkoiset fontit.

Perussääntö: enintään kaksi fonttia sivua kohden. Yksi otsikoille (suurikokoinen, erottuva) ja toinen leipätekstille (mahdollisimman luettava). Kolmas vain, jos tarvitset tasalevyisen fontin koodille.

Google Fonts, ensisijainen lähde

Ilmainen yli 1 500 fonttiperheen katalogi osoitteessa fonts.google.com. Käyttöönotto vaatii kaksi riviä. Klassinen tapa on teeman header.php:n kautta:

1
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Tai style.css-tiedostossa:

1
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Tuonnin jälkeen fontti on käytettävissä missä tahansa CSS-säännössä:

1
body { font-family: 'Roboto', sans-serif; }
2
h1, h2, h3 { font-family: 'Montserrat', sans-serif; }

GDPR-huomio: Google Fonts -kirjasinten lataaminen suoraan Googlen palvelimilta välittää kävijöiden IP-osoitteet. EU-tuomioistuimet ovat vuodesta 2022 alkaen katsoneet tämän rikkomukseksi. Ratkaisu on Local Google Fonts -lisäosa, joka lataa kirjasimet omalle palvelimellesi ja tarjoilee ne paikallisesti. Vaihtoehto niille, jotka eivät halua käyttää lisäosia, on artikkeli Google Fonts -kirjasinten paikallisesta lataamisesta blogissamme.

Mukautetut kirjasimet lisäosan kautta

Jos tarvitset brändikirjasimen, jota ei ole Google Fontsissa, kokeile Use Any Font -lisäosaa. Lataa ttf-, otf- tai woff-tiedosto, niin lisäosa muuntaa sen woff2-muotoon ja lisää sen hallintapaneeliin. Ilmaisversio sallii yhden kirjasimen lataamisen; Pro poistaa rajoituksen.

Manuaalinen liittäminen @font-face-säännöllä

Jos pidät koodista enemmän kuin lisäosista, sijoita kirjasintiedosto hakemistoon /wp-content/themes/your-theme/fonts/ ja lisää style.css-tiedostoon:

1
@font-face {
2
    font-family: 'Museo300';
3
    src: url('fonts/museo300-regular.ttf') format('truetype');
4
    font-weight: normal;
5
}

Käyttö:

1
#menu { font-family: 'Museo300', sans-serif; }

Päivämäärän ja ajan muotoilu

Vakiopäivämäärämuoto ei aina sovi ulkoasuun. Onneksi WordPress antaa sinun muuttaa sitä ilman lisäosia.

Tapa 1: mukauttimen kautta (ei koodia)

Siirry kohtaan Ulkoasu → Mukauta → Yleiset asetukset. Ajan muoto muutetaan siellä samalla. Toimii useimmissa perinteisissä teemoissa.

Tapa 2: single.php-tiedoston kautta (tarkka hallinta)

Avaa Ulkoasu → Teemaeditori → single.php. Etsi the_time()- tai the_date()-funktio:

1
<?php the_time('F Y'); ?>

Muotosymbolit:

• l, viikonpäivä kokonaisena sanana (pieni L-kirjain)
• F, kuukausi sanana
• j, kuukauden päivä numerona
• Y, vuosi nelinumeroisena
• y, vuosi kaksinumeroisena

Yhdistelmäesimerkkejä:

('l, j F Y') → sunnuntai, 14. kesäkuuta 2026. ('j F, Y') → 14. kesäkuuta, 2026.

Älä koske heittomerkkeihin sulkujen sisällä, muokkaa vain niiden välissä olevia merkkejä. Jos teema käyttää the_date()-funktiota the_time()-funktion sijaan, muotoa muutetaan helpommin: Asetukset → Yleinen → Päiväyksen muoto.

Kuvien käyttö

Kuvien lisääminen WordPressissä tapahtuu artikkelieditorin "Lisää media" -painikkeella. Vie kursori haluamaasi kohtaan → Lisää media → valitse kuva mediakirjastosta tai lataa uusi.

Oikealla on liitetiedoston asetuspaneeli: otsikko, vaihtoehtoinen teksti (tärkeä hakukoneoptimoinnille ja saavutettavuudelle), koko, tasaus, linkki. Sivuston nopeuden vuoksi lataa kuvat valmiiksi pakattuina (TinyPNG tai ShortPixel ennen lataamista). Lisätietoja WordPressin mediakirjaston oppaassamme.

Faviconin lisääminen

Favicon on se pieni neliö selaimen välilehdellä ja kirjanmerkeissä. Pieni yksityiskohta, joka rakentaa tunnistettavuutta: kun käyttäjällä on 20 välilehteä auki, favicon on ainoa asia, joka erottaa sivustosi visuaalisesti muista.

Faviconin luominen

Luotettavin palvelu on RealFaviconGenerator. Lataa neliönmuotoinen kuva (vähintään 260×260), niin saat ikonipaketin kaikille alustoille: iOS, Android, Windows-ruudut, Safarin kiinnitetty välilehti. Lisäksi valmis HTML-koodi upotettavaksi.

Jos tarvitset yksinkertaisen 16×16 .ico-tiedoston, mikä tahansa .ico-muotoon tallentava grafiikkaeditori käy (GIMP on ilmainen). Tai käytä verkkopalvelua Favicon.io.

Asentaminen WordPressiin

Yksinkertaisin tapa on sisäänrakennettu sivustokuvake. WordPress 4.3:sta lähtien se on saatavilla Mukauttajassa:

Ulkoasu → Mukauta → Sivuston identiteetti → Sivustokuvake. Lataa neliönmuotoinen kuva, niin WordPress leikkaa sen automaattisesti tarvittaviin kokoihin kaikille alustoille. Ei lisäosia, ei FTP:tä, ei header.php-tiedostoa.

Lisäosamenetelmä on All In One Favicon, joka antaa enemmän hallintaa: erilliset kuvakkeet hallintapaneelille, julkiselle puolelle ja eri laitteille. Mutta 95%:lle sivustoista sisäänrakennettu sivustokuvake riittää.

Manuaalinen tapa (lisää header.php-tiedostoon):

1
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">

Sijoita favicon.ico-tiedosto teemakansion juureen. Muista kopioida se myös public_html-kansioon, jotta favicon avautuu osoitteessa yoursite.com/favicon.ico.

⁉️🤔 Usein kysytyt kysymykset

Voinko vaihtaa sivuston ulkoasua menettämättä sisältöä?

Kyllä, WordPress-teeman vaihtaminen ei vaikuta artikkeleihin, sivuihin eikä mediatiedostoihin. Ne on tallennettu tietokantaan teemasta erillään. Ainoa asia, mikä saattaa "hajota", on asettelu ja elementtien sijoittelu, varsinkin jos vanha teema käytti mukautettuja sisältötyyppejä tai shortcodeja. Ennen vaihtoa tee täysi varmuuskopio (hosting + tietokanta). Turvallista testausta varten käytä staging-sivustoa; monet palveluntarjoajat (SiteGround, Kinsta, WP Engine) tarjoavat sen yhdellä klikkauksella.

Kuinka monta fonttia on optimaalinen määrä sivustolle?

Kaksi: yksi otsikoille, yksi leipätekstille. Kolmas (tasalevyinen) koodille, jos sellaista sivustolla on. Jokainen ylimääräinen fontti lisää latausaikaa 200-400 ms ja luo visuaalista kohinaa. Google Fontsissa voit valita vain tarvittavat leikkaukset (regular + bold = 2 tiedostoa yhdeksän sijaan), ja Local Google Fonts -lisäosa välimuistittaa ne lisäksi palvelimellesi.

Onko koodin kanssa pakko säätää muokkauksia varten?

Ei. WordPressin Mukauttaja (Ulkoasu → Mukauta) kattaa useimmat tehtävät: värit, fontit, logon, faviconin, taustakuvat, CSS:n. Lohkoteemat (WP 5.9:stä alkaen) tarjoavat Sivustoeditorin, joka on vielä visuaalisempi tapa ilman koodia. Koodia tarvitaan, kun haluat hienosäätöä: päivämäärän muoto single.php:ssä, mukautettu @font-face, tietyn lisäosan vaatima CSS.

Mitä tehdä, jos sivusto hajosi teeman vaihdon jälkeen?

Ensiksi: älä hätäänny, sisältösi ei ole kadonnut minnekään. Toiseksi: jos hallintapaneeli on käytettävissä, palauta vanha teema (Ulkoasu → Teemat → Ota käyttöön). Jos hallintapaneeli ei ole käytettävissä, siirry FTP:llä kansioon /wp-content/themes/, nimeä uuden teeman kansio uudelleen (lisää _disabled), jolloin WordPress vaihtaa automaattisesti oletusteemaan. Palautumisen jälkeen ota WP_DEBUG käyttöön wp-config.php-tiedostossa nähdäksesi virheet.

Miten tarkistan, toimiiko favicon?

Avaa yoursite.com/favicon.ico; jos kuvake näkyy, tiedosto on paikallaan. Selain ei näytä faviconia heti: se välimuistitetaan aggressiivisesti. Tarkista avaamalla sivusto incognito-tilassa tai pakota välimuistin päivitys (Ctrl+Shift+R). RealFaviconGenerator tarjoaa faviconin tarkistustyökalua URL-osoitteella.

WordPressin uudelleensuunnittelu: mitä tehdä ensin

Toimintajärjestys räätälöintiin tyhjästä: värimaailma → fontit → logo ja favicon → päivämäärän muoto → vimpainten ja valikoiden asettelu. Juuri tässä järjestyksessä: värit ja typografia ovat perusta, jonka päälle kaikki muu rakentuu.

Jos sivusto on jo toiminnassa ja tuo liikennettä, älä tee uudelleensuunnittelua suoraan live-verkkotunnuksella. Staging-kopio + testaus → migraatio. Hakukoneille näkyvät muutokset (HTML-rakenteen muutokset, otsikot, URL-osoitteet) tulee tehdä ymmärryksellä: äkillinen uudelleensuunnittelu ilman uudelleenohjauksia voi pudottaa sijoituksia.

Niille, jotka haluavat syventyä aiheeseen: opas mukautetuista fonteista blogissamme, artikkeli WordPressin mediakirjastosta kuvien käsittelyyn ja yksityiskohtainen erittely Google Fontsien paikallisesta lataamisesta GTmetrixin ennen/jälkeen -testillä.

Aloita kolmella värillä ja kahdella fontilla; loput seuraavat perässä.