WordPress: A Gutenberg‑blokkrendszer és FSE sablonkészítés, alapok!

Az előző részben már szó volt róla, most azonban nézzük meg közelebbről, hogyan működik a blokk-alapú szerkesztés!

A WordPress beépített blokk alapú szerkesztője

A Gutenberg a WordPress új szerkesztője, amely alapjaiban változtatta meg a tartalomkészítés módját. A Full Site Editing (FSE) ezt a blokk-logikát terjeszti ki a teljes weboldalra: nemcsak a tartalmakat, hanem a sablonok felépítését is blokkokkal szerkeszthetjük.

A Gutenberg rendszer négy szintre tagolódik – ezek egymásra épülve határozzák meg a weboldal felépítését és működését:

1. Sablonok (Templates) / Sablonrészek (Template Parts):

Ezek a legmagasabb szintű egységek a Gutenberg hierarchiájában. A Sablonok teljes oldalak vagy bejegyzések elrendezését határozzák meg (pl. egy blogbejegyzés sablonja, egy oldalsablon vagy a 404-es hibaoldal). A Sablonrészek pedig újrafelhasználható, kisebb szekciók, amelyek több sablonban is előfordulhatnak, mint például egy Fejléc (Header), Lábléc (Footer) vagy egy Oldalsáv (Sidebar). Az FSE ezen a szinten hozza el a legnagyobb változást.

2. Blokkok:

Ezek a legkisebb, alapvető építőkövek. Gondolj rájuk úgy, mint az egyedi elemekre, amelyekből a tartalom összeáll. Például egy Bekezdés (Paragraph), egy Kép (Image), egy Gomb (Button) vagy egy Címsor (Heading) mind blokkok. Mindegyik blokk önállóan konfigurálható.

3. Blokkminták (Patterns):

A blokkminták előre definiált blokkcsoportok, amelyek együtt, harmonikusan működnek. Egy blokkminta lehet például egy Kapcsolatfelvételi űrlap blokkokból (űrlap mezők, gomb) vagy egy Teljes szakasz egy címmel, képpel és szöveggel. Ezekkel felgyorsíthatod az oldalépítést, hiszen nem kell minden elemet külön-külön elhelyezned és beállítanod.

4. Blokkvariánsok (Block Styles):

Ezek ugyanazon blokk különböző vizuális megjelenését teszik lehetővé anélkül, hogy a blokk alapvető funkciója megváltozna. Például egy Gomb blokknak lehet Kerek vagy Szögletes stílusa, vagy egy Kép blokk lehet Kör alakú vagy Alapértelmezett. Ez rugalmasságot biztosít a designban, anélkül, hogy bonyolult CSS kódolásra lenne szükség.

Hogyan illeszkedik ebbe az FSE?

A Full Site Editing pontosan a „4.” szintet emeli ki és teszi szerkeszthetővé a Site Editoron keresztül. Korábban a WordPress témák PHP fájlokat használtak a sablonok és sablonrészek definiálásához (pl. header.php, footer.php, page.php). Az FSE témákban (más néven blokk-témákban) ezeket a fájlokat HTML-alapú, blokkokból felépülő fájlok váltják fel, amelyek jellemzően a téma templates/ és parts/ mappáiban találhatók.

Ez azt jelenti, hogy a WordPress a sablonrészeket futásidőben (runtime) állítja össze a blokkokból. Az FSE tehát nem csak a tartalmadat, hanem az egész weboldalad szerkezetét és designját blokkokká alakítja, és lehetővé teszi, hogy mindent vizuálisan szerkessz a Site Editor felületén keresztül.

<?php get_header(); ?>

<?php get_header(); ?>

Ez a kódsor utasította a WordPress-t, hogy hívja meg a header.php fájlt a témából. Ha módosítani szeretted volna a fejlécet, a header.php fájlba kellett beleírnod a szükséges HTML-t és PHP-t.

Régi típusú sablonfelépítés – visszatekintés

A klasszikus (régi típusú) WordPress sablonfelépítésről korábban készítettem néhány jól átlátható ábrát – ezeket most újra megosztom (képek kicsit lentebb). Az illusztrációk még 2012-ből származnak, de a lényegük ma is érvényes: a hagyományos WordPress sablon egy statikus HTML-vázra épül, amelyet dinamikus PHP-fájlok (pl. header.php, index.php, sidebar.php, footer.php) egészítenek ki.

A gyönyörű képeim a sablonozás alapjairól

Ez az alapelv ma is hasznos és tanulságos, főleg azoknak, akik mélyebben meg akarják érteni a WordPress működését.

