Tehokasta sisällöntuotantoa lohkoilla

Kirjoitettu: 17.10.2019 Päivitetty: 18.10.2019

WordPress versio 5.0 esitteli uuden Gutenberg -muokkaimen, joka on tuonut mukanaan suuria uudistuksia sivujen ja artikkelien käsittelyyn. Tärkein uusi ominaisuus oli lohkot, Gutenbergin ydinajatus, joka muutti sisällöntuotannon niin teknisesti kuin käyttäjän näkökulmasta. Teknisesti selitettynä lohkojen taustalla on ajatus siirtyä yksittäisestä dokumentista kokoelmaan merkittäviä toistettavia elementtejä, jotka tuovat mukanaan selvän rakenteen pelkän HTML:n epämääräisyyden tilalle.

Käyttäjälle lohkot tarjoavat suoraviivaisen ja nopean tavan rakentaa sivuja tai kirjoittaa artikkeleita. Kaikki sisältö voidaan lisätä sivulle omana lohkonaan sisällön tyypin mukaan.

Jokaiselle sisältöelementille on Gutenbergissä oma lohkonsa.

Enää käyttäjän ei tarvitse selata valikoita läpi tai muistaa lyhytkoodeja saadaakseen tietyntyyppisiä elementtejä lisättyä sivuilleen. Toinen merkittävä ajatus lohkojen taustalla on suora manipulaatio, joka tarkoittaa käytännössä sitä, että jokainen lohko sisältää itsessään kaikki kyseisen elementin asetukset.

Hyvin suoraviivaista ja helppoa siis, ja varmasti monille jo erittäin tuttua käytännössäkin. Mutta mitä tehdä silloin, kun sivulle pitäisikin lisätä elementti, jolle ei ole valmista lohkoa Gutenbergissä?

Omat lohkot

Lohkot sellaisenaan olisivat helppokäyttöisyytensä lisäksi myös äärimmäisen rajoittavia, mikäli käytössä olisi vain Gutenbergin oletuslohkot. Onneksi näin ei kuitenkaan ole, vaan lohkoja voi lisätä tarpeen mukaan joko valmiina lisäosina, lohkojen rakentamista helpottavien lisäosien avulla, tai kokonaan itse rakentamalla.

Valmiit lohkolisäosat sisältävät usein kokoelman erilaisia valmiita lohkoja ja ovat oiva valinta, mikäli kaivattu toiminnallisuus on suhteellisen yksinkertainen, eikä resursseja tai omaa osaamista löydy tarpeeksi kokonaan omien lohkojen tuottamiseen.

Hieman haastavampi, huomattavasti enemmän vapautta lohkojen suhteen tarjoava vaihtoehto ovat lisäosat, jotka helpottavat omien lohkojen tuottamista. Yksi tällainen lisäosa on Advanced Custom Fields PRO, joka mahdollistaa omien tietokenttien ja näitä käyttävien lohkojen lisäämisen WordPressiin suhteellisen helposti.

Viimeinen vaihtoehto on rakentaa omat lohkot tyhjästä, joka luonnollisesti vaatii eniten osaamista, mutta tarjoaa myös eniten mahdollisuuksia kehittäjälle. WordPressin kehittäjädokumentaatiosta löytyy hyvät ohjeet uteliaimmille lohkonikkareille.

Kultainen keskitie

Päädyimme itse ACF-lohkoihin miettiessämme tapoja helpottaa sisällöntuottamista uusien lohkojen avulla omilla sivustoillamme. Päätökseen johti aiempi tuttavuus ACF-lisäosan kanssa, sillä olimme hyödyntäneet ACF -kenttiä aiemminkin, sekä lohkojen lisäämisen suoraviivaisuus verrattuna kokonaan omien lohkojen kehitykseen.

Tarve omille lohkoille nousi esiin tehdessämme uutta laskeutumissivua WooCommercelle. Sivu tehtiin ensin täysin kovakoodaamalla HTML:llä, mikä ei tuntunut kovin luontevalta tavalta rakentaa sisältöä WordPressillä, alustalla, joka on nimenomaan kehitetty helppoa sisällöntuottamista ajatellen.

