WordPress-editorin kustomoidut lohkot

Verkkosivuja rakentaessa tulee huomioida tulevan sivuston ylläpitäjät ja heidän tarpeensa. Toisaalta on hyvä huolehtia myös siitä, että sivustolle suunniteltu ulkoasu pysyy tietyissä raameissa, vaikka sisältöä muokattaisiinkin jälkikäteen.

Gutenberg-editori

WordPressin uusi Gutenberg-editori perustuu lohkoihin (block), ja antaa sisällöntuottajalle aivan uusia mahdollisuuksia vaikuttaa sivujen sisällön asetteluun. Tästä voi kuitenkin seurata tilanteita, joissa huolella suunniteltu ulkoasu pääsee rakoilemaan riittävän monien päivitys- ja asettelumuutosten jälkeen.

Asiakaskohtaisten lohkojen luominen

Advanced Custom Fields -niminen lisäosa on ollut pitkään kehittäjien suosiossa sen monipuolisuden ansiosta. Tuoreimmasta 5.8 versiosta alkaen ACF (Pro) on tarjonnut mahdollisuuden omien lohkojen luomiseen. Nämä lohkot toimivat WordPressin editorissa käytännössä natiivien lohkojen tavoin, ja avaavat kehittäjälle kohtalaisen helpon tavan laajentaa ja hallita sisätöeditorin tarjoamia mahdollisuuksia.

Lohkot voidaan rekisteröidä acf_register_block_type()-funktion avulla, ja niille koodataan omat mallineensa, joiden avulla määritellään niiden ulkoasu ja rakenne.

Usein toistuvista kokonaisuuksista kannattaa luoda omia lohkoja. Kuvassa ACF:n avulla luotuja lohkoja, joista löytyvät valmiit paikat tietyille sisällöille.

Hyöty asiakkaalle

Usein toistuvia sisältökokonaisuuksia varten luotu sekä kuvaavasti nimetty lohko helpottaa vaikkapa toistuvien, melko samantyyppisten elementtien tuomista osaksi WordPress-sivujen sisältöä. Esimerkiksi artikkelia luodessa on helppo keskittyä sisällön tuotantoon ja käyttää valmiita ennalta sovittuja lohkoja tietyissä paikoissa tukemassa viestiä.

Lohkojen käyttöä on mahdollista rajoittaa artikkelin kategorian tai kirjoittajan mukaan vaikkapa niin, että Matin kirjoittaessa omia leivonta-aiheisia artikkeleitaan, tarjolla ovat kyseiseen aihepiiriin räätälöidyt valmiit tai puolivalmiit elementit.

Kätevää, eikö?

🙂

Oman lohkon kenttäryhmä ACF:n editorissa. Lisäksi lohko rekisteröidään ja sille koodataan oma template, joka lopulta määrää, miltä lohko näyttää sivustolla.