Graficzne układy kursów z dodatkiem LearnDash Course Grid
Aktualności
2023-07-20 / TutorLMS

Wtyczka e-learningowa Tutor LMS w wersji 2.2.3

Nowa wersja popularnej wtyczki e-learningowej dla WordPress przynosi kilka nowych funkcjonalności. W najnowszej wersji wtyczki można przesyłać dowolne typy plików multimedialnych bezpośrednio z poziomu edytora tekstowego lekcji. Oznacza to, że dowolny plik audio lub wideo, który jest obsługiwany przez menedżera biblioteki multimediów...
Czytaj więcej
2023-07-18 / BuddyBoss

Nowości i usprawnienia w BuddyBoss

W najnowszej wersji BB wprowadzona została możliwość ustawienia osobnej strony głównej dla użytkowników zalogowanych i osobnej strony głównej dla użytkowników wylogowanych. Został również zoptymalizowaliśmy mechanizm przesyłania plików multimedialnych w wiadomościach prywatnych, co poprawiło wydajność i przyspieszyło dostarczanie plików o większej...
Czytaj więcej
2023-07-01 / LearnDash

Co nowego w LearnDash 4.7?

Developerzy LearnDash nie zwalniają tempa ani trochę. W nowej wersji mamy możliwość ustawienia daty rozpoczęcia i zakończenia kursu oraz określenia limitu osób dołączających do kursu. Co to oznacza? Możesz ustawić datę rozpoczęcia kursu, np. za miesiąc, a wcześniej uruchomić jego przedsprzedaż. Klient...
Czytaj więcej
Graficzne układy kursów z dodatkiem LearnDash Course Grid

Graficzne układy kursów z dodatkiem LearnDash Course Grid

Kto pracuje z LearnDash dość długo (tak od wersji 2.x) ten wie, jak dużo pracy trzeba było na początku włożyć w CSSa, żeby lista kursów, lekcji i innych elementów LMS wyglądała w miarę przyzwoicie. Nawet dodatek LearnDash Course Grid w wersji 1.x, czyli dodatek zamieniający zwykłą listę kursów w układ kolumnowy jakoś specjalnie nie porywał. Wszystko zmieniło się od wersji LearnDash 3.x oraz LearnDash Course Grid 2.x. Od tego momentu strony kursowe diametralnie zmieniły swój wygląd, a z dodatkiem dla układu kolumnowego można praktycznie robić cuda.

Lista lekcji w LearnDash 2.x
Lista lekcji w LearnDash 2.x
Lista lekcji w LearnDash od wersji 3.0
Lista lekcji w LearnDash od wersji 3.0

LearnDash Course Grid

Jest to dodatek do LearnDash, który pozwala wyświetlać klasyczną listę stron LearnDash (grupy, kursy, lekcje, tematy, testy, pytania, zadania, prace pisemne, egzaminy próbne) w układzie kolumnowym oraz w układzie listy. Od 17 listopada 2021, czyli od wejścia w życie wersji 2.0 mamy do dyspozycji blok LearnDash Course Grid dla edytora Gutenberg oraz odpowiednik tego bloku w postaci shortcode’u, czyli [learndash_course_grid]

Dodatek wyświetli nam nie tylko strony LearnDash w układzie kolumnowych, ale dowolne strony WordPress, czyli klasyczne wpisy, strony oraz strony generowane przez różne wtyczki (tzw. custom posts).

Parametry bloku

Dodatek LearnDash Course Grid przynosi nam kilka gotowych układów do wykorzystania: 3 układy kolumnowe oraz 2 układy z listą. Określony układ wybiera się w konfiguracji bloku. Tak wyglądają układy kolumnowe:

Układ: Grid 1
LearnDash Course Grid – układ: Grid 1
learndash course grid grid 2
LearnDash Course Grid – układ: Grid 2
learndash course grid grid 3
LearnDash Course Grid – układ: Grid 3

A tak układy z listą:

Układ: List 1
LearnDash Course Grid – układ: List 1
Układ: List 2
LearnDash Course Grid – układ: List 2

Gotowe układy to nie wszystko. Każdy z nich można dodatkowo skonfigurować – pewne treści wyświetlać, a inne ukrywać. W poniższym przykładzie można ukryć kilka elementów (czyli tytuł, opis oraz przycisk) jednym przełącznikiem, zostawiając tylko miniaturę oraz wstążkę z ceną. 

LearnDash Course Grid - ukryta treść
LearnDash Course Grid – ukryta treść

Jeszcze inny widok można uzyskać ukrywając wstążkęopis każdego kafelka oraz odsłaniając pasek postępu. Oczywiście wyświetlanie paska postępu dotyczy tylko układów dla kursów i grup.

LearnDash Course Grid - pasek postępu
LearnDash Course Grid – pasek postępu

Jeśli mamy dużo kursów na swojej platformie można włączyć paginację, którą wyświetlisz na różne sposoby. W podanym przykładzie można wyświetlać przycisk Załaduj więcej. Po jego kliknięciu załadują się kolejne kursy. Dodatkowo zostały ukryte metadane wszystkich kursów (autor, czas trwania, liczba lekcji itp).

LearnDash Course Grid - przycisk Załaduj więcej
LearnDash Course Grid – przycisk Załaduj więcej

W zakładce Stylów można także zmienić krój, rozmiar i kolor fontów, kolory ikon oraz tła poszczególnych elementów.

LearnDash Course Grid - style
LearnDash Course Grid – style

Parametry dla shortcode’u „learndash_course_grid

Po co nam w ogóle ten shortcode, skoro mamy dostępny i łatwo konfigurowalny blok LearnDash Course Grid w edytorze WordPress? Otóż może się przydać wszędzie tam, gdzie tego bloku nie da się wykorzystać, np. w edytorze jakiegoś page buildera, czy też w szablonie motywu. Poszczególne parametry możliwe do zastosowania 'wyciągnęłam’ z pliku wtyczki. Szczegółowa dokumentacja ich zastosowania nie jest jeszcze oficjalnie dostępna na stronach wsparcia, dlatego większość trzeba przetestować we własnym zakresie.

Można korzystać zarówno z bloku, jak i shortcode’u, jednak dla shortcode’u mogą nie działać jeszcze wszystkie parametry.

Parametr
Objaśnienia
Możliwe wartości do zastosowania
post_type
Jakie typy stron wyświetlić? (kursy, grupy, lekcje, tematy itd.)
Przykład: post_type=”sfwd-lessons”
sfwd-courses (domyślnie: kursy)
sfwd-lessons (lekcje)
sfwd-topic (tematy)
sfwd-quiz (testy)
sfwd-question (pytania)
sfwd-assignment (zadania)
sfwd-essays (prace pisemne)
sfwd-certificates (certyfikaty)
groups (grupy)
exams (egzaminy próbne)
post (wpis WP)
page (strona WP)
(custom post: dowolna strona generowana przez inne wtyczki)
per_page
Ile elementów na stronę (kursów, grup, lekcji, tematów itd.)
Przykład: per_page=”6″
9 (domyślnie)
orderby
Jak posortować elementy w układzie kolumnowym?
Przykład: orderby=”title”
ID (domyślnie: wg ID elementu)
title (tytuł)
name (nazwa tzw. slug)
date (data publikacji)
modified (data modyfikacji)
menu_order (kolejność ustawiona w atrybutach elementu)
rand (losowo)
author (autor)
(lista wszystkich możliwych parametrów)
order
Jaki ma być kierunek sortowania w układzie kolumnowym? (rosnąco czy malejąco)
Przykład: order=”ASC”
DESC (domyślnie: od najmłodszego)
taxonomies
Wyświetla elementy przypisane do określonych taksonomii: kategorie, tagi, kategorie LD, tagi LD i inne niestandardowe taksonomie
Przykład: taxonomies=”ld_course_category”
ld_course_category (kategoria kursu)
ld_lesson_category (kategoria lekcji)
ld_topic_category (kategoria tematu)
ld_quiz_category (kategoria testu)
ld_group_category (kategoria grupy)
ld_course_tag (tag kursu)
ld_lesson_tag (tag lekcji)
ld_topic_tag (tag tamtu)
ld_quiz_tag (tag testu)
ld_group_tag (tag grupy)
category (kategoria wpisu WP)
post_tag (tag wpisu WP)
enrollment_status
Czy wyświetlać wyłącznie kursy/grupy na które użytkownik jest zapisany, czy tylko te, na które jest niezapisany?
Przykład: enrollment_status=”enrolled”
enrolled (zapisany)
not-enrolled (niezapisany)
progress_status
Wyświetla elementy w zależności od ich statusu
Przykład: progress_status=”not_started”
not_started (nie został rozpoczęty)
completed (ukończony)
in_progress (w trakcie)
thumbnail
Czy pokazać miniaturę elementu?
Przykład: thumbnail=”true”
true (wyświetlaj)
false (nie wyświetlaj)
thumbnail_size
Jaki rozmiar miniatury?
Przykład: thumbnail_size=”medium”
thumbnail (miniatura: domyślnie)
medium (średni)
large (duży)
full (rozmiar oryginalny)
(oraz dowolny, zdefiniowany przez aktywny motyw)
ribbon
Wyświetlać wstęgę? (pasek z informację o cenie, statusie…)
Przykład: ribbon=”true”
true (wyświetlaj)
false (nie wyświetlaj)
video
Wyświetlić podgląd video?
Przykład: video=”true”
true (wyświetlaj)
false (nie wyświetlaj)
content
Wyświetlać treść? (tytuł, opis, przycisk)
Przykład: content=”true”
true (wyświetlaj)
false (nie wyświetlaj)
title
Wyświetlać tytuł elementu?
Przykład: title=”true”
true (wyświetlaj)
false (nie wyświetlaj)
title_clickable
Czy tytuł ma być klikalny? (czy pod tytułem ma się znajdować link prowadzący do danej strony)
Przykład: title=”true”
true (wyświetlaj)
false (nie wyświetlaj)
description
Czy wyświetlać opis?
Przykład: description=”true”
true (wyświetlaj)
false (nie wyświetlaj)
description_char_max
Ile wyświetlać znaków opisu?
Przykład: description_char_max=”200″
dowolna liczba
button
Czy wyświetlać przycisk?
Przykład: button=”true”
true (wyświetlaj)
false (nie wyświetlaj)
filter
Czy wyświetlać opcję filtrowania?
Przykład: filter=”true”
true (wyświetlaj)
false (nie wyświetlaj)
pagination
W jaki sposób wczytywać kolejne elementy?
Przykład: pagination=”button”
button (przycisk Załaduj więcej)
infinite (automatyczne wczytywanie nowych elementów przy przewijaniu strony)
pages (klasyczna paginacja AJAX z generowaniem stron 1,2,3 itd.)
false (bez paginacji – wyświetla wszystkie elementy na stronie)
grid_height_equal
Wyświetla kolumny o tej samej wysokości
Przykład: grid_height_equal=”true”
true (wyświetlaj)
false (nie wyświetlaj)
progress_bar
Czy pokazywać pasek postępu?
Przykład: progress_bar=”true”
true (wyświetlaj)
false (nie wyświetlaj)
post_meta
Czy pokazywać metadane elementu?
Przykład: post_meta=”true”
true (wyświetlaj)
false (nie wyświetlaj)
skin
Wybór określonego układu elementów
Przykład: skin=”grid”
grid (domyślnie: układ kolumnowy)
masonry (tzw. układ „murowany”)
list (w postaci listy)
card
Wyświetla szablon wybranego wcześniej układu
Przykład: card=”grid-1″
grid-1
grid-2
grid-3
list-1
list-2
columns
Liczba kolumn (dla układu grid i masonry)
Przykład: columns=”3″
dowolna liczba, najlepiej nie przekraczająca 8
min_column_width
Minimalna szerokość kolumny w pikselach
Przykład: min_column_width=”200″
dowolna liczba – najlepiej jeśli szerokość strony (już po odjęciu odstępów), na której wyświetlasz układ kolumnowy, podzielisz przez liczbę kolumn
items_per_row
Ile elementów per wiersz?
Przykład: items_per_row=”3″
3 (domyślnie)
font_family_title
Krój fontu dla wyświetlanego tytułu
Przykład: font_family_title=”Poppins”
Użyj fontów dostępnych w swojej witrynie
font_family_description
Krój fontu dla wyświetlanego opisu
Przykład: font_family_description=”Poppins”
Użyj fontów dostępnych w swojej witrynie
font_size_title
Rozmiar fontu dla wyświetlanego tytułu
Przykład: font_size_title=”20px”
Akceptowany jest pełny format, m.in. 20px, 2rem
font_size_description
Rozmiar fontu dla wyświetlanego opisu
Przykład: font_size_description=”14px”
Akceptowany jest pełny format, m.in. 20px, 2rem
font_color_title
Kolor fontu dla wyświetlanego tytułu
Przykład: font_color_title=”#bd0000″
kolor w formacie HEX
font_color_description
Kolor fontu dla wyświetlanego opisu
Przykład: font_color_description=”#000000″
kolor w formacie HEX
background_color_title
Kolor tła dla wyświetlanego tytułu
Przykład: background_color_title=”#ffffff”
kolor w formacie HEX
background_color_description
Kolor tła dla wyświetlanego opisu
Przykład: background_color_description=”#ffffff”
kolor w formacie HEX
background_color_ribbon
Kolor tła dla wyświetlanej wstęgi
Przykład: background_color_ribbon=”#bd0000″
kolor w formacie HEX
font_color_ribbon
Kolor fontu dla wyświetlanej wstęgi
Przykład: font_color_ribbon=”#ffffff”
kolor w formacie HEX
background_color_icon
Kolor tła dla wyświetlanych ikon
Przykład: background_color_icon=”#bd0000″
kolor w formacie HEX
font_color_icon
Kolor fontu dla wyświetlanych ikon
Przykład: font_color_icon=”#000000″
kolor w formacie HEX
background_color_button
Kolor tła dla wyświetlanego przycisku
Przykład: background_color_button=”#bd0000″
kolor w formacie HEX
font_color_button
Kolor fontu dla wyświetlanego przycisku
Przykład: font_color_button=”#ffffff”
kolor w formacie HEX
class_name
Nazwa klasy CSS dla własnego ostylowania
Przykład: class_name=”myclass”
dowolna nazwa klasy akceptowalna przez standard CSS
id
ID dla wyświetlanego układu
Przykład: id=”fLjgSwy”
dowolne ID

Tak może wyglądać przykładowa konstrukcja shortcode’u learndash_course_grid z dowolnymi parametrami:

[learndash_course_grid post_type="sfwd-courses" skin="grid" card="grid-2" thumbnail_size="medium" taxonomies="ld_course_category:ogolne" columns="2"]

W podanym przykładzie został zastosowany następujący układ:

  • post_type=”sfwd-courses”: zostały wczytane wszystkie kursy LearnDash znajdujące się na platformie
  • skin=”grid”: został zastosowany układ kolumnowy
  • card=”grid-2″: został wczytany szablon „Grid 2”
  • thumbnail_size=”medium”: rozmiar wyświetlanej grafiki kursu ustawiony na „medium”, czyli średni
  • taxonomies=”ld_course_category:ogolne”: zostały wczytane wyłącznie kursy z kategorii „Ogólne”
  • columns=”2″: układ wyświetla się w dwóch kolumnach
learndash course wynik wywolania shortcode

TBC 🙂

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *


The reCAPTCHA verification period has expired. Please reload the page.

Scroll to Top