Miten me Hurjalla teemme WordPress-sivuja?

Eräs parhaista asioista WordPress-sivujen 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.

WordPress-sivut – SAGE

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://www.freshconsulting.com/use-sage-roots-wordpress-starter-theme/

Blade on MVC-mallin mukainen View-osa

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.

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.

Composer-työkalu

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 helpottaa kehitys- ja tuotantoympäristöjen pystyttämistä

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.

Front-end-työkalut

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 on JavaScript-framework

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.

WordPress-sivujen lisäosat

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-sivujen toteutuksissamme tiettyjä hyväksi havaittuja valmiita lisäosia, kuten

• Gravity Forms – Sähköisten lomakkeiden toteuttaminen
• Yoast SEO – Sivuston hakukoneoptimoinnin avuksi
• Polylang – Sivuston monikielisyyden toteuttaminen
• All In One WP Security – WordPressin tietoturvan parantaminen

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öä.

WooCommerce-lisäosa verkkokauppojen toteuttamiseen

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.