# Kurzusrács sablonok

> A 2.0-s kurzusrács testreszabása sablonokkal: saját kinézet (skin), kártyadizájn és lapozás a témában.

A 2.0-s kurzusrács sablonozható: a megjelenés minden része (kinézet, kártya, szűrő, lapozás) testreszabható. Ez a fejezet fejlesztőknek szól, PHP- és CSS-ismeret kell hozzá. A rács használatáról és beállításairól a [Kurzusrács](https://hub.hellowp.io/hu/plugins/sfwd-lms/integraciok-kurzusracs/) fejezetben olvashatsz.

## Kinézet (skin)

A skin a rács teljes stílusát meghatározza. A beépített skinek sablonjai a bővítmény `/templates/skins/` mappájában vannak. Négy skin van: `grid`, `masonry`, `list` és `legacy-v1`. Az első három a blokkban kiválasztható, a `legacy-v1` a régi (1.0-s) shortcode-ok támogatására szolgál.

Egy skin mappájában ezek a fájlok lehetnek:

1. `layout.php` (kötelező): a skin HTML-elrendezése.
2. `style.css` (nem kötelező): a skin stílusa.
3. `script.js` (nem kötelező): a skin JavaScriptje.

A `layout.php`-ban két változó érhető el: a `$posts` (a rács lekérdezésének `WP_Post` objektumai) és az `$atts` (a `learndash_course_grid` shortcode attribútumai). A kártyasablon automatikus betöltéséhez használd a `learndash_course_grid_load_card_template( $shortcode_atts, $post )` segédfüggvényt.

### Saját skin készítése

1. Hozz létre egy egyedi nevű mappát az aktív téma `/learndash/course-grid/skins/` útvonalán. Például Kadence témánál: `wp-content/themes/kadence/learndash/course-grid/skins/custom-skin-slug/`.
2. Tedd bele a kötelező `layout.php` fájlt, és ha kell, a `style.css` és `script.js` fájlt.
3. Regisztráld a skint az aktív téma `functions.php` fájljában vagy egy bővítményben.

Példa a `layout.php`-ra:

```php
<?php
/**
 * Elérhető változók:
 *
 * $posts  WP_Post objektumok tömbje, a WP_Query->get_posts() eredménye
 * $atts   A sablont hívó shortcode vagy blokk attribútumai
 */
?>
<div class="items-wrapper <?php echo esc_attr( $atts['skin'] ); ?>">
<?php foreach ( $posts as $post ) : ?>
<?php learndash_course_grid_load_card_template( $atts, $post ); ?>
<?php endforeach; ?>
</div>
```

A regisztráció:

```php
add_filter( 'learndash_course_grid_skins', function( $skins ) {
    $skins['custom-skin-slug'] = [
        'slug'  => 'custom-skin-slug',
        'label' => 'Custom Skin',
        // Nem kötelező
        'script_dependencies' => [
            'dependency-slug' => [
                'url'     => 'https://script_url',
                'version' => '1.0',
            ],
        ],
        // Nem kötelező
        'style_dependencies' => [
            'dependency-slug' => [
                'url'     => 'https://style_url',
                'version' => '1.0',
            ],
        ],
    ];
    return $skins;
} );
```

## Kártya

A kártya egyetlen elem megjelenését határozza meg a skinen belül. Egy skinhez több kártyadizájn is tartozhat. A beépített kártyasablonok a `/templates/cards/` mappában vannak, ötféle: `grid-1`, `grid-2`, `grid-3` (rács és téglafal kinézethez), valamint `list-1`, `list-2` (listához).

Egy kártya mappájában ezek lehetnek:

1. `layout.php` (kötelező): a kártya HTML-elrendezése.
2. `style.css` (nem kötelező): a kártya stílusa.

### Saját kártya készítése

1. Hozz létre egy egyedi nevű mappát az aktív téma `/learndash/course-grid/cards/` útvonalán, például: `wp-content/themes/kadence/learndash/course-grid/cards/custom-card-slug/`.
2. Tedd bele a kötelező `layout.php` fájlt és a nem kötelező `style.css` fájlt.
3. Regisztráld a kártyát a téma `functions.php` fájljában vagy egy bővítményben:

```php
add_filter( 'learndash_course_grid_cards', function( $cards ) {
    $cards['custom-card-slug'] = [
        'label' => 'Custom Card',
        // Azok a skinek, amelyekhez a kártya elérhető
        'skins' => [ 'grid', 'custom-skin', 'etc' ],
        // A kártyadizájnban szereplő elemek; a blokkban ezek lesznek választhatók
        'elements' => [
            'thumbnail',
            'ribbon',
            'content',
            'title',
            'description',
            'meta',
            'button',
        ],
    ];
    return $cards;
} );
```

## Lapozás

A kurzusrács két lapozást hoz: a további elemeket betöltő gombot és a végtelen görgetést. A lapozássablonok a `/templates/pagination/` mappában vannak.