Eräs parhaista asioista WordPress-kehityksessä on se, että alustan
kehittäjäyhteisö on niin laaja. Avoin lähdekoodi mahdollistaa hienolla
tavalla verkkosivujen julkaisujärjestelmän, joka skaalautuu moneen eri
käyttötarkoitukseen, eikä jämähdä kehityksessä paikoilleen.
WordPress toimii mainiosti eri kokoisten verkkosivustojen alustana ja
sivustoja voidaan rakentaa sen päälle eri tyyleillä. WordPress-sivuston
toteutus voidaan yleisesti ottaen jakaa kuitenkin kahteen eri tapaan:
sivuston rakentaminen käyttäen valmista kolmannelta osapuolelta
ostettavaa WordPress-ulkoasuteemaa tai koodaamalla sivustolle täysin
asiakaskohtainen, räätälöity ulkoasuteema. Toteutamme sivustoja
jälkimmäisellä tavalla etenkin laajemmissa verkkosivuprojekteissa, koska
tällöin voimme toteuttaa juuri sellaisen sivuston kuin asiakkaan tarve
on, eikä sivuston rakentaminen ole kolmannen osapuolen toteuttaman
ulkoasuteeman rajoitusten varassa. Näin voidaan myös varmistaa
esimerkiksi hyvä latausnopeus, kun mukana ei ole usein valmiissa
teemoissa mukana tulevia ylimääräisiä ominaisuuksia tai hidastavaa
tarpeetonta koodia.
Pyörää ei kuitenkaan tarvitse keksiä uudelleen räätälöityäkään teemaa
rakentaessa, kun käytetään valmiita moderneja työkaluja, jotka
nopeuttavat ja tehostavat WordPress-sivustojen kehitystä. Tässä
listattuna frameworkejä ja työkaluja, joita käytämme yleisesti etenkin
laajemmissa verkkosivuprojekteissa, joihin toteutetaan täysin
asiakaskohtaisesti suunniteltu ulkoasuteema.
Ulkoasuteema on WordPressiin koodattu ulkoasu, joka määrittää sen, miltä
sivusto näyttää kävijälle. Uniikkien WordPress-ulkoasuteemojen pohjalla
käytämme yleisesti Sagea, joka on niin kutsuttu WordPressin
aloitusteema. Se sujuvoittaa WP-kehityksen aloitusta ja mahdollistaa
yksilöllisen teeman tehokkaan koodaamisen. Voidaan ajatella, että
WordPress on kuin talon kivijalka ja Sage on kuin runko – kun talon
perustus ja runko on pystytetty jo valmiiksi, sujuu seinien ja muiden
pintojen rakentaminen nopeammin.
Sagen kanssa työskentely on turvallista, sillä sen ohjetiedostoissa on
hyvät ohjeet esimerkiksi riippuvuuksista ja valmiiksi asennetuista
työkaluista. Sage pysyy teknologisesti ajan tasalla, sillä sitä
kehitetään jatkuvasti. Sagen tuottaneelta Rootsin kehittäjätiimiltä saa
hyvin tukea ongelmatilanteissa, ja apuna on tarvittaessa myös Sagen
viralliset kehittäjäfoorumit sekä keskustelupalstat. Sage on
kehittäjäystävällinen, eikä se sisällä WP-kehittäjän päätä sekoittavia
ja työskentelyä hidastavia tarpeettomia komponentteja tai epäselviä
ohjeita.
Sage on lähempänä MVC-mallia kuin tavallinen WordPress. MVC-malli
tarkoittaa sitä, että projektin koodi voidaan jaotella kolmeen osaan:
model, view ja controller. Model tarkoittaa esimerkiksi oliomallia,
jossa muuttujat esitellään, view graafista käyttöliittymää ja controller
olioiden ja graafisen käyttöliittymän komponenttien toiminnallisuuksia.
Sagen controllereiden avuilla esimerkiksi näkymien tiedot saadaan
helposti kerättyä yhteen, ja näkymien koodi pidettyä siistinä sekä
helpommin hallittavana.
https://roots.io/sage/
https://www.freshconsulting.com/use-sage-roots-wordpress-starter-theme/
Blade
Blade on MVC-mallin mukainen View-osa, jota käytetään myös Sagessa.
Bladen avulla view-tiedostojen näkymien eli sivupohjien ja niiden osien
rakentaminen on yhtenäisen mallin mukaisesti mukavampaa, sillä eri
tiedostot voivat periä toistensa ominaisuuksia ja tiedostoja voi
rakentaa sisäkkäin.
Sagen blade-pohjat ovat alunperin lähtöisin Laravelista, joka on yksi suosituimmista PHP:n frameworkeista.
https://laravel.com/docs/5.6/blade
Sass/scss
SASS-kielen SCSS-syntaksi tekee CSS-kielisen koodin kirjoittamisesta
mukavampaa. SASS-kielellä voi toteuttaa asioita, jotka eivät olisi
mahdollisia CSS-kielellä: esimerkiksi muuttujat ja perintä. Sagessa
SASS-kielen käyttö on oletuksena.
https://sass-lang.com/
Composer on työkalu ohjelmointiprojektin sisäisten riippuvuuksien
hallintaan. Jos PHP-kielellä toteutettu projekti on riippuvainen
useammasta kirjastosta, jotka ovat puolestaan riippuvaisia muista
kirjastoista, mahdollistaa Composer kaikkien projektin sisäisten
riippuvuuksien asentamisen ja päivittämisen keskitetysti. Composeriin
voi määrittää, mihin kirjastoihin riippuvuuksia on, ja se lataa
päivitykset projekteihin.
Composerin avulla säästyy aikaa ja hermoja, eivätkä projektin
päivitykset ole yhtä alttiita inhimillisille virheille, verrattuna
riippuvuuksien manuaaliseen hallintaan.
https://composer.rarst.net/#why-bother
Bedrock muuttaa WordPress-asennuksen kansiorakenteen kehityksen kannalta
paremmaksi. Se tarjoaa hyvät versionhallintaominaisuudet sekä erillisen
composer-hallinnan WP-asennukselle, teemalle ja lisäosille. Bedrock
helpottaa kehitys- ja tuotantoympäristöjen pystyttämistä ja tukee myös
toteutuksen parempaa tietoturvaa.
https://roots.io/bedrock/
Bootstrap, Foundation, Bulma
Responsiivisen ulkoasuteeman toteuttamisessa käytämme yleisesti
frameworkina Bootstrapia, joka on yhteensopiva Sage-aloitusteeman
kanssa. Bootstrap on avoimen lähdekoodin projekti, joka sisältää useita
hyödyllisiä ja front-end kehitystä nopeuttavia työkaluja, kuten valmiita
määrityksiä CSS-elementeille sekä joitakin JavaScript-sovelluksia.
Meiltä löytyy osaamista myös Foundationin ja Bulman käyttöön, jotka
nekin ovat Sagen kanssa yhteensopivia ja hyviä vaihtoehtoja
Bootstrapille.
https://getbootstrap.com/
https://foundation.zurb.com/
https://bulma.io/
Vue.js
Vue.js on JavaScript-framework, joka toimii vain front-end-puolella.
Vue.js:llä saa kätevästi tehtyä dynaamisia elementtejä ja
toiminnallisuuksia. Kyseinen framework on kasvattanut kovasti suosiotaan
viime aikoina verrattuna muihin suosittuihin JavaScript-frameworkeihin
ja kirjastoihin, kuten Reactiin ja Angulariin.
Vue.js:ää käytetään pääsääntöisesti helpottamaan web-pohjaisten
sovellusten käyttöliittymän rakennusta, mutta se voidaan ottaa avuksi,
kun halutaan rikastuttaa WordPress-sivuston toiminnallisuuksia. Yhdessä
WordPressin REST APIn kanssa sivustolle voidaan rakentaa JavaScriptillä
monipuolisesti toiminnallisuuksia.
https://vuejs.org/
Lisäosien eli pluginien avulla WordPress-sivustolle on mahdollista
rakentaa erilaisia lisäarvoa tuottavia ominaisuuksia. Plugineilla
nettisivujen toimintaa voi laajentaa toiminnallisuuksilla kuten
yhteydenotto- ja palautelomakkeilla. Lisäosia voidaan koodata myös
täysin asiakkaan tarpeisiin – esimerkiksi Apetitin verkkosivuprojektissa tuotehallinta rakennettiin kustomoituna lisäosana.
Käytämme useimmissa WordPress-toteutuksissamme tiettyjä hyväksi havaittuja valmiita lisäosia, kuten
Advanced Custom Fields
Advanced Custom Fields (ACF) mahdollistaa ulkoasuteeman mukaisen
sisällönhallinnan modularisoinnin selkeäksi ja helppokäyttöiseksi
sivuston ylläpitäjälle. Sivuston ylläpitonäkymään rakennettavien
lisäkenttien avulla voidaan normaalien tekstisisältökenttien lisäksi
luoda jopa täysin muokattavissa ja järjesteltävissä olevia sivun
sisäisiä rakenteita tai tuoda käyttäjän valittavaksi lisäsisältöä, joka
voi olla mitä tahansa muuta sivustolta löytyvää sisältöä.
https://www.advancedcustomfields.com/
WooCommerce
WooCommerce-lisäosa on yleisin ja paras vaihtoehto verkkokaupan
toteuttamiseen WordPress-alustalle. Siihen löytyy runsaasti verkkokaupan
toiminnallisuuksia laajentavia lisämoduuleja, sekä tuki kaikille
yleisille maksu- ja toimitustavoille. WooCommerce on monipuolinen ja
skaalautuva verkkokaupparatkaisu ja sitä kehitetään myös jatkuvasti
kuten WordPressiäkin.
https://woocommerce.com/
Tarvittavat evästeet ovat ehdottoman välttämättömiä verkkosivuston toimivuudelle. Tähän luokkaan kuuluvat vain evästeet, jotka varmistavat verkkosivuston perustoiminnot ja turvaominaisuudet. Nämä evästeet eivät tallenna henkilökohtaisia tietoja käyttäjästä.