Miten räätälöity WordPress-sivusto rakennetaan Katsaus konepellin alle

Teknistä tavaraa pinnal­lisesti

Räätälöityjen WordPress-sivujen ja WooCommerce-verkkokauppojen kehitys tapahtuu kirjoittamalla WordPress-teeman muodostavat tiedostot, asentamalla WordPress-lisäosat, liittämällä integraatiot ja lisäämällä sivuston tekstit ja kuvat hallintapaneelissa.

Ennen sivuston rakentamista käydään läpi optimointiprosessi ja tehdään sivustosta prototyyppi.

1. WordPressin asennus

   Ensimmäinen tehtävä on ladata WordPressin uusin versio, asentaa se paikallisesti omalle tietokoneelle ja aloittaa uusi projekti GitLabissa.

2. GitLab

   GitLab on verkossa toimiva tiimityökalu Git-versionhallintajärjestelmän käyttöön. Siellä verkkosivuja tekevän tiimin jäsenillä on jokaisella omat versionsa sivuston tiedostoista ja niistä voi olla päällekkäisiä variaatioita. Gitin avulla tiimi voi työstää sivuston eri osia samanaikaisesti ja projektin edetessä näistä yhdistellään valmis sivusto.

   Yhteys GitLabiin tapahtuu suojatulla SSH-yhteydellä.

   WordPressin ja tietokantojen salasanat ja käyttäjänimet ja rajapintojen avaimet siirretään kehitysvaiheen ajaksi projektin ulkopuolelle PHP dotenv:n avulla.

3. WordPress-teema

   Ennen kuin sivua päästään rakentamaan luodaan WordPressin themes-kansioon WordPress-teemalle kansio ja sinne pakolliset tiedostot eli index.php, functions.php ja style.css.

   Tässä vaiheessa otetaan esiin suunnitelmat verkkosivuista ja luodaan teemakansioon sivustokohtaiset tiedostot ja kansiot tarkasti organisoidussa järjestyksessä. Functions.php:n kautta liitetään JavaScript, CSS-tiedostot osoittamaan oikeisiin osoitteisiinsa sivuilla.

   Tiedostojen hallinta vaikuttaa myös sivuston latautumisnopeuteen. Esimerkiksi sivuille kirjoitettava JavaScript ja CSS jaetaan useisiin erillisiin tiedostoihin käyttökohteen mukaan. Modernit palvelimet tukevat HTTP/2-protokollaa, joka mahdollistaa useiden tiedostojen latautumisen palvelimelta samanaikaisesti. Sivut latautuvat nopeammin kun palvelimelta tarjotaan vain tarvittavat koodit kerrallaan.

