Tworzenie kalendarza wydarzeń w Elementorze za pomocą FooEvents (2024) - FooEvents

Tworzenie kalendarza wydarzeń Elementor przy użyciu FooEvents (2024)

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.

Kalendarz wydarzeń Elementor

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.

Zrzut ekranu z postu kalendarza Fooevents i ustawień wydarzeń na stronie

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.

Zrzut ekranu pokazuje ustawiony tytuł strony

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

Zrzut ekranu z Elementora używanego do dodawania kalendarza do elementu Tab (Elementor Event Calendar)

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ń

Zrzut ekranu z Elementora używanego do dodania kalendarza do elementu zakładki wyświetlającego aktywności

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

Zrzut ekranu z Elementora używanego do dodania kalendarza do elementu zakładki, który wyświetla wszystkie wydarzenia mające miejsce w bieżącym tygodniu

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ń

Zrzut ekranu z Elementora używanego do dodania kalendarza do elementu zakładki, który wyświetla wszystkie wystąpienia rezerwacji wycieczek autobusowych

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:

Zapisz się do naszego newslettera

Bądź pierwszym, który otrzyma aktualizacje produktów i oferty specjalne

    Koszyk