Koko sivuston muokkaus tulee WordPressiin – mistä on kyse?

Koko sivuston muokkaus tulee WordPressiin

Koko sivuston muokkaus nousi käsitteenä ensimmäisen kerran esiin WordPress 5.8 -version julkaisemisen yhteydessä. Tammikuussa 2022 julkaistu WordPress 5.9 toi jo enemmän konkretiaa uuden Twenty Twenty Two -lohkoteeman ja uuden koko sivuston muokkaukseen tarkoitetun editorin muodossa.

Mutta mitä koko sivuston muokkaus tarkoittaa verkkosivustojen rakentajille ja ylläpitäjille? Mikä sen myötä muuttuu?

WordPressin kehitys kohti koko sivuston muokkausta

Koko sivuston muokkauksen idea on todennäköisesti helpompi sisäistää, jos ensin peruutetaan hieman ajassa taaksepäin ja katsotaan, millaisten vaiheiden kautta koko sivuston muokkaamiseen on tultu.

Ensin oli ulkoasuteema ja tekstieditori

Aikojen alusta WordPressin versioon 5.0 asti WordPress-sivuston ulkoasun toteutus ja sisällön tuottaminen olivat lähes täydellisesti erillään.

Sivuston ulkoasun keskeinen rakennuspalikka oli ulkoasuteema, jonka avulla luotiin kaikki sivuston asettelumallien elementit (ylä- ja alatunniste, sisältöalue, sivupalkit) ja erilaiset sivumallit.

Ulkoasuteeman kehittäjä siis määräsi esimerkiksi sen, oliko sivuston logo ylätunnisteen vasemmassa reunassa vai keskellä, oliko blogiartikkeleiden vieressä sivupalkki vai ei, ja montako paikkaa alatunnisteessa oli vimpaimia varten.

Kaikki ulkoasuteemaan tehtävät muokkaukset edellyttivät ohjelmointitaitoja. Tämä johti siihen, ettei useimmilla WordPress-sivuston ylläpitäjillä ollut mahdollisuuksia muokata sivuston ulkoasua omatoimisesti. Kun WordPress-sivuston omistaja halusi uudistaa sivustonsa ulkoasun, äärimmäisinä vaihtoehtoina olivat joko ulkoasuteeman vaihtaminen toiseen, tai omia toiveita vastaavan ulkoasuteeman teettäminen ulkopuolisella toimijalla. Näiden välimaastossa oli käytössä olevan ulkoasuteeman osittainen mukautus omia toiveita vastaavaksi, jolloin tarvittiin taas ohjelmoijan apua.

Sisällön tuottajien käytössä oli tekstinkäsittelyohjelman kaltainen tekstieditori, jonka avulla tuotettiin blogiartikkeleita ja verkkosivuston pysyviä sivuja. Tekstieditorin avulla pystyi vaivattomasti lisäämään blogiartikkeleihin ja verkkosivuille kuvia, upotettuja videoita ja linkkejä, mutta minkäänlaiset sisällön visuaaliseen ilmeeseen vaikuttavat muokkaukset eivät onnistuneet ilman HTML-kielen ja CSS-tyylien osaamista. Esimerkiksi jonkin sivulle lisättävän osion asettelu kahdelle palstalle ja varustaminen halutulla taustavärillä, tai kulmistaan pyöritetyn painikkeen lisääminen, olivatkin monille sivuston sisällön tuotannosta vastaaville liian vaativia tehtäviä.

wordpress classic editor
WordPressin TinyMC-tekstieditori

Tekstieditorin avulla oli lisäksi mahdollista vaikuttaa ainoastaan sivujen pääsisältöalueen (sivun lähdekoodissa body-osio) sisältöön. Sisältöalue oli kuin tyhjä A4-paperiarkki, jonka sisään voi sijoittaa halutun määrän tekstiä ja kuvia, mutta jonka reunojen yli ei sisältöä pysty venyttämään.

