(päivitetty 16.11.2022)
WordPress Gutenberg helpottaa sivuston ylläpitäjän työtä.
Hurjalla pidämme huolta siitä, että saat tarpeidesi mukaiset ja näyttävät verkkosivut yrityksellesi ja haluamme, että myös koet sivujesi ylläpidon mielekkääksi ja helpoksi. Käytämme nykyisin WordPress Gutenberg -editoria oletuksena kaikissa verkkosivuprojekteissa, koska olemme todenneet sen hyödyt käytännössä. WordPress 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-alusta julkaisi vuonna 2018 modernin verkkomaailman tarpeisiin kehitetyn Gutenberg-editorin. WordPress 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.
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.
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.
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.
Myös esimerkiksi verkkokaupoista tuttu WooCommerce sopii lohkojen kanssa työskentelyyn. WordPress 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ä:
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?
WordPress 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.
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.
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).
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.
Yksi WordPress Gutenberg -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.
Kun lähdetään kehittämään täysin uudet verkkosivut, on WordPress 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.
WordPress-sivuston 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.
WordPress 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 yrityksellesi tai nykyiset sivusi kaipaavat päivitystä, ota siis meihin yhteyttä. Paketoidaan yhdessä moderni verkkosivusto, joka vastaa myös tulevaisuuden tarpeisiin!
Lataa verkkosivuopas
