A blokkszerkesztő

Modul 4: Tartalom készítése · Olvasási idő: 8 perc

Tanulási cél: Ennek a leckének az elvégzése után össze tud állítani egy oldalt blokkokból és mintákból, és tudni fogja, hogyan működnek a piszkozatok, az ütemezés és a változatok.

Kulcsfogalmak: blokk, blokkbeállítások, eszköztár, listanézet, csoport, oszlopok, minta, szinkronizált minta, piszkozat, privát, ütemezés, előnézet

Minden blokk

A WordPress 5.0 óta (2018 vége) a tartalmat a blokkszerkesztőben készíti (a projekt neve alapján Gutenbergnek is nevezik). Egy oldal külön blokkokból áll: egy címsor, egy bekezdés, egy kép, egy gomb, egy lista, egy táblázat, egy beágyazott videó. Minden blokknak megvannak a saját beállításai. A blokkokat egymás alá, egymás mellé (oszlopokba) vagy egymásba (egy csoportba) helyezheti.

Miért blokkok? A régi szerkesztőben egy oldal egyetlen nagy szövegdoboz volt. Ha két oszlopot vagy egy gombot szeretett volna, oldalépítőre, shortcode-okra vagy HTML-re volt szüksége. Blokkokkal mindez megoldható magában a WordPressben, és az eredmény tiszta HTML, amit a sablon formáz meg.

A háttérben a WordPress a blokkokat HTML-ként tárolja, előttük és utánuk megjegyzés jelekkel:

<!-- wp:heading -->
<h2 class="wp-block-heading">Nyitvatartás</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Keddtől szombatig tartunk nyitva.</p>
<!-- /wp:paragraph -->

Ezt hasznos tudni: a tartalom olvasható HTML marad akkor is, ha később másik sablonra vált, vagy ha egy blokk már nem létezik. Ezt akkor láthatja, ha egy blokknál a "Szerkesztés HTML-ként" opciót választja, vagy a kódszerkesztőben (Ctrl+Shift+Alt+M).

A szerkesztő három része

1. A vászon középen: az oldala, nagyjából úgy, ahogyan megjelenik majd.
2. Az eszköztár egy kijelölt blokk fölött: félkövér, dőlt, link, igazítás, és a blokk átalakítása másik típusra (egy bekezdésből lista lesz, egy képből galéria).
3. Az oldalsáv jobbra, két füllel: Oldal (vagy Bejegyzés) az egész oldalra vonatkozó beállításokkal, és Blokk a kijelölt blokk beállításaival, mint a szín, a térköz és a betűméret.

Két eszköz, amely sokkal könnyebbé teszi a munkát:

• Listanézet (a bal felső sarokban lévő három vonalas ikon): az oldala felépítése fa formájában. Ezzel pontosan kiválaszthatja a kívánt blokkot, akkor is, ha az egy csoportban, egy oszlopon belül található.
• Perjel parancsok: írjon egy üres sorba / jelet, majd a blokk nevét (/heading, /button, /image), és nyomja meg az Entert.

Felépítés csoportokkal és oszlopokkal

Egy jó oldalnak világos felépítése van. Ehhez három építőelemet használhat:

• Csoport: keret néhány blokk köré, saját háttérrel vagy térközzel. Például egy színezett blokk egy címsorral, egy mondattal és egy gombbal.
• Oszlopok: blokkok egymás mellett. Telefonon egymás alá kerülnek.
• Sor és Verem: egy csoport változatai, amelyek a blokkokat vízszintesen vagy függőlegesen rendezik.

Használja a címsorokat megfelelően: egy H1 (az oldal címe, amit a sablon rendszerint magától elkészít), alatta H2 a fejezeteknek és H3 az azokon belüli részeknek. Ne a betűméret miatt válasszon egy címsorszintet; azt a blokkbeállításoknál állítsa be. A képernyőolvasók és a keresőmotorok a címsorok alapján értik meg az oldal felépítését (9.2 lecke).

Minták: nem kell mindig a nulláról kezdeni

Egy minta egy kész blokkcsoport: egy címsor szöveggel és képpel, egy ártáblázat, három oszlop ikonokkal. Ezeket a beszúrás gombon (a plusz jelen) keresztül, a Minták fülön illesztheti be. A sablonja gyakran tartalmaz néhányat, és a wordpress.org mintakönyvtárában több száz található.

