WordPress 5.0 julkaistiin 6. joulukuuta 2018 ja sen mukana WordPressin historian toistaiseksi suurin sisällön tuottajille näkyvä muutos, täysin uudenlainen sisältöeditori Gutenberg. Tämän artikkelin tavoitteena on esitellä uuden Gutenberg-editorin tärkeimpiä eroavuuksia vanhaan WordPressin sisältöeditoriin verrattuna ja antaa neuvoja Gutenberg-editorin käytön aloittamiseen.
Mikä sisältöeditori on?
Sisältöeditori on WordPress-julkaisujärjestelmän työväline, jonka avulla luodaan ja muokataan sisältöä. Sisältöeditorin avulla verkkosivustolle lisätään tekstiä, kuvia, videoita ja linkkejä.
Sisältöeditori on WordPress-sivuston sisällön tuottamisesta vastaaville keskeinen ja jatkuvassa käytössä oleva työväline. Kun kirjoitat uuden blogiartikkelin, käytät sisältöeditoria. Kun luot täysin uuden sivun verkkosivustolle, käytät sisältöeditoria. Kun haluat muokata aiemmin luotua verkkosivua, käytät sisältöeditoria.
(HUOM: Poikkeuksena tästä ovat sellaiset WordPress-sivustot, joiden sisältö luodaan käyttämällä sivurakentajatyövälinettä, esimerkiksi Divi Builderia tai Elementoria).
Sisältöeditorin keskeisestä roolista johtuen ei ole lainkaan yhdentekevää, millainen tämä työväline on. Sisältöeditorin käytön tulisi olla mahdollisimman helppoa ja sujuvaa, jotta sisällön tuottaminen ja päivittäminen olisi vaivatonta ja nopeaa. Lisäksi sisältöeditorin tulisi mielellään olla mahdollisimman joustava ja monipuolinen, jotta sen avulla saisi luotua helppolukuisia ja vieläpä tyyliltään halutun kaltaisia verkkosivuja ja blogiartikkeleita.
Gutenberg vs. Classic Editor
WordPress-sivustojen sisällön tuottajat ovat WordPress-versioon 4.9 asti tottuneet käyttämään TinyMCE-tekstieditoria, joka on sisältynyt kaikkiin aiemmin julkaistuihin WordPress-versioihin.
WordPressin vanha editori on kuin tekstinkäsittelyohjelma
Gutenberg-editorin julkaisun yhteydessä nimen Classic Editor saanut vanha WordPress-editori muistuttaa käytettävyydeltään ja toiminnoiltaan Microsoft Wordia tai muuta vastaavaa tekstinkäsittelyohjelmaa. Kun käynnistät uuden blogiartikkelin tai sivun luomisen, eteesi avautuu tyhjä yhtenäinen sisältöalue – aivan kuten tekstinkäsittelyohjelmassa uusi tyhjä dokumentti.
Voit kirjoittaa tekstiä suoraan editorissa tai liittää editoriin muualla luotua tekstiä leikepöydältä. Tekstin muotoiluun on käytettävissä erilaisia painikkeita, joiden avulla voit esimerkiksi valita tekstin muotoilun (kappale, otsikko), käyttää lihavointia ja kursivointia, luoda listoja ja muuttaa tekstin väriä.
Tekstieditorissa voit myös lisätä blogiartikkeleihin tai sivuille kuvia ja muokata niiden asemointia (tasaus vasemmalle, tasaus oikealle tai keskitys).
Tähän tekstieditorin mahdollisuudet sitten suurin piirtein loppuvatkin. Esimerkiksi tietyn alueen jakamiseen useampaan sarakkeeseen, painikkeiden lisäämiseen tai taulukoiden lisäämiseen ei TinyMCE-tekstieditorista löydy painiketta tai muuta yksinkertaista työvälinettä.
Gutenberg-editorissa sisältöaluetta täytetään pala kerrallaan
Classic Editorissa on siis vain yksi yhtenäinen sisältöalue, johon tekstiä, kuvia ja muuta sisältöä voi lisätä. Gutenberg-editori toimii tässä suhteessa täysin eri periaatteen pohjalta. Gutenberg-editorissa blogiartikkelin tai verkkosivun sisältö luodaan lisäämällä sisältöalueelle erilaisia sisältöpalasia, joita kutsutaan lohkoiksi (block). Tästä siis tulee Gutenbergin yhteydessä käytetty nimitys lohkoeditori.
Sisällön tuottaminen Gutenberg-editorin avulla
Kun käynnistät uuden blogiartikkelin tai sivun luomisen, avautuva editorinäkymä on edellisen kuvan mukainen. Erillistä otsikkokenttää ei enää ole, vaan otsikon paikkamerkki näkyy sisältöalueen yläosassa omana otsikkolohkonaan (Lisää otsikko -teksti). Voit kirjoittaa blogiartikkelin tai sivun otsikon klikkaamalla paikkamerkkitekstiä, jolloin otsikkorivi avautuu muokattavaksi.
Kirjoitettuasi otsikon voit tarvittaessa muokata sen URL-osoitetta (kestolinkki), joka ilmestyy otsikon yläpuolelle heti, kun WordPress on tallentanut luonnoksesi otsikon lisäämisen jälkeen. Klikkaamalla URL-osoitteen oikealla puolella näkyvää Muokkaa-nappia pääset muokkaamaan URL-osoitetta.
Voit lisätä ensimmäisen sisältölohkon yksinkertaisesti klikkaamalla otsikon alapuolella. Jos haluat lisätä tekstikappaleen, voit aloittaa kirjoittamisen tai liittää tekstiä leikepöydältä. Klikkaamalla kirjoittamasi tekstin päällä saat avattua tekstikappaleen vasempaan ylänurkkaan muotoilupainikkeet, joiden avulla voit esimerkiksi muuttaa tekstin tasausta tai lisätä lihavoinnin haluamaasi tekstikohtaan.
Lisää tekstikappaleen muotoiluasetuksia löytyy oikean reunan Asetukset-osiosta, jonka saat avattua klikkaamalla editorin oikeassa ylänurkassa näkyvää ratas-symbolia. Klikkaa tämän jälkeen tekstikappaleen päällä ja valitse sitten oikean reunan asetusosiosta Lohko-välilehti. Täällä voit halutessasi muokata tekstin kokoa, tekstin väriä ja tekstikappaleelle taustavärin.
Kirjoittaessasi tekstiä huomioi, että Enterin painallus tekstirivin lopussa lisää uuden tekstikappaleen (lohkon), jonka asetuksia voit muokata erikseen.
Tekstikappaleiden lisäksi Gutenberg-editorista löytyy useita vaihtoehtoisia sisältölohkoja, joiden avulla voit rakentaa blogiartikkelin tai verkkosivun sisältöä.
Voit etsiä ja lisätä haluamiasi lohkoja käyttämällä editorin vasemmassa ylänurkassa näkyvää plusmerkki-kuvaketta, tai kirjoittamalla uuden tekstikappaleen alkuun /.
Klikkaamalla lohkoa se lisätään sisältöalueelle ja pääset muokkaamaan lohkon sisältöä.
Esimerkki: kuvan lisääminen Gutenberg-editorissa
Kun haluat lisätä blogiartikkelin tai sivun sisältöön kuvan, lisää Kuva-lohko sisältöalueelle klikkaamalla sitä.
Voit lisätä kuvan raahaamalla sen oman tietokoneesi kansiosta suoraan ikkunaan, valita kuvan mediakirjastosta tai näyttää kuvan tietystä URL-osoitteesta.
Lisättyäsi kuvan voit muokata sen asetuksia kuvan vasemman ylänurkan muokkauspainikkeilla tai käyttämällä lohkon asetuksia ruudun oikeassa reunassa.
Kuva-lohkon asetuksissa voit
- Säätää kuvan kokoa asettamalla haluamasi leveyden (pikseliä) tai käyttämällä prosenttipainikkeita
- Kirjoittaa kuvan vaihtoehtoisen (ALT) tekstin – tärkeä kuvien hakukoneoptimoinnin kannalta
- Asettaa kuvan linkin kohteen (oletuksena on, ettei kuvaa linkitetä minnekään)
Jos haluat lisätä kuvatekstin, voit kirjoittaa sen suoraan kuvan alla näkyvään tilaan.
Esimerkki 2: painikkeen luominen Gutenberg-editorissa
Klikattavien painikkeiden luomiseen ei WordPressin Classic Editorissa ole valmista työvälinettä. Painikkeiden lisääminen blogiartikkeleihin tai verkkosivuille vaatii sivuston ylläpitäjältä teknistä osaamista, ellei sitten käytössä olevasta ulkoasuteemasta löydy ratkaisua painikkeiden luomiseen.
Gutenberg-editori tuo mukanaan niin helppokäyttöisen keinon painikkeiden luomiseen, että jokainen WordPress-sivustolle sisältöä tuottava osaa sen avulla varmasti luoda tyylikkäitä ja huomioarvoltaan korkeita painikkeita.
Käynnistä painikkeen lisääminen klikkaamalla Plus-merkkiä esimerkiksi edellisen lohkon yläreunan puolivälissä, jolloin uusi lohko lisätään kyseisen lohkon yläpuolelle, tai lohkon alareunan puolivälissä, jolloin uusi lohko lisätään edellisen lohkon alapuolelle.
Valitse Painike-lohko lisätäksesi sen sisältöalueelle.
Aseta painikkeen kohde-URL kirjoittamalla se ikkunaan. Painikkeen klikkaajat ohjataan kyseiseen URL-osoitteeseen. Jos sivu on samalla sivustolla, voit lisätä URL-osoitteen ilman verkkotunnusta – esimerkiksi URL-osoite www.yritys.fi/ota-yhteytta -> lisää muodossa /ota-yhteytta/.
Kirjoita painikkeessa näkyvä teksti klikkaamalla painiketta.
Muuta painikkeen tasausta käyttämällä lohkon vasemman yläreunan muotoilupainikkeita. Tässä painike on keskitetty, mutta voit sijoittaa sen myös joko sisältöalueen vasempaan tai oikeaan reunaan.
Voit vaihtaa painikkeen taustavärin ja tekstin värin käyttämällä lohkon asetuksia sivun oikeassa reunassa. Aseta haluamasi väri joko valitsemalla se valmiiden vaihtoehtojen joukosta tai käyttämällä värivalitsinta ja syöttämällä haluamasi värin HEX-numero (tässä #c20202).
Lisättyjen lohkojen järjestyksen muuttaminen
Voit helposti muuttaa lisäämiesi lohkojen järjestystä siirtämällä niitä ylös- tai alaspäin.
Kun olet lisännyt vähintään kaksi lohkoa, näet lohkon siirtämisessä käytettävät nuolipainikkeet viemällä kursorin lohkon vasempaan reunaan.
Siirrä lohko ylös- tai alaspäin klikkaamalla haluamaasi suuntaan osoittavaa nuolenkärkeä.
Lohkonavigoinnin käyttö
Lisättyäsi useampia lohkoja voit nähdä kaikki lisäämäsi lohkot ja niiden järjestyksen käyttämällä lohkonavigointia, jonka saat avattua Gutenberg-editorin vasemmasta ylänurkasta.
Lohkonavigoinnissa voit myös siirtyä haluamaasi lohkoon klikkaamalla sitä.
Uudelleen käytettävien lohkojen luominen
Yksi Gutenberg-lohkoeditorin uusista ja kätevistä toiminnoista on mahdollisuus luoda uudelleen käytettäviä lohkoja. Voit tallentaa luomasi valmiin sisältölohkon lohkokirjastoon ja käyttää sitä myöhemmin muilla sivuilla tai blogiartikkeleissa. Tämä voi säästää merkittävästi aikaa, kun voit helposti noutaa tarvitsemasi sisältölohkon kirjastosta sen sijaan, että lähtisit luomaan vastaavaa lohkoa alusta alkaen.
Kun haluat luoda uudelleen käytettävän lohkon, klikkaa lohkon vasemman ylänurkan painikerivin oikeanpuoleisinta linkkiä.
Valitse avautuvasta valikosta kohta Lisää uudelleenkäytettäviin lohkoihin.
Anna lohkolle nimi, jonka avulla tunnistat sen helposti myöhemmin ja paina oikealla näkyvää Tallenna-nappia.
Löydät lohkon myöhemmin Uudelleenkäytettävät-osiosta ja voit lisätä sen niin moneen paikkaan sivustollasi kuin haluat.
Jos myöhemmin muokkaat lohkoa, muutokset tulevat voimaan kaikkialla, minne lohko on lisätty.
Kohti helpompaa WordPress-sisällöntuotantoa
Verkkosivustojen rakentamisessa ja sisällön tuotannossa on jo pitkään ollut trendinä pyrkimys tehdä asiat mahdollisimman helpoiksi. Niin helpoiksi, että päävastuun verkkosivustojen sisällön tuotannosta voivat ottaa webmastereiden ja muiden vahvaa teknistä osaamista omaavien sijasta viestinnän ja markkinoinnin ammattilaiset sekä yrittäjät.
Kyse on osittain sisällön tuotannon ketteryydestä, mutta myös kustannuksista. Kun asiat voidaan helposti hoitaa itse, riippuvuus ulkopuolisista avuntarjoajista vähenee ja sen myötä laskevat ulkopuolisille maksettavat kustannukset.
WordPress haluaa säilyttää asemansa maailman suosituimpana verkkosivustojen ylläpitoon käytettävänä julkaisujärjestelmänä. Tämä edellyttää jatkossa sitä, että verkkosivustojen luomisen ja sisällön tuottamisen kynnys lasketaan niin alas kuin suinkin mahdollista. Gutenberg-lohkoeditorin julkaiseminen on WordPressin pelinavaus juuri tähän suuntaan.
Gutenberg-editori ei missään tapauksessa ole vielä täysin valmis eikä sen kaikkia mahdollisuuksia ole tätä kirjoitettaessa toteutettu ja tuotu WordPress-sisällöntuottajien käyttöön. Jo nykyiselläänkin Gutenberg-editori tarjoaa kuitenkin monia sellaisia sisällön tuotantoa helpottavia ominaisuuksia, joista on hyötyä ennen kaikkea aloittaville WordPress-sivustojen ylläpitäjille, joilla ei ole vahvaa HTML- ja CSS -osaamista.
Erityisesti yrittäjille ovat varmasti tervetulleita kaikenlaiset parannukset, jotka helpottavat verkkosivustojen omatoimista rakentamista ja sisällön tuottamista. Kun sekä omaa aikaa että rahaa on rajallisesti käytettävissä verkkosivuston ylläpitoon, pienikin parannus verkkosivuston ylläpitopuolen käytettävyydessä voi olla suuri helpotus.
Haluatko oppia tuottamaan sisältöä verkkoon WordPress-julkaisujärjestelmällä?
Digiopiston WordPress sisällön tuottajan työvälineenä -koulutus on tarkoitettu juuri sinulle. Sen avulla opit käyttämään WordPress-julkaisujärjestelmää ja uutta Gutenberg-lohkoeditoria kätevästi verkko-opiskeluna.
Lue lisää klikkaamalla koulutuksen kuvaa alapuolella!
