Harmonika (Accordion) widget: induló állapot, ikonok és ACF Repeater

A Harmonika (angolul Accordion) widget kérdés-válasz vagy szakaszos tartalmat tesz egymás alá: a cím kattintásra nyitja a hozzá tartozó tartalmat. GYIK-hoz, termékadatokhoz, szabályzatokhoz jó.

Előkészületek

• Kapcsold be a widgetet: The Plus Addons → Widgets, keress rá az Accordion szóra, és kapcsold be.
• Az Elementor és a The Plus Addons telepítve és aktív legyen.
• Az elemeket a Tartalom fülön veszed fel a Tartalom forrása → Tételek módban. Minden elemnek van Cím és tartalom mezője; a tartalom lehet szöveg vagy sablon.
• Az ingyenes és a Pro bővítmény különbségei: az induló állapot és a nyitó/záró ikon ingyenes; az Icons Mind ikonok, a címenkénti ikon, a Keresősáv, a Görgetés a tetejére, a Lépcsőzetes animáció és az ACF Repeater forrás Pro. Az ingyenes bővítményben ezek az opciók frissítési értesítést adnak.

Az induló állapot: melyik elem legyen nyitva

Alapból az első elem nyitott az oldal betöltésekor. A Tartalom → Egyéb opció → Aktív fül mező ezt állítja. Ez az ingyenes bővítményben is működik.

1. Add hozzá a Harmonika widgetet és az elemeket.
2. Nyisd meg a Tartalom → Egyéb opció szakaszt.
3. Az Aktív fül mezőben válaszd ki az induló állapotot (lásd a táblázatot).
4. Tedd közzé az oldalt.

Érték	Betöltéskor
0	Minden elem zárva
1 (alapérték)	Az első elem nyitva
2, 3, … 20	A megadott sorszámú elem nyitva
All Open	Minden elem nyitva

https://minta-bolt.hu/tp9-harmonika-zart/

A képen az Aktív fül értéke 0, ezért mind a négy kérdés zárva áll.

• A számok 1-től 20-ig mennek: a 20. utáni elem nem lehet az, amelyik nyitva indul.
• Betöltés után egyszerre egy elem nyitott, az „All Open” érték mellett is: a kattintás ilyenkor is egyenként nyit. Ha a látogató az összes elemet egyszerre nyithassa, használd a widget összes elemet kinyitó és összecsukó gombját (Pro).

Ikonok a harmonikában

Kétféle ikon van: a nyitást és zárást jelző kapcsolóikon, és (Pro) egy ikon minden cím mellett.

Nyitó és záró ikon

1. Nyisd meg a Tartalom → Kapcsolóikon szakaszt, és hagyd bekapcsolva az Ikon megjelenítése kapcsolót (alapból be van kapcsolva).
2. Az Igazítás mezővel állítsd be, hogy az ikon a cím bal vagy jobb oldalán álljon.
3. Az Ikonbetűkészlet mezőben válaszd a Font Awesome, a Font Awesome 5 vagy az Icons Mind (Pro) készletet. Mindegyiknél külön ikont adhatsz a zárt és a nyitott (aktív) állapothoz.
4. Ha kell, állítsd be a Cím HTML-címke mezőt: a címek HTML-címkéje alapból div. GYIK-nál használhatsz h3-at, ha az oldalon a szakasz címe h2.

Ikon minden címhez (Pro)

1. Nyiss meg egy elemet a Tartalom fülön, és kapcsold be az Ikon megjelenítése kapcsolót.
2. Válaszd ki az Ikonbetűkészlet értékét és az ikont.
3. Ismételd meg a többi elemnél. Az ikonok kinézetét a Stílus → Cím szakaszban állítod.

Az ikonok betűkészletként töltődnek be. Ha az oldalon más semmi nem tölti be a Font Awesome-ot, a widget magától nem teszi meg, és az ikonok üresen maradnak a megjelenő oldalon. Ilyenkor egy másik, betöltött ikonkészletet válassz.

Harmonika kereshetősége és hatásai

A Keresősáv, a Görgetés a tetejére és a Lépcsőzetes animáció leírása a Harmonika: keresősáv, görgetés és lépcsőzetes megjelenés fejezetben van.

Harmonika ACF Repeater mezőből (Pro)

Ha a GYIK-ot vagy a termékadatokat egyéni mezőben tárolod, az ACF Repeater minden sora egy harmonikaelem lehet. A tartalmat a bejegyzésben szerkeszted, a harmonika magától frissül.

Előfeltételek

• ACF Pro vagy SCF (Secure Custom Fields), mert az ingyenes ACF-ben nincs Repeater mező.
• A Pro bővítmény: ingyenes változatban az ACF Repeater forrás frissítési értesítést ad.

1. A Repeater mező létrehozása

1. Hozz létre egy mezőcsoportot egy Repeater mezővel, például Termékadatok névvel (a mező neve termekadatok).
2. Vegyél fel két almezőt: egy Szöveg mezőt a címnek (például cim) és egy Szövegterület vagy WYSIWYG mezőt a tartalomnak (például tartalom).
3. Állítsd be a megjelenítési szabályt arra a bejegyzéstípusra, amelynek kell, például Termékek.

2. A sorok kitöltése

Szerkessz egy bejegyzést, és adj hozzá egy sort minden harmonikaelemhez.

3. A harmonika megjelenítése

Add hozzá a Harmonika widgetet az adott bejegyzéstípus egyedi sablonjához (Elementor Pro Theme Builder, vagy az ingyenes Nexter Builder).

1. A Tartalom forrása mezőt állítsd ACF Repeater értékre.
2. Az Ismétlőmező kulcsa mezőbe írd a Repeater mező nevét (például termekadatok).
3. A Cím és a Tartalom mezőbe az almezők neveit írd (például cim és tartalom).
4. Mentsd a sablont.

Minden bejegyzés a saját soraiból építi fel a harmonikát.

• Elemenként egy cím- és egy tartalommező használható.
• A widget a megtekintett bejegyzés adatait olvassa, ezért az egyedi sablonba tedd, ne olyan oldalra, amelynek nincs Repeater adata.
• Az ACF-ből épített elemekhez nincs ikon vagy Egyedi ID elemenként.
• Ha a harmonika üres, ellenőrizd, hogy a mezőnevek pontosan egyeznek-e, hogy a bejegyzésnek vannak-e sorai, és hogy olyan bejegyzést nézel-e, amelyre a mezőcsoport vonatkozik.