Lohkoeditori

Moduuli 4: Sisällön tekeminen · Lukuaika: 8 minuuttia

Oppimistavoite: Tämän oppitunnin jälkeen osaat rakentaa sivun lohkoilla ja lohkomalleilla, ja tiedät miten luonnokset, ajastus ja versiot toimivat.

Keskeiset käsitteet: lohko, lohkoasetukset, työkalurivi, listanäkymä, ryhmä, sarakkeet, lohkomalli, synkronoitu lohkomalli, luonnos, yksityinen, ajastus, versiot, esikatselu

Kaikki on lohko

WordPress 5.0:sta (vuoden 2018 lopusta) lähtien sisältöä tehdään lohkoeditorilla (kutsutaan myös nimellä Gutenberg, projektin mukaan). Sivu koostuu erillisistä lohkoista: otsikko, kappale, kuva, painike, lista, taulukko, upotettu video. Jokaisella lohkolla on omat asetuksensa. Lohkoja voi asetella allekkain, vierekkäin (sarakkeisiin) tai sisäkkäin (ryhmään).

Miksi lohkoja? Vanhassa editorissa sivu oli yksi iso tekstikenttä. Jos halusit kaksi saraketta tai painikkeen, tarvitsit sivunrakentajan, lyhytkoodeja tai HTML:ää. Lohkojen avulla tämä onnistuu suoraan WordPressissä, ja lopputulos on siistiä HTML:ää, jonka teema muotoilee.

Kulissien takana WordPress tallentaa lohkot HTML:nä, jonka ympärillä on kommenttimerkit:

<!-- wp:heading -->
<h2 class="wp-block-heading">Aukioloajat</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Olemme avoinna tiistaista lauantaihin.</p>
<!-- /wp:paragraph -->

Tätä on hyvä tietää: sisältö pysyy luettavana HTML:nä, vaikka vaihtaisit myöhemmin teemaa tai jokin lohko lakkaisi olemasta olemassa. Tämän näkee, kun valitsee lohkon kohdalla "Muokkaa HTML:nä" tai koodieditorissa (Ctrl+Shift+Alt+M).

Editori kolmessa osassa

1. Kangas keskellä: sivusi suunnilleen sellaisena kuin se tulee näyttämään.
2. Työkalurivi valitun lohkon yläpuolella: lihavointi, kursivointi, linkki, tasaus ja lohkon muuttaminen toiseen tyyppiin (kappaleesta tulee lista, kuvasta tulee galleria).
3. Sivupalkki oikealla, kahdella välilehdellä: Sivu (tai Artikkeli) koko sivua koskevilla asetuksilla, ja Lohko valitun lohkon asetuksilla, kuten väri, tila ja fonttikoko.

Kaksi työkalua, jotka helpottavat työtäsi huomattavasti:

• Listanäkymä (vasemmassa yläkulmassa oleva kolmen viivan kuvake): sivusi rakenne puuna. Sen avulla voit valita tarkalleen haluamasi lohkon, vaikka se olisi ryhmän sisällä sarakkeessa.
• Vinoviiva-komennot: kirjoita tyhjälle riville / ja lohkon nimi (/otsikko, /painike, /kuva) ja paina Enter.

Rakentaminen ryhmillä ja sarakkeilla

Hyvässä sivussa on selkeä rakenne. Siihen käytetään kolmea rakennuspalikkaa:

• Ryhmä: kehys muutaman lohkon ympärillä, omalla taustalla tai tilalla. Esimerkiksi värillinen lohko, jossa on otsikko, lause ja painike.
• Sarakkeet: lohkot vierekkäin. Puhelimessa ne tulevat allekkain.
• Rivi ja Pino: ryhmän variaatioita, jotka järjestävät lohkot vaaka tai pystysuunnassa.

Käytä otsikoita oikein: yksi H1 (sivun otsikko, jonka teema yleensä tekee itse), sen alle H2 pääluvuille ja H3 niiden sisällä oleville osioille. Älä valitse otsikkotasoa fonttikoon perusteella, sen säädät lohkoasetuksista. Ruudunlukijat ja hakukoneet käyttävät otsikoita ymmärtääkseen sivun rakenteen (oppitunti 9.2).

Lohkomallit: ei tarvitse aloittaa aina alusta

Jotta sivua ei rakennettaisi aina alusta, voit käyttää lohkomallia, eli valmista lohkoryhmää: otsikko tekstillä ja kuvalla, hintataulukko, kolme saraketta kuvakkeilla. Lisäät niitä lisäyspainikkeen (plusmerkki) kautta, välilehdeltä Lohkomallit. Teemasi toimittaa niitä usein mukana, ja wordpress.org:n lohkomallikirjastossa on satoja.

Voit myös tehdä omia lohkomalleja: valitse muutama lohko, valitse työkalurivistä kolme pistettä ja Tee lohkomalli. Samalla valitset, onko lohkomalli synkronoitu:

• Ei synkronoitu: joka kerta kun lisäät sen, saat erillisen kopion. Kun muokkaat sitä, vain tuo kopio muuttuu. Kätevä pohjana.
• Synkronoitu: kaikkialla missä se on, se on sama. Kun muokkaat sitä yhdessä paikassa, se muuttuu kaikkialla. Kätevä esimerkiksi lohkolle "Yhteystiedot ja aukioloajat", joka on kymmenellä sivulla. (Ennen näitä kutsuttiin "uudelleenkäytettäviksi lohkoiksi".)

Yksi sudenkuoppa: synkronoitu lohkomalli, jota muokkaat "vähän" yhdellä sivulla, muuttuu myös kaikilla muilla sivuilla. Jos haluat yhteen paikkaan jotain erilaista, muuta kyseinen kopio tavalliseksi ryhmäksi (irrota).

Tallentaminen, julkaiseminen ja ajastus

Sivulla on tila:

Käytä Esikatselua nähdäksesi sivun sellaisena kuin vierailija sen näkee, myös mobiilissa ja tabletilla, ennen julkaisua.

Versiot: ajassa taaksepäin

Joka kerta kun tallennat, WordPress tallentaa version: sen hetkisen version. Sivupalkista näet sivun kohdalla, kuinka monta versiota on tallennettu. Klikkaa sitä, niin näet liukusäätimellä erot kahden version välillä ja voit palauttaa vanhan version.

Versiot ovat ensimmäinen turvaverkkosi virheen sattuessa ("poistin vahingossa puolet sivusta"). Ne kuitenkin tallentuvat kaikki tietokantaan. Sivusto, jolla on tuhansia versioita, kasvaa ja saattaa hidastua. Voit rajoittaa määrää tiedostossa wp-config.php:

define( 'WP_POST_REVISIONS', 20 );

Oppitunti 6.3 käsittelee vanhojen versioiden siivoamista.

Missä editori päättyy

Lohkoeditori tekee sivun sisällön. Se, mitä sisällön ympärillä on (sivuston header, valikko, footer), kuuluu teemaan. Lohkoteemassa sitä muokataan Sivustoeditorissa (Ulkoasu > Editori) samoilla lohkoilla; perinteisessä teemassa Mukauttimessa ja Vimpaimissa (oppitunti 5.1). Jos käytät sivunrakentajaa kuten Elementor tai Divi, työskentelet kyseisessä ohjelmassa lohkoeditorin sijaan; sen haitoista kerrotaan oppitunnilla 5.1.

Yhteenveto

• Sivu koostuu lohkoista, jotka asetellaan allekkain, vierekkäin ja sisäkkäin; WordPress tallentaa ne HTML:nä kommenttimerkkien kanssa.
• Listanäkymä ja vinoviiva-komennot tekevät rakentamisesta nopeaa ja täsmällistä.
• Käytä otsikoita rakenteen vuoksi (H2, H3), ei fonttikoon vuoksi.
• Lohkomallit säästävät työtä; synkronoitu lohkomalli muuttuu kaikkialla samanaikaisesti.
• Luonnos, ajastus, yksityisyys ja versiot antavat sinulle hallinnan siitä, mikä on näkyvissä milloinkin, sekä mahdollisuuden palata taaksepäin.

Tietovisa

Tehtävä

Tehtävä D4.1: Rakenna sivu lohkoilla. Tee luonnossivu "Tietoa meistä", jossa on: H2 ja H3, vähintään kaksi kappaletta, kuva alt-tekstillä, sarakelohko kahdella sarakkeella, painike linkillä ja lohkomalli kirjastosta. Muuta yhdestä ryhmästä oma synkronoitu lohkomalli ja lisää se toiselle luonnossivulle. Muokkaa sitä sitten yhdessä paikassa ja katso, mitä tapahtuu toisella sivulla. Palauta lopuksi aiempi versio. Merkitse jokainen vaihe tehdyksi ja kuvaile kahdella lauseella, milloin käyttäisit synkronoitua lohkomallia ja milloin et.

Lue lisää

WordPressin käytöstä itsestään meillä ei vielä ole omia artikkeleita; WordPressin virallinen dokumentaatio on kattava.

• Lohkoeditori (wordpress.org, englanniksi): https://wordpress.org/documentation/article/wordpress-block-editor/
• Lohkomallit (wordpress.org, englanniksi): https://wordpress.org/documentation/article/block-pattern/
• Versiot (wordpress.org, englanniksi): https://wordpress.org/documentation/article/revisions/