Tartalomjegyzék widget

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:

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.

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.

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.

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.