Saját mintákat is készíthet: jelöljön ki néhány blokkot, válassza az eszköztáron a három pontot, majd a Minta létrehozása opciót. Ennél választhatja, hogy a minta szinkronizált legyen e:

• Nincs szinkronizálva: minden alkalommal, amikor beszúrja, egy önálló másolatot kap. Ha módosítja, csak az a másolat változik. Hasznos sablonként.
• Szinkronizálva: mindenhol, ahol szerepel, ugyanaz marad. Ha egy helyen módosítja, mindenhol megváltozik. Hasznos egy olyan "Kapcsolat és nyitvatartás" blokkhoz, amely tíz oldalon szerepel. (Régebben ezeket "újrafelhasználható blokkoknak" nevezték.)

Egy buktató: egy szinkronizált minta, amelyet egy oldalon "csak gyorsan" módosít, az összes többi oldalon is megváltozik. Ha egy helyen valami mást szeretne, alakítsa azt a konkrét másolatot önálló csoporttá (leválasztás).

Mentés, közzététel és ütemezés

Egy oldalnak van egy állapota:

Használja az Előnézet funkciót, hogy megtekintse az oldalt úgy, ahogyan egy látogató látná, mobilon és tableten is, mielőtt közzéteszi.

Változatok: vissza az időben

Minden alkalommal, amikor ment, a WordPress elment egy változatot: az adott pillanat állapotát. Az oldalsávon az oldalnál látja, hány változat létezik. Kattintson rá, és egy csúszkával láthatja a két verzió közötti különbséget, valamint visszaállíthat egy korábbi verziót.

A változatok az első biztonsági háló egy tévedés esetén ("véletlenül törültem az oldal felét"). Ugyanakkor mindegyik az adatbázisban tárolódik. Egy weboldal, amelyen több ezer változat van, nagyobbá és néha lassabbá válik. A számukat korlátozhatja a wp-config.php fájlban:

define( 'WP_POST_REVISIONS', 20 );

A 6.3 lecke a régi változatok rendbetételéről szól.

Ahol a szerkesztő véget ér

A blokkszerkesztő egy oldal tartalmát készíti. Ami a tartalom körül van (a weboldal fejléce, a menü, a lábléc), az a sablonhoz tartozik. Blokk sablon esetén ezt a Webhely szerkesztőben (Megjelenés > Szerkesztő) ugyanazokkal a blokkokkal szerkesztheti; klasszikus sablon esetén a Testreszabóban és a Widgeteknél (5.1 lecke). Ha olyan oldalépítőt használ, mint az Elementor vagy a Divi, akkor abban a programban dolgozik a blokkszerkesztő helyett; ennek hátrányairól az 5.1 lecke szól.

Összefoglalás

• Egy oldal blokkokból áll, amelyeket egymás alá, egymás mellé és egymásba helyez; a WordPress ezeket HTML-ként tárolja, megjegyzés jelekkel.
• A listanézet és a perjel parancsok gyorsabbá és pontosabbá teszik az építkezést.
• Használjon címsorokat a felépítéshez (H2, H3), ne a betűméret miatt.
• A minták munkát takarítanak meg; egy szinkronizált minta mindenhol egyszerre változik.
• A piszkozat, az ütemezés, a privát állapot és a változatok kontrollt adnak afölött, hogy mi mikor látható, és biztosítanak egy utat vissza.

Kvíz

Feladat

D4.1: Oldal összeállítása blokkokból. Hozzon létre egy piszkozat oldalt "Rólunk" címmel, a következőkkel: egy H2 és egy H3, legalább két bekezdés, egy kép alt szöveggel, egy oszlopok blokk két oszloppal, egy gomb linkkel, és egy minta a könyvtárból. Alakítson egy csoportot saját szinkronizált mintává, és illessze be egy második piszkozat oldalra. Ezután módosítsa egy helyen, és nézze meg, mi történik a másik oldalon. Végül állítson vissza egy korábbi változatot. Pipálja ki az egyes lépéseket, és írja le két mondatban, mikor használna, és mikor nem használna szinkronizált mintát.

További olvasnivaló

A WordPressben való munkáról még nincs saját cikkünk; a WordPress hivatalos dokumentációja részletes.

• A blokkszerkesztő (wordpress.org, angol): https://wordpress.org/documentation/article/wordpress-block-editor/
• Minták (wordpress.org, angol): https://wordpress.org/documentation/article/block-pattern/
• Változatok (wordpress.org, angol): https://wordpress.org/documentation/article/revisions/