# Tartalomjegyzék widget

> Automatikus tartalomjegyzék az oldal címsoraiból: elrendezés, lenyitható és rögzített lista, sima görgetés, hashtag-másolás, korlátozott terület és kizárt címsorok.

A **Tartalomjegyzék** (Table Of Content) widget az oldalon már meglévő címsorokból épít listát, és minden bejegyzést a saját címsorára linkel. A szakaszokat nem kell kézzel felvenned: a widget beolvassa a címsorokat.

Ez a widget csak a Pro bővítménnyel érhető el. Ha a Pro ki van kapcsolva, a widget nincs a szerkesztőben, és az oldalon, ahol korábban szerepelt, semmi nem jelenik meg a helyén.

## Előkészületek

1. Kapcsold be a widgetet: **The Plus Addons → Widgets**, keress rá a **Table Of Content** szóra, és kapcsold be a kapcsolót.
2. Építsd meg a cikket valódi címsorokkal. A főszakaszok legyenek H2, az alattuk lévők H3 vagy H4. A lista követi ezt a beágyazást: a H2 után következő H3 a H2 gyermeke lesz.

A widget nem hoz létre címsort, csak indexeli a meglévőket.

## Widget hozzáadása és elrendezés

Húzd a **Tartalomjegyzék** widgetet az oldalra. Az **Elrendezés** szakasz beállításai:

![A Tartalomjegyzék widget Elrendezés szakasza: stílusválasztó, listatípus, kiválasztott címkék](./kepek/szovegek-adatok-3-tartalomjegyzek-elrendezes-panel.webp)

*A Tartalomjegyzék widget Elrendezés szakasza: stílusválasztó, listatípus, kiválasztott címkék* (https://minta-bolt.hu/wp-admin/post.php?post=39&action=elementor)

A képen az ötféle stílus csempéi, a **Lista típusa** és a **Címkék kiválasztása** mező látszik (itt H2 és H3 van kijelölve).

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Stílus** | Szöveg nélküli képes választó: a tiltó jel az egyszerű lista, mellette négy előre elkészített megjelenés (Style 1-4) saját szegéllyel, térközzel és jelölővel | Egyszerű lista |
| **Lista típusa** | **UL** (pontok) vagy **OL** (számok). Csak egyszerű listánál látszik | OL |
| **Címkék kiválasztása** | Mely címsorszintek kerüljenek a listába (H1-H6) | mind a hat |
| **Alszintek összecsukva** | Csak a főszintek látszanak, kattintásra nyílnak az alszintek; az éppen olvasott ág magától kinyílik | Elrejtés |
| **Teljes szélesség** | A blokk kitölti a konténer szélességét, nem csak a leghosszabb tételig tart | Elrejtés |

Az 1-4. stílus kikapcsolja a számozást: a lista pontokkal jelenik meg akkor is, ha a **Lista típusa** még OL. A legtöbb cikknél a H2 és H3 elég egy jól áttekinthető listához.

![A tartalomjegyzék a nyilvános oldalon: számozott lista, az éppen olvasott szakasz kiemelve](./kepek/szovegek-adatok-3-tartalomjegyzek.webp)

*A tartalomjegyzék a nyilvános oldalon: számozott lista, az éppen olvasott szakasz kiemelve* (https://minta-bolt.hu/tp-toc-alap/)

A képen a lista a H2 és H3 címsorokat mutatja, a H3 a H2 alatt behúzva; az aktuálisan olvasott bejegyzés színes.

## Cím, leírás és ikon

A **Tartalom** szakasz a lista feletti blokkot vezérli.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Tartalom** | Megjeleníti a címblokkot | Megjelenítés |
| **Cím** | A blokk címe | Table Of Content |
| **Leírás** | Egy sor szöveg a cím alatt, szövegszerkesztő mező: lehet benne félkövér vagy link | üres |
| **Ikon** | Ikon a cím előtt | Elrejtés |
| **Ikon kiválasztása** | Melyik ikon | felkiáltójel körben |

A **Cím** törlése az egész címblokkot eltávolítja, vele együtt a lenyitó kapcsolót is. Tarts meg egy címet, ha a lista összecsukható legyen.

## Extra opciók

A lista működését az **Extra opciók** szakasz állítja.

![A Tartalomjegyzék Extra opciók szakasza: kapcsoló, sima görgetés, rögzített, hashtag](./kepek/szovegek-adatok-3-tartalomjegyzek-extra-panel.webp)

*A Tartalomjegyzék Extra opciók szakasza: kapcsoló, sima görgetés, rögzített, hashtag* (https://minta-bolt.hu/wp-admin/post.php?post=40&action=elementor)

A képen a **Kapcsoló** és a **Hashtag** be van kapcsolva, a **Sima görgetés** és a **Rögzített** ki.

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Kapcsoló** | A cím nyitó-záró gombbá válik. Csak bekapcsolt **Tartalom** mellett látszik | Elrejtés |
| **Alapértelmezés szerint bekapcsolva** | Nyitva indul-e a lista; eszközönként állítható | Megjelenítés |
| **Megnyitó ikon kiválasztása** / **Bezáró ikon kiválasztása** | A két kapcsolóikon | fel- és lefelé mutató nyíl |
| **Sima görgetés** | Megjeleníti a következő két beállítást | Elrejtés |
| **Gördülékeny görgetés időtartama** | Az ugrás hossza ezredmásodpercben (1-1000), eszközönként | 420 |
| **Görgetési eltolás** | Hely a címsor felett, pixelben (0-500), eszközönként | 0 |
| **Rögzített** | A blokk az oldalon marad görgetéskor | Elrejtés |
| **Rögzített eltolás** | A képernyő teteje és a rögzített blokk távolsága pixelben | 0 |
| **Hashtag** | Másolás-jelölő minden címsor mellett | Elrejtés |
| **Címke** | A jelölő szövege | # |
| **Szöveg másolása** | A kattintás után rövid „Copied” felirat jelenik meg | Megjelenítés |
| **Hashtag megjelenítése rámutatáskor** | A jelölő csak a címsor fölé vitt egérrel látszik | Megjelenítés |
| **Aktív címsor eltolása** | Milyen mélyen kell lennie a címsornak a képernyőn, hogy az aktuálisnak számítson; eszközönként | 1 px |
| **Korlátozott konténerterület** | Az egyetlen indexelendő terület CSS-szelektora | üres |

### Lenyitható lista

1. Nyisd meg az **Extra opciók** szakaszt, és kapcsold be a **Kapcsoló** beállítást.
2. Az **Alapértelmezés szerint bekapcsolva** állítja, hogy nyitva induljon-e. Gyakori beállítás: asztali gépen nyitva, mobilon zárva.
3. A **Megnyitó ikon kiválasztása** és a **Bezáró ikon kiválasztása** mezőnél válaszd ki a két ikont (alapból felfelé és lefelé mutató nyíl).
4. Frissítsd az oldalt, és próbáld ki a nyilvános oldalon.

A cím bármely pontjára kattintva nyílik és záródik a lista rövid csúsztatással, az ikon pedig cserélődik. Ha összecsukott a lista, csak a címsor marad meg a bezáró ikonnal.

- Az **Alapértelmezés szerint bekapcsolva** értéket a böngészőablak szélessége alapján olvassa be az oldal betöltésekor: 1200 px felett asztali, 768 és 1200 px között tablet, alatta mobil. Az ablak átméretezése nem alkalmazza újra.
- Az állapotot a widget nem jegyzi meg oldalak és látogatások között.
- Az ikonok Font Awesome ikonok, amelyet a bővítmény magától nem tölt be. Ha az oldalon nincs más Font Awesome ikon, a nyilak üresek maradnak, a címsor ettől még kattintható.
- Ha az alszinteket szeretnéd összecsukni, ne a **Kapcsolót**, hanem az **Elrendezés** szakasz **Alszintek összecsukva** beállítását használd.

### Rögzített (sticky) lista

1. Tedd a widgetet a cikk melletti keskeny oszlopba, ne külön, teljes szélességű konténerbe. A rögzítés CSS sticky pozícionálással megy, ezért a blokk csak addig marad látható, amíg az oszlop, amelyben van, látszik.
2. Az **Extra opciók** alatt kapcsold be a **Rögzített** beállítást.
3. A **Rögzített eltolás** csúszkával állítsd be a képernyő tetejétől számított távolságot. Hagyj helyet a rögzített fejlécnek is, ha van.
4. Frissítsd az oldalt, és görgesd egy normál böngészőfülön.

Amint az olvasó elgörget a blokk mellett, az megáll a beállított eltolásnál, a cikk pedig mellette tovább görög. A rögzített listában az aktuális szakasz kiemelése és a kattintásos ugrás is működik. Ha az oszlop alja eléri a képernyő tetejét, a blokk is távozik vele.

- A **Rögzített eltolás** csúszkának van tablet és mobil értéke, de csak az asztali érték számít.
- Ha a blokk egyszer rögzült, az eltolás a látogatás hátralévő részében kihagyott térként megmarad fölötte, akkor is, ha visszagörgetsz.
- 0 esetén a widget a saját oldalbeli helyét használja kiindulópontnak.
- Ha a lista kicsúszik a görgetéssel, a konténere túl rövid: tedd a cikkel párhuzamos oszlopba. Ha a rögzített lista a fejléc alá kerül, növeld az eltolást.

### Sima görgetés

1. Kapcsold be a **Sima görgetés** beállítást.
2. A **Gördülékeny görgetés időtartama** az ugrás hossza ezredmásodpercben: a 800 nagyjából kétszer lassabb az alapértéknél. A csúszka 1000-ig megy. A mellette álló „px” mértékegység félrevezető, időt jelent.
3. A **Görgetési eltolás** megállítja az oldalt a címsor előtt, például egy rögzített fejléc miatt.
4. Frissítsd az oldalt, és kattints egy bejegyzésre a nyilvános oldalon.

Kattintáskor az oldal a címsorhoz animálva mozog, és a címsor horgonya bekerül a címsorba (megosztható, könyvjelzőzhető link).

- A kikapcsolt **Sima görgetés** nem szünteti meg az animációt: a mozgás be- és kikapcsolt állapotban is animált. A kapcsoló csak azt dönti el, hogy az időtartam és az eltolás állítható-e; kikapcsolva az alapértékek (420 ms, nincs eltolás) érvényesek.
- Ha a **Görgetési eltolás** nagyobb 0-nál és a **Sima görgetés** be van kapcsolva, a widget ezt használja az **Aktív címsor eltolása** helyett is.
- A görgetési eltolás nem mindenhol érvényesül egyformán: az első címsornál pontos, a lejjebbieknél eltérhet. Próbáld ki a saját oldaladon.
- Nincs azonnali ugrás és nincs olyan beállítás, amely nem írná át a címsorban a horgonyt.
- Ha az oldal mégis ugrik, valami más kezeli előbb a kattintást: téma beállítás, másik bővítmény vagy oldalszintű horgonyszkript. Kapcsold ki ezeket egyesével.

### Hashtag: címsor-link másolása

1. Az **Extra opciók** alatt kapcsold be a **Hashtag** beállítást. A jelölők a **Címkék kiválasztása** szerinti címsorok mellé kerülnek.
2. A **Címke** a jelölő szövege, alapból `#`. Írhatsz bármi mást, például „Link” vagy „Másolás”.
3. A **Szöveg másolása** a kattintás után kb. másfél másodpercre „Copied” feliratot mutat.
4. A **Hashtag megjelenítése rámutatáskor** elrejti a jelölőt, amíg a címsor fölé nem viszed az egeret. Kapcsold ki, ha mindig látszani szeretnéd.

![A jelölők a címsorok mellett az oldalon: # jel minden indexelt címsor után](./kepek/szovegek-adatok-3-tartalomjegyzek-jelolo.webp)

*A jelölők a címsorok mellett az oldalon: # jel minden indexelt címsor után* (https://minta-bolt.hu/tp-toc-lenyilo/)

A képen a **Tartalomjegyzék** után a címsorok mellett ott a `#` jelölő (itt a rámutatásos mód ki van kapcsolva).

A jelölőre kattintva a vágólapra kerül az oldal teljes címe a címsor horgonyával, az oldal nem mozdul és a címsor sem változik. A jelölő a címsorok mellé kerül, nem a lista tételeihez. A jelölő és a „Copied” felirat a **Stílus** fül **Hashtag** szakaszában formázható.

- A „Copied” felirat a kattintás pillanatában megjelenik, még a másolás előtt, ezért nem bizonyíték arra, hogy a másolás sikerült. A widget a böngésző régi vágólap-parancsát használja; ha a böngésző elutasítja, a felirat akkor is megjelenik.
- A **Címke** sima szövegmező, nincs ikonválasztó.
- Érintőképernyőn nincs rámutatás, ezért ott a jelölő alapból rejtve marad. Kapcsold ki a **Hashtag megjelenítése rámutatáskor** beállítást.
- Ha a jelölő nem látszik: alapból csak rámutatáskor jelenik meg. Ha egy címsor mellett nincs, az a szint nincs a **Címkék kiválasztása** között.

## Korlátozott terület és kizárt címsorok

Alapból a widget az egész oldal minden címsorát beolvassa, a téma oldalcímét, a fejlécet és a láblécet is. Egy tesztoldalon az alapbeállítás 14 bejegyzést adott, ebből kettő a témából jött.

### Korlátozott konténerterület

1. Kattints az indexelendő cikket tartalmazó konténerre.
2. A **Haladó** fül **Elrendezés** szakaszában a **CSS-osztályok** mezőbe írj egy osztálynevet pont nélkül, például `main-container`.
3. Jelöld ki a **Tartalomjegyzék** widgetet, és az **Extra opciók** alatt a **Korlátozott konténerterület** mezőbe írd ugyanezt az osztályt ponttal az elején: `.main-container`.
4. Frissítsd az oldalt, és töltsd újra a nyilvános oldalt.

Üres mezőnél a widget az egész oldalt olvassa, így például egy lejjebb lévő promóciós blokk címsorai is a listába kerülnek. Beállított osztály mellett csak a cikk címsorai szerepelnek.

- Az érték szó szerint használt CSS-szelektor: osztály ponttal (`.main-container`), azonosító kettőskereszttel (`#cikk`) vagy elem.
- Csak az első találatot olvassa. Ha két konténernek ugyanaz az osztálya, az elsőt használja; két külön területhez egy közös szülő kell.
- Ha a szelektor nem talál semmit (elgépelés, hiányzó pont, később eltávolított osztály), a widget JavaScript-hibával leáll, és a tartalomjegyzék teljesen üres marad, nincs visszaesés az egész oldalra, sem hibaüzenet. Ilyenkor ellenőrizd a pontot és a betűket, vagy ürítsd a mezőt.
- Nincs kiválasztó, a szelektort kézzel kell beírni.
- Ha a fejléc vagy a lábléc címsorai mégis ott vannak, a mező üres, vagy az osztály az egész oldalt körülvevő konténeren van. Az osztály csak a cikket tartalmazó konténeren legyen.

### Címsor kizárása a listából

Ha egy címsor nem való a listába (felhívás, belső megjegyzés, ismétlődő alcím), adj neki egy fix nevű osztályt.

1. Kattints a kihagyandó címsorra.
2. A **Haladó** fül **Elrendezés** szakaszában a **CSS-osztályok** mezőbe írd: `tp-toc-ignore` (pont nélkül).
3. Frissítsd az oldalt, és töltsd újra a nyilvános oldalt.

A címsor az oldalon változatlanul megmarad, csak a listából hiányzik. Az osztály konténeren is működik: ha a konténer **CSS-osztályok** mezőjébe írod, az alatta lévő összes címsor kimarad, ami promóciós blokknál, ajánlósávnál vagy oldalsávnál hasznos. Ha ellenkezőleg, csak egy részt akarsz indexelni, használd inkább a **Korlátozott konténerterületet**. A kettő együtt is működik: a cikkre szűkítheted a területet, és egyes címsorokat így még kizárhatsz.

- Az osztály neve fix, másikat nem választhatsz.
- A kizárt címsor nem kap horgonyt, ezért semmi más sem linkelhet rá. Ha kell horgony, adj a címsornak saját **CSS-azonosítót** ugyanabban a **Haladó → Elrendezés** szakaszban.
- A **Hashtag** bekapcsolt állapotában a kizárt címsor mellett is megjelenik a jelölő, és mivel nincs horgonya, egy `#undefined`-re végződő hibás linket másol. Ha mindkét funkciót használod, adj a kizárt címsornak saját azonosítót, vagy ne használd őket együtt.
- A kizárt szülőcímsor gyermekei nem lépnek feljebb: a kizárt H2 alatti H3 ugyanott marad a vázlatban.
- Ha csak a H2 címsorokat szeretnéd, ne címkézz semmit: az **Elrendezés → Címkék kiválasztása** mezőből töröld a többi szintet.

## Stílus

A **Stílus** fül a blokk részei szerint van felosztva.

| Szakasz | Mit állít |
| --- | --- |
| **Címsor** | A cím, a leírás és az ikon térköze, tipográfiája, színe, a kapcsolóikon és a címsor sor háttere |
| **Tartalom** | A lista térközei, behúzása, magassága (min./max.) és görgetősávja |
| **Tartalmi vonal** | A tételek melletti vezetővonal szélessége és színe, normál és aktív állapotban. Csak előre elkészített stílusnál látszik |
| **1. szint tipográfiája** | A főszintű tételek tipográfiája és színe, normál és aktív |
| **Alszintek tipográfiája** | Ugyanez a beágyazott tételekre |
| **Hashtag** | A jelölő és a „Copied” felirat tipográfiája és színe (csak bekapcsolt **Hashtag** mellett) |
| **Doboz** | A teljes blokk háttere, szegélye, lekerekítése és árnyéka, normál és rámutatásos |

## Viselkedés és korlátok

- A lista a böngészőben épül fel az oldal betöltése után, ezért mindig a tényleges címsorokat követi. A szerkesztőben a módosítás nem mindig rajzolódik újra: mentsd az oldalt, és nézd a nyilvános változatot.
- A linkek a címsor szövegéből készülnek: a szóközök kötőjellé válnak, az írásjelek (`& ( ) . , : ? # %`) kimaradnak, így a „Publishing & Maintenance” `#Publishing--Maintenance` lesz. Két azonos szövegű címsor különböző linket kap, a másodikhoz `_1` kerül.
- Az aktuális bejegyzés kiemelése a görgetéssel változik.
- A lista tételének szövege nem állítható: mindig a címsor szövege szerepel.
- A **Címkék kiválasztása** szűkítése laposíthatja a vázlatot: ha kiveszed a H4-et, a H4-eket tartalmazó H3 a H2-vel egy szintre kerülhet. Ellenőrizd az eredményt.
- Ha a lista üres, nincs címsor a beolvasott területen, vagy a **Korlátozott konténerterület** olyan osztályra mutat, amely nincs az oldalon.
- Ha a lista túl hosszú, szűkítsd a címkéket H2 és H3-ra, vagy kapcsold be az **Alszintek összecsukva** beállítást.