4. Rakennus

   Nyt meillä on teemakansiossa kasapäin tyhjiä tiedostoja hyvässä järjestyksessä odottamassa koodia täytteeksi. Sivuston rakentaminen voi alkaa.

   Sivupohjat

   WordPressiä varten tehdään prototyypin mukaiset sivupohjat PHP-tiedostoina. PHP template-tiedostoissa määritellään sivujen osat HTML- ja PHP-kielillä ilman ulkoasua ja tehdään liitokset WordPressin hallintapaneeliin ja joihinkin WordPressin lisäosiin.

   PHP

   WordPress toimii pääasiassa PHP-kielellä. PHP on 90-luvulla kehitetty backend eli serveripuolen ohjelmointikieli dynaamisten verkkosivujen tekemiseen. PHP:n tärkein tehtävä on lisätä sivuille interaktiivisuutta ja mahdollistaa tietojen lataaminen sivuille tietokannoista.

   WordPressissä on kolme pääasiallista reittiä päivittää sivujen sisältöä. Gutenberg-editori, lisäkentät ja Customizer. Teeman PHP-tiedostoihin kirjoitetaan liitokset näihin.
   Lisäkenttiä varten voidaan asentaa Advanced Custom Fields -lisäosa, jolla luodaan uudet lisäkentät hallitapaneelissa klikkailemalla ja sen jälkeen tarvitsee vain määrittää lisäkentät php-sivupohjiin.

   WordPress-sivujen valikot ovat muokattavissa WordPressin hallintapaneelissa ja tämäkin on mahdollista PHP:n avulla. Teemassa voi olla useita eri valikoita. Yleensä ainakin valikot yläpalkkissa ja alapalkissa.

   PHP:n avulla voidaan lisätä osioita WordPressin hallintapaneeliin ja kirjoittaa yli ja laajentaa WordPressin, teemojen ja lisäosien oletustoimintoja.

   CSS

   Prototyypin mukainen ulkoasu ja sivujen mukautuminen eri näyttökokoihin määritellään CSS-tyylitiedostoilla.

   CSS:ää varten otetaan käyttöön Sass, mikä on huomattava apu CSS-tyylitiedostojen organisoinnissa varsinkin isommissa projekteissa. Sassin avulla CSS saadaan pilkottua entistäkin pienempiin osiin mistä yhdistellään sivupohja- ja sivukohtaiset CSS-tiedostot. Lisäksi Sass compiler pienentää CSS-tiedostot automaattisesti poistamalla rivinvaihdot ja ylimääräiset välilyönnit.

   CSS:llä myös animoidaan sivuston elementtejä kuten linkkejä ja painikkeita.

   JavaScript

   JavaScript on dynaaminen kieli jolla on mahdollista tehdä isojakin sovelluksia aina Uberista ja Netflixistä lähtien.

   Yleisimpiä JavaScriptin käyttökohteita normaaleilla yrityssivuilla ovat sivuston tekeminen eloisammaksi toiminnoilla, kuten skrollatessa tapahtuvat animaatiot, animaatiot sivun avautuessa, painikkeiden animaatiot, napista avautuvat valikot ja pudotusvalikot. JavaScriptiä käytetään myös mm. lomakkeissa, kuvaesityksissä, tuotekuvien zoomauksessa, videosoittimissa ja lisäsisällön lataamisessa sivulle sen jo ollessa auki.

   jQuery

   jQuery on vanha perinteikäs JavaScript-kirjasto, jota WordPress ja lisäosat käyttävät. jQueryn idea oli mahdollistaa koodin kirjoittaminen puhdasta JavaScriptiä hieman lyhyemmässä muodossa.

   WordPress ja lisäosat kuten WooCommerce ovat vähitellen luopumassa jQuerystä ja siirtymässä käyttämään puhdasta JavaScriptiä. JavaScript on kehittynyt jQueryn alkuajoista ja nykyinen versio mahdollistaa koodin kirjoittamisen lähes yhtä lyhyessä muodossa kuin käyttämällä jQueryä.

   Digitoimisto Pipeline suosii puhdasta JavaScriptiä, koska se toimii varmemmin tulevaisuudessakin eikä vaadi jQuery-kirjaston lataamista palvelimelta.

5. Integraatiot

   Integraatiot verkkosivujen, sovellusten ja muiden järjestelmien välillä tehdään REST-rajapintojen tai GraphQL:n avulla.

   REST-rajapinnat

   REST-rajapintojen avulla WordPress voidaan yhdistää järjestelmiin kuten CRM, varastonhallinta, Zapier ja Googlen palvelut.

   WordPressin tietokannat voidaan yhdistää REST-rajapinnan avulla toisiin verkkosivuihin ja sovelluksiin. Sen kautta lähetetään data myös React-verkkosovellukselle kun WordPressiä käytetään headless CMS backendinä.

   GraphQL

   GraphQL on ns. modernimpi vaihtoehto REST-rajapinnalle. GraphQL ei ole vielä sisäänrakennettuna WordPressissä, mutta sen käyttö onnistuu lisäosan avulla. GraphQL:ssä on selkeät standardit ja se on helpommin sovitettavissa yhteen toisten GraphQL:ää käyttävien sovellusten kanssa. Eri REST-rajapinnat voivat poiketa toisistaan paljonkin. GraphQL:n hienous on siinä, että se hakee tiedot tarkemmin rajattuna ja se voi hakea dataa useasta kohteesta yhdellä pyynnöllä.

   GraphQL ei ole syrjäyttämässä REST-rajapintoja ainakaan lähivuosina ja niille molemmille löytyy käyttökohteensa. Valinta näiden kahden välillä täytyy harkita tilannekohtaisesti.

