Come utilizzare gli shortcode per incorporare i calendari degli eventi nel sito WordPress - FooEvents

Come utilizzare gli shortcode per incorporare i calendari degli eventi nel vostro sito WordPress

Fooevents Calendario Shortcodes Immagine in primo piano

In WordPress, uno shortcode è un piccolo pezzo di codice che consente di aggiungere contenuti dinamici alle pagine, ai post e ai widget. Gli shortcode sono rappresentati da parentesi quadre [ ] e sono utilizzati per incorporare vari tipi di contenuto, come immagini, audio, video, moduli e altro.

Se utilizzate FooEvents per gestire gli eventi e le prenotazioni, potreste voler visualizzare gli eventi come calendario sul vostro sito web (vedi demo). Questo si ottiene facilmente utilizzando il metodo Calendario FooEvents e gli shortcodes. In questo post, utilizzeremo gli shortcode FooEvents Calendar per incorporare rapidamente i calendari degli eventi WordPress nei post e nelle pagine. Questi shortcode possono essere utilizzati anche per visualizzare i calendari utilizzando la maggior parte dei page builder, come ad esempio il built-in Blocchi WordPress, Elementor, Costruttore di castori e Divi.

La FooEvents offre due modi per creare eventi sul proprio sito WordPress. La prima opzione consiste nell'aggiungere i dettagli dell'evento a un post o a una pagina standard di WordPress, utilizzando l'opzione Calendario FooEvents plugin. Questo viene fatto quando si modifica il post o la pagina. Il plugin FooEvents Calendar aggiungerà quindi un modulo di base per le impostazioni dell'evento in fondo alla pagina, dove sarà possibile impostare la data e l'ora dell'evento.

Schermata delle impostazioni dei post e delle pagine degli eventi del calendario di Fooevents

La seconda opzione, più sofisticata, consiste nell'utilizzare il metodo FooEvents per WooCommerce plugin ed estensioni per aggiungere funzionalità di eventi, prenotazioni e biglietteria ai vostri prodotti WooCommerce.

Schermata delle impostazioni dell'evento Fooevents.

Per illustrare come vengono visualizzati i vari eventi nel calendario, ho impostato i tre eventi seguenti utilizzando FooEvents:

  • Conferenza di un giorno che si svolge su 28 aprile 2023 da Dalle 9.00 alle 17.00
  • Conferenza di più giorni che si svolge su 14-16 aprile 2023 da Dalle 9.00 alle 17.00 (vedi il FooEvents Multigiornaliero plugin)
  • Servizio o evento prenotabile che si svolge su vari giorni nel mese di aprile 2023 su tre diverse fasce orarie (vedi il Prenotazione FooEvents plugin)

Pssst: se siete nuovi di FooEvents e desiderate dare un'occhiata sotto il cofano, richiedere l'accesso a un ambiente demo di amministrazione dove è possibile provare tutti gli ultimi plugin FooEvents dalla dashboard WordPress.

Quindi, ho creato una nuova pagina (o post) WordPress e ho aggiunto un blocco shortcode con il seguente shortcode:

[fooevents_calendar]

Schermata del calendario di Fooevents incorporato durante la modifica di una pagina in Wordpress

Dopo la pubblicazione della pagina, nel front-end verrà visualizzato il seguente calendario.

Schermata del calendario di Fooevent incorporato tramite gli shortcode

Personalizzazione del calendario eventi

Ora che abbiamo incorporato il calendario, possiamo personalizzarlo in base alle nostre preferenze ed esigenze. Questo si ottiene aggiungendo varie proprietà allo shortcode.

Modifica del giorno di inizio del calendario

Impostare le colonne del calendario in modo che inizino il lunedì o la domenica.

[fooevents_calendar firstDay="0"] 0 = domenica, 1 = lunedì, ecc.

Calendario Fooevents con l'impostazione Firstday

Visualizzare un mese particolare

Impostare la data predefinita che il calendario deve visualizzare al primo caricamento. Questo è utile se l'evento inizia solo in una data successiva.

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

Filtrare per categoria

Creare calendari per diversi gruppi di eventi. Questo è applicabile solo agli eventi WooCommerce. È sufficiente associare gli eventi pertinenti a una categoria WooCommerce e specificare lo slug della categoria utilizzando l'opzione include_cat proprietà.

Selezione della categoria Woocommerce

[fooevents_calendar include_cat="featured"]

Specificare il numero di eventi da visualizzare

Limita il numero di eventi da visualizzare sul calendario. Per impostazione predefinita, vengono visualizzati tutti gli eventi che si svolgono nel mese.

[fooevents_calendar num=10]

Visualizzazione di più calendari per pagina

È possibile incorporare più calendari per pagina. Per farlo, è sufficiente assicurarsi che ogni shortcode specifichi un ID di calendario univoco.

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

Impostare il formato dell'ora

Personalizzare il formato dell'ora utilizzando i formati di data supportati da FullCalendar: https://fullcalendar.io/docs/v1/formatDate

[fooevents_calendar timeFormat="H.mm"]

Schermata 2023 04 05 Alle 15.19.31

Nascondi i fine settimana

[fooevents_calendar weekend="false"]

Modalità di visualizzazione

Il calendario dell'FooEvents prevede diverse modalità di visualizzazione, che possono essere impostate con il tasto Vista predefinita proprietà.

Visualizzazione dell'elenco (giorno)

[fooevents_calendar defaultView="listDay"]

Calendario Fooevents con l'impostazione Listday

Visualizzazione dell'elenco (settimana)

[fooevents_calendar defaultView="listWeek"]

Calendario di Fooevents con l'impostazione Listweek

Visualizzazione dell'elenco (mese)

[fooevents_calendar defaultView="listMonth"]

Calendario Fooevents con l'impostazione List Month

Visualizzazione dell'elenco (anno)

[fooevents_calendar defaultView="listYear"]

Calendario Fooevents con l'impostazione Listyear

Calendario Fooevents Utilizzo dell'impostazione Weekend per nascondere i fine settimana

Mostra eventi specifici

Mostrare più eventi specificando l'ID del prodotto, del post o della pagina. È possibile visualizzare un singolo evento o più eventi inserendo un elenco di ID separati da virgole.

[fooevents_calendar post="123,456"]

Colori del calendario

È possibile modificare il tema utilizzato dal calendario a livello globale impostando l'opzione Tema del calendario nelle Impostazioni principali di FooEvents.

  1. Andate al vostro Cruscotto di amministrazione WordPress > Impostazioni FooEvents
  2. Fare clic sul pulsante Calendario scheda
  3. Selezionare un Tema del calendario (predefinita, chiara, piatta, minimalista o scura).
  4. Risparmiare le vostre modifiche!

Costruttori di pagine

I costruttori di pagine WordPress sono plugin che consentono agli utenti di creare e progettare layout personalizzati per le pagine e i post WordPress senza alcuna conoscenza di codifica o programmazione. Poiché i codici brevi sono una funzionalità standard di WordPress, la maggior parte dei costruttori di pagine di WordPress supporta i codici brevi. L'esempio seguente illustra come utilizzare Elementor per produrre il codice corto FooEvent Calendar.

Schermata 2023 04 05 Alle 13.37.51

Altri codici brevi

Visitate il centro di assistenza FooEvents Guida ai codici brevi per un elenco completo degli shortcode e dei widget offerti da FooEvents.

Iscriviti alla nostra newsletter

Siate i primi a ricevere aggiornamenti sui prodotti e offerte speciali

    Carrello