WordPress sisällön tehokas editointi lohkoeditorilla

Vuoden 2018 lopussa WordPress koki historiansa suurimman uudistuksen kun uusi lohkoihin perustuva sisältöeditori julkaistiin WordPress 5.0 yhteydessä. Jos sivustosi käyttää (toivottavasti) WordPress 5.x versiota eikä klassista editoria ole aktivoitu erillisellä “Classic Editor”-lisäosalla tai koodissa, niin kaikki sisältö koostuu “lohkoista” (englanniksi Blocks). Eli esimerkiksi jokainen kappale, lista, nosto ja otsikko on oma lohkonsa.

Kun ensi kertaa avaat sivun sisältöeditorin näet vasemmassa yläreunassa ja sivun alareunassa plus-symbolin. Paina plus-symbolia lisätäksesi uuden lohkon. Avautuvassa pienessä “ikkunassa” voit hakea lohkoja tai valita niitä listalta. Lisättyäsi lohkon, klikkaa se aktiiviseksi klikkaamalla lohkoa hiirellä. Kun aktivoit lohkon, näkyy sen vasemmalla puolella nuolet ylös ja alas, sekä nuolten välissä pieni ruudukko. Ruudukosta raahaamalla voit siirrellä lohkoa vapaasti sivulla. Nuolista voit siirrellä lohkon järjestystä ylös- ja alaspäin yksi lohko kerrallaan. Oikealla näkyy aina kyseisen aktivoidun lohkon asetukset.

Yleisimpiä editoinnissa tarvittavia lohkoja, joita suosittelemme kokeilemaan:

Otsikko

H1 tason otsikkoteksti on alasivuilla automaatisesti kyseisen sivun otsikko. Myös hakukoneiden ja saavutettavuuden kannalta on hyvä että otsikot ovat hierarkkisessa järjestyksessä ja selkeästi esitetty sivuilla. Jokaisella alasivulla tulisi olla vain yksi H1 tason otsikko eli sivun otsikko, sen takia sivun sisällä olevat otsikot tulisi olla H2 ja H3 tason otsikoita. Jos sisältöä ja otsikoita on sivulla paljon, niin sisältöä voi jäsennellä otsikkotasoilla myös H4..H5..H6 jotka ovat editorissa käytettävissä.

Kappale

Tekstikappale, voit lisätä lihavointia, kursivointia, määritellä tasauksen ja lisätä linkkejä tekstin sekaan. Lohkon asetuksista oikealta löytyy Kirjaisimen koko, pidä se normaalisti asetuksessa: Normaali. Jos kuitenkin haluat jonkin tietyn kappaleen määritellä suuremmalla fontilla niin se onnistuu tästä. Sen lisäksi lohkon asetuksista löytyy väriasetukset. Näitä kannattaa käyttää harkiten, sekä käyttää vain brändinne määriteltyjä värikoodeja, jotta sisällöstä ei tule sekava sillisalaatti.

Kuva

Kuvia voi tasata vasemmalle/keskelle/oikealle, kuvat voivat myös olla linkkejä. Kuva-lohkon asetuksista oikealta voit valita kuvan koon ja määritellä kuvalle vaihtoehtoisen tekstin eli alt-tekstin. Jos haluat että pienempi kuva on keskitetty esimerkiksi tekstin vasemmalle tai oikealle puolelle ja teksti soljuu kuvan vieressä onnistuu se näin: Lisää kuva-lohko kappale-lohkon ylle. Valitse kuva-lohkon asetuksista oikealta kooksi esim. keskikokoinen. Sen jälkeen valitse kuvan asetuksista tasaukseksi joko Vasen tasaus tai Oikea tasaus.

Lista

Tällä lohkolla teet järjestettyjä listoja joihin tulee automaattisesti numerointi 1..2..3 ja järjestämättömiä listoja, joilla jokaisella listan listakohta on merkattu listamerkillä. Listoissa voi myös tehdä sisennyksiä listakohdille sekä käyttää lihavointia, kursivointia ja linkkejä.

Lainaus

Lainaus-lohkolla lisäät sisältöön näppärästi lainaus-noston joka on valmiiksi tyylitelty verkkosivujen puolella teidän visuaalisen ilmeen mukaiseksi. Lainaus-merkit yms. tulevat automaattisesti koodista. Sinun tarvitsee vain lisätä teksti ja sitaatin kirjoittajan nimi (kirjoittaja kentän voi jättää myös tyhjäksi).

Nosto

Nosto-lohko on hieman samantyyppinen kuin lainaus, mutta tällä voi olla erilainen visuaalinen esitystapa verkkosivujen puolella, tai sitten se on määritelty samanlaiseksi kuin Lainaus ilman sitaatin kirjoittajaa. Nosto voi olla verkkosivujen puolella esimerkiksi isommalla fontilla, teksti keskitetty ja suuri marginaali noston ylä ja alapuolella, jotta se erottuu leipätekstistä paremmin.

Taulukko

Taulukot muodostuvat kolmesta osasta: itse taulukosta sekä taulukon riveistä ja soluista. Taulukolle voi määritellä myös otsikkorivin lohkon asetuksista. Taulukkoja voi käyttää tekstin sisältöä täydentävänä tiedon esittämisessä.

Sarakkeet

Sarakkeet avulla voit lisätä kaikkia muita lohkoja sarakkeiden sisälle. Sarakkeet järjestetään mobiilissa peräkkäin ylhäältä alaspäin ja desktopissa näytetään vierekkäin.

Saavutettavuudesta

Muista lisätä kaikille Media-osuudessa oleville kuville vaihtoehtoinen teksti eli alt-teksti. Jos et lisää vaihtoehtoista tekstiä media-osuudessa vaan vain sivun editointinäkymässä, pitää sinun lisätä vaihtoehtoinen teksti uudestaan jokaisella alasivulla jos käytät samaa kuvaa uudelleen. Sen takia kannattaa vaihtoehtoinen teksti käydä kirjoittamassa Media-osuudessa, sen jälkeen se media-osuudessa kirjoitettu teksti tulee kaikilla alasivuilla kun kuvaa käytetään.

Räätälöidyt lohkot

Lohkoja voidaan räätälöidä asiakkaan tarpeiden mukaan. Me Muuksissa olemme toteuttaneet useita erilaisia lohkoja asiakkaillemme. Alla esimerkki räätälöidystä lohkosta. Kun kehittäjä tekee sinulle räätälöidyn lohkon on se juuri sinun verkkosivustosi visuaalisen ilmeen mukainen. Ota yhteyttä jos haluat että WordPress-sivustollesi kehitetään räätälöityjä lohkoja.

Räätälöity lohko Mediapoluilla-sivustolla, joka koostuu otsikosta, tekstikentästä ja kuvasta. Sisällön syöttäjän tarvitsee vain syöttää edellä mainitut kolme asiaa lohkoon ja verkkosivujen puolella ne näytetään kuvanmukaisessa laatikossa.