Jak używać skrótów do osadzania kalendarzy wydarzeń na stronie WordPress

W WordPress shortcode to mały fragment kodu, który umożliwia dodawanie dynamicznej zawartości do stron, postów i widżetów. Skróty są reprezentowane przez nawiasy kwadratowe [ ] i są używane do osadzania różnych rodzajów treści, takich jak obrazy, audio, wideo, formularze i inne.

Jeśli używasz FooEvents do zarządzania wydarzeniami i rezerwacjami, możesz chcieć wyświetlać wydarzenia jako kalendarz na swojej stronie internetowej (zobacz demo). Można to łatwo osiągnąć za pomocą funkcji Kalendarz FooEvents i skrótów. W tym poście użyjemy skrótów kalendarza FooEvents, aby szybko osadzić kalendarze wydarzeń WordPress w postach i na stronach. Skróty te mogą być również używane do wyświetlania kalendarzy za pomocą większości kreatorów stron, takich jak wbudowany Bloki WordPress, Elementor, Beaver Builder i Divi.

FooEvents oferuje dwa sposoby tworzenia wydarzeń w witrynie WordPress. Pierwszą opcją jest dodanie szczegółów wydarzenia do standardowego postu lub strony WordPress za pomocą funkcji Kalendarz FooEvents plugin. Odbywa się to podczas edycji postu lub strony. Wtyczka kalendarza FooEvents doda następnie podstawowy formularz ustawień wydarzenia na dole strony, w którym można ustawić datę i godzinę wydarzenia.

Drugą i bardziej zaawansowaną opcją jest użycie FooEvents dla WooCommerce Wtyczka i rozszerzenia umożliwiające dodanie funkcji wydarzeń, rezerwacji i sprzedaży biletów do produktów WooCommerce.

Aby zilustrować sposób wyświetlania różnych wydarzeń w kalendarzu, skonfigurowałem następujące trzy wydarzenia przy użyciu FooEvents:

Konferencja jednodniowa który odbywa się na 28 kwietnia 2023 r. z 9:00-17:00
Wielodniowa konferencja który odbywa się na 14-16 kwietnia 2023 r. z 9:00-17:00 (zob. FooEvents Wielodniowy plugin)
Usługa lub wydarzenie, które można zarezerwować który odbywa się na różne dni w kwietniu 2023 r. na trzy różne przedziały czasowe (zob. FooEvents Rezerwacja plugin)

Pssst: Jeśli jesteś nowy w FooEvents i chciałbyś zajrzeć pod maskę, żądanie dostępu do demonstracyjnego środowiska administratora gdzie można przetestować wszystkie najnowsze wtyczki FooEvents z pulpitu nawigacyjnego WordPress.

Następnie utworzyłem nową stronę (lub post) WordPress i dodałem blok shortcode z następującym shortcode:

[fooevents_calendar]

Po opublikowaniu strony w interfejsie użytkownika zostanie wyświetlony następujący kalendarz.

Dostosowywanie kalendarza wydarzeń

Teraz, gdy mamy już osadzony kalendarz, możemy go dostosować w oparciu o nasze preferencje i wymagania. Osiąga się to poprzez dodanie różnych właściwości do shortcode.

Zmiana dnia rozpoczęcia kalendarza

Ustaw kolumny kalendarza tak, aby rozpoczynały się w poniedziałek lub niedzielę.

[fooevents_calendar firstDay="0"] 0 = niedziela, 1 = poniedziałek itd.

Wyświetlanie określonego miesiąca

Ustaw domyślną datę, którą kalendarz musi wyświetlić przy pierwszym załadowaniu. Jest to przydatne, jeśli wydarzenie rozpoczyna się w późniejszym terminie.

[fooevents_calendar defaultDate="2023-09-01"]

Filtruj według kategorii

Tworzenie kalendarzy dla różnych grup wydarzeń. Dotyczy to tylko wydarzeń WooCommerce. Wystarczy oznaczyć odpowiednie wydarzenia do kategorii WooCommerce i określić slug kategorii za pomocą opcji include_cat nieruchomości.

[fooevents_calendar include_cat="featured"]

Określ liczbę zdarzeń do wyświetlenia

Ogranicz liczbę wydarzeń wyświetlanych w kalendarzu. Domyślnie wyświetlane są wszystkie wydarzenia mające miejsce w danym miesiącu.

[fooevents_calendar num=10].

Wyświetlanie wielu kalendarzy na stronie

Na jednej stronie można osadzić wiele kalendarzy. Aby to zrobić, wystarczy upewnić się, że każdy shortcode określa unikalny identyfikator kalendarza.

[fooevents_calendar id="cal1"], [fooevents_calendar id="cal2"] itd.

Ustawianie formatu czasu

Dostosuj format czasu, korzystając z obsługiwanych formatów daty FullCalendar: https://fullcalendar.io/docs/v1/formatDate

[fooevents_calendar timeFormat="H.mm"]

Ukryj weekendy

[fooevents_calendar weekends="false"]

Tryby wyświetlania

Kalendarz FooEvents zawiera różne tryby wyświetlania, które można ustawić za pomocą przycisku defaultView nieruchomości.

Wyświetlanie widoku listy (dzień)

[fooevents_calendar defaultView="listDay"]

Wyświetlanie widoku listy (tydzień)

[fooevents_calendar defaultView="listWeek"]

Wyświetlanie widoku listy (miesiąc)

[fooevents_calendar defaultView="listMonth"]

Wyświetlanie widoku listy (rok)

[fooevents_calendar defaultView="listYear"]

Pokaż określone zdarzenia

Pokaż wiele zdarzeń, określając identyfikator produktu, postu lub strony. Możesz wyświetlić pojedyncze zdarzenie lub wiele zdarzeń, wprowadzając listę identyfikatorów oddzielonych przecinkami.

[fooevents_calendar post="123,456"]

Kolory kalendarza

Możesz zmodyfikować motyw używany przez kalendarz globalnie, ustawiając opcję Motyw kalendarza w głównych ustawieniach FooEvents.

Przejdź do Panel administracyjny WordPress > Ustawienia FooEvents
Kliknij przycisk Kalendarz zakładka
Wybierz Motyw kalendarza opcja (Domyślna, Jasna, Płaska, Minimalistyczna lub Ciemna)
Zapisz zmiany!

Konstruktorzy stron

Kreatory stron WordPress to wtyczki, które pozwalają użytkownikom tworzyć i projektować niestandardowe układy stron i postów WordPress bez znajomości kodowania lub programowania. Ponieważ kody skrótów są standardową funkcjonalnością WordPress, większość kreatorów stron WordPress obsługuje kody skrótów. Poniższy przykład ilustruje, jak używać Elementor aby wyświetlić krótki kod kalendarza FooEvent.