Täydellinen hallinta WordPress-sivuihin Full Site Editing -teemalla

Viime vuosien WordPress-editorin muutokset

WordPress-sisältöeditori on kehittynyt merkittävästi viime vuosina. Alkuperäisestä klassisesta WYSIWYG-editorista siirtyminen Gutenberg-editoriin ja siitä edelleen Full Site Editing (FSE) -ominaisuuksiin on muuttanut olennaisesti sivustojen ja yksittäisten sivujen luontia ja hallinnointia WordPressissä. Kehityksen myötä sisällöntuottajat ovat saaneet käyttöönsä paljon uusia mahdollisuuksia, mutta toki se on ensin vaatinut myös uusien työkalujen ja ajattelutavan sisäistämistä.

Klassinen editori: Perinteinen lähestymistapa (-2020)

Alkuperäinen klassinen editori oli pitkään WordPressin ydinosa, joka toimi enemmän tekstinkäsittelyohjelman kaltaisesti. Se tarjosi yksinkertaisen, WYSIWYG-tyyppisen käyttöliittymän, jossa sisällön muokkaamista tehtiin tekstilohkoilla ja lyhytkoodeilla.

Alkuperäinen editori oli helppokäyttöinen, mutta hyvin rajoittunut. Jos sivulle haluttiin luoda hiemankin monimutkaisempaa rakennetta (vaikkapa kaksisarakkeinen sisältöpalsta), niin vaihtoehtona oli joko käyttää hankalaa shortcodea suoraan editorissa tai räätälöidä sivupohjaa siten, että jonnekin ennalta määrättyyn paikkaan asetettiin asetukset kaksipalstaista sisältöä varten. Olenkin nähnyt klassisen editorin käyttövuosien aikana ylläpitonäkymissä melkoista sillisalaattia asetusten osalta. Esimerkiksi eri tekstipaikkoja varten on luotu useita erilaisia sisältökenttiä, joista osalla ei edes ole mitään käyttöä kyseisessä sivupohjassa.

Klassisen editorin käyttöaikana (noin vuoteen 2019 saakka) Luuptek toteutti monimutkaisemmat sivustot ACF-lisäosan (Advanced Custom Fields) flexible-fields tyyppisinä moduuleina, joita pystyi lohkomaisesti järjestelemään per muokattava sivu. Tämä oli suhteellisen näppärä tapa luoda modulaarista sisältöä sivustolle, mutta haasteita tässä tavassa oli mm. eri moduulien mahdollistaminen erilaisissa sivupohjissa.

Gutenberg: Lohkoihin perustuva lähestymistapa (2020-)

Vuonna 2018 WordPress lanseerasi Gutenberg-editorin, joka merkitsi isoa askelta kohti modernimpaa sisällönhallintaa. Gutenberg toi mukanaan lohkoihin perustuvan lähestymistavan, jossa sivuston sisältö rakennetaan erilaisista lohkoista, kuten tekstilohkoista, kuvista, videoista, painikkeista ja monista muista sisältöelementeistä. Itse olin aluksi hyvinkin spektinen uuden editorin mahdollisuuksista, ja varsinkin alkuaikoina Gutenbergin ominaisuudet olivat kehnoja (ja jopa bugisia). Klassisen editorin kanssa käytetyt joustavat sisältökentät tarjosivat samat tai jopa paremmat mahdollisuudet.

Gutenberg kuitenkin kehittyi (ja kehittyy edelleen koko ajan) nopeasti ja päätimme ottaa kyseisen editorin käyttöön kaikissa uusissa projekteissamme vuoden 2020 alussa. Myös Luuptekin omat sivut päivitettiin uuden editorin mukaisiksi loppuvuonna 2019.

Uudessa Gutenberg-muokkaimessa saatiin yhdistettyä kaikki WP-coren mukanaan tuomat sisältölohkot, sekä kaikki täysin itse räätälöidyt lohkot. Tämä antaa sisällön luomiseen huimasti lisää joustavuutta ja helppoutta. Esimerkiksi nappulat saadaan luotua suoraan Gutenberg-muokkaimessa, joten enää ei tarvitse käyttää vanhanaikaista shortcode-viritystä. Lisäksi elementtilohkoja voi monistaa (periaatteessa good old copy paste, ai että on kätevää)! Lisäksi back end -puoli on mahdollista räätälöidä samannäköiseksi kuin front end.

luuptek.fi: miksi siirryimme klassisesta editorista Gutenbergiin

Full Site Editing (FSE): Natiivilohkot ja koko sivuston muokkaus (2024-)

Seuraava askel WordPressin kehityksessä on Full Site Editing (FSE), joka laajentaa Gutenbergin lohkoihin perustuvan lähestymistavan kattamaan koko sivuston rakenteen. FSE:n avulla sisällönsyöttäjät voivat muokata sivuston kaikkia osia: navigointipalkkia, alatunnistetta, sivupalkkeja, sivupohjia, arkistosivuja, 404-sivua – periaatteessa mitä vain, mitä sivulla näkyy. Tämä kaikki hoituu samoilla lohkoilla, joita käyttäjät ovat tottuneet käyttämään sisällönmuokkauksessa. Kaikki sivuston osat ovat siis muokattavissa suoraan visuaalisen editorin avulla ilman koodin muokkaamista tai monimutkaisia lisäosien asetuksia.

Natiivilohkoilla tarkoitetaan lohkoja, jotka tulevat WordPressin ytimen mukana. Näitä ovat esimerkiksi kansi, sarakkeet, ryhmä (ja sen variaatiot), galleria tai ”Media ja teksti”. Natiivilohkojen avulla ylläpitonäkymästä saadaan tehtyä samanlainen varsinaisen julkisen näkymän kanssa. Lisäksi sivuston sisällön muokkaus eroaa huomattavasti esimerkiksi ACF-lohkojen kanssa touhuamisesta – hyvällä tavalla – näet muokatessasi heti, miltä sivun sisältö näyttää.

Luuptek onkin ottanut uudet työkalut ja natiivilohkot käyttöönsä kaikissa uusissa projekteissa vuodesta 2024 alkaen ja Starter-paketit tehdään oletuksena FSE-ominaisuuksilla ja natiivilohkoilla. Myös omat sivumme uudistettiin FSE:n alle loppukesällä 2024.

Miksi luuptek.fi uudistettiin FSE-muokkaimeen ja natiivilohkoihin?

• Ylläpitonäkymä vastaa nyt 100% varsinaista sivunäkymää (ks. screenshot alla)
• Eri lohkojen välisiä marginaaleja on mahdollista määrittää editorissa suoraan eikä koodata tiettyyn muottiin ==> mahdollistaa eri lohkojen kombinaatiot helpommin
• Teksteissä on mahdollista määrittää korostusväri, jolla voi asettaa esim. otsikkoon useampia erilaisia fonttivärejä
• Kaikkiin lohkoihin saa oletuksena halutessaan ankkurilinkin
• Tekstikokoja voi muutella helposti editorilla, enää ei tarvitse tehdä muutoksia koodissa
• Helpompi tehdä uudenlaisia sisältöjä eri sivuille
• Mahdollisuus käyttää uudelleenkäytettäviä lohkomalleja
• Saadaan käyttöön jatkossa KAIKKI uudet wp-coren ominaisuudet

Full Site Editing – hyödyt käyttäjän (sisällönpäivittäjän) näkökulmasta

• Et tarvitse koodaajaa muuttamaan jonkin lohkon taustaväriä tai fontin väriä
• Et tarvitse koodaajaa luodaksesi esim. tyylikkään laskeutumissivun
• Voit muuttaa sivupohjien ulkoasua vapaasti ilman koodausapua
• Voit muuttaa joidenkin tekstien fonttia halutessasi ilman koodausapua
• Voit muuttaa tekstien kokoja ilman koodausapua
• Voit muuttaa lohkojen välisiä marginaaleja ilman että tarvitsee koskea koodiin
• Näet sivun sisällön ylläpidossa siten, miten se näkyy julkisella sivulla (visuaalinen ilme on sama)
• Voit hallita ja käyttää uudelleenkäytettäviä lohkomalleja: voit luoda lohkokokonaisuuden, jota voidaan käyttää uudelleen eri sivuilla ja artikkeleissa, mikä nopeuttaa sisällöntuotantoa ja ylläpitää yhtenäistä ilmettä

Esimerkki koodatusta lohkosta vs. WP-coren natiivilohko Full Site Editing -versiossa

Otetaan käytännön esimerkki verkkosivujen ehkä eniten käytetyimmästä elementistä eli herosta. Herolla tarkoitetaan yleisesti sivun ensimmäistä elementtiä, jossa on jokin taustakuva (joskus video) ja taustakuvan päällä x määrä tekstiä ja kenties jokin nappula.

Koodatussa (ACF-) lohkossa määritetään asetukset eri ominaisuuksille (kuva, otsikko, leipäteksti, nappi), jotka käyttäjä voi asettaa haluamikseen. Valmiiksi koodattu lohko määrittää otsikolle ja leipätekstille tietyn koon ja värin. Koodissa voidaan lyödä lukkoon taustalle haluttu kerrosväri, jolloin teksti on helpommin luettavissa. Teksti myös asemoidaan koodin mukaisesti (vasemmalle, keskelle, oikealle). Lohkon ulkoasu siis määritetään koodissa ja jos esim. tekstin asemointia halutaan muuttaa, niin se pitää muuttaa koodaamalla.

Ful Site Editing -versiossa herosta luodaan tietty lohkomalli. Käyttäjä voi tämän jälkeen päättää, haluaako muuttaa mallin värejä, tekstien kokoja tai taustaväritason väriä/läpinäkyvyyttä. Full Site Editing -versiossa voi jopa päättää halutaanko käyttää taustakuvaa lainkaan vai sopisiko pelkkä taustaväri paremmin jossain tapauksissa.

Millaiselle käyttäjälle Full Site Editing sopii erityisesti?

• Olet luova sisällöntuottaja ja haluat kokeilla erilaisia ulkoasuja ja rakenteita ilman, että joudut turvautumaan koodaajan apuun
• Haluat hallita omaa verkkosivustoasi ilman ulkopuolista apua (tämä tosin vaatii jonkin verran teknistä osaamista)

FSE:n käyttö Luuptekin projekteissa

Luuptek on ottanut FSE-työkalut käyttöön uusissa Starter-paketin projekteissa keväästä 2024 alkaen. Miksi? Koska yksinkertaisen tyylikkäät sivustot on helpompi luoda FSE:llä ja natiivilohkoilla. Lisäksi FSE ja natiivilohkot ovat WordPressin standardeja vuonna 2024. Esimerkiksi suositut lohkot kuten Hero (sivun ensimmäinen iso kuvallinen lohko) tai viimeisimpien artikkeleiden listaus on kätevämpää luoda natiivilohkoilla kuin koodata ne itse.

Olemme tarjonneet asiakkaillemme Gutenbergin natiivilohkoja projekteissa jo vuodesta 2021, esimerkiksi Veliconsin sivu tehtiin 100% natiiveilla lohkoilla. Natiivilohkoja hyödyntävät sivustot ovat olleet niin sanottuja hybrimalleja – natiivilohkoja on ollut mahdollista käyttää, mutta huomattavasti riisutummin ominaisuuksin kuin nyt FSE-työkalujen avulla. Hybridisivustoja on hienosäädetty paremmiksi ACF-lisäosan ACF-lohkot -ominaisuuden kautta, jolloin asiakkaalle on voitu luoda näyttävämpiä lohkoja. ACF-lohkoja voidaan käyttää myös FSE-maailmassa, mutta tällöin sisällöntekijän käyttäjäkokemus ei ole yhtä innovatiivinen kuin natiivilohkomaailmassa.

Ihan kaikkea ei kuitenkaan vielä aseteta FSE-editorin alle – navigaatiopalkki koodataan aina käsin (ainakin vielä loppuvuonna 2024), kunnes navigaatioiden tekeminen FSE:llä onnistuu helpommin kuin tällä hetkellä. Varsinkin hiemankin monimutkaisempien navigaatioiden tekeminen natiiveilla työkaluilla on käytännössä mahdotonta. Tämä tarkoittaa siis sitä, että asiakkaalla ei ole mahdollisuutta itse muokata navigaatiopalkin väriä tai linkkien väriä. Varsinaista navigaatiomenua on toki mahdollista muokata.

FSE kehittäjän näkökulmasta

Jos FSE ja natiivilohkot muuttavat sisällönsyöttäjän käsitystä ja kokemusta verkkosivuston päivityksestä, täysin samaa voidaan sanoa myös siitä, miten FSE-sivustoa kehitetään.

Aiemmin esimerkiksi räätälöity lohko tehtiin ACF-lohkona, johon määritettiin tietyt asetukset ja tyylittelyt. Natiivilohkojen kanssa luodaan niin sanottu lohkomalli, jota käyttäjä voi käyttää halutussa paikassa sivullaan. Räätälöity lohkomalli rakennetaan pääsääntöisesti natiiveja lohkoja käyttäen ja tyylitellään halutun näköiseksi. Koska rakentamisessa käytetään natiivilohkoja, nousee lohkon uudelleenkäytettävyys uuteen arvoon – saman lohkomallin pitäisi jollain muulla sivustolla näyttää pääpiirteittäin lähes samalta kuin jollain toisella. Valu Digitalin Mikko Virenus demoaa uudelleenkäytettävyyttä (ja wp-standardin mukaista tekemistä) hienosti omassa Linkedin-postauksessaan (ks. alla).

FSE:n uhat

Uudet mahdollisuudet luovat uusia uhkia. Suurin uhka on käyttäjä (sisällönpäivittäjä) itse. Kouluttamaton sisällönpäivittäjä voi aiheuttaa mm. seuraavaa:

• Poistaa sivustolta koko navigaatiopalkin
• Muuttaa sivuston brändivärit
• Muuttaa esimerkiksi arkistosivun listausta siten, että mitään listausta ei näy
• Ladata sivustolle käyttämättömiä fontteja tai muuttaa brändifontteja

Luuptekin kehittämistä Full Site Editing -teemoista löytyvät kuitenkin palautusmahdollisuudet sivupohjille ja tyylikirjastoille, joten mahdollisten mokien palauttaminen sujuu muutamalla klikkauksella ylläpidossa.

Loppukommentti

Koska FSE on monipuolinen työkalu, se vaatii huomattavasti suuremman ”learning curven” kuin esimerkiksi klassinen WYSIWYG-editori. FSE:n työkalut ja ominaisuudet mahdollistavat kuitenkin todella joustavan ja luovan sisällöntuottamisen. Enää vain oma mielikuvitus on rajana!

Uusien ominaisuuksien osaajana muutat helposti lohkojen ulkoasua ja teet mahdolliset uudet ”ländäri”-sivut helposti, nopeasti ja ennen kaikkea tyylikkäästi.

Tällä lomakkeella voit ottaa yhteyttä, kun kiinnostuit FSE:n ominaisuuksista!