Monissa ulkoasuteemassa oli sivupalkki sivupohjan oikeassa, vasemmassa, tai kummassakin reunassa. Sivupalkkeja hyödynnettiin lisäämällä niihin vimpaimia, joiden avulla sivuston omistajat pystyivät nostamaan esiin erilaisia sivuston käyttäjiä palvelevia toimintoja, kuten blogiartikkeleiden arkiston tai hakukentän. Ulkoasuteemoissa oli sivuston ylläpitäjien työn helpottamiseksi valmiita vimpainalueita, joihin vimpaimia pystyi lisäämään.

Sitten tuli Gutenberg ja sen mukana lohkot

WordPress 5.0 toi mukanaan WordPressin tähänastisen historian suurimman sisällön tuottajien työhön vaikuttavan muutoksen: alkuperäinen TinyMCE-tekstieditori vaihdettiin uuteen Gutenberg-lohkoeditoriin. TinyMCE-tekstieditori siirtyi samalla vaihtoehtoisen editorin rooliin WordPressin lisäosakirjastoon, josta sen pystyy halutessaan asentamaan lohkoeditorin tilalle.

Gutenberg-editorin julkaisu merkitsi WordPressin sisällöntuotannossa sikäli tärkeää virstanpylvästä, että sen avulla blogiartikkeleiden ja verkkosivujen sisältöä voi muokata monipuolisemmin kuin alkuperäisellä tekstieditorilla.

Aikaisempaa paremmat sisällön muokkausmahdollisuudet ovat nimenomaan lohkojen ansiota.

Lohkot ovat pieniä sisältöelementtejä, joita sisällön tuottaja voi vapaasti sijoitella blogiartikkeleihin tai verkkosivuille. Lohkot ovat erikoistuneita: kukin lohko on tarkoitettu jonkin tietyn sisältötyypin lisäämiseen.

Esimerkiksi aiemmin mainittu painikkeen lisääminen muuttui lohkoeditorin esittelyn jälkeen niin vaivattomaksi, että sisällöntuottajat selviävät muotoiltujen painikkeiden lisäämisestä helposti, ilman CSS-osaamista.

Painikkeen muotoilu WordPressin lohkoeditorissa

Vaikka lohkoeditorin käyttöönotto avasi sisällöntuottajille aiempaa edistyneempiä mahdollisuuksia vaikuttaa julkaistavan sisällön asetteluun ja visuaaliseen ilmeeseen, täydellistä vapautumista ulkoasuteeman luomasta hiekkalaatikosta se ei vielä tehdyt mahdolliseksi.

Kuten alkuperäisellä WordPressin tekstieditorilla, myös lohkoeditorilla voi – pieniä poikkeuksia lukuun ottamatta – muokata ainoastaan sivupohjan (sivu, artikkeli) sisältöaluetta.

Koko sivustolle yhteisten elementtien, kuten esimerkiksi ylä- ja alatunnisteiden, asettelumallien muokkaaminen ei lohkoeditorin avulla ole mahdollista. Näiden sivuston ulkoasun kannalta keskeisten alueiden mukautus edellyttää mahdollisuutta muokata ulkoasuteemaa ja sen osia.

Koko sivuston muokkaus pyrkii tarjoamaan ratkaisun juuri tähän ongelmaan.

Koko sivuston muokkaus mahdollistaa sivuston ulkoasun muokkauksen suoraan editorista

Koko sivuston muokkaus on seuraava askel polulla, joka pitkin WordPressin kehitystä nyt viedään.

Koko sivuston muokkauksen keskeinen idea on, että kaikki verkkosivustolla käytettävät asettelumallit ja niiden osat voidaan luoda käyttämällä lohkoja, yhdellä ja samalla editorilla. WordPressissä on nyt koko sivuston muokkausta varten täysin uusi editori (Muokkain), joka löytyy ylläpitäjän valikon Ulkoasu-osiosta.

Koko sivuston muokkaukseen siirtyminen edellyttää erityisen lohkoteeman käyttöä. WordPressin oma ensimmäinen lohkoteema on Twenty Twenty-Two, joka julkaistiin WordPress 5.9-version mukana.

WordPress Twenty Twenty-Two -lohkoteema

Uusissa WordPress-asennuksissa Twenty Twenty-Two on aina asetettu oletusteemaksi.