Tästä sivusta tuli kuitenkin oiva lähtökohta omien lohkojen kehitykselle, sillä siitä näimme suoraan mitä elementtejä lohkojemme tulisi toteuttaa ja mitä emme Gutenbergin oletuslohkoilla pystyisi tekemään. Samalla pohdimme lohkojen monikäyttöisyyttä, sillä lohkon kehittäminen yhtä elementtiä varten yhdelle sivulle ei ole erityisen tehokasta, eikä sovi kovin hyvin yhteen lohkojen perusidean kanssa.

Näillä ajatuksilla saimme pilkottua WooCommerce -sivun neljäksi lohkoksi:

  • Hero – sivun yläosa
  • Features – lohko, jolla voidaan lisätä erilaisia toistuvia elementtejä kuvien kanssa tai ilman
  • Services – samantyyppinen lohko kuin edellinen, mutta erilaisella muotoilulla, sekä eri sisältövaihtoehdoilla
  • Plans – lohko eri palvelupaketeille
Muokkausnäkymä Hero-lohkosta, tällä sivun alussa oleva taustakuva ja otsikko saadaan näppärästi paikalleen

Näitä lohkoja tullaan varmasti vielä jatkokehittämään ja mahdollisesti sulauttamaan yhteen, mutta näin saimme nopeasti kasaan työkalut uusien laskeutumissivujen luomiseksi MVP -ajatuksen mukaisesti. Puhumattakaan siitä helppoudesta, jolla uusia sivuja voidaan nyt tehdä lohkojen avulla!

Vinkkejä kokemuksesta

ACF-lohkojen käyttöönottamiseen ja rakentamiseen löytyy erinomaiset ohjeet Advanced Custom Fields -lisäosan omilta sivuilta, mutta halusin lisätä vielä pari vinkkiä loppuun näiden lisäksi.

#1. Käytössä olevasta teemasta riippuen lohkot saattavat vaatia uuden Template -tiedoston, erityisesti jos lohkot vaikuttavat sivun rakenteeseen.

Käyttämämme teeman rakenteen vuoksi piti lohkoille tehdä erillinen ”tyhjä” template

#2 Muista tarkistaa polut, jos käytät lapsiteemaa! Ohjeissa käytetyissä esimerkeissä työskennellään usein pääteeman kanssa, jolloin esimerkkikoodien polut muotoilu- tai skriptitiedostojen lisäämiseksi eivät välttämättä toimi, jos omaa projektia tehdään lapsiteeman päälle.

Lapsiteeman kanssa työskennellessä tulee käyttää get_stylesheet_directory_uri() -funktiota ohjeissa usein käytetyn get_template_directory_uri() sijasta

Seuraavassa kirjoituksessa perehdymme lohkojen toiminnallisuuden laajentamiseen JavaScriptin avulla!

Valitsitpa lisäosan valmiilla lohkoilla tai omien lohkojen koodaamisen, pääset nyt hyödyntämään Gutenbergin tarjoamia mahdollisuuksia entistä laajemmin!

Kommentoi

Mikko Vierma

Hae WP-palvelu.fi:stä

Kategoriat

Lue myös

Työntekijöille ilmaiset kasvomaskit ja käsineet

11.9.2020

Seravo jakaa ilmaiseksi henkilökunnalleen kahta asiaa tartuntariskin vähentämiseksi. Tiedätkö mistä muusta on hyötyä kasvomaskin lisäksi?

WooCommerce 4.5 on julkaistu

9.9.2020

Syyskuun 9. päivä julkaistiin WooCommercen versio 4.5. Kyseessä on minor-versio joka on täysin yhteensopiva aiemman 4.4 version kanssa. Uudessa versiossa […]

Koronavilkku.fi Suomen suosituin sivusto 31.8.2020?

4.9.2020

Tekikö koronavilkku.fi Suomen nettihistorian ennätyksen 31.8.2020 kun 935 000 vierailijaa kävi vuorokaudessa?