Teen ajoittain pienimuotoisia projekteja toiminimellä ja kesälomani aikana uudistin YIP Ympäristöinsinööripalvelut Oy:n -sivuston. Projektissa vanha kaksikielinen HTML-sivusto siirrettiin WordPress-alustalle ja muutamien lisäosien avulla rakennettiin dynaaminen kokonaisuus vastaamaan vanhaa toiminnallisuutta. Pieni projekti, jonka lopputulos helpottaa jatkossa huomattavasti sivuston ylläpitoa ja päivittämistä.

YIP Ym­pä­ris­töin­si­nöö­ri­pal­ve­lut Oy on vuon­na 2005 pe­rus­tet­tu ympäristösuunnittelu ja -konsultointiyritys, joka tekee muun muassa hulevesi-, prosessivesi- ja jätevesisuunnittelua ja ym­pä­ris­tö­lu­pa­- ja maa-aineslupaselvityksiä ja -hakemuksia. Yrityksen vanhat sivut olivat staattiset kaksikieliset HTML-sivut, jotka päätettiin uudistaa WordPress-alustalle isomman sisältöpäivityksen yhteydessä. Näin saataisiin sivujen päivitys jatkossa helpommaksi ja nopeammaksi sekä lisättyä mahdollisuus artikkeleiden kirjoittamiseen.

Yip.fi-sivuston uudistamisessa ei tehty juurikaan muutoksia aikaisempaan HTML-sivustoon, vaan ulkoasu siirrettiin lähes sellaisenaan WordPress-teemaksi. Vain sisältöosan taustaväri vaihdettiin valkoiseksi ja uusina osioina lisättiin tyylit blogi-kirjoituksille. Pieniä muutoksia tarvittiin myös Internet Explorerin vanhempien versioiden ja HTML5:n osalta.

WordPress-teeman rakentaminen

En alkanut rakentamaan uutta teemaa aivan tyhjästä, tai pohjautuen esimerkiksi WordPressin oletusteemoihin, vaan käytin hyväksi todettua Automatticin _s, eli underscores -teemaa, joka tarjoaa selkeän lähtötilanteen uuden teeman rakentamiseksi. Aloitusteema sisältää minimaalisen ja hyvin jäsennellyn CSS:n, HTML5-sivupohjat ja 5 eri taittoa ja muutamia yleisiä navigointiin ja teeman rakentamiseen liittyviä lisäyksiä. Eli juuri riittävästi perustusta, jonka päälle rakentaa oma kokonaisuus.

Underscores-aloitusteema tarjoaa myös pohjan teeman lokalisoinnille POT-käännöstiedoston kautta, mutta ei tarjoa valmista käännöstä eri kielille kuten WordPressin oletusteemat. Sanojen ja lauseiden kääntäminen onnistuu suhteellisen helposti esimerkiksi Poedit-ohjelmalla, kun vielä hyödyntää oletusteemojen suomennoksia apuna.

Vanhempien Internet Explorer -selainversioiden HTML5 -yhteensopivuuden takaamiseksi sivustolle asetettiin html5shiv-skripti, joka mahdollistaa HTML5 elementtien käytön.

Käytetyt lisäosat

WordPress tarjoaa suoraan paketista hyvän perustan sivuston rakentamiseksi ja erilaisten lisäosien avulla se taipuu monenlaisiin käyttötarkoituksiin. Yip.fi-sivusto on toiminnaltaan suhteellisen yksinkertainen ja käytetyt lisäosat liittyvät pääosin kaksikielisyyteen, yhteydenottolomakkeeseen ja hakukonenäkyvyyteen.

Monikielisyyden toteuttamiseen käytin WPML-lisäosaa, joka aikaisempien kokemuksien perusteella toimii paremmin kuin qTranslate, tai ratkaisut jotka hyödyntävät multisite-toimintoa kuten Multilingual Press. Jatkossa pitänee testata myös Polylangia.

Monikielisyyden takia tarvitsin myös lisäosan, jolla saa määriteltyä omat sivupalkit eri kielille. WooSidebars-lisäosa täytti vaatimuksen, vaikka nyt Ulkoasu > Vimpaimet -sivu on hieman sekava näyttäen kaikkien kielien sivupalkit samalla kertaa. Vaihtoehtoisesti olisin voinut käyttää Dynamic Widgets -lisäosaa, mutta aikaa ei ollut enää sen testaamiseksi. Lisäosa mahdollistaa myös sivupalkkien määrittämisen sivukohtaisesti.

Sivuston title-, description- ja keywords-kenttien päivittämistä varten Add Meta Tags -lisäosa vaikutti toimivalta ratkaisulta ja sen avulla jokaiselle sivulle ja kirjoitukselle voi määritellä omat tiedot suoraan muokkausnäkymästä.

Yhteydenottolomake toimii Contact Form 7 -lisäosan avulla ja Flamingo-lisäosa tallettaa lähetetyn sanoman. Huomasin lomaketta rakentaessa myös virheen lisäosien yhteistyössä, sillä jos lomakkeessa käyttää valintaruutua your-subject-kentässä, ei lomake anna kuittausviestiä, vaikka se lähetetään onnistuneesti.

Sivuston toimintoja varten piti myös toteuttaa oma lisäosa alisivujen näyttämiseksi, sillä en löytänyt lukuisista lisäosista sellaista, joka olisi toiminut kuten haluttiin. Tekemäni Sub Page Menu -lisäosa näyttää sivun alisivut myös lukijan ollessa alisivulla ja alisivujen alisivut vain ollessa alisivulla. Lisäksi viimeisimpien kirjoitusten näyttämiseen piti laajentaa hieman WordPressin vakiovimpainta, jotta vimpaimen otsikko toimii linkkiä artikkeleiden sivulle.

Muut käytetyt lisäosat ovat Google XML Sitemaps sivukarttojen muodostamiseen, jQuery Colorbox kuvien avaamiseksi modaali-ikkunaan ja sivuston kakutuksesta vastaa WP Super Cache.

Yhteenveto

YIP Ympäristöinsinööripalvelut Oy -sivuston uudistaminen WordPress-alustalle staattisen kaksikielisen HTML-sivuston pohjalta oli suhteellisen pieni projekti, mutta sisälsi muutamia enemmän säätöä vaativia vaiheita etenkin monikielisyyden ja sivupalkkien, sekä alisivujen näyttämisen osalta. Vanha ulkoasu muuntui muutamilla muutoksilla WordPress-teemaksi, sillä vanha rakenne muistutti _s-aloitusteeman tarjoamia HTML5-sivupohjia. Lopputuloksena saatiin aikaan ulkoasultaan tuttu sivusto päivitetyllä sisällöllä, jonka päivittäminen on jatkossa helpompaa sekä sisällön että ajankohtaisten artikkeleiden osalta.