W tym samouczku pokażemy, jak dodać kalendarz wydarzeń Elementor przy użyciu FooEvents w 2024 roku. Kalendarze będą wyświetlać wiele wydarzeń, które będą wyświetlane w różnych zakładkach przy użyciu różnych trybów wyświetlania.
Krok 1: Zainstaluj wtyczki Elementor i FooEvents Calendar
Najpierw musisz upewnić się, że posiadasz Elementor zainstalowana wtyczka. Można ją znaleźć na stronie wordpress.org i instalowane bezpośrednio z sekcji wtyczek na stronie internetowej.
Zaloguj się do panelu administracyjnego WordPress i przejdź do sekcji Wtyczki > Dodaj nowy. Następnie wyszukaj Elementor i zainstalować Kreator stron internetowych Elementor wtyczka.
Następnie wyszukaj FooEvents i zainstalować Kalendarz wydarzeń dla FooEvents 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 FooEvents Calendar dodaje podstawowy formularz ustawień wydarzenia na dole postu, stron i niestandardowych typów postów. Za pomocą tego formularza można ustawić datę i godzinę wydarzenia. Po ustawieniu będą one wyświetlane w kalendarzach generowanych przez wtyczkę kalendarza FooEvents.
Drugą i bardziej zaawansowaną opcją jest użycie FooEvents dla WooCommerce Wtyczka i rozszerzenia umożliwiające dodanie funkcji wydarzeń i biletów do produktów WooCommerce. FooEvents dla WooCommerce umożliwia sprzedaż nieograniczonej liczby biletów bezpośrednio ze strony internetowej, a także zarządzanie zameldowaniami za pomocą bezpłatnej aplikacji. Aplikacje FooEvents Check-ins. The FooEvents Rezerwacje Wtyczka może być również używana do sprzedaży dostępu do przedziałów czasowych, które można zarezerwować, co zostanie zilustrowane w dalszej części tego samouczka.
Po skonfigurowaniu kilku zdarzeń testowych przejdź do następnego kroku.
Krok 2: Utwórz nową stronę
Utwórz nową stronę i ustaw jej tytuł. Następnie przejdź do kreatora stron Elementor, naciskając przycisk Edycja za pomocą Elementora przycisk.
Krok 3: Dodanie elementu Elementor Tabs
Po załadowaniu strony dodaj element Tabs do głównej sekcji strony. Domyślnie Elementor utworzy dwie przykładowe zakładki. Usuń drugą kartę i rozwiń opcje edycji pierwszej karty.
Krok 4: Dodanie kalendarza wydarzeń Elementor za pomocą FooEvents
Zmodyfikuj pierwszą kartę i zmień tytuł na "Wszystkie", a następnie dodaj zakładkę Krótki kod kalendarza FooEvents do sekcji zawartości karty.
[fooevents_calendar id="1"]
Podczas dodawania wielu kalendarzy do strony ważne jest, aby określić unikalny identyfikator dla każdego kalendarza (np. id="1″). Następnie można wyświetlić podgląd kalendarza, który wyświetli wszystkie wydarzenia mające miejsce w bieżącym miesiącu.
Krok 5: Dodanie kalendarza dla określonych kategorii wydarzeń
Następnie powiel kartę, którą właśnie utworzyliśmy i zmień jej tytuł na Działania. Ten kalendarz musi następnie wyświetlać wszystkie wydarzenia, które są działaniami. Podczas tworzenia wydarzeń za pomocą wtyczki FooEvents for WooCommerce można organizować wydarzenia za pomocą funkcji kategorii WooCommerce. W tym demo dodaliśmy wycieczkę Bus Tour do kategorii działań. Korzystając z parametru include_cat shortcode, możemy następnie filtrować kalendarz, aby wyświetlać tylko wydarzenia, które zostały skategoryzowane jako działania. Możemy również powielić ten proces dla wydarzeń, które zostały skategoryzowane jako "Konferencje".
[fooevents_calendar id="2″ include_cat="activities"]
Krok 6: Dodawanie kalendarzy dla określonych przedziałów czasowych
Utwórz kalendarz, który wyświetla tylko wydarzenia mające miejsce w bieżącym dniu kalendarza, używając parametru defaultview z wartością ustawioną jako listday. W razie potrzeby można również użyć tego parametru w połączeniu z innymi parametrami, takimi jak parametr include_cat. Wykonaj ten sam proces i utwórz zakładkę Week view, w której określamy domyślny widok jako listWeek. Ten widok wyświetli wszystkie wydarzenia, które mają miejsce w bieżącym tygodniu.
Utwórz kartę widoku miesiąca, która wyświetla wszystkie zdarzenia mające miejsce w bieżącym miesiącu kalendarzowym przy użyciu listMonth i parametru defaultdate, aby określić, który miesiąc ma być wyświetlany. Utwórz kartę wyświetlającą wszystkie zdarzenia mające miejsce w bieżącym roku, używając wartości listYear.
[fooevents_calendar id="3″ defaultview="listDay"]
Krok 7: Dodanie kalendarza dla określonych powtarzających się wydarzeń
Utwórz kalendarz dla określonych powtarzających się wydarzeń. Na przykład wycieczka autobusowa korzysta z wtyczki rezerwacji FooEvents i powtarza się w różnych przedziałach czasowych. Możesz utworzyć kalendarz, który wyświetla tylko te przedziały, określając identyfikator produktu. Wszystko, co musisz zrobić, to uzyskać identyfikator, utworzyć zakładkę o nazwie Bus Tour i ustawić identyfikator produktu jako parametr postu. Kalendarz będzie wtedy wyświetlał tylko rezerwacje na to wydarzenie.
To wszystko! Wiesz już, jak używać FooEvents i Elementora do dodawania kalendarzy wydarzeń do swojej witryny, które wyświetlają wiele wydarzeń w różnych zakładkach przy użyciu różnych trybów wyświetlania. Każdy z tych kalendarzy można dodatkowo filtrować za pomocą szeregu parametrów shortcode. Więcej informacji na ich temat można znaleźć w centrum pomocy FooEvents, przechodząc do sekcji dokument pomocy skrótów kalendarza.
Może Cię również zainteresować ta treść od naszego partnera FooSales WooCommerce POS: