A Gutenberg szerkesztő használata WordPress oldalakon

A WordPress weboldal készítés rendkívül népszerű, hiszen a legelterjedtebb tartalomkezelő rendszerről beszélünk. Az egyik alapvető összetevője a Gutenberg szerkesztő, amellyel bejegyzéseket és oldalakat adhatunk hozzá a webhelyünkhöz. Ezt a blogbejegyzést is a Gutenberggel készítettük el! 🙂

1. Mi az a Gutenberg szerkesztő?

A Gutenberg szerkesztő egy WordPress alapú vizuális szerkesztő, amelyet a WordPress 5.0 verziójával vezettek be. A Gutenberg projekt célja az volt, hogy átalakítsa a WordPress tartalomkezelő rendszert, és lehetővé tegye a felhasználóknak, hogy könnyebben és gyorsabban szerkeszthessék weboldalaik tartalmát.

A Gutenberg szerkesztő a hagyományos WordPress szerkesztőtől eltérő megközelítést alkalmaz. Míg a hagyományos szerkesztő egy egyszerű szövegmező, ahol HTML-kódot és rövidkódokat használhatunk a tartalom létrehozásához, a Gutenberg blokkokra épül. A blokkok olyan önálló egységek, amelyek különböző típusú tartalmi elemeket vagy funkciókat tartalmaznak, például szöveget, képeket, videókat, címsorokat, idézeteket, galériákat stb. A felhasználók egyszerűen beilleszthetik vagy behúzhatják a kívánt blokkokat a szerkesztőfelületre, majd tetszés szerint testre szabhatják azokat a beépített eszközök segítségével.

A WordPress Gutenberg blokkszerkesztője megkönnyíti a weboldalak tartalmának dinamikusabb és vizuálisan jobban átlátható létrehozását, ezzel segítve a felhasználóknak abban, hogy jobban kihasználják a WordPress lehetőségeit kódolási ismeretek nélkül is. Ezáltal a WordPress könnyebben kezelhetővé válik azok számára, akik nem jártasak a webfejlesztés területén.

2. Hogyan működik a Gutenberg szerkesztő?

A Gutenberg szerkesztő a WordPress tartalomkezelő rendszer része, és egy modern, blokk-alapú vizuális szerkesztőfelületet kínál a weboldalak létrehozásához és szerkesztéséhez. A Gutenberg alapelve az, hogy a weboldal tartalmát különböző blokkokra osztja, és a felhasználók egyszerűen hozzáadhatnak, szerkeszthetnek és válogathatnak ezekből a blokkokból anélkül, hogy mélyrehatóan érteniük kellene a webfejlesztéshez vagy a HTML-hez.

Így néz ki például a fenti rész a Gutenberg szerkesztőben:

Ahogy látható, a bejegyzés tartalma blokkokra van osztva (H1 címsor, bekezdés, kép, H2 címsor, bekezdés).

2.1. Blokk hozzáadása

Amikor elkezded létrehozni vagy szerkeszteni a weboldal vagy bejegyzés tartalmát, új blokkokat adhatsz hozzá a szerkesztőfelülethez. A blokkokat különböző típusú tartalmak vagy funkciók biztosításához használhatod, például szöveghez, képekhez, videókhoz, címekhez, idézetekhez, vázlatpontokhoz, felsorolásokhoz.

A blokk hozzáadásához kattints a jobb felső sarokban található „+” ikonra, majd egyszerűen húzd be a kívánt helyre azt a blokkot, amelyiket az oldalon használni szeretnéd.

2.2. Gutenberg blokkok szerkesztése

Miután hozzáadtad a tartalomblokkot, az a Gutenberg szerkesztő felületen megjelenik, és a blokk tartalmát vagy tulajdonságait könnyedén testre szabhatod. A beépített eszközök segítségével módosíthatod a szövegméretet, a szövegszínt, a betűtípust, a képek elrendezését, a linkeket, az idézetek kinézetét és más elemeket.

Minden blokkhoz specifikus beállítások és lehetőségek tartoznak, ahogy ez az alábbi képen is látható, ahol az egyik bekezdés testreszabási lehetőségeit láthatjuk a képernyő jobb oldalán (szövegszín, háttérszín, betűméret, betűtípus, HTML horgonyszöveg, stb.).

Egy kép esetén már teljesen megváltoznak a beállítható paraméterek: helyettesítő szöveg (Alt Text), szélesség, magasság, képarány, felbontás, stb.

2.3. Blokkok mozgatása és rendezése

A Gutenberg lehetővé teszi a blokkok egyszerű mozgatását és elrendezését a szerkesztőfelületen belül. Egyszerűen húzd át a blokkot egy másik helyre, vagy használd a nyilakat a blokkok felfelé vagy lefelé mozgatásához. De használhatod a bal felső sarokban elérhető listanézetet is, ahol szintén könnyen mozgathatók a blokkok.

2.4. Globális beállítások és előnézet

A Gutenberg szerkesztőben van lehetőség előnézetre, ahol láthatod, hogyan fog kinézni a tartalom a közzétett weboldalon. Emellett a globális beállításokkal az egész weboldalt módosíthatod, például a betűtípust vagy a lábléc elemeit a teljes webhelyen. Megtekintheted, hogyan fog kinézni a bejegyzés asztali számítógépen, táblagépen vagy mobilon. A Gutenberg szerkesztő tehát lehetőséget ad az előnézetre az oldal vagy bejegyzés publikálása előtt.

2.5. Mentés és közzététel

Amikor elégedett vagy a tartalommal, mentheted a változtatásokat vázlatként, vagy közzéteheted az oldalt. A WordPress automatikusan menti a frissített változatokat az oldalakból, így nem veszítesz el semmit. Kattints a jobb felső sarokban található „Közzététel” gombra.

3. A Gutenberg WordPress szerkesztő elérése

A Gutenberg szerkesztő elérése alapértelmezetten működik a WordPress legújabb verzióiban (5.0 vagy újabb), hiszen a Gutenberg szerkesztő már alapból be van építve a tartalomkezelő rendszerbe.

1) Bejelentkezés WordPress vezérlőpultjára: először is be kell jelentkezned a WordPress adminisztrációs felületére az adminisztrátori felhasználóneveddel és jelszavaddal.

2) Szerkesztési felület megnyitása: válassz egy meglévő oldalt vagy hozz létre egy újat, amit szeretnél szerkeszteni. Ehhez navigálj az „Oldalak” vagy a „Bejegyzések” menüponthoz a WordPress vezérlőpult bal oldalán.

3) Gutenberg blokkszerkesztő indítása: amikor az oldal szerkesztési felületén vagy, a Gutenberg szerkesztő alapértelmezett szerkesztőként jelenik meg. Látni fogod a blokk-alapú szerkesztőfelületet, amely lehetővé teszi a tartalom létrehozását és testre szabását.

4) Blokkok hozzáadása és szerkesztése: a Gutenberg szerkesztőben a tartalom létrehozásához és szerkesztéséhez egyszerűen kattints a „+” ikonra, majd választhatsz a különböző blokkok közül. A blokkokat könnyedén mozgathatod és testre szabhatod, és minden tartalomblokkhoz specifikus beállítások állnak rendelkezésre.

5) Mentés és közzététel: miután elkészítetted a bejegyzés vagy oldal tartalmát, kattints a „Közzététel” gombra a jobb felső sarokban, hogy publikáld az oldalt nyilvánosan is.

Alapértelmezett módon a Gutenberg szerkesztő már telepítve van a WordPressre, tehát nincs szükség külön telepítésre. Ha viszont valamilyen oknál fogva nem találod vagy nem működik a Gutenberg, ellenőrizd, hogy valóban a legfrissebb WordPress verzió van telepítve a weboldaladon (WordPress weboldal készítés szupercikk).

4. A Gutenberg használata: blokkok

A Gutenberg szerkesztőben számos különböző típusú blokk áll rendelkezésre, amelyek segítségével változatos és komplex tartalmakat hozhatsz létre weboldaladon.

1) Szöveg blokkok: bekezdés, H1-H4 címsorok, listák, idézet, kód, előreformázott szöveg, kiemelt idézet, táblázat, vers, lábjegyzetek, Ninja Forms űrlapok.

2) Média blokkok: kép, galéria, borítókép, fájlok, audió, média és szöveg, videó.

3) Kinézet blokkok: CTA gombok, oszlopok, csoportok, alá- és mellérendelő láncok, oldaltörés, elválasztó vonal, helykitöltő.

4) Widgetek: archívumok, naptár, kategória lista, egyéni HTML, legutóbbi hozzászólások és bejegyzések listája, RSS, keresés, rövidkód, címkefelhő, közösségi média ikonok.

5) Sablon blokkok: navigáció, honlap címe, elnevezése, bejegyzések listája, terméknév, kivonat, termékleírás, bejegyzés kiemelt képe, szerzője, dátuma, kategóriák, címkék, hozzászólások, be/kijelentkezés.

6) Beágyazások: Twitter, YouTube, SoundCloud, Spotify, Flickr, Vimeo, Reddit, Pocket Casts, Tumblr, TikTok, Slideshare, Pinterest, stb.

7) WooCommerce blokkok: termékkereső, vélemények, vásárlói fiókok, termékkategóriák, legújabb termékek, akciós termékek, legjobban fogyó termékek, bevásárlókosár, termékcímkék, fizetési oldal, stb.

Az elérhető Gutenberg blokkok száma függ attól, hogy a WordPress oldalon milyen sablon fut, illetve mely bővítményeket telepítetted fel az oldaladra. Hiszen vannak olyan bővítmények, amelyek új widgeteket vagy tartalomblokkokat tesznek elérhetővé (pl. JetEngine).

5. Összefoglaló

A Gutenberg a WordPress alapvető szerkesztője, amellyel bejegyzések és oldalakat hozhatsz létre.

Blokk-alapú vizuális szerkesztő, vagyis a drag-and-drop elve alapján a tartalmi blokkokat csak be kell húzni a szerkesztőfelületre, és már testre is szabhatod őket.

Ha érdekel a WordPress honlap készítés, akkor olvasd el WordPress weboldal készítés árak cikkünket, vagy lépj velünk kapcsolatba! 🙂

Hibát találtál? Írj nekünk az alábbi e-mail címre: szerk@kiszervezettmarketing.hu

6. Gyakran ismételt kérdések és válaszok