Kurzusrács

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.

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:

[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.

[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).
• 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:

<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

[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.