Aiemmin luoduilla WordPress-sivustoilla Twenty Twenty-Two -ulkoasuteeman aktivointi saa aikaan välittömiä muutoksia WordPressin ylläpitäjän valikon Ulkoasu-osiossa.

Tottuneet WordPress-ylläpitäjät huomaavat, että seuraavat linkit ovat kadonneet Ulkoasu-valikosta:

  • Mukauta
  • Valikot
  • Vimpaimet

Linkkejä on jäljellä enää kaksi:

  • Teemat (linkki ulkoasuteemojen hallintaan, toimii kuten ennenkin)
  • Muokkain (linkki uuteen koko sivuston muokkauseditoriin)
WordPress ylläpitäjän valikon Ulkoasu-osio lohkoteeman aktivoinnin jälkeen.

Miten uusi koko sivuston muokkaukseen tarkoitettu editori toimii?

Muokkain linkin klikkaus avaa uuden editorinäkymän, jonka kautta voidaan luoda ja muokata kaikkia verkkosivuston yhteisiä elementtejä.

HUOM: uusi editori ei ole tarkoitettu sisällön tuottamiseen. Verkkosivujen ja blogiartikkeleiden sisältö luodaan edelleen lohkoeditorilla.

WordPress koko sivuston muokkauseditori

Uusi editori jakautuu kaikkiaan kolmeen palstaan, joista vasemmanpuoleinen on varattu editorin päävalikolle.

Päävalikon kautta voidaan siirtyä muokkaamaan sivuston etusivua, sivupohjia (esimerkiksi artikkelien tai hakutulosten sivumalli), tai sivupohjien elementtejä (esimerkiksi otsake tai alatunniste).

Editorin keskiosa toimii valitun elementin muokkausalueena.

Sivupohjan muokkaus

Muokkaustilassa sivupohjan elementtejä voi lisätä, poistaa ja siirtää. Tässä on suureksi avuksi muokkausalueen vasempaan reunaan avautuva listanäkymä, jonka avulla esimerkiksi sivumallin elementtien siirtely onnistuu näppärästi.

Listanäkymä

Sivumallien muokkausosiossa voi paitsi muokata kaikkia ulkoasuteeman mukana tulevia sivumalleja, myös luoda täysin uusia sivumalleja.

Sama koskee sivumallien osien muokkausosiota, jonka kautta voi luoda omia ylä- ja alatunnisteita sekä yleisiä elementtejä, jotka eivät ole sidottuja mihinkään erityiseen sijaintiin sivulla.

Uusi editori on varustettu Beta-merkillä, minkä kyllä huomaa sitä käyttäessään – kaikki ei vielä toimi täydellisesti ja uusien lohkopohjaisten elementtien käytettävyydessä on selkeitä puutteita.

Itselleni esimerkiksi uusi navigaatiolohko on ensituntumalta hyvin hankala käyttää, ja vanhaa valikoiden muokkausvälinettä tulee nopeasti ikävä.

Miten siirtyminen koko sivuston muokkaukseen vaikuttaa WordPress-sivustojen luomiseen?

Verkkosivustojen suunnittelun hyviin käytäntöihin koko sivuston muokkauksella ei ole suoraa vaikutusta. Verkkosivustojen suunnittelijan ja toteuttajan on jatkossakin ymmärrettävä, millaisista elementeistä verkkosivusto muodostuu, miten luodaan viestinnällisesti tehokas sivusto, ja miten verkkosivustosta tehdään helppokäyttöinen. Yhtä tärkeää on tietää, miten erilaisia verkkosivuston elementtejä voi muokata halutun käyttäjäkokemuksen aikaansaamiseksi.

Se, mikä koko sivuston muokkauksen myötä muuttuu, on ohjelmointia hallitsemattomien käyttäjien kyky luoda kokonaisia verkkosivustoja WordPressin avulla.

Selvää on, että WordPress haluaa koko sivuston muokkauksen kautta tehdä verkkosivustojen suunnittelusta ja toteuttamisesta mahdollisimman helppoa. Ylittääkseen kynnyksen ja ryhtyäkseen web designeriksi, ei enää tarvitse osata PHP-ohjelmointia. Myös tällä hetkellä lähinnä verkkosivustojen sisällöntuotannosta vastaavat voivat laajentaa vastuualuettaan myös sivuston ulkoasun hallinnan suuntaan.

Koko sivuston muokkauksen ydinhyöty on se, että kaikkien verkkosivuston yhteisten elementtien toteuttamiseen ei enää tarvita koodaustaitoja. WordPress-sivuston ylläpitäjällä on nyt käytettävissään helppokäyttöinen koko sivuston muokkauseditori, joilla pystyy vaikuttamaan kaikkien verkkosivuston yhteisten elementtien asetteluun ja ulkoiseen ilmeeseen.

Tämä kehitys tulee voimakkaasti hämärtämään verkkosivuston teknisen toteutuksen ja sisällöntuotannon rajoja. Sisällöntuottajan ei enää tarvitse kääntyä ohjelmoijan puoleen aina, kun hän haluaa tehdä jonkin muutoksen sivuston yhteisiin elementteihin, esimerkiksi alatunnisteeseen. Sama koskee erilaisia sivumalleja, joita voi jatkossa luoda nopeasti mukauttamalla olemassa olevia sivumalleja tarvittavin osin.

Onko koko sivuston muokkaus valmis jo tässä vaiheessa korvaamaan vanhat tavat toteuttaa WordPress-sivustoja?

Ei ole. Koko sivuston muokkaus on vielä enemmän visio tai päämäärä kuin täysin valmis menetelmä täysin toimivine työvälineineen.

Syrjäyttääkö koko sivuston muokkaus Elementorin ja muut sivurakentajat?

Todennäköisesti ei. Sivurakentajat ovat olleet markkinoilla pitkään ja niitä on kehitetty määrätietoisesti. WordPressillä on melkoinen matka kirittävänä päästäkseen edes lähelle parhaiden sivurakentajien tarjoamia toiminnallisuuksia. Sivurakentajien täydellinen syrjäyttäminen ei todennäköisesti ole WordPressin tavoitteenakaan, sillä sivurakentajien jatkuva kehitys ja suosio vahvistavat osaltaan koko WordPressin ekosysteemin elinvoimaa ja houkuttelevuutta.

Mitään välitöntä pakkoa ei siis toistaiseksi ole lähteä vaihtamaan WordPress-sivuston ulkoasuteemaa uuteen lohkoteemaan, jos kaikki on tällä hetkellä kunnossa ja sisällön tuotanto sujuu ongelmitta.

Sen sijaan on hyvä idea käynnistää koko sivuston muokkaukseen tutustuminen erillisellä hiekkalaatikkosivustolla, jossa omia taitoja voi kasvattaa pikku hiljaa eri asioihin tutustumalla ja testailemalla.

Käyttöä koko sivuston muokkauksen osaamiselle tulee jatkossa kyllä olemaan, joten jos kipinä iskee, sitä ei kannata sen kummemmin sammutella.

Tilaa Digiopiston blogi

Päivitä osaamistasi jatkuvasti – tilaa Digiopiston blogi. Saat hyödylliset artikkelit jatkossa suoraan sähköpostiisi.

Yhteystietojasi säilytetään ja käytetään sivuston tietosuojaselosteessa kerrotulla tavalla. Voit milloin tahansa perua blogiartikkeleiden tilauksen.

Tiesitkö, että Digiopistosta saa myös käytännön apua?

Uudet kotisivut, WordPress-sivuston parantaminen, WooCommerce-verkkokaupan rakentaminen jne.

Digiopiston kouluttaja Jari Juslén

Koulutusten lisäksi Digiopistosta saa nyt myös käytännön apua.

Kaikki WordPress- ja WooCommerce -työt (sivuston tai verkkokaupan ongelmat, uudistaminen, laajentaminen jne.).

Isot ja pienet työt yli 10 v. kokemuksella ja edullisesti - kysy rohkeasti!

Lähetä yhteydenottopyyntö

Lähetä minulle viesti ja kerro millaiseen asiaan tarvitset apua. Otan yhteyttä pikapuolin ja kerron, miten voin sinua auttaa.

Yhteydenottosi ei sido sinua mihinkään.

t. Jari