# A Webhelyszerkesztő

> A teljes webhely (fejléc, lábléc és minden közbeeső rész) tervezése blokkokkal: a felület, a leggyakoribb feladatok és a hasznos eszközök.

A Webhelyszerkesztővel az egész webhelyet megtervezheted blokkokkal: a fejlécet, a láblécet és mindent a kettő között. Így sokkal nagyobb ráhatásod van arra, hogyan néz ki a webhelyed.

A Webhelyszerkesztő csak akkor érhető el, ha a webhelyen blokkos téma van bekapcsolva (lásd [Blokkos témák](https://hub.hellowp.io/hu/manuals/wordpress/webhelyszerkeszto/webhelyszerkeszto-blokk-temak/)). A blokkszerkesztő minden blokkja használható benne, és vannak kifejezetten ehhez készült témablokkok is, például a Navigáció, a Lekérdezés hurok és a Webhely címe.

## A Webhelyszerkesztő megnyitása

1. Telepíts és kapcsolj be egy blokkos témát (a **Megjelenés → Sablonok** oldalon).
2. Kattints a **Megjelenés → Szerkesztő** menüpontra.

![A Webhelyszerkesztő főmenüje a Kinézet nézetben](./kepek/webhelyszerkeszto-szerkeszto-fonezet.webp)

*A Webhelyszerkesztő főmenüje a Kinézet nézetben* (https://minta-bolt.hu/wp-admin/site-editor.php)

A bal oldali sötét oldalsávban a **Kinézet** nézet menüpontjai látszanak, a jobb oldalon a webhelyed kezdőoldalának előnézete.

## Mit találsz a főmenüben?

A főmenü ezeket a pontokat kínálja:

| Menüpont | Mire jó |
|---|---|
| **Identity** | A webhely címe, mottója, logója és ikonja (webhelyikon) egy helyen. |
| **Stíluslapok** | A webhely stílusainak és stílusváltozatainak szerkesztése. |
| **Oldalak** | Az oldalaid tartalmát magában a Webhelyszerkesztőben szerkesztheted. |
| **Navigáció** | A menüid böngészése és alapvető módosítása. |
| **Minták** | A szinkronizált minták és a sablonrészek kezelése. |
| **Mintasablonok** | A webhely különböző részeinek alapértelmezett elrendezései, valamint az egyéni oldalaké (keresési találatok, 404-es oldal stb.). |

Az admin sávban egy nagyító ikont is látsz **Ctrl+K** felirattal: ez a Parancs Paletta.

## A munkaterület

A Webhelyszerkesztő először a webhelyed kezdőoldalát tölti be, azt, amelyet az **Olvasás** beállításoknál megadtál. Ha egy elemre belépsz szerkesztésre, a felső eszköztár ezeket adja:

- **Vissza** (balra mutató nyíl): kilépés a jelenlegi szerkesztési nézetből, vissza az előző Webhelyszerkesztő-képernyőre. A WordPress admin sávja közben végig látszik.
- **Blokk hozzáadása** (**+**): új blokk, minta, médiatartalom vagy szinkronizált minta beszúrása.
- **Visszavonás** és **Újra**: az utolsó művelet visszavonása, illetve visszaállítása.
- **Listanézet**: az oldal összes blokkjának listája, amellyel áttekinted a szerkezetet, és könnyen mozgathatsz, szerkeszthetsz vagy törölhetsz blokkokat.
- **Parancs Paletta**: a webhely tartalmainak, mintasablonjainak és mintáinak gyors elérése, valamint műveletek (beállítások, új oldal stb.) indítása. Az admin sávból bármelyik képernyőről megnyitható.
- **Megtekintés**: a módosítások megtekintése mentés előtt. Itt azt is beállíthatod, hogy a módosítások egy adott nézetmérethez tartozzanak.
- **Beállítások**: a Sablonminta és a Blokk oldalsáv megjelenítése vagy elrejtése.
- **Stílusok**: a téma stílusváltozatainak böngészése, a betűk, színek és elrendezés beállítása az egész webhelyre, illetve egyes blokkok megjelenésének módosítása (lásd [Stílusok](https://hub.hellowp.io/hu/manuals/wordpress/webhelyszerkeszto/webhelyszerkeszto-stilusok/)).
- **Mentés**: a módosítások mentése. Kattintás után megkapod azoknak a szinkronizált mintáknak, navigációs menüknek, mintasablonoknak és sablonrészeknek a listáját, amelyeket módosítottál. Kijelölheted, melyiket mented. Vigyázz: egyes módosítások (például a fejléc vagy a lábléc) a webhely minden oldalára hatnak, amely a mintasablont használja, nem csak arra, amelyiken éppen dolgozol.
- **További lehetőségek** (három pont): kiegészítő beállítások és eszközök.

A **További lehetőségek** menüben ezeket találod:

- **Felső eszköztár**: bekapcsolva a blokkok eszköztára a szerkesztő tetejére rögzül, nem a blokk fölé.
- **Kiemelt mód**: csak az a blokk látszik élesen, amelyen éppen dolgozol, a többi szürke.
- **Zavartalan írásmód**: a felület nem lényeges részeit elrejti, így jobban tudsz koncentrálni; az admin sávot is elrejti.
- **Vizuális szerkesztő** és **Kód szerkesztő**: alapértelmezés szerint a vizuális szerkesztő látszik, átválthatsz a kódszerkesztőre, ahol az oldal teljes HTML-kódját látod.
- **Bővítmények**: itt váltasz a Beállítások és a Stílusok oldalsáv között.
- **Eszközök**: a téma letöltése a módosított mintasablonokkal és stílusokkal (**Exportálás**), a billentyűparancsok, a Webhelyszerkesztő **Üdvözlő útmutatója**, az összes blokk másolása és további súgócikkek.
- **Beállítások**: a szerkesztő működésének testreszabása.

## Hogyan használd?

### A webhely stílusának módosítása

A Stílusokkal az egész webhely és az egyes blokkok megjelenését állíthatod. A stílusbeállítások minden mintasablonból és sablonrészből elérhetők.

1. Menj a **Megjelenés → Szerkesztő** oldalra.
2. Kattints a **Stíluslapok** menüpontra, vagy a szerkesztőben a félig árnyékolt kör ikonra az oldalsáv mellett.

![A Stílusok panel a Webhelyszerkesztőben](./kepek/webhelyszerkeszto-stilusok-panel.webp)

*A Stílusok panel a Webhelyszerkesztőben* (https://minta-bolt.hu/wp-admin/site-editor.php?p=%2Fstyles)

Itt böngészheted a téma stílusváltozatait, módosíthatod a színpalettát, a betűket és az elrendezést az egész webhelyen, és külön is beállíthatod egyes blokkok megjelenését. A stílusmódosításokat a hárompontos menüvel tekintheted át, vagy állíthatod vissza. A teljes leírást a [Stílusok](https://hub.hellowp.io/hu/manuals/wordpress/webhelyszerkeszto/webhelyszerkeszto-stilusok/) fejezetben találod.

### A webhely elrendezésének módosítása

A blokkokkal a webhely szerkezetét és elrendezését alakíthatod, például a fejlécet, a láblécet és a bejegyzések és oldalak szerkezetét. A blokkszerkesztő minden blokkja használható, és a témablokkok kifejezetten a Webhelyszerkesztőhöz készültek. Néhány példa: a **Lekérdezés hurok** blokkal a bejegyzéslista megjelenését állítod, a **Navigáció** blokkal a navigációs menüt, a **Webhely címe** blokkal a címet.

Példa: a kezdőoldal tetején lévő üres hely eltávolítása a Twenty Twenty-Three témában. Ehhez a fejléc sablonrészének alsó, illetve a tartalmi terület felső belső margóját kell nullára állítani.

Először a fejléc alsó margója:

1. Menj a **Megjelenés → Szerkesztő** oldalra.
2. Nyisd meg a **Minták → Sablonrészek → Fejléc** elemet, és kattints a ceruza ikonra a szerkesztéshez.
3. Jelöld ki a **Csoport → Sor** blokkot (az alsó blokknavigációval).
4. A blokk beállításaiban kattints a **Stílusok** fülre.
5. Görgess a **Helykitöltés** beállításig, és az alsó értéket állítsd 0-ra.
6. Mentsd a sablonrészt.

Majd a tartalmi terület felső margója:

1. Térj vissza a Webhelyszerkesztő főoldalára.
2. Válaszd a **Mintasablonok → Blog Kezdőlap** (a témától függően **Home**) elemet, és kattints a ceruza ikonra.
3. Jelöld ki a legfelső **Csoport** blokkot.
4. A blokk beállításaiban kattints a **Stílusok** fülre.
5. A **Helykitöltés** felső értékét állítsd 0-ra.
6. Mentsd a mintasablont.

### A mintasablonok és sablonrészek böngészése

1. Nyisd meg a **Megjelenés → Szerkesztő** oldalt.
2. A **Mintasablonok** menüpont a webhely mintasablonjainak listáját mutatja.
3. A **Minták** menüpont a sablonrészek (és a minták) listáját mutatja.

![A mintasablonok listája a Webhelyszerkesztőben](./kepek/webhelyszerkeszto-sablonok-lista.webp)

*A mintasablonok listája a Webhelyszerkesztőben* (https://minta-bolt.hu/wp-admin/site-editor.php?p=%2Ftemplate)

Az egyes kártyákon a mintasablon előnézete, a neve és egy rövid leírása látszik. A mintasablonok szerkesztéséről a [Mintasablonok szerkesztése](https://hub.hellowp.io/hu/manuals/wordpress/webhelyszerkeszto/webhelyszerkeszto-sablonszerkeszto/) fejezetben olvashatsz.

A sablonrész olyan blokk, amely a webhely ismétlődő, globális részeit kezeli, például a fejlécet, a láblécet és az oldalsávot. Elsősorban a webhely szerkezetét adják, és újrahasznosíthatók. Egyéni sablonrészeket is létrehozhatsz, és a mintasablonokban felhasználhatod őket. A **Minták** menüpont **Az összes sablonrész** listájában férsz hozzájuk.

![A minták és sablonrészek listája](./kepek/webhelyszerkeszto-mintak-lista.webp)

*A minták és sablonrészek listája* (https://minta-bolt.hu/wp-admin/site-editor.php?p=%2Fpattern)

A bal oldali listában a **Fejléc**, **Lábléc** és **Általános** sablonrész-csoportok, alattuk a mintakategóriák látszanak. A minták és sablonrészek közötti különbségről a [Minták, sablonrészek és szinkronizált minták](https://hub.hellowp.io/hu/manuals/wordpress/webhelyszerkeszto/webhelyszerkeszto-mintak-sablonreszek/) fejezet szól.

### Oldalak kezelése

Az oldalakat a Webhelyszerkesztő **Oldalak** menüpontjában is kezelheted, szerkesztheted és létrehozhatod.

### Visszatérés a vezérlőpultra

A **Vissza** gombbal (balra mutató nyíl a bal felső részen) az előző Webhelyszerkesztő-képernyőre jutsz. Az admin sáv közben végig a szerkesztő fölött marad, és ott érheted el a webhely admin képernyőit. Ha nem mentett módosításaid vannak, a WordPress a kilépés előtt megkérdezi, mentsd-e vagy nézd át őket.

### A mintasablonok és stílusok exportálása

A témádat a Webhelyszerkesztőben elvégzett módosításokkal (mintasablonok, sablonrészek, stílusbeállítások) együtt exportálhatod, hasonlóan az **Eszközök → Exportálás** funkcióhoz.

1. Nyisd meg a Webhelyszerkesztőt (**Megjelenés → Szerkesztő**).
2. Kattints a három pontos **További lehetőségek** menüre.
3. Az **Eszközök** alatt válaszd az **Exportálás** pontot.

Letöltődik a téma zip fájlja a mintasablonokkal és sablonrészekkel együtt.

## Hasznos eszközök

### Parancs Paletta

A Parancs Palettával gyorsan eljutsz a webhely tartalmaihoz, és műveleteket indíthatsz: új bejegyzést vagy oldalt készíthetsz, beállításokat kapcsolhatsz át, megnyithatod a stílusaidat és az egyéni CSS-t. Megnyitod az admin sávból, a Webhelyszerkesztő navigációjának kereső vezérlőjéből, vagy billentyűvel: **Cmd+K** macOS-en, **Ctrl+K** Windowson és Linuxon.

### Listanézet

A Listanézet segít a bonyolult, egymásba ágyazott blokkszerkezetekben. Pontosan kiválaszthatod a keresett blokkot, és áttekintheted az oldal felépítését. Több blokkot is kijelölhetsz, hogy szerkeszd, mozgasd vagy csoportosítsd őket.

### Minták

A minták előre elkészített blokkgyűjtemények, amelyeket beszúrhatsz bejegyzésekbe és oldalakba, és tovább szerkeszthetsz. A WordPress alapból tartalmaz mintákat, a blokkos témák is hozhatnak sajátokat.

### Stílusok másolása és beillesztése

Egy blokk hárompontos menüjéből a blokk stílusát kimásolhatod, és egy másik, ugyanolyan típusú blokkba beillesztheted. Így egy már megtervezett kinézetet könnyen újra felhasználhatsz.

### Stílusmódosítás az egész webhelyre

Egy blokkon végzett módosítást ráalkalmazhatsz az összes ugyanilyen típusú blokkra: a blokk beállításainak **Speciális** részében az **Alkalmazzuk globálisan** lehetőséggel. Így például egy gomb kinézetét az egész webhely gombjaira átviheted.

### A Webhelyszerkesztő előnézetének átméretezése

Az előnézet méretét a sötét szürke oldalsáv fogantyúinak elhúzásával állíthatod.

### Kicsinyítés

A kicsinyített nézet az egész oldal szerkezetét sűrítve mutatja, így gyorsan áttekintheted az egyes szakaszok sorrendjét, elhelyezését és megjelenését anélkül, hogy minden blokkot végig kellene görgetned.

## További útmutató a Webhelyszerkesztő használatához

### A kezdőoldal tartalmának beállítása

A kezdőoldalad mutathatja a legutóbbi bejegyzéseidet, vagy egy statikus oldalt egyéni tartalommal. Hogy melyiket választod, az a témád mintasablonjaitól függ. A mintasablonok listáját a **Megjelenés → Szerkesztő → Mintasablonok** alatt találod.

- Ha a témádban nincs Kezdőoldal vagy Blog Kezdőlap mintasablon, a **Sablon hozzáadása** gombbal hozz létre Kezdőoldal sablont.
- Ha a témádban van Kezdőoldal mintasablon, kattints a nevére, és megnyílik a szerkesztő.
- Ha van Blog Kezdőlap mintasablon, szerkesztheted azt, vagy a **Beállítások → Olvasás** oldalon állíthatod be, mi jelenjen meg.

Fontos: ha a Webhelyszerkesztőben létrehozol egy Kezdőoldal mintasablont, azt a WordPress mindig a kezdőoldalhoz használja, akármit választottál az **Olvasás** beállításoknál. Vagy szerkeszd az elrendezését a kedved szerint, vagy töröld, ha az Olvasás beállításokat akarod használni.

### A kezdőoldal testreszabása

**Legutóbbi bejegyzések.** A blog testreszabásához nyisd meg a **Megjelenés → Szerkesztő** oldalt. A szerkesztő a kezdőoldaladat nyitja meg. A blokkos témák a bejegyzéslistát a **Lekérdezés hurok** és a **Bejegyzéssablon** blokkal jelenítik meg. Amit a Bejegyzéssablon blokkba teszel, az minden bejegyzésnél megismétlődik. Példák az itt használható blokkokra: bejegyzés címe, kiemelt kép, szerző, dátum, kategória és címkék.

**Statikus oldal.** Ha statikus oldalt állítottál be kezdőoldalnak, és más kinézetet szeretnél neki, mint a többi oldalnak, másik mintasablont kell rendelned hozzá. Meglévő mintasablon hozzárendelése:

1. A vezérlőpulton menj az **Oldalak → Összes oldal** listához.
2. Nyisd meg szerkesztésre a kezdőoldalnak beállított oldalt.
3. A szerkesztőben nyisd meg a beállítások oldalsávját.
4. A **Sablonminta** mellett válaszd ki a használni kívánt mintasablont.
5. Végül kattints a frissítésre a mentéshez.

Új mintasablon létrehozása:

1. Menj az **Oldalak → Összes oldal** listához.
2. Nyisd meg a kezdőoldalként beállított oldalt.
3. Nyisd meg a beállítások oldalsávját.
4. A **Sablonminta** mellett válaszd az **Új sablon létrehozása** lehetőséget.
5. A Webhelyszerkesztő megnyílik, ott a blokkokkal elkészítheted az új mintasablont.
6. Mentsd a változtatásokat.

![Az oldal szerkesztője a Sablonminta beállítással az oldalsávban](./kepek/webhelyszerkeszto-oldal-szerkeszto.webp)

*Az oldal szerkesztője a Sablonminta beállítással az oldalsávban* (https://minta-bolt.hu/wp-admin/post.php?post=2&action=edit)

A képen a **Sablonminta** sor az oldal beállításainak oldalsávjában látszik, a jelenlegi értékkel (**Oldalak**).

### A webhelyikon beállítása a logóval

A blokkos témák **Webhely logó** blokkjában közvetlenül be tudod állítani, hogy a logó legyen a webhelyikon is. A webhelyikon (más néven favicon) a webhely azonosítására szolgál (lásd [Webhelyikon (favicon)](https://hub.hellowp.io/hu/manuals/wordpress/webhelyszerkeszto/webhelyszerkeszto-favicon/)).

1. Menj a **Megjelenés → Szerkesztő** oldalra, megnyílik a kezdőoldalad.
2. Keresd meg a téma által beszúrt **Webhely logó** blokkot, vagy tedd be te, ahová szeretnéd.
3. Tölts fel egy képet, vagy válassz egyet a médiatárból.
4. A logó blokk még kijelölt állapotában nyisd meg a blokk beállításainak oldalsávját (fogaskerék ikon).
5. A **Webhely logó** beállításainál kapcsold be a **Felhasználás webhely ikonként** lehetőséget.
6. Mentsd a módosításokat.

### A webhely kinézete globális szinten

A WordPress 5.9 óta a színeket, a betűket, az elrendezést, a térközöket és sok mást az egész webhelyen beállíthatod a Stílusokkal, és a blokkok alapértelmezett kinézetét is egységesítheted. A részleteket lásd a [Stílusok](https://hub.hellowp.io/hu/manuals/wordpress/webhelyszerkeszto/webhelyszerkeszto-stilusok/) fejezetben.