6. WordPress-lisäosat

   WordPressissä iso osa toiminnoista tapahtuu lisäosien kautta. Syynä tähän on se että WordPress on alun perin tehty sisällönhallintatyökaluksi missä ei tarvitse osata kirjoittaa koodia ja lisäosapankista voi ladata uusia toimintoja sivuille. WordPressin standardi käytäntö on, että yksinkertaisemmatkin toiminnot kuten yhteydenottolomakkeet tehdään lisäosan kautta.

   Kaikkea ei kuitenkaan tarvitse tehdä lisäosalla vaikka lisäosapankista löytyisikin tarkoitukseen sopiva palikka. Monet asiat voidaan hoitaa teeman tiedostojen kautta tai WordPressin komentorivillä (WP-CLI).

   Digitoimisto Pipeline pyrkii käyttämään mahdollisimman vähän lisäosia koska ne voivat hidastaa sivuston latautumista ja niiden tulevat päivitykset voivat tuoda mukanaan tietosuojariskejä ja toimintahäiriöitä.

   Wordpress-lisäosissa on tarkka laadunvalvonta ja ne on suositeltavaa pitää ajan tasalla ja päivittää uuteen versioon aina kun sellainen tulee. WordPressin hallintapaneelissa voi valita lisäosat, jotka päivittyvät automaattisesti. Joidenkin lisäosien kohdalla, kuten WooCommerce-verkkokauppalisäosa ja verkkomaksupalveluliitännäiset, kannattaa silti varmistaa ettei uudessa päivityksessä ole bugeja. Hyvä nyrkkisääntö on asentaa lisäosan uusi versio ensin testausympäristössä julkisen sivuston sijasta tai odottaa päivä tai pari ennen kuin lataa uuden päivityksen ja katsoa tuleeko muille lisäosan käyttäjille ongelmia. Ja ennen päivitystä vielä varmistaa, että sivustosta löytyy tuore varmuuskopio.

7. WordPress-lisäosien kehitys

   WordPress-lisäosien koodaus voi tulla kyseeseen esimerkiksi jos tarvittavaa toimintoa varten ei ole vielä olemassa sopivaa lisäosaa tai jos olemassa oleva lisäosa on sen verran raskas että se hidastaa sivuston latautumista.

8. Sisällön lisäys hallintapaneelissa

   Sivuille tulevat kuvat ja tekstit lisätään WordPressin hallintapaneelissa ja siellä ne ovat helposti muokattavissa.

9. Nopeusoptimointi

   Yksi räätälöidyn WordPress-sivuston hyvistä puolista on, että se on kevyempi, koska teemassa ei ole mitään turhaa ja se on alusta lähtien suunniteltu latautumaan nopeasti. Nopeuteen vaikuttaa mm. tiedostonhallinta, pyyntöjen määrä tietokannasta ja page buildereille tyypillisestä sillisalaatista vapaa koodi.

   Nopeusoptimointiin kuuluu tiedostojen ja kuvien pakkaaminen pienemmäksi, Gzip-pakkaaminen, serveri- ja selainpuolen välimuistien käyttöönotto, tietokantojen siivous, CDN:n käyttöönotto jos sivuilla on kansainvälinen kohdeyleisö, Google Analytics paikallisesti omalta palvelintilalta, hotlinking-esto, defer- ja async-attribuutit, WordPress transientit, tiedostojen esihaku, jne.

10. Laaduntarkkailu

    WordPress-sivujen ja verkkokauppojen rakentamisvaiheeseen kuluu aikaa muutamasta kymmenestä jopa tuhansiin työtunteihin ja kirjoitettua koodia on tuhansia ja tuhansia rivejä. Ymmärrettävistä syistä prosessin on oltava hallittu ja rakennusvaiheen aikana tehdyllä laadunvalvonnalla ja testauksella on paikkansa.

11. Koeajo

    Valmiin verkkosivuston huolellinen testaus tapahtuu staging/testausympäristössä, joko sivuston tilaajan palvelimella tai Digitoimisto Pipelinen kehitysosoitteessa. Testausympäristöön myös ajetaan rakennusprojektin kuluessa välivaiheita verkkosivujen tilaajan nähtäville ja kommentoitavaksi.