Urejevalnik blokov

Modul 4: Ustvarjanje vsebine · Čas branja: 8 minut

Učni cilj: Po tej lekciji boste znali sestaviti stran z bloki in vzorci ter boste vedeli, kako delujejo osnutki, načrtovanje objav in revizije.

Ključni pojmi: blok, nastavitve bloka, orodna vrstica, pogled seznama, skupina, stolpci, vzorec, usklajeni vzorec, osnutek, zasebno, načrtovanje objave, revizije, predogled

Vse je blok

Od WordPress 5.0 (konec leta 2018) vsebino ustvarjate v urejevalniku blokov (imenovanem tudi Gutenberg, po projektu). Stran je sestavljena iz ločenih blokov: naslova, odstavka, slike, gumba, seznama, tabele, vdelanega videoposnetka. Vsak blok ima svoje nastavitve. Bloke postavljate enega pod drugega, enega poleg drugega (v stolpcih) ali enega znotraj drugega (v skupini).

Zakaj bloki? V starem urejevalniku je bila stran eno samo veliko polje za besedilo. Če ste želeli dva stolpca ali gumb, ste potrebovali orodje za izdelavo strani, kratke kode (shortcodes) ali HTML. Z bloki je to mogoče kar v samem WordPressu, rezultat pa je urejen HTML, ki ga oblikuje tema.

V ozadju WordPress bloke shrani kot HTML z oznakami komentarjev pred njimi in za njimi:

<!-- wp:heading -->
<h2 class="wp-block-heading">Odpiralni čas</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Odprti smo od torka do sobote.</p>
<!-- /wp:paragraph -->

To je koristno vedeti: vsebina ostane berljiv HTML, tudi če kasneje zamenjate temo ali če blok ne obstaja več. To vidite, če pri bloku izberete »Uredi kot HTML« ali v urejevalniku kode (Ctrl+Shift+Alt+M).

Urejevalnik v treh delih

1. Platno na sredini: Vaša stran, približno taka, kot bo videti.
2. Orodna vrstica nad izbranim blokom: krepko, ležeče, povezava, poravnava in pretvorba bloka v drugo vrsto (odstavek postane seznam, slika postane galerija).
3. Stranska vrstica na desni z dvema zavihkoma: Stran (ali Prispevek) z nastavitvami za celotno stran in Blok z nastavitvami izbranega bloka, kot so barva, prostor in velikost pisave.

Dva pripomočka, ki Vam zelo olajšata delo:

• Pogled seznama (ikona s tremi črticami zgoraj levo): zgradba Vaše strani v obliki drevesa. Z njim izberete točno tisti blok, ki ga želite, tudi če je v skupini znotraj stolpca.
• Ukazi s poševnico: v prazno vrstico vtipkajte / in ime bloka (/heading, /button, /image) ter pritisnite Enter.

Sestavljanje s skupinami in stolpci

Dobra stran ima jasno zgradbo. Za to uporabite tri gradnike:

• Skupina: okvir okoli nekaj blokov, z lastnim ozadjem ali prostorom. Na primer barvni blok z naslovom, stavkom in gumbom.
• Stolpci: bloki drug poleg drugega. Na telefonu se prikažejo drug pod drugim.
• Vrstica in Sklad: različici skupine, ki bloke razporedita vodoravno ali navpično.

Uporabljajte naslove pravilno: en H1 (naslov strani, ki ga običajno ustvari tema sama), pod njim H2 za poglavja in H3 za podpoglavja znotraj njih. Naslova ne izberite zaradi velikosti pisave; to prilagodite v nastavitvah bloka. Bralniki zaslona in iskalniki uporabljajo naslove za razumevanje strani (lekcija 9.2).

Vzorci: ni Vam treba vedno začeti znova

Vzorec je vnaprej pripravljena skupina blokov: naslov z besedilom in sliko, cenik, trije stolpci z ikonami. Vstavite jih prek gumba za vstavljanje (znak plus), zavihek Vzorci. Vaša tema jih pogosto ponuja nekaj, v knjižnici vzorcev na wordpress.org pa jih je na voljo več sto.

Vzorce lahko ustvarite tudi sami: izberite nekaj blokov, v orodni vrstici izberite tri pike in Ustvari vzorec. Pri tem izberete, ali je vzorec usklajen:

• Ni usklajeno: vsakič, ko ga vstavite, dobite ločeno kopijo. Če jo prilagodite, se spremeni samo ta kopija. Priročno kot predloga.
• Usklajeno: povsod, kjer se nahaja, je enak. Če ga prilagodite na enem mestu, se spremeni povsod. Priročno za blok »Kontakt in delovni čas«, ki se nahaja na desetih straneh. (Prej so se ti bloki imenovali »ponovno uporabni bloki«.)

Past: usklajen vzorec, ki ga na eni strani »samo malo« prilagodite, se spremeni tudi na vseh drugih straneh. Če želite na enem mestu nekaj drugačnega, to posamezno kopijo spremenite v navadno skupino (odklopite jo).

Shranjevanje, objava in načrtovanje

Stran ima status:

Uporabite Predogled, da si ogledate stran tako, kot jo vidi obiskovalec, tudi na mobilni napravi in tablici, preden jo objavite.

Revizije: nazaj v času

Vsakič, ko shranite, WordPress ustvari revizijo: različico v tistem trenutku. V stranski vrstici pri strani vidite, koliko revizij obstaja. Kliknite nanjo, nato z drsnikom vidite razlike med dvema različicama in lahko obnovite starejšo različico.

Revizije so Vaša prva varnostna mreža pri napaki (»po pomoti sem izbrisal polovico strani«). Vse pa se shranijo v podatkovno bazo. Spletno mesto s tisočimi revizijami postane večje in včasih počasnejše. Njihovo število lahko omejite v wp-config.php:

define( 'WP_POST_REVISIONS', 20 );

Lekcija 6.3 govori o čiščenju starih revizij.

Kje se urejevalnik konča

Urejevalnik blokov ustvarja vsebino strani. Kaj je okoli vsebine (glava spletnega mesta, meni, noga strani) spada k temi. Pri temi z bloki to urejate v Urejevalniku spletišča (Videz > Urejevalnik) z istimi bloki; pri klasični temi v Prilagojevalniku in pri Gradnikih (lekcija 5.1). Če uporabljate orodje za izdelavo strani, kot je Elementor ali Divi, delate v tem programu namesto v urejevalniku blokov; slabosti tega obravnava lekcija 5.1.

Povzetek

• Stran je sestavljena iz blokov, ki jih postavljate enega pod, poleg in znotraj drugega; WordPress jih shrani kot HTML z oznakami komentarjev.
• Pogled seznama in ukazi s poševnico omogočajo hitro in natančno gradnjo.
• Naslove uporabljajte za zgradbo (H2, H3), ne za velikost pisave.
• Vzorci prihranijo delo; usklajen vzorec se spremeni povsod hkrati.
• Osnutek, načrtovano, zasebno in revizije Vam dajejo nadzor nad tem, kaj je kdaj vidno, in možnost vrnitve nazaj.

Kviz

Naloga

Naloga D4.1: Sestavite stran z bloki. Ustvarite osnutek strani »O nas« z: naslovom H2 in H3, vsaj dvema odstavkoma, sliko z alt besedilom, blokom s stolpci z dvema stolpcema, gumbom s povezavo in vzorcem iz knjižnice. Iz ene skupine ustvarite svoj usklajen vzorec in ga vstavite na drugo osnutek strani. Nato ga prilagodite na enem mestu in preverite, kaj se zgodi na drugi strani. Na koncu obnovite prejšnjo revizijo. Odkljukajte vsak korak in v dveh stavkih opišite, kdaj bi uporabili usklajen vzorec in kdaj ne.

Dodatno branje

Za delo v samem WordPressu še nimamo lastnih člankov; uradna dokumentacija WordPressa pa je obsežna.

• Urejevalnik blokov (wordpress.org, v angleščini): https://wordpress.org/documentation/article/wordpress-block-editor/
• Vzorci (wordpress.org, v angleščini): https://wordpress.org/documentation/article/block-pattern/
• Revizije (wordpress.org, v angleščini): https://wordpress.org/documentation/article/revisions/