Harmonika: áttekintés, sablon az elemben, horgonylink, FAQ-séma és kapcsolat körhintával

A Harmonika (Accordion) widget címeket tesz egymás alá, és a cím kattintásra nyitja a hozzá tartozó tartalmat. Hosszú oldalt rövidít le, ezért GYIK-hoz, súgóoldalakhoz és funkciólistákhoz használják. A bővítmény a sima harmonikán felül sablont, ikonokat, hover és vízszintes módot, keresést, lapozást, automatikus léptetést és FAQ-sémát is ad.

Előbb kapcsold be a widgetet: The Plus Addons → Widgets, keress rá az Accordion szóra, és kapcsold be a kapcsolóját.

Ingyenes vagy Pro?

Funkció	Ingyenes	Pro
Szöveges elemek, vagy elemenként egy Elementor-sablon	igen	igen
Nyitó/záró ikon (Font Awesome, Font Awesome 5), Cím HTML-címke	igen	igen
Aktív fül (melyik elem induljon nyitva, egyik sem, vagy mind)	igen	igen
Icons Mind ikonok, ikon elemenként, Egyedi ID (horgonylink)	nem	igen
Elemek ACF Repeater mezőből	nem	igen
Hover, vízszintes elrendezés, automatikus léptetés, kinyitó/összecsukó gomb, keresősáv, lapozó	nem	igen
Görgetés a tetejére, Lépcsőzetes animáció, SEO-sémajelölés, Carousel-kapcsolat ID	nem	igen

Az ingyenes bővítményben a legtöbb Pro opció látszik, de a bekapcsolásuk csak frissítési értesítést ad.

A widget szakaszai

A Tartalom fülön a következő szakaszok vannak.

Tartalom. A Tartalom forrása mező adja meg, honnan jönnek az elemek: Tételek (te veszed fel őket itt) vagy ACF Repeater (Pro). Minden elemnek ez a négy mezője van:

• Cím: a kattintható felirat.
• Típus: Tartalom a sima szövegnek, Oldalsablon egy Elementor-sablon megjelenítéséhez.
• Ikon megjelenítése (Pro): ikon az elem címe előtt.
• Egyedi ID (Pro): horgony, amellyel egy link az adott elemet nyitja.

Kapcsolóikon. Az Ikon megjelenítése a nyitó és záró ikont teszi minden címre. Az Igazítás balra vagy jobbra teszi, az Ikonbetűkészlet a Font Awesome, a Font Awesome 5 vagy az Icons Mind (Pro) közül választ, és mindegyiknél külön ikon van a zárt és az aktív állapotra. A Cím HTML-címke a címek HTML-címkéjét adja (alapból div).

Speciális opció (Pro):

Beállítás	Mit csinál
Harmonika megnyitása rámutatáskor	Az elem rámutatásra nyílik. A vízszintes elrendezéssel nem használható.
Vízszintes harmonika	Az elemek egymás mellé kerülnek.
Automatikus lejátszás	Néhány másodpercenként magától a következő elemet nyitja.
Kibontás és összecsukás gomb	Egy gomb, amely az összes elemet kinyitja vagy összecsukja. Vízszintes elrendezéssel nem használható.
Keresősáv	Keresődoboz, amely gépelés közben szűri az elemeket.
Diavetítés és lapozás	Oldalanként néhány elemet mutat, előző/következő nyilakkal. Vízszintes elrendezéssel nem használható.

Egyéb opció:

Beállítás	Mit csinál
Aktív fül	Melyik elem legyen nyitva betöltéskor: egy szám, 0 (egyik sem) vagy az összes. Alapérték: 1.
Görgetés a tetejére (Pro)	Az oldalt a megnyitott elemhez görgeti.
Lépcsőzetes animáció (Pro)	Az elemek egyenként úsznak be, amikor a harmonika a látótérbe kerül.
SEO-sémajelölés (Pro)	FAQ strukturált adatként jelöli meg az elemeket.
Carousel-kapcsolat ID (Pro)	Összekapcsolja a harmonikát egy Anything Carousel widgettel.

A Stílus fülön az ikon, a cím (betűtípus, színek, háttér, szegély, térköz) és a tartalom szakasza van. Az automatikus léptetés, a lapozó, a keresés, a találat kiemelése és a kinyitó/összecsukó gomb szakasza csak akkor jelenik meg, ha a hozzájuk tartozó opció be van kapcsolva. A címekhez két hover-stílus közül választhatsz. A Haladó fül ugyanaz, mint a többi widgetnél.

Működés

• Egyszerre egy elem nyitva van: egy elem megnyitása bezárja az előzőt, a nyitott elemre kattintva az bezárul.
• Az Aktív fül „All Open” értékénél minden elem nyitva indul, utána a kattintás egyenként működik.
• Betöltés után az összes elemet csak a kinyitó/összecsukó gomb nyitja ki.

Hibaelhárítás

• Egy Pro opció csak frissítési értesítést ad: az opcióhoz a Pro bővítmény kell.
• Hiányzik egy opció, amiről olvastál: egyes opciók elrejtenek másokat. A vízszintes elrendezés rejtve van, amíg az Harmonika megnyitása rámutatáskor be van kapcsolva. A kinyitó/összecsukó gomb és a lapozó rejtve van, amíg a vízszintes elrendezés be van kapcsolva.

Harmonika vagy kapcsoló?

A kettő szinte ugyanúgy néz ki: címek, amelyek tartalmat nyitnak. A különbség az, hogy hány elem lehet egyszerre nyitva, és hogyan indul a lista.

	Kapcsoló (toggle)	Harmonika (accordion)
Betöltéskor	Minden elem zárva	Az első elem nyitva
Elem megnyitása	A többi marad, ahogy volt: több is nyitva lehet	A nyitott elem bezárul: egyszerre egy
Mire jó	Független jegyzetek, amelyeket a látogató összevet	GYIK és lépéslisták, ahol egy válasz látszik, és az oldal rövid marad

A bővítmény harmonikájával mindkét viselkedést el tudod érni:

Ezt szeretnéd	Beállítás	Kiadás
Minden elem zárva induljon, mint a kapcsolónál	Egyéb opció → Aktív fül → 0	ingyenes
Másik elem legyen nyitva	Aktív fül → az elem sorszáma	ingyenes
Minden elem nyitva induljon	Aktív fül → All Open	ingyenes
Gomb, amely az összes elemet nyitja vagy zárja	Speciális opció → Kibontás és összecsukás gomb	Pro
Rámutatásra nyíló elemek	Speciális opció → Harmonika megnyitása rámutatáskor	Pro
Magától nyíló elemek	Speciális opció → Automatikus lejátszás	Pro

Kattintásra a harmonika mindig harmonikaként viselkedik: egy elem megnyitása bezárja a nyitottat, a nyitott elemre kattintva az bezárul. A speciális módok leírása a Harmonika: speciális módok fejezetben van.

Elementor-sablon az elemben

Ha egy elembe szövegnél többet szeretnél (galéria, űrlap, termékrács, bármilyen Elementor-kialakítás), az elem tartalma lehet sablon. Ez az ingyenes bővítményben is működik.

1. Hozz létre egy Elementor-sablont: Sablonok → Mentett sablonok → Új sablon hozzáadása (vagy importálj egyet), építsd meg a tartalmat, és tedd közzé.
2. A Harmonika widgetben nyisd meg az elemet a Tartalom fülön.
3. A Típus mezőt állítsd Oldalsablon értékre.
4. A Sablonminták mezőben válaszd ki a sablont. Az Edit Template gomb megnyitja szerkesztésre, a Create Template újat készít.

https://minta-bolt.hu/tp10-sablon/

A képen a negyedik elem nyitva van, és a sablon szövege látszik benne.

• A Láthatóság a háttérfelületen alapból ki van kapcsolva: a szerkesztőben ilyenkor csak a sablon neve látszik, ami gyorsan tartja a szerkesztőt. Kapcsold be, ha a szerkesztőben is látni akarod a sablont. A látogató mindig látja.
• A sablonnak közzétettnek kell lennie. A vázlat helyett a látogató „Unauthorized Access” értesítést kap, ilyenkor tedd közzé a sablont, és ürítsd a gyorsítótárat.
• Elemenként egy sablon lehet, a szöveges és a sablonos elemek keverhetők.

Közvetlen link egy elemre (horgonylink)

Ha egy hivatkozásnak egy bizonyos elemet kell megnyitnia, adj az elemnek egyedi azonosítót. A látogató így már nyitva látja a megfelelő választ. Az Egyedi ID Pro funkció.

1. Nyisd meg az elemet a Tartalom fülön, és írj be egy azonosítót az Egyedi ID mezőbe, például visszateritas. Csak betűt, számot, kötőjelet és aláhúzást használj, szóközt ne.
2. Bármelyik linkmezőben (gomb, menüelem, e-mail) használd az oldal címét, utána # jellel az azonosítót: https://pelda.hu/gyik/#visszateritas.

https://minta-bolt.hu/tp10-horgony/

A képen az oldalt a #visszateritas címmel töltöttem be: a második elem magától kinyílt.

Korlátok:

• Csak oldalbetöltéskor működik. Ha ugyanazon az oldalon kattintasz egy #visszateritas linkre, az oldal az elemhez ugrik, de nem nyitja ki. Ilyenkor a teljes oldalcímet add meg, hogy az oldal újratöltődjön, vagy másik oldalról linkelj.
• Az azonosító az oldalon egyedi legyen, és ne legyen benne szóköz vagy különleges karakter, különben a link nem működik.
• Csak kattintásos módban működik: ha az Harmonika megnyitása rámutatáskor be van kapcsolva, a horgonylink nem nyit elemet.

Ha a link nem csinál semmit, ellenőrizd, hogy az azonosító pontosan egyezik-e (kis- és nagybetűre érzékeny), és nincs-e benne szóköz. Ha az oldal az elemhez görget, de az zárva marad, ugyanazon az oldalon kattintottál, lásd fent.

FAQ-séma (SEO-sémajelölés)

Ha a harmonikád kérdések és válaszok listája, a FAQ-séma a keresőknek gépi formában mondja el ugyanezt. A SEO-sémajelölés Pro funkció, egyetlen kapcsolóval megy.

1. Add hozzá a Harmonika widgetet. A címeket kérdésnek, az elemek tartalmát válasznak írd meg.
2. A Tartalom → Egyéb opció szakaszban kapcsold be a SEO-sémajelölés kapcsolót.
3. Tedd közzé az oldalt, és ellenőrizd a Google Rich Results Test eszközével.

A widget schema.org mikroadatot tesz a saját HTML-jébe: a harmonika FAQPage, minden cím Question, minden tartalom Answer lesz. Az oldal kinézete nem változik. A közzétett oldal forrásában ez látszik: a harmonika https://schema.org/FAQPage típusú, az elemek Question és Answer típusúak.

2023 augusztusa óta a Google csak jól ismert kormányzati és egészségügyi oldalaknál mutat FAQ-találatot. Más oldalaknál a jelölés érvényes marad, a keresők és az AI-eszközök olvashatják, de a Google találatai között általában nem lesz lenyíló GYIK.

• Oldalanként egy FAQ-blokk legyen. Ha egy SEO-bővítmény (például a Rank Math FAQ blokkja) már tesz FAQ-sémát az oldalra, itt ne kapcsold be másodszor.
• Csak a látható tartalom számít: valódi kérdéseket és válaszokat jelölj meg, amelyeket a látogató elolvashat.
• A cím nélküli elemeket kihagyja.
• Ha a Rich Results Test duplikált FAQ-t talál, egy másik bővítmény vagy blokk is tesz sémát. Egyet tarts meg.

Kapcsolat körhintával (Carousel Connection ID)

A harmonika egy Anything Carousel widgethez köthető közös azonosítóval: az elem megnyitása a hozzá tartozó diára lép, és fordítva. Funkciótúrához, lépésről lépésre útmutatóhoz jó, képekkel. A harmonika oldalán a Carousel-kapcsolat ID Pro funkció, az Anything Carousel az ingyenes bővítményben is megvan.

1. Add hozzá az Anything Carousel widgetet, és vegyél fel annyi diát, ahány harmonikaelem van, ugyanabban a sorrendben. A diák Elementor-sablont is használhatnak.
2. A körhinta beállításaiban írj egy azonosítót a Egyedi carousel-ID mezőbe, például gyik-korhinta. Betűt, számot és kötőjelet használj.
3. A Harmonika widgetben a Tartalom → Egyéb opció → Carousel Connection ID mezőbe írd be ugyanezt az azonosítót.
4. Tedd közzé az oldalt.

Az első elem az első diához tartozik, a második a másodikhoz és így tovább: sorrend szerint, nem név szerint. A kapcsolat kétirányú.

• Tartsd egyenlően az elemek és a diák számát, a felesleges elemnek vagy diának nincs párja.
• Egy azonosítóhoz oldalanként egy körhinta tartozhat.
• Hover módban (Harmonika megnyitása rámutatáskor) a dia váltása nem nyit elemet.
• Ha semmi nem mozog, ellenőrizd, hogy a két azonosító teljesen egyezik-e (kis- és nagybetűre érzékeny), és a közzétett oldalon próbáld ki.