Cómo utilizar códigos cortos para incrustar calendarios de eventos en su sitio WordPress

En WordPress, un shortcode es un pequeño fragmento de código que te permite añadir contenido dinámico a tus páginas, entradas y widgets. Los shortcodes se representan mediante corchetes [ ] y se utilizan para incrustar diversos tipos de contenido, como imágenes, audio, vídeo, formularios, etc.

Si utiliza FooEvents para gestionar sus eventos y reservas, es posible que desee mostrar los eventos en forma de calendario en su sitio web (ver demostración). Esto se consigue fácilmente utilizando la función Calendario FooEvents y shortcodes. En este post, vamos a utilizar los códigos cortos FooEvents Calendario para incrustar rápidamente WordPress calendarios de eventos en los puestos y las páginas. Estos códigos cortos también se pueden utilizar para mostrar calendarios utilizando la mayoría de los constructores de página, tales como el built-in Bloques WordPress, Elementor, Castor Constructor y Divi.

FooEvents ofrece dos formas de crear eventos en tu sitio WordPress. La primera opción es añadir los detalles del evento a un post o página estándar de WordPress utilizando la función Calendario FooEvents plugin. Esto se hace al editar el post o la página. El plugin Calendario FooEvents añadirá entonces un formulario básico de configuración del evento en la parte inferior de la página, donde podrás establecer la fecha y hora del evento.

La segunda opción, más sofisticada, es utilizar la función FooEvents para WooCommerce Plugin y extensiones para añadir funciones de eventos, reservas y venta de entradas a sus productos WooCommerce.

Para ilustrar cómo se mostrarán varios eventos en el calendario, he configurado los siguientes tres eventos utilizando FooEvents:

Conferencia de un día que tiene lugar en 28 de abril de 2023 de De 9.00 a 17.00 horas
Conferencia de varios días que tiene lugar en 14-16 de abril de 2023 de De 9.00 a 17.00 horas (véase el FooEvents Varios días plugin)
Servicio o acto que se puede reservar que tiene lugar en varios días durante abril de 2023 en tres franjas horarias diferentes (véase el FooEvents Reserva plugin)

Pssst: Si eres nuevo en FooEvents y te gustaría echar un vistazo bajo el capó, solicitar acceso a un entorno de demostración para administradores donde puedes probar todos los plugins más recientes de FooEvents desde el panel de control de WordPress.

A continuación, he creado una nueva página WordPress (o post) y añadir un bloque de código corto con el siguiente código corto:

[fooevents_calendar]

Tras publicar la página, se mostrará el siguiente calendario en el front-end.

Personalizar el calendario de eventos

Ahora que hemos incrustado el calendario, podemos personalizarlo en función de nuestras preferencias y necesidades. Esto se consigue añadiendo varias propiedades al shortcode.

Cambiar el día de inicio del calendario

Configure las columnas del calendario para que empiecen en lunes o domingo.

[fooevents_calendar firstDay="0"] 0 = domingo, 1 = lunes, etc.

Mostrar un mes concreto

Establece la fecha por defecto que el calendario debe mostrar cuando se carga por primera vez. Esto es útil si su evento sólo comienza en una fecha posterior.

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

Filtrar por categoría

Crear calendarios para diferentes grupos de eventos. Esto sólo es aplicable a los eventos WooCommerce. Sólo tiene que etiquetar los eventos correspondientes a una categoría WooCommerce y especificar el slug de la categoría mediante la opción incluir_cat propiedad.

[fooevents_calendar include_cat="featured"]

Especifique el número de eventos a mostrar

Limite el número de eventos que se mostrarán en el calendario. Por defecto, se mostrarán todos los eventos que tengan lugar dentro del mes.

[fooevents_calendar num=10]

Mostrar varios calendarios por página

Puede incrustar varios calendarios por página. Para ello, simplemente asegúrese de que cada shortcode especifica un ID de calendario único.

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

Ajustar el formato de la hora

Personaliza el formato de la hora utilizando los formatos de fecha compatibles con FullCalendar: https://fullcalendar.io/docs/v1/formatDate

[fooevents_calendar timeFormat="H.mm"]

Ocultar fines de semana

[fooevents_calendar weekends="false"]

Modos de visualización

La agenda del FooEvents incluye varios modos de visualización y puede configurarse mediante las teclas defaultView propiedad.

Visualizar vista de lista (día)

[fooevents_calendar defaultView="listDay"]

Mostrar vista de lista (semana)

[fooevents_calendar defaultView="listaSemana"]

Mostrar vista de lista (mes)

[fooevents_calendar defaultView="listMonth"]

Visualizar vista de lista (año)

[fooevents_calendar defaultView="listaAño"]

Mostrar eventos específicos

Muestra múltiples eventos especificando el ID del producto, post o página. Puede mostrar un único evento o varios eventos introduciendo una lista de ID separados por comas.

[fooevents_calendar post="123,456"]

Colores del calendario

Puedes modificar el tema utilizado por tu calendario de forma global configurando la opción Tema del calendario en la Configuración principal de FooEvents.

Vaya a su WordPress admin dashboard > FooEvents Ajustes
Haga clic en el botón Calendario tab
Seleccione una Tema del calendario (Predeterminado, Claro, Plano, Minimalista u Oscuro)
Guardar ¡tus cambios!

Constructores de páginas

Los creadores de páginas WordPress son plugins que permiten a los usuarios crear y diseñar diseños personalizados para sus páginas y entradas WordPress sin ningún conocimiento de codificación o programación. Dado que los shortcodes son una funcionalidad estándar de WordPress, la mayoría de los creadores de páginas WordPress admiten shortcodes. El siguiente ejemplo ilustra cómo utilizar Elementor para mostrar el shortcode FooEvent Calendar.