A fő különbség napjainkban az, hogy az új típusú, FSE (Full Site Editing) sablonok esetén mindezt már nem kód szinten kell megírnunk – a teljes webhely szerkezete és tartalma vizuálisan, blokkokkal állítható össze a WordPress admin felületén, akár egyetlen kattintással.

Ez az, ami miatt az FSE valóban forradalmi: ugyanarra az elvre épül, mint a régi sablonok – de most már minden elem blokkalapú és vizuálisan szerkeszthető. Ezért mondhatjuk: az új WordPress valójában nem új motor, hanem új „vezérlőfülke„.

Mit tud a Site Editor?

A Site Editor az FSE központi felülete, ahol az egész weboldalad designját és elrendezését kezelheted. Ez a felület rendkívül erőteljes, és az alábbi kulcsfontosságú elemeket tartalmazza:

1. Stílus‑variánsok (Style Variations):

Ez egy nagyszerű funkció, amely lehetővé teszi, hogy egy téma több „skinnel” rendelkezzen, vagyis előre definiált stílusbeállításokkal, amelyeket egyetlen kattintással válthatsz. Képzeld el, hogy a témádnak van egy „Világos” és egy „Sötét” módja, vagy több színpaletta variációja. Ezeket stílusvariánsként mentheted el, és a felhasználók könnyedén válogathatnak közöttük a Site Editorban. Ez nagyszerű a témafejlesztőknek, de a felhasználók is profitálhatnak belőle, ha a témájuk kínál ilyen opciókat.

2. Sablonok (Templates):

Itt szerkesztheted a különböző oldalak, bejegyzések és archívumok elrendezését. Néhány alapértelmezett sablon, amit valószínűleg találsz:

• Oldal (Page): Az általános oldalak megjelenése.
• Bejegyzés (Single Post): Az egyedi blogbejegyzések elrendezése.
• Kategória / Címke archívum (Category / Tag Archive): A kategóriákba vagy címkékbe rendezett bejegyzések listázása.
• Keresési eredmények (Search Results): A keresési találatok megjelenítése.
• 404 oldal (404 Page): A nem található oldalak hibaoldala.
• Kezdőlap (Home): A weboldalad főoldalának elrendezése (ha blokk-témát használsz).
• Blog archívum (Blog Archive): A blogbejegyzések listázása (ha nem a kezdőlapon jelennek meg).

Ezeket a sablonokat tetszés szerint módosíthatod, blokkokat adhatsz hozzájuk, vagy elrendezésüket változtathatod.

3. Sablonrészek (Template Parts):

Ezek az újrafelhasználható szekciók, amelyeket a weboldalad különböző sablonjaiban használhatsz. Ahogy már említettük, tipikus sablonrészek a Fejléc (Header), a Lábléc (Footer) és az Oldalsáv (Sidebar). Ha módosítasz egy sablonrészt, a változtatások automatikusan érvényesülnek minden olyan helyen, ahol az adott sablonrész be van illesztve. Ez drámaian leegyszerűsíti a globális designváltoztatásokat.

4. Globális stílusok (Styles):

Ez az FSE egyik legfontosabb része a design testreszabásához. Itt tudod beállítani a weboldalad vizuális identitását:

• Színek: A téma alapszínei, paletták, háttérszínek, szövegszínek.
• Betűtípusok: A betűtípusok, betűméretek és sortávolságok beállítása a különböző szövegelemekhez (címsorok, bekezdések).
• Gombstílus: A gombok alapértelmezett megjelenése (háttérszín, szövegszín, keret, lekerekítés).
• Linkstílus: A linkek alapértelmezett színe és aláhúzása.
• Blokk stílusok: Egyes blokkoknál globálisan beállíthatóak további stílusok, pl. egy kép blokk árnyéka.

A globális stílusok a theme.json fájlban tárolódnak, ami a téma gyökérkönyvtárában található.

A Site Editor nem írja közvetlenül felül a theme.json fájlt, de felülbírálhatja annak hatását adatbázisban tárolt értékekkel. Ha egy plugin vagy export/import funkció (pl. WordPress beépített exportja vagy block theme export) használatba kerül, akkor ténylegesen is felülírhatja a fájlt.

Ajánlott gyakorlat:

• Készíts biztonsági másolatot, különösen, ha exportálni vagy sablont másolni készülsz.
• Mindig használj verziókezelőt (git) ha kézzel szerkeszted a theme.json fájlt.
• Ne keverd a Site Editorban végzett vizuális módosításokat és a kézzel írt fájlmódosításokat ugyanabban a munkafolyamatban.