Plokiredaktor

Moodul 4: Sisu loomine · Lugemisaeg: 8 minutit

Õpieesmärk: Pärast seda õppetundi oskad lehte üles ehitada plokkide ja mustrite abil ning tead, kuidas toimivad mustandid, ajastamine ja versioonid.

Põhimõisted: plokk, ploki seaded, tööriistariba, loendivaade, rühm, veerud, muster, sünkroonitud muster, mustand, privaatne, ajastamine, versioonid, eelvaade

Kõik on plokk

Alates WordPress 5.0 versioonist (2018. aasta lõpp) loome sisu plokiredaktoris (tuntud ka kui Gutenberg, projekti nime järgi). Leht koosneb eraldi plokkidest: pealkiri, lõik, pilt, nupp, loend, tabel, sisestatud video. Igal plokil on omaette seaded. Plokke saab panna üksteise alla, kõrvuti (veergudena) või üksteise sisse (rühma).

Miks plokid? Vanas redaktoris oli leht üks suur tekstiväli. Kui soovisid kahte veergu või nuppu, oli vaja veebilehe koostamise tööriista, lühikoode (shortcode) või HTML-i. Plokkidega saab seda teha WordPressis endas ning tulemuseks on korrektne HTML, mida teema vormindab.

Kulisside taga salvestab WordPress plokid HTML-koodina, mille ees ja järel on kommentaarimärgid:

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

<!-- wp:paragraph -->
<p>Oleme avatud teisipäevast laupäevani.</p>
<!-- /wp:paragraph -->

Seda on kasulik teada: sisu jääb loetavaks HTML-iks ka siis, kui vahetad hiljem teema või kui mõni plokk enam ei eksisteeri. Seda näed, kui valid ploki juures „Redigeeri HTML-ina“ või koodiredaktoris (Ctrl+Shift+Alt+M).

Redaktor kolmes osas

1. Lõuend (canvas) keskel: sinu leht umbes sellisena, nagu see välja näeb.
2. Tööriistariba valitud ploki kohal: rasvane kiri, kaldkiri, link, joondus ja ploki muutmine teist tüüpi plokiks (lõik muutub loendiks, pilt muutub galeriiks).
3. Külgriba paremal kahe vahekaardiga: Leht (või Postitus) kogu lehe seadetega ning Plokk valitud ploki seadetega, nagu värv, ruum ja kirja suurus.

Kaks abivahendit, mis muudavad töö palju lihtsamaks:

• Loendivaade (kolme kriipsuga ikoon vasakul üleval): sinu lehe ülesehitus puuna. Sellega valid täpselt selle ploki, mida vajad, isegi kui see asub rühmas, mis omakorda on veerus.
• Kaldkriipsu käsklused: kirjuta tühjale reale / ja ploki nimi (/pealkiri, /nupp, /pilt) ning vajuta Enter.

Ülesehitus rühmade ja veergudega

Heal lehel on selge ülesehitus. Selleks kasuta kolme ehituskivi:

• Rühm: raam mõne ploki ümber, millel on oma taust või ruum. Näiteks värviline plokk pealkirja, lause ja nupuga.
• Veerud: plokid kõrvuti. Telefonis kuvatakse need üksteise all.
• Rida ja Virn: rühma variandid, mis järjestavad plokke horisontaalselt või vertikaalselt.

Kasuta pealkirju õigesti: üks H1 (lehe pealkiri, mille teema tavaliselt ise genereerib), selle all H2 peatükkide jaoks ja H3 nende sees olevate osade jaoks. Ära vali pealkirja taset kirja suuruse järgi, seda saad kohandada ploki seadetes. Ekraanilugejad ja otsingumootorid kasutavad pealkirju lehe mõistmiseks (õppetund 9.2).

Mustrid: ära alusta iga kord nullist

atudMuster on valmis plokkide rühm: pealkiri koos teksti ja pildiga, hinnatabel, kolm veergu ikoonidega. Lisad need sisestusnupu (plussimärgi) kaudu, vahekaart Mustrid. Sinu teemaga tuleb tihti kaasa mõni muster ning wordpress.org mustrikogus on neid sadu.

Saad ka ise mustreid luua: vali mõni plokk, vajuta tööriistaribal kolme punkti ikoonile ja vali Loo muster. Seal valid, kas muster on sünkroonitud:

• Sünkroonimata: iga kord, kui selle lisad, saad eraldiseisva koopia. Kui seda muudad, muutub ainult see koopia. Kasulik mallina.
• Sünkroonitud: kõikjal, kus see esineb, on see samasugune. Kui muudad seda ühes kohas, muutub see kõikjal. Kasulik näiteks plokile „Kontakt ja lahtiolekuajad“, mis on kümnel lehel. (Varem kandsid need nime „korduvkasutatavad plokid“.)

Üks lõks: sünkroonitud muster, mida „lihtsalt korra“ muudad ühel lehel, muutub ka kõigil teistel lehtedel. Kui soovid ühes kohas midagi teistmoodi, muuda see koopia tavaliseks rühmaks (eemalda sünkroonimine).

Salvestamine, avaldamine ja ajastamine

Lehel on olek:

Kasuta eelvaadet, et näha lehte nii, nagu külastaja seda näeb, ka mobiilis ja tahvelarvutis, enne kui avaldad.

Versioonid: tagasi ajas

Iga kord, kui salvestad, jätab WordPress alles versiooni: selle hetke redaktsiooni. Külgribal näed lehe juures, mitu versiooni on olemas. Klõpsa sellel ja näed liuguriga kahe versiooni erinevusi ning saad vana versiooni taastada.

Versioonid on sinu esimene turvavõrk eksimuse puhul („kustutasin kogemata poole lehe ära“). Need kõik aga jäävad andmebaasi. Sait, millel on tuhandeid versioone, muutub suuremaks ja mõnikord aeglasemaks. Arvu saab piirata failis wp-config.php:

define( 'WP_POST_REVISIONS', 20 );

Õppetund 6.3 räägib vanade versioonide koristamisest.

Kus redaktori töö lõppeb

Plokiredaktor loob lehe sisu. See, mis asub sisu ümber (saidi päis, menüü, jalus), kuulub teema juurde. Plokiteema puhul muudad seda saidiredaktoris (Väljanägemine > Redaktor) samade plokkidega; klassikalise teema puhul Kohandajas ja moodulite (Widgets) juures (õppetund 5.1). Kui kasutad veebilehe koostajat nagu Elementor või Divi, siis töötad selles programmis, mitte plokiredaktoris; selle puudusi käsitleb õppetund 5.1.

Kokkuvõte

• Leht koosneb plokkidest, mida paigutad üksteise alla, kõrvuti ja üksteise sisse; WordPress salvestab need HTML-ina koos kommentaarimärkidega.
• Loendivaade ja kaldkriipsu käsklused muudavad ülesehitamise kiireks ja täpseks.
• Kasuta pealkirju ülesehituse jaoks (H2, H3), mitte kirja suuruse jaoks.
• Mustrid säästavad tööd; sünkroonitud muster muutub korraga kõikjal.
• Mustand, ajastamine, privaatne olek ja versioonid annavad sulle kontrolli selle üle, mis on millal nähtav, ning võimaluse tagasi minna.

Test

Ülesanne

Ülesanne D4.1: Loo leht plokkidega. Loo mustandleht „Meist“ järgmisega: H2 ja H3, vähemalt kaks lõiku, pilt koos alt-tekstiga, veergude plokk kahe veeruga, nupp koos lingiga ja muster kogust. Muuda üks rühm enda loodud sünkroonitud mustriks ja lisa see teisele mustandlehele. Muuda see seejärel ühes kohas ja vaata, mis juhtub teisel lehel. Lõpuks taasta varasem versioon. Märgi iga samm ära ja kirjelda kahe lausega, millal kasutaksid sünkroonitud mustrit ja millal mitte.

Lisalugemist

WordPressis endas töötamise kohta ei ole meil veel oma artikleid; WordPressi ametlik dokumentatsioon on põhjalik.

• Plokiredaktor (wordpress.org, inglise keeles): https://wordpress.org/documentation/article/wordpress-block-editor/
• Mustrid (wordpress.org, inglise keeles): https://wordpress.org/documentation/article/block-pattern/
• Versioonid (wordpress.org, inglise keeles): https://wordpress.org/documentation/article/revisions/