# Kurzusrács

> Kurzusok, leckék, témák és kvízek rácsos megjelenítése blokkal vagy shortcode-dal: sablon, lekérdezés, elemek, szűrő, stílus és a régi shortcode-paraméterek.

A Kurzusrács a kurzusokat képes, rácsos elrendezésben mutatja, így a látogatók könnyen böngészhetnek köztük. Nagy képernyőn érvényesül a legjobban. Rács készíthető leckékből, témákból és kvízekből is.

![A kurzusrács két kurzussal a weboldalon](./kepek/integraciok-kurzusracs-frontend.webp)

*A kurzusrács két kurzussal a weboldalon* (https://minta-bolt.hu/kurzusaink/)

A képen a **Szűrés** gomb, a **Beiratkozás** szalag, a kurzus címe és a kártya alsó sorában a tanulók, leckék és kvízek száma látszik.

## Mit tud a kurzusrács

- Oszlopokban jeleníti meg a kurzusokat.
- Megadhatod a megjelenített elemek számát és a rendezést.
- Szűrhet kategória és címke szerint.
- Mutathatja csak azokat a kurzusokat, amelyekre a felhasználó be van iratkozva.
- Megjelenítheti a kiemelt képet, a videóelőnézetet, a rövid leírást, a gombot, az ár szalagot és a haladássávot.
- A gomb és a szalag szövege átírható.
- Korlátlan oldalon és oldalanként többször is használható.
- Van benne keresés és szűrő.
- Több kinézet (skin) közül választhatsz.

## Két mód a rács beillesztésére

- **Blokk**: a WordPress blokkszerkesztőjében. A 2.0-s kurzusrács fő módja, ebben van a legtöbb beállítás.
- **Shortcode**: oldalépítőkhöz (Elementor, Beaver Builder, Divi stb.) és a Klasszikus szerkesztőhöz. A beállítások köre kisebb, mint a blokké. Sablonfájlban a `do_shortcode()` függvénnyel hívhatod.

### A blokk beillesztése

1. Győződj meg róla, hogy a Kurzusrács be van kapcsolva (a LearnDash újabb változataiban a fő bővítmény része).
2. A szerkesztőben kattints a `+` ikonra új blokk felvételéhez.
3. Keresd meg a „LearnDash Course Grid” blokkot, és kattints rá.
4. A jobb oldali blokk beállító panelen állítsd be a rácsot.

A blokk beállításai négy csoportban vannak: sablon, lekérdezés, elemek, szűrő és stílus. Ezeket lent írom le.

## A 2.0-s kurzusrács shortcode-ja

A shortcode alapja:

```text
[learndash_course_grid id="cg-1"]
```

Az `id` kötelező: egyedi szöveg, amely nélkül az egyedi stílus és a szűrő nem működik. Az alábbi attribútumokkal finomíthatod.

### Lekérdezés

| Attribútum | Mit csinál | Alapérték |
|---|---|---|
| `post_type` | Bármely nyilvános, lekérdezhető bejegyzéstípus. | `sfwd-courses` |
| `per_page` | Hány elem jelenjen meg egy oldalon. | 9 |
| `orderby` | A rendezés alapja (a WordPress `WP_Query` értékei). | `ID` |
| `order` | `ASC` (növekvő) vagy `DESC` (csökkenő). | `DESC` |
| `taxonomies` | Szűrés kategóriára, formátum: `taxonomia1: kifejezes1, kifejezes2; taxonomia2: kifejezes1`. | üres |
| `enrollment_status` | `enrolled` vagy `not-enrolled`; üresen minden. | üres |
| `progress_status` | `completed`, `in_progress`, `not_started`; üresen minden. | üres |

### Elemek

Az elemeket be- vagy kikapcsolhatod: az értékük `"true"` vagy üres (`""`). Egy elem elrejtéséhez add meg üresen, például: `[learndash_course_grid thumbnail=""]`. Nem minden kártyadizájnban van meg minden elem.

| Attribútum | Mit csinál | Alapérték |
|---|---|---|
| `thumbnail` | A bélyegkép megjelenítése. | `"true"` |
| `thumbnail_size` | A bélyegkép mérete, bármely regisztrált képméret. | `"thumbnail"` |
| `ribbon` | A szalag megjelenítése. | `"true"` |
| `content` | A bélyegképen kívüli tartalom. Kikapcsolva csak képes rácsot kapsz. | `"true"` |
| `title` | A cím megjelenítése. | `"true"` |
| `title_clickable` | A cím kattintható legyen. | `"true"` |
| `description` | A leírás megjelenítése. | `"true"` |
| `description_char_max` | A leírás legnagyobb karakterszáma. | 120 |
| `button` | A gomb megjelenítése. | `"true"` |
| `filter` | A rács fölötti szűrő megjelenítése. | `"true"` |
| `pagination` | `button` (további elemek gomb) vagy `infinite` (végtelen görgetés). | `"button"` |
| `progress_bar` | A haladássáv megjelenítése. | üres |
| `post_meta` | Kiegészítő adatok (szerző, kategóriák stb.). | `"true"` |

### Sablon

| Attribútum | Mit csinál | Alapérték |
|---|---|---|
| `skin` | A rács kinézete: `grid` (rács), `masonry` (téglafal) vagy `list` (lista). | `"grid"` |
| `card` | A kártya dizájnja. Rács és téglafal kinézethez `grid-1`, `grid-2`, `grid-3`; listához `list-1`, `list-2`. | `"grid-1"` |
| `columns` | Az oszlopok száma rács és téglafal kinézetnél. | 3 |
| `min_column_width` | Egy oszlop legkisebb szélessége képpontban. | 250 |

### Stílus

Ezek az attribútumok üresen a téma beállításait követik: `font_family_title`, `font_size_title` (például `18px` vagy `1.2rem`), `font_color_title`, `background_color_title`, valamint ugyanezek a leíráshoz (`font_family_description`, `font_size_description`, `font_color_description`, `background_color_description`).

### Szűrő attribútumok

Csak akkor számítanak, ha a `filter` be van kapcsolva.

| Attribútum | Mit csinál | Alapérték |
|---|---|---|
| `filter_search` | Kulcsszavas keresés a szűrőben. | igaz |
| `filter_taxonomies` | A szűrőben megjelenő taxonómiák azonosítói, vesszővel elválasztva. | `"category,post_tag"` |
| `filter_price` | Ársáv szűrő. Alapból csak kurzusra és csoportra működik, más bejegyzéstípusra szűrőkóddal. | igaz |
| `filter_price_min` | Az ársáv legkisebb értéke. | 0 |
| `filter_price_max` | Az ársáv legnagyobb értéke. | 1000 |

### Egyéb

- `id`: kötelező, a rács egyedi azonosítója.
- `class`: egyéni CSS-osztály a rácshoz (nem kötelező).

### A szűrő külön elhelyezése

A `[learndash_course_grid_filter]` shortcode a szűrőt a rácstól külön jeleníti meg, például az oldalsávban. A rács `filter` beállítását ilyenkor kapcsold ki.

```text
[learndash_course_grid_filter course_grid_id="cg-1"]
```

| Attribútum | Mit csinál | Alapérték |
|---|---|---|
| `course_grid_id` | Kötelező. A rács `id`-jével egyeznie kell. | |
| `search` | Kulcsszavas keresés. | igaz |
| `taxonomies` | A szűrőben használt taxonómiák, vesszővel elválasztva. | `category, post_tag` |
| `price` | Ársáv szűrő. | igaz |
| `price_min` | Az ársáv legkisebb értéke. | 0 |
| `price_max` | Az ársáv legnagyobb értéke. | 1000 |

## A blokk beállításai

### Sablon

- **Skin**: rács, téglafal vagy lista. Saját kinézetet is készíthetsz a gyermektémában (lásd: [Kurzusrács sablonok](https://hub.hellowp.io/hu/plugins/sfwd-lms/integraciok-kurzusracs-sablonok/)).
- **Card**: az adott kinézethez tartozó előre elkészített kártyadizájnok közül választasz.
- **Columns**: az oszlopok száma, alapérték 3.
- **Min Column Width**: az oszlopok legkisebb szélessége. Ha az oszlop ennél keskenyebb lenne, a rács automatikusan kevesebb oszlopot használ.

### Lekérdezés

- **Post Type**: bármely nyilvánosan lekérdezhető bejegyzéstípus. Ha nem nyilvános, a rács nem tudja megjeleníteni.
- **Posts Per Page**: hány elem jelenik meg egy oldalon.
- **Order By**: azonosító, cím, közzététel dátuma, módosítás dátuma, szerző vagy menüsorrend.
- **Order**: növekvő vagy csökkenő.
- **Taxonomies**: tartalom szűrése kategóriára és címkére. A LearnDash kurzusoknál az `ld_course_category` és `ld_course_tag` taxonómiát használhatod.
- **Enrollment Status**: csak kurzusnál és csoportnál érhető el, a felhasználó beiratkozása szerint szűr.

### Elemek

- **Thumbnail**: a bélyegkép megjelenítése. A kép a kurzus, lecke vagy téma kiemelt képe.
- **Thumbnail Size**: a bélyegkép mérete, a WordPress elérhető képméretei közül.
- **Ribbon**: a szalag (lásd lent).
- **Content**: a bélyegképen kívüli rész: összes tanuló, összes kvíz, összes lecke, cím, szerző és más.
- **Title** és **Clickable Title**: a cím megjelenítése, illetve kattinthatósága (a kurzusoldalra visz).
- **Description**: a leírás megjelenítése.
- **Meta**: a kiegészítő adatok megjelenítése.
- **Button**: a gomb. Alapszövege „See More”, beiratkozottnak, nem beiratkozottnak és befejezettnek is ugyanaz; kurzusonként átírható.
- **Pagination**: ha több elem van, mint a „Posts Per Page” értéke, innen választasz: további elemek gomb, végtelen görgetés vagy kikapcsolva.
- **Progress Bar**: haladássáv. Csak kurzusnál és csoportnál érhető el, és csak azoknál a kurzusoknál látszik, amelyekre a felhasználó be van iratkozva, vagy befejezte őket.
- **Filter**: ha bekapcsolod, a rács jobb felső sarkában megjelenik a **Szűrés** gomb, és a szűrő beállításai is előjönnek.

### Szűrő

- **Search**: kulcsszavas keresőmező a szűrőben.
- **Taxonomies**: milyen taxonómiák alapján szűrhessenek a látogatók. Csak nyilvános taxonómiák választhatók, többet a Ctrl (Mac-en Cmd) nyomva tartásával jelölhetsz ki.
- **Price**: az ársáv legkisebb és legnagyobb értéke. Ha üresen hagyod, a kurzusok legalacsonyabb és legmagasabb ára lesz az alapérték.

### Stílusok

- **Equal Grid Height**: egyenlő magasságú kártyák. Hatása a választott kinézettől függ.
- **Heading**: a cím betűtípusa, mérete, színe és háttérszíne, színválasztóval.
- **Elements**: a szalag betűszíne és háttérszíne, az ikonok színe és háttérszíne.

## A kiemelt kép

A rács a kurzus kiemelt képét használja, ha van. Beállítása:

1. Nyisd meg: **LearnDash LMS → Kurzusok**.
2. Kattints arra a kurzusra, amelyhez képet adnál.
3. Az oldalsávon keresd a **Kiemelt kép** részt, és kattints a kép beállítására.
4. Válassz a médiatárból, vagy tölts fel újat, majd kattints a **Kiválasztás** gombra.
5. Mentsd a változást a **Frissítés** gombbal.

Sok téma a kurzusoldal tetején is megjeleníti a kiemelt képet. Ez a témától függ, a LearnDash nem szabályozza. Ha a képpel kapcsolatban kérdésed van az oldalon, a téma készítőjét kérdezd.

## A szalag

A szalag a kártya sarkában látszik, minden más tartalom fölött. Szövege attól függ, ki nézi, és milyen a kurzus hozzáférési módja:

- Ha a felhasználó befejezte a kurzust, a szalag szövege „Completed”.
- Ha beiratkozott, de még nem fejezte be, „Enrolled”.
- Ha nincs beiratkozva, és a hozzáférési mód nyitott vagy zárt, de nincs ár megadva, nincs szalag.
- Ha nincs beiratkozva és a mód ingyenes, a szalag „Free”.
- Ha nincs beiratkozva, és a mód azonnali vásárlás, ismétlődő vagy zárt, a kurzusnál megadott ár látszik.
- Ha nincs ár megadva, nincs szalag.

A szalagszöveg kurzusonként átírható (lásd lent). A saját szalagszöveg minden felhasználónak ugyanaz, akár beiratkozott, akár nem. Szalag csak a kurzusrácson van, lecke-, téma- és kvízrácson nincs.

## További rácsadatok a kurzus beállításai között

A kurzusrács néhány kiegészítő adatot is mutat, mindegyik nem kötelező.

1. Nyisd meg: **LearnDash LMS → Kurzusok**.
2. Kattints a szerkesztendő kurzusra.
3. Nyisd meg a **Beállítások** fület.
4. Görgess a Kurzusrács beállításaihoz.
5. Add meg a kívánt adatokat, és kattints a **Frissítés** gombra.

- **Rövid leírás**: a cím alatt jelenik meg. Legfeljebb két mondat, kb. 15 és 25 szó között ajánlott. Lecke-, téma- és kvízrácson ugyanígy működik.
- **Időtartam**: hány óra és perc alatt végezhető el a kurzus. Nem korlátoz időt, csak jelzi az ideális hosszt.
- **Egyéni gombszöveg**: az alapértelmezett „See More…” helyett saját szöveg. Lecke-, téma- és kvízrácson ugyanígy működik.
- **Szalagszöveg**: felülírja az alapértelmezett szalagszöveget (lásd fent).
- **Videóelőnézet**: a kép helyett videót ágyazhatsz be, hogy bemutasd a kurzust. Jelöld be a videóelőnézet engedélyezését, majd add meg a videó URL-jét vagy a beágyazókódot. Közvetlen videófájlnál használhatod a `video` címkét:

```html
<video controls><source src="video-file.mp4" type="video/mp4"></video>
```

## Leckék, témák és kvízek rácsa

A rácsban leckéket, témákat és kvízeket is megjeleníthetsz. A legtöbb testreszabás ugyanúgy működik: oszlopok száma, rendezés, szűrés, kép és rövid leírás megjelenítése, videóelőnézet, gombszöveg. Nem működik: csak a beiratkozott kurzusok mutatása, a haladássáv és az ár szalag.

- Leckék: `[ld_lesson_list]`. Egy kurzus leckéihez: `[ld_lesson_list course_id="123"]`.
- Témák: `[ld_topic_list]`. Egy kurzus témáihoz: `[ld_topic_list course_id="123"]`. A témákat leckére nem szűrheted, csak kurzusra.
- Kvízek: `[ld_quiz_list]`. Egy kurzus kvízeihez: `[ld_quiz_list course_id="123"]`. Kvízeket sem lecke vagy téma szerint szűrhetsz, csak kurzus szerint. Ilyenkor a kurzus minden kvízét látod: lecke-, téma- és záró kvízt.

A `123` helyére a kívánt kurzus azonosítója kerül. Kurzusoldalon a `course_id` nem szükséges.

## A régi (1.0-s) shortcode

A régi kurzusrács az `[ld_course_list]` shortcode-ot használja. A legtöbb paramétere a 2.0-s rácsban nem használható, ott a blokk vagy a `[learndash_course_grid]` shortcode a javasolt. Az alapértelmezett rács 3 oszlopos, mutatja a kiemelt képet (ha van), a címet, a rövid leírást (ha van), a gombot és a szalagot.

| Funkció | Paraméter | Lehetséges értékek |
|---|---|---|
| Oszlopok száma nagy képernyőn | `col="4"` | 1, 2, 3, 4, 5, 6 |
| Haladássáv | `progress_bar="true"` | `true` |
| Kurzusok száma | `num="10"` | bármely egész szám |
| Rendezés alapja | `orderby="title"` | `title`, `ID`, `date`, `modified`, `menu_order`, `rand` és a `WP_Query` további értékei |
| Rendezés iránya | `order="ASC"` | `ASC`, `DESC` |
| Tartalom elrejtése (cím, leírás, gomb) | `show_content="false"` | `false` |
| Kép elrejtése | `show_thumbnail="false"` | `false` |
| Csak a saját kurzusok | `mycourses="true"` | `true` |
| Csak a nem beiratkozott kurzusok | `mycourses="not-enrolled"` | `not-enrolled`, `enrolled` |
| Kurzusállapot | `status="completed"` | `completed`, `in_progress`, `not_started` (csak `mycourses` mellett) |

LearnDash kategóriák és címkék használatakor:

| Funkció | Paraméter |
|---|---|
| Kurzuskategória azonosító szerint | `course_cat="10"` |
| Kurzuskategória név (slug) szerint | `course_category_name="math"` |
| Kurzuscímke azonosító szerint | `course_tag_id="10"` |
| Kurzuscímke név (slug) szerint | `course_tag="math"` |
| Legördülő kategóriaválasztó | `course_categoryselector="true"` |

WordPress kategóriák és címkék használatakor: `cat="10"`, `category_name="math"`, `tag_id="10"`, `tag="math"`, valamint a legördülő választó: `categoryselector="true"`.

Néhány tudnivaló:

- Az oszlopok alapértéke 3, legfeljebb 6 lehet. Kisebb képernyőn kevesebb oszlop jelenik meg, ezt a rács magától méretezi.
- A haladássáv csak azoknál a kurzusoknál látszik, amelyekre a felhasználó be van iratkozva, vagy befejezte őket.
- Ha a `num` kisebb, mint a kurzusok száma, a rács alatt lapozó jelenik meg. Alapból az összes kurzus látszik.
- A `mycourses="true"` hasznos saját profiloldalhoz, a `mycourses="not-enrolled"` értékesítési oldalhoz.
- A legördülő kategóriaválasztó a rács tetején jelenik meg.

### Rendezés

- `orderby="title"` és `order="ASC"`: A-tól Z-ig.
- Dátumnál (`date`, `modified`) növekvő sorrendben a legrégebbi, csökkenőben a legújabb jön elöl.
- `ID` és `menu_order` esetén növekvőben a legkisebb szám van elöl, csökkenőben a legnagyobb.

### Példák

```text
[ld_course_list progress_bar="true"]
[ld_course_list num="8" col="4"]
[ld_course_list orderby="title" order="ASC"]
[ld_course_list orderby="modified" order="DESC"]
[ld_course_list mycourses="true"]
[ld_course_list mycourses="true" orderby="rand"]
[ld_course_list mycourses="true" progress_bar="true" orderby="date" order="ASC"]
[ld_course_list mycourses="not-enrolled" show_content="false"]
[ld_course_list show_thumbnail="false"]
[ld_course_list num="2" col="2" course_categoryselector="true"]
[ld_lesson_list course_id="7" orderby="menu_order" order="ASC"]
```

Ezekkel sorban: haladássáv minden kurzuson; legfeljebb 8 kurzus 4 oszlopban; betűrendben; legutóbb módosítottak elöl; csak a saját kurzusok; saját kurzusok véletlen sorrendben; saját kurzusok haladássávval, a legrégebbi elöl; csak a nem beiratkozott kurzusok, csupán képpel; kép nélkül; 2 kurzus 2 oszlopban kategóriaválasztóval; a 7-es azonosítójú kurzus leckéi a kurzusépítő sorrendjében.