Helposti ylläpidettävät ja näyttävät verkkosivut

3.12.2020 10:00

Teemme mielellämme hienot, saavutettavat ja näyttävät verkkosivut. Haluamme kuitenkin myös, että asiakkaamme kokee sivujensa ylläpidon mielekkääksi ja helpoksi. Käytämme WordPressin Gutenbergiä oletuksena kaikissa verkkosivuprojekteissa, koska olemme todenneet sen hyödyt käytännössä. Gutenberg helpottaa sivuston ylläpitäjän työtä ja antaa kehittäjille monipuoliset, sisällönhallinnan räätälöintiin sopivat työkalut. 

WordPress-verkkosivut ja Gutenberg

WordPress-alusta julkaisi vuonna 2018 modernin verkkomaailman tarpeisiin kehitetyn Gutenberg-editorin. Gutenberg toi mukanaan monia uusia, ylläpitäjien ja kehittäjien työhön vaikuttavia käytäntöjä. Näkyvin muutos oli, että ylläpitäjä voi rakentaa editorissa sisältöjä joko valmiiden tai kehittäjän räätälöimien lohkojen avulla. 

Eikö Gutenberg ole tuttu? Voit kokeilla Gutenbergiä WordPressin omilla sivuilla. Esittelysivu mukailee Gutenberg-editorin näkymää, jossa yksittäisen sivun sisältöjä muokataan lohkojen avulla. 

Gutenberg sopii sisällön ylläpitäjälle

Muistat ehkä WordPressin klassisen editorin? Jos et, käy vilkaisemassa klassista editoria. Klassisen editorin käyttöliittymä muistuttaa tekstinkäsittelyohjelmaa, ja erilaisia sisältötyyppejä (esim. taulukot) muokataan omissa, erillisissä näkymissään. 

Helppo käyttöliittymä ja selkeät hallintanäkymät

Ylläpitäjän työssä näkyvin ero WordPressin klassisen editorin ja Gutenbergin välillä on käyttöliittymä ja sen toiminnallisuudet. Verkkosivujen sisällön hallinta on Gutenbergillä helpompaa, koska käyttöliittymään voidaan rakentaa yksilöllisiin tarpeisiin sopivat näkymät ja työkalut.

Gutenbergissä jokaista sivua muokataan omassa näkymässä WYSIWYG-tyyliin (What You See Is What You Get, vapaa suom. saat sen mitä näet). Gutenbergissä erilaisia sisältötyyppejä, kuten taulukoita, sarakkeita tai kuvagallerioita, ei siis muokata erillisissä hallintanäkymissä kuten klassisella editorilla tehtiin. Hallintanäkymien sijaan sisältötyyppejä käytetään lohkovalikon kautta.

Verkkosivujen sisältö rakentuu lohkoista

Lohkot ovat valmiita, käyttökelpoisia ja viimeisteltyjä palikoita, joiden avoimiin kenttiin ylläpitäjä syöttää haluamansa sisällöt (ks. Kuva 1). Erilaisista lohkoista koottu sisältö taas muodostaa yksittäisen verkkosivun näkymän, kuten esimerkiksi tuoreimman blogiartikkelin tai yrityksen palveluiden esittelysivun. 

Kuva 1. Gutenbergissä mm. dokumenttien otsikkokentät ovat lohkoja, joiden sisältöä on helppo muokata.

Myös esimerkiksi verkkokaupoista tuttu WooCommerce sopii lohkojen kanssa työskentelyyn. Gutenbergillä voi luoda staattisille sivuille tai uutisiin mm. uusimmat tuotteet -osion, jonka tiedot haetaan tietokannasta. Tuotteita klikkaamalla vierailija voi lisätä tuotteen ostoskoriin tai siirtyä suoraan verkkokaupan kassalle.

Lohkot siis helpottavat ylläpitäjän työtä:

  • Räätälöidyt sisältölohkot ja lohkojen valikko luovat runsaasti mahdollisuuksia sisällön muokkaukselle: tekstin väliin on helppo sijoittaa kuvia, videoita, linkkejä tai muita rikastettuja lohkoja.
  • Sisällön rakentaminen on sujuvaa, koska ylläpitäjä näkee editorissa yksittäisen sivun samoin kuin loppukäyttäjä (ks. Kuva 2). 
  • Lohkoilla voi luoda toisistaan selkeästi erottuvia sisältöalueita.
  • Lohkojen monistaminen ja poistaminen onnistuu niin, ettei sivuston yleisilme kärsi.

Koska ylläpitäjä työskentelee pääasiassa lohkojen ja valmiiden dokumenttipohjien kanssa, on sivuston ylläpito turvallisempaa kuin aiemmin. Ylläpitäjä ei esimerkiksi pääse enää niin helposti käsiksi HTML-koodiin. Kehittäjien puskaradiossa kerrotaan, että joskus ennen vanhaan on käynyt niin, HTML:n kanssa askarteleva ylläpitäjä on epähuomiossa poistanut pätkän oleellista koodia (vrt. HTML:n lopetustägi) ja rikkonut siten koko sivuston toiminnan.

Mistä näitä sisältöä elävöittäviä, yksilöllisiä ja turvallisia lohkoja sitten saa?

Gutenberg kehittäjän näkökulmasta

Gutenberg-editoria hyödyntävän WordPress-kehittäjän tehtävä on koodata suunnitelmien mukainen ulkoasuteema ja rakentaa asiakkaan tarpeisiin räätälöity, teemaa noudattava lohkovalikoima. Gutenbergissä on valmiina joitakin perusteemoja ja -lohkoja, mutta valikoima on rajallinen, ja soveltuu lähinnä kustannuksiltaan suppeampiin verkkosivutoteutuksiin. 

Ulkoasuteema

Lähtökohtana on, että valitaan tai rakennetaan tarvittavien lohkojen käyttöä tukeva, ja ulkoasusuunnitelman mukaiseksi taipuva ulkoasuteema. Ulkoasuteema sisältää visuaalisten määritysten lisäksi ohjeistusta esim. dokumenttityypeille. Erilaisia dokumenttityyppejä voivat olla esim. etusivu, tuotevalikoimasivu, artikkelit ja yhteystiedot-sivu, joista kutakin käsitellään editorissa omina kokonaisuuksinaan. 

Lohkojen räätälöinti

Kun ulkoasuteema on koodattu, vuorossa on sopivien lohkojen rakentaminen. Lohkot määrittävät verkkosivuston erilaisten näkymien sisällöt, joten kehittäjän tulee räätälöidä sovitut lohkotyypit asiakkaan tarpeisiin sopivaksi. Kehittämistyö räätälöityjen lohkojen kanssa käynnistyykin usein tyhjältä ruudulta, ja vasta työn edetessä sisältö alkaa näyttää samalle sekä kehittäjän editorissa, että loppukäyttäjälle näkyvällä sivustolla (vrt. Kuva 2).  

Kuva 2. Tuotosta ei tarvitse tarkastella erillisten esikatseluiden kautta, joten sisältöä ja koodeja on helpompi rakentaa ja kehittää toivottuun suuntaan suoraan editorissa. Ylläpitäjä näkee tekemänsä muutokset editorissa oikealla tavalla.

Työn lopputuloksena on asiakkaan ulkoasusuunnitelmaa noudattava ulkoasuteema ja siihen sopiva, helppokäyttöinen lohkovalikoima, joka tukee sivuston erilaisia sisältötarpeita. Lohkoihin taas sisältyy layoutin lisäksi kaikki lohkojen käyttöön liittyvät tarkemmat määritykset.

Esimerkiksi oikeiden lohkojen näkyminen dokumenttien valikoissa (ks. Kuva 3), kuvagallerioiden toiminta, tekstien fonttityylit ja somefeedien ominaisuudet voidaan kaikki räätälöidä asiakkaan tarpeisiin sopiviksi. Pienintä yksityiskohtaa myöten.

Kuva 3. Räätälöidyn lohkovalikon kautta on helppo lisätä ja muokata sisältöä.

Yksilöllinen hallintanäkymä

Yksi Gutenbergin editorin hyvistä puolista on mahdollisuus vaikuttaa ylläpitäjän hallintanäkymän sisältöön ja tyyliin. Kehittäjän tehtävänä onkin ulkoasuteeman ja lohkojen koodaamisen lisäksi myös räätälöidä Gutenbergin editori asiakkaan tarpeiden mukaan.

Räätälöinnin avulla verkkosivujen erilaisista näkymistä, sisällön muokkauksesta ja ylläpidosta saadaan juuri niin loogista ja käyttäjäystävällistä kuin ylläpitäjä haluaa. 

Miten Gutenbergin saa käyttöön?

Kun lähdetään kehittämään täysin uudet verkkosivut, on Gutenberg hyvä vaihtoehto. Se sopii usein myös klassisen editorin päälle rakennetuille sivustoille, koska Gutenbergin kehittäjät ovat tavoitelleet mahdollisimman kattavaa yhteensopivuutta näiden kahden editorin välillä. WordPress on pyrkinyt tekemään Gutenbergiin päivittämisestä yksinkertaista – vain pari klikkausta ja käytössä on uusi editori.

Klassisen editorin ja Gutenbergin yhteensopivuus ei kuitenkaan ole täysin mutkatonta. Etenkin lisäosien tai räätälöityjen toteutusten kanssa on oltava varma siitä, miten editorin päivitys vaikuttaa sivuston ulkoasuun ja toimintaan. Jotta sivusto säilyy ehjänä ja toimii oikein myös Gutenbergillä, on ennen päivityspuuhia tärkeää käydä huolella läpi mahdolliset ongelmakohdat.

Verkkosivut asiakkaiden tarpeisiin räätälöitynä

WordPressin aloitusteeman ja Gutenbergin valmiiden sisältölohkojen avulla pääsee jo pitkälle, mutta ihan kaikkeen ne eivät taivu ilman muokkauksia. Koska verkkosivustoilla on usein tarve esittää monipuolista ja yksilöllistä sisältöä, tarvitaan verkkosivuprojekteissa räätälöintiä ainakin ulkoasuteeman ja sisältölohkojen osalta. 

WordPressin Gutenberg-editori antaa meille kehittäjille nopeammat ja paremmat työkalut asiakkaidemme verkkosivustojen kehittämiseen, tuo joustavuutta ratkaisuihin ja mahdollistaa toiveiden mukaiset lopputulokset. Kun tarvitset uudet verkkosivut tai nykyiset sivusi kaipaavat päivitystä, ota meihin yhteyttä. Paketoidaan yhdessä moderni verkkosivusto, joka vastaa myös tulevaisuuden tarpeisiin. 

Jätä yhteydenottopyyntö