Toteutamme Sofokus Oy:ssa erilaisia WordPress-projekteja. Tällä kertaa ajattelin esitellä Stora Ensolle tekemäämme www.storaensometsa.fi sivustoa ja mitä kaikkea WordPressillä voikaan tehdä.

Projektin tavoitteena oli uudistaa www.storaensometsa.fi sivusto. Toteutusalustaksi oli jo ennen projektin aloitusta valittu WordPress. Sivustouudistusta oli mietitty muutenkin valmiiksi poikkeuksellisen pitkälle siihen nähden, mistä pisteestä projekteihin yleensä lähdetään. Projektin tarkoituksena oli ottaa käyttöön nykyistä helppokäyttöisempi sisällönhallintajärjestelmä, joka ei rajoittaisi kehitystä jatkossakaan mitenkään. Tämän ohella ulkoasu tulisi muuttumaan ja lisäksi pyrittiin parantamaan hakukonenäkyvyyttä.

Hakukonenäkyvyyttä varten oli jo tilattu erillinen hakukoneauditointiraportti, jossa oli listattu asioita, jotka piti ottaa huomioon sivuston toteutusprojektissa. Hakukonenäkyvyyden lisäksi tavoitteena oli luonnollisesti myös yhteydenotto konversion parantaminen.

Ulkoasu uusiksi

Ulkoasusuunnittelu tuli asiakkaalta ja sen pohjalta lähdettiin tekemään WordPressiin omaa räätälöityä teemaa. Teemaa varten on rakennettu useita eri sivupohjia. Julkaisuhetkellä sivupohjia on lähes 20. Näihin lukeutuu muun muassa etusivu, metsäkoulu, palvelut ja yhteystiedot. Myös 404-sivu ja kirjautumissivu on räätälöity omanlaisekseen.

Teeman pohjana käytettiin mainiota Genesis Frameworkia, jota voin suositella lämpimästi kaikille, jotka WordPress-teemoja aikovat koodata.

Ulkoasupohjia tehtiin sekä sivuille, että arkistosivuille. Sivupohjien tekemisessä on hyödynnetty Advanced Custom Fields –lisäosaa. Tällä lisäosalla saa luotua käyttäjäystävällisiä avainkenttiä lähes joka puolelle WordPressiä.

Sivustolla on kaksi megamenua (ylävalikko ja päävalikko). Megamenun tekemistä varten on monia WordPress-lisäosia, mutta niissä on lähes kaikissa sama rajoitus. Samalla sivulla ei voi olla kahta erillistä megamenua yhtä aikaa. Tämän takia megamenu toteutettiin lopulta räätälöidysti ilman lisäosaa, jotta päästiin tavoitteisiin.

Sivustolla on käytössä yli 30 sivupalkkia. Tässä projektissa sivupalkkien hallinnointiin käytetään Genesis Simple Sidebars –lisäosaa, sillä siihen sai hyvin toteutettua Varnish ESI-tuen. Varnishista lisää vielä myöhemmin.

Lomakkeet hallinnoidaan Gravity Formsilla. Osa lomakkeista toimii niin, että ensimmäisen lomakkeen jälkeen siirrytään seuraavan lomakkeeseen täyttämään lisätietoja. Gravity Forms tarjoaa tähän valmiin toteutustavan. Samalla myös ensimmäisen stepin lomake tallennetaan tietokantaan heti kun käyttäjä lähettää sen. Ensimmäisen lomakkeen tiedot saadaan siis talteen, vaikka toista lomaketta ei lähettäisikään.

Ulkoasu on tietysti toteutettu myös responsiivisesti niin että se toimii myös mobiililaitteilla.

Stora Enso Metsä

Lisää voimaa lisäosilla

Sivustolla on käytössä yli 30 lisäosaa. Olen usein lukenut viestejä, joissa valitetaan, että WordPress on hidas, kun siihen asennetaan liikaa lisäosia. Jos käyttää hyvin tehtyjä lisäosia, lisäosien määrä ei tarkoita automaattisesti sitä, että sivusto toimisi hitaasti. Yksikin huonosti koodattu lisäosa riittää parhaillaan siihen, että sivu muuttuu todella hitaaksi.

Sivustolla on käytetty monia WP-oppaassakin esiteltyjä lisäosia. Sosiaalisen median jakonapit on lisätty WPSocialitella. Kuvia optimoidaan EWWW Image Optimizerilla. Sähköpostit lähetetään Mandrillia käyttäen.

Kirjoittajatietojen (katso esimerkki) näyttämiseen on käytetty Fanciest Author Boxia. Fanciest Author Boxilla voi näyttää kirjoittajan perustietojen lisäksi eri sosiaalisen median tietoja ja viimeisimmät artikkelit.

Sivuston hakua on parannettu Relevanssilla. Tämän lisäksi sivustolta löytyy kaksi muuta hakua. Nämä ovat metsäsanasto ja henkilöhaku.

Sivustolla olevien kuvakarusellien tekemiseen on käytetty Slider Prota. Slider Pro on todella monipuolinen kuvakarusellilisäosa. Se tarjoaa eri asetuksia niin paljon, että joku voisi olla peräti sitä mieltä, että niitä on jopa liikaa.

Sisältötyypit ja integraatio

Kuten jo aiemmin mainitsin, sivustolla on normaalin haun lisäksi myös metsäsanasto ja henkilöhaut. Näitä tietoja varten luotiin omat sisältötyypit, jotta niitä on helppo käsitellä haussa.

Sivustolla on myös integraatio Stora Enson rajapintaan. Tästä rajapinnasta haetaan henkilöhaussa näkyvien henkilöiden tiedot. Integraation osana käytettiin WP All Import –lisäosaa.

WP All Importilla pystyy lukemaan helposti XML tai CSV -muotoista tietoa WordPressin artikkeleihin, sivuihin tai räätälöityihin sisältötyyppeihin. Tämän lisäksi tiedon lukemisen pystyy automatisoimaan. Import osaa myös päivittää olemassa olevia tietoja ja lisätä sekä poistaa uusia ja vanhoja tietoja.

Hakukonenäkyvyyden parantaminen

Hakukonenäkyvyyden ylläpitämiseksi sivustolle on tehty useita uudelleenohjauksia, sillä osoiterakenne muuttui päivityksen yhteydessä.

Sivustolla on käytössä myös Yoastin Local SEO –lisäosa. Lisäosan avulla on listattu Stora Enson toimipisteet. Lisäosan mukana tulee myös Googlen reittihakutoiminto (esim. Helsingin toimipiste).

Olen jo aiemmin suositellut Yoastin WordPress SEO –lisäosaa. Tämän projektin aikana Yoast julkaisi lisäosastaan premium-version, joka otettiin käyttöön. Premium-version mukana tulee integraatio Google Webmaster Toolsiin ja uudelleenohjaustoiminnallisuus. Näin Stora Enso näkee siis suoraan WordPressistä, mikäli Google Webmaster Tools herjaa toimimattomista osoitteista ja he voivat saman tien tehdä niitä varten oikeat uudelleenohjaukset.

Metsäsanastossa on käytetty HTML5 Pushstatea. Pushstate mahdollistaa paremman sisällön indeksoinnin kun sitä haetaan AJAX-tekniikoilla.

Stora Enso toimipiste esimerkki

Liikennemäärien huomiointi

Sivustolla on jonkin verran liikennettä, joten välimuistituksessa päädyttiin yhdistelmään W3 Total Cache + Varnish. W3 Total Cache on WordPress-lisäosa, jota sivustolla käytetään lähinnä selainvälimuistitukseen ja tiedostojen minimointiin.

Varsinainen välimuistitus tapahtuu Varnishin toimesta. Varnish on välimuistipalvelin, jolla ei ole varsinaisesti mitään kytköstä WordPressiin. Varnishia voi käyttää myös muilla alustoilla ja tekniikoilla.

Välimuistittaminen on helppoa, mutta sen tyhjentäminen oikein ei. Erityisesti sivupalkit aiheuttavat haasteita, sillä sivupalkki voi sijaita yhdellä tai vaikkapa 20 sivulla. Ei ole järkevää tyhjentää 20 sivua kokonaan vain sen takia, että sivupalkin sisältö on muuttunut.

Tämän takia sivupalkkien välimuistittamiseen käytetään Varnishin ESI-toiminnallisuutta (Edge Side Includes). Tällä tavoin sivupalkit pystytään päivittämään ajan tasalle automaattisesti ilman, että koko sivua tarvitsee tyhjentää välimuistista.

Toiminnallisuuden rakentaminen vaati räätälöintiä, koska valmiita sopivia sivupalkkilisäosia, jotka tukisivat Varnishia, ei löydy.

Projekti oli kaikin puolin erittäin miellyttävä, sillä siinä pääsi toteuttamaan monenlaisia asioita WordPressiin. Kehitys ei myöskään varmasti pääty tähän vaan tulemme myös jatkossa tekemään sivustolle jatkokehitystä. Jos sinä haluat itsellesi WordPress-sivut, ota yhteyttä, niin katsotaan minkälaisen kokonaisuuden saamme yhdessä tehtyä.

Kirjoittaja Timo Leiniö

Olen WP-oppaan perustaja ja päätoimittaja. Työskentelen päivittäin erilaisten verkkosovelluksiin liittyvien haasteiden parissa Sofokuksella. Vapaa-ajalla minut löytää todennäköisesti kalastamasta tai pelaamasta biljardia.

Keskustele ja kysy

  • Aloittelija koodaaja sanoo:

    ”Genesis Framework” teema kokeilua
    Vaikuttaa että teemassa joutuu tekemään paljon koodaus ”käsityötä”. Olen kotisivuissa käyttänyt Dreamweaver cs6 ja siinä homma hoituu helpommin. Päätin kuitenkin kokeilla tätä WP:ssa toimivaa teemaa mutta värit (mm. lisäplugi olisi jo hyvä juttu, jolla voisi pikamuokata kuten ” WP Fourteen” teemasaa ) ylä kuvan mahdollisuuden puuttuminen perus pohjasta ( vinkki ohjetta löytyi sitten vasta Googlettamalla ) ym. ongelmat joka juttu kovin työlästä?
    Oliisn odottanut että maksullisessa teemassa mm. em. asiat on itsestään selvyyksinä mukana?

    Miten tuon ”Genesis Sample Themen” alatekstin kanssa? Kaiketi sen voi korvata ”lapsiteemassa” ( Sample Theme ) Omilla tiedoillaan ? Luomalla php tiedoston ”Sample Themeen” ?

    Tuo sisään kirjautuminen kuitenkin jättää paikalleen ?

    Alateksti josta on kyse:
    ”…Copyright © 2014 · Genesis Sample Theme on Genesis Framework · WordPress · Log out….”

    • Timo Leiniö sanoo:

      Genesis Framework on enemmän framework kuin valmisteema, jossa voisi muokata asioita ylläpidossa. Frameworkilla tarkoitetaan alemman tason toteutusta, joka yleisemmin tarkoittaa sitä, että jos haluaa asioita muokata sitä varten joutuu tekemään koodimuutoksia. Genesis sopii hyvin esimerkiksi projekteihin jossa koodataan kokonaan räätälöity teema.

      Jos haluat sellaisen teeman, jossa ei tarvitse koodata, mutta voi muokata asioita ylläpidosta, suosittelen etsimään jonkin sopivamman vaihtoehdon esim. Codecanyonista (http://codecanyon.net/category/wordpress).

      Genesiksen oston yhteydessä olet saanut tunnukset Genesiksen dokumentaatioon. Suosittelen lukemaan dokumentaatiot sillä, niissä on kerrottu miten Genesis toimii ja miten asioita voi sen kanssa muokata.

      Alatekstiä voi muokata koukkujen avulla (ks. dokumentaatio) tai http://wordpress.org/plugins/genesis-simple-edits/ lisäosalla.

  • Aloittelija koodaaja sanoo:

    https://wpopas.fi/case-esittely-stora-enso-metsa/
    ”…Sivustolla on käytössä yli 30 sivupalkkia. Tässä projektissa sivupalkkien hallinnointiin käytetään Genesis Simple Sidebars –lisäosaa, sillä siihen sai hyvin toteutettua Varnish ESI-tuen. Varnishista lisää vielä myöhemmin…..”

    Ei saanut otettua käyttöön Word Press ver.3.9.1 kanssa ( teema ”twenty fourteen ”)?
    ”..Genesis Simple Sidebars
    Varoitus: Tätä lisäosaa ei ole testattu käyttämäsi WordPressin version kanssa.
    Versio: 2.0.1
    Tekijä: Nathan Rice
    Viimeksi päivitetty: 10 kuukautta sitten
    Vaatii WordPressin version: 3.6 tai uudempi
    Yhteensopiva versioon: 3.6.1..”

  • Turo sanoo:

    Kiitos mainiosta kertomuksesta ja siitä mitä kaikkea WP:llä voi saada aikaan + tärkeiden plug-inien avaamisesta.

Lisää uusi kommentti

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *