Como usar códigos curtos para incorporar calendários de eventos em seu site WordPress

No WordPress, um shortcode é um pequeno pedaço de código que lhe permite adicionar conteúdo dinâmico às suas páginas, posts e widgets. Os códigos curtos são representados por parênteses rectos [ ] e são utilizados para incorporar vários tipos de conteúdo, como imagens, áudio, vídeo, formulários e muito mais.

Se estiver a utilizar o FooEvents para gerir os seus eventos e marcações, poderá querer apresentar os eventos como um calendário no seu sítio Web (ver demonstração). Isto é facilmente conseguido utilizando o Calendário FooEvents plugin e códigos de acesso. Neste post, usaremos os códigos de atalho do Calendário FooEvents para incorporar rapidamente os calendários de eventos WordPress em posts e páginas. Esses códigos de acesso também podem ser usados para exibir calendários usando a maioria dos construtores de páginas, como o built-in Blocos WordPress, Elementor, Construtor Beaver e Divi.

O FooEvents oferece duas maneiras de criar eventos no seu site WordPress. A primeira opção é adicionar detalhes do evento a um post ou página padrão do WordPress usando a opção Calendário FooEvents plugin. Isto é feito ao editar o post ou a página. O plugin FooEvents Calendar adicionará um formulário básico de configuração de eventos na parte inferior da página, onde pode definir a data e a hora do evento.

A segunda opção, mais sofisticada, é utilizar o FooEvents para WooCommerce plugin e extensões para adicionar a funcionalidade de eventos, reservas e emissão de bilhetes aos seus produtos WooCommerce.

Para ilustrar a forma como os vários eventos serão apresentados no calendário, configurei os três eventos seguintes utilizando o FooEvents:

Conferência de um dia que tem lugar em 28 de abril de 2023 de das 9 às 17 horas
Conferência de vários dias que tem lugar em 14-16 de abril de 2023 de das 9 às 17 horas (ver o FooEvents Vários dias plugin)
Serviço ou evento que pode ser reservado que tem lugar em vários dias durante o mês de abril de 2023 sobre três faixas horárias diferentes (ver o FooEvents Reserva plugin)

Pssst: Se és novo no FooEvents e gostarias de dar uma vista de olhos por baixo do capô, solicitar acesso a um ambiente de demonstração de administração onde pode testar todos os plugins FooEvents mais recentes a partir do painel de controlo WordPress.

Em seguida, criei uma nova página (ou publicação) WordPress e adicionei um bloco de shortcode com o seguinte shortcode:

[calendário de eventos].

Depois de publicar a página, o seguinte calendário será apresentado no front-end.

Personalização do calendário de eventos

Agora que incorporámos o calendário, podemos personalizá-lo com base nas nossas preferências e requisitos. Isto é conseguido adicionando várias propriedades ao shortcode.

Alterar o dia de início do calendário

Defina as colunas do calendário para começarem numa segunda-feira ou num domingo.

[fooevents_calendar firstDay="0"] 0 = Domingo, 1 = Segunda-feira, etc.

Mostrar um determinado mês

Defina a data predefinida que o calendário deve apresentar quando é carregado pela primeira vez. Isto é útil se o seu evento só começar numa data posterior.

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

Filtrar por categoria

Criar calendários para diferentes grupos de eventos. Isto só se aplica a eventos WooCommerce. Basta marcar os eventos relevantes para uma categoria WooCommerce e especificar o slug da categoria usando o incluir_cat propriedade.

[fooevents_calendar include_cat="featured"]

Especificar o número de eventos a apresentar

Limitar o número de eventos a apresentar no calendário. Por predefinição, serão apresentados todos os eventos que ocorram no mês.

[fooevents_calendar num=10]

Apresentar vários calendários por página

Pode incorporar vários calendários por página. Para o fazer, basta certificar-se de que cada shortcode especifica um ID de calendário único.

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

Definir o formato da hora

Personalize o formato da hora utilizando os formatos de data suportados pelo FullCalendar: https://fullcalendar.io/docs/v1/formatDate

[fooevents_calendar timeFormat="H.mm"]

Esconder fins-de-semana

[fooevents_calendar fins-de-semana="false"]

Modos de visualização

O calendário do FooEvents inclui vários modos de visualização e pode ser definido utilizando o botão defaultView propriedade.

Exibir vista de lista (dia)

[fooevents_calendar defaultView="listDay"]

Exibir vista de lista (semana)

[fooevents_calendar defaultView="listWeek"]

Exibir vista de lista (mês)

[fooevents_calendar defaultView="listMonth"]

Exibir vista de lista (ano)

[fooevents_calendar defaultView="listYear"]

Mostrar eventos específicos

Mostre vários eventos especificando o ID do produto, do post ou da página. Pode apresentar um único evento ou vários eventos introduzindo uma lista de IDs separada por vírgulas.

[fooevents_calendar post="123,456"]

Cores do calendário

Pode modificar globalmente o tema utilizado pelo seu calendário, definindo a opção Tema do calendário nas principais definições do FooEvents.

Ir para o seu Painel de controlo do WordPress > Definições do FooEvents
Clicar no botão Calendário separador
Selecionar um Tema do calendário opção (Predefinição, Claro, Plano, Minimalista ou Escuro)
Guardar as vossas alterações!

Construtores de páginas

Os construtores de páginas do WordPress são plug-ins que permitem aos utilizadores criar e conceber disposições personalizadas para as suas páginas e mensagens do WordPress sem quaisquer conhecimentos de codificação ou programação. Como os códigos curtos são uma funcionalidade padrão do WordPress, a maioria dos construtores de páginas do WordPress suporta códigos curtos. O exemplo a seguir ilustra como usar Elementor para produzir o código curto do calendário FooEvent.