Kurzusrács sablonok

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 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
/**
 * 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ó:

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:

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.