1. Code
  2. WordPress
  3. Plugin Development

Cómo añadir un calendario de eventos a tu sitio WordPress con el plugin Events Schedule

Scroll to top

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

¿Estás organizando una conferencia? ¿Estás quizá involucrado con tu gimnasio local o centro comunitario, y deseas comenzar a ofrecer algunas clases? ¿O tal vez eres propietario de un negocio y necesitas una sencilla manera de publicar tus horarios de apertura en tu sitio web?

Siempre que necesites compartir información sobre horarios de apertura y eventos, una programación será la solución perfecta, algo que te permitirá comunicar esta información en forma de calendario, lo cual resultará familiar y más comprensible.

Existen un montón de plugins que pueden ayudarte a añadir un horario en tu sitio web de WordPress, pero en este tutorial nos centraremos en el plugin Events Schedule. Te mostraré cómo construir un horario, rellenarlo con clases y luego publicar esa programación en tu sitio web, antes de explorar algunas de las características más avanzadas del plugin.

Al final de este tutorial, sabrás cómo mejorar tu programación con el contenido de Google Maps y con botones de "llamada a la acción", lo que permitirá a los usuarios realizar una serie de tareas directamente desde tu calendario de programación, incluyendo el envío de un correo electrónico al instructor del evento y la adición de este evento a su calendario iCal.

Para terminar, te mostraré cómo usar Events Schedule en combinación con el popular plugin WooCommerce, para construir rápida y fácilmente un sistema automatizado de reservas y venta de entradas para todos los eventos de tu agenda.

Descargar el plugin Events Schedule

Puedes comprar el plugin Events Schedule WP a través de CodeCanyon:

  • Si aún no estás registrado, crea una cuenta de usuario gratuita en Envato Market.
  • Dirígete al sitio web de CodeCanyon, haz clic en el pequeño botón Sign In (registarse) situado en la esquina superior derecha e introduce los detalles de tu cuenta de Envato cuando te sean solicitados.
  • Una vez que hayas iniciado sesión en tu cuenta, ve a la página del plugin Events Schedule, haz clic en Buy Now (comprar ahora) y sigue las instrucciones en pantalla para completar la compra.
  • Cuando se te solicite, descarga el plugin.
  • Descomprime tu plugin: la carpeta resultante debe contener varios elementos, incluido un archivo weekly-class.zip, que necesitarás subir a tu cuenta de WordPress.

Cómo añadir un plugin de terceros a WordPress

Una vez tengas tu plugin, el siguiente paso es añadirlo a tu cuenta de WordPress:

Inicia sesión en WordPress, si es que aún no lo has hecho. Selecciona Plugins en el menú de la izquierda, y a continuación, Añadir nuevo. Ahora, haz clic en el botón Subir plugin.

En la siguiente pantalla, selecciona Seleccionar archivo y, a continuación, carga el archivo weekly-class.zip. Selecciona Instalar ahora. Ahora, este plugin será cargado a tu cuenta de WordPress. Una vez que tu plugin haya sido cargado con éxito, selecciona Plugins instalados en el menú de la izquierda de WordPress. Localiza el plugin Events Schedule WP Plugin y selecciona Activar.

Tras unos momentos, el plugin Events Schedule WP Plugin estará listo para que lo puedas usar.

¿Cómo puedo crear una programación?

Una vez que el plugin Events Schedule esté activo, aparecerá un nuevo elemento Classes (clases) en el menú de la izquierda de WordPress. Al crear una programación, normalmente usarás este nuevo elemento de menú para lo siguiente:

  • Crear todos los tipos de clases, ubicaciones e instructores que desees usar en toda tu programación.
  • Crear todas las clases y, a continuación, asignar el tipo, la ubicación y el instructor adecuados a cada una.
  • Crear y aplicar estilo a tu programación y, a continuación, añadir todas las clases a esa programación.
  • Copia el shortcode de la programación y pégalo en cualquiera de tus entradas de WordPress, momento en el que la programación aparecerá en tu sitio web.

Comencemos por sentar las bases y crear todos los tipos de clases, ubicaciones e instructores que usaremos a lo largo de este artículo.

Crear nuevos tipos de clases

Tus tipos de clases variarán en función del tipo de programación que estés creando. Por ejemplo, si estás construyendo el horario para un gimnasio o un centro deportivo, podrías crear tipos de clases como por ejemplo "Aeróbicos", "Yoga" y "Natación". Sin embargo, si estuvieras creando el horario para una universidad, entonces tus tipos de clases probablemente tendrían nombres como por ejemplo, "Matemáticas", "Inglés" y "Ciencia".

Para crear un nuevo tipo de clase, selecciona Class Types (tipos de clase) en el menú izquierdo de WordPress. Esto te llevará a una nueva página, desde la cual puedes introducir la siguiente información sobre cada tipo de clase:

  • Name: Se trata del nombre de la clase, como "Ejercicios de boxeo", "Pesas rusas" o "Running".
  • Slug: Se trata de la versión amigable de la URL del tipo de clase. El slug debe constar de caracteres en minúsculas y contener sólo letras, números y guiones.
  • Parent: Para ayudar a mantener organizado tu horario, es posible que desees crear clases primarias o "padre" y, a continuación, asignar las clases secundarias o "hojas" a la clase primaria correspondiente. Por ejemplo, puedes crear una clase primaria "Aeróbicos" y luego asignar clases de running, aeróbico acuático y natación de tu gimnasio a esa clase principal. Si deseas crear una clase primaria, simplemente deja el campo Parent (padre) en blanco. Como alternativa, si estuvieras creando una clase secundaria, le asignarías un elemento primario abriendo el menú desplegable Parent Class (clase primaria) y, a continuación, realizando una selección en el listado del desplegable.
Assign a parent class using the Parent class dropdown
  • Description (descripción): Aquí, puedes añadir una descripción para este tipo de clase. Esta descripción se mostrará en una ventana emergente que aparece cuando el usuario seleccione este tipo de clase en tu programación.
  • Color: Para ayudar a los visitantes a encontrar la clase adecuada para ellos, es posible que desees asignar diferentes colores a los distintos tipos de clase. Si utilizas una clase primaria, el color de cada tipo de clase individual anulará el color de su clase primaria.

Una vez que estés satisfecho con la información que hayas introducido, haz clic en Add New Class Type (añadir nuevo tipo de clase). Repita este proceso para cada tipo de clase que desees crear.

Todos los tipos de clase aparecerán ahora en la sección Class Types. Si necesitas realizar cambios en un tipo de clase en cualquier momento, simplemente selecciona Class Types en el menú de la izquierda de WordPress. Todos tus tipos de clase se mostrarán a la derecha de la pantalla; selecciona la clase que desees editar, realiza los cambios y, a continuación, haz clic en Save (guardar).

Añadir ubicaciones

Tus clases pueden tener lugar en diferentes lugares, ya se trate de diferentes aulas, edificios o incluso ubicaciones geográficas completamente diferentes.

Si deseas mostrar esta información en tu programación, tendrás que crear una o más ubicaciones:

En primer lugar, selecciona Locations (ubicaciones) en el menú izquierdo de WordPress. En el campo Name (nombre), asigna a esta ubicación un nombre descriptivo, como "Sala de conferencias 1", "Piscina" o "Bloque de ciencias". Utiliza el campo Slug para introducir una versión opcional y amigable para la URL de esta ubicación. Si no especificas una URL personalizada, el plugin Event Schedule generará una de forma automática. A continuación, puedes añadir una descripción opcional a esta ubicación, que se mostrará en una ventana emergente cada vez que el usuario seleccione esta ubicación en tu programación. Puedes utilizar esta descripción para proporcionar información sobre opciones de estacionamiento, indicaciones para conducir hasta la ubicación o incluso una nota rápida que informe al lector de que tu Estudio Yoga se encuentra en la 3ra planta.

Cuando estés satisfecho con la información que has introducido, selecciona Add New Location (añadir nueva ubicación). Repite este proceso para todas las ubicaciones que desees utilizar.

Register one or more locations with your schedule

Si alguna vez necesitas hacer algunos cambios en una ubicación existente, simplemente selecciona Class Types en el menú de la izquierda de WordPress. A continuación, selecciona la ubicación que desees editar y, después, realiza los cambios.

Añadir un instructor

A continuación, debes registrar todos los instructores que van a dirigir tus clases:

  • Selecciona Instructors (instructores) en el menú izquierdo de WordPress.
  • En el campo Name (nombre), escribe el nombre del instructor.
  • Si es necesario, crea un slug personalizado.
  • En la sección Description, escribe cualquier información adicional que desees mostrar cuando el usuario seleccione este instructor en tu programación, como las cualificaciones del instructor o sus datos de contacto.
  • Cuando estés satisfecho con la información que has introducido, haz clic en Add New Instructor.

Si alguna vez necesitas editar los detalles de un instructor, selecciona Instructors en el menú de la izquierda, elige el instructor que desees editar y, a continuación, realiza los cambios necesarios.

Crear algunas clases

Ahora estás listo para comenzar a rellenar tu horario con eventos individuales.

Para añadir una nueva clase en tu programación, selecciona Classes > Add New (Clases > Añadir nueva) desde el menú de la izquierda de WordPress. Ten en cuenta que vamos a estar revisando las siguientes secciones de este menú, por lo que a menos que se especifique lo contrario supón que todavía estamos en la pantalla Classes > Add New.

Create a new class by selecting Classes Add new from the WordPress dashboard

Ahora puedes introducir parte o toda la siguiente información:

1. Asigna un nombre a la clase

Este punto es bastante sencillo: dale a la clase un título, que se mostrará posteriormente en tu programación.

2. Establece la fecha y la hora

Tal vez tu clase dure cinco minutos, tal vez se extiende a lo largo de varios días, o tal vez es un evento recurrente. El plugin Events Schedule tiene todos los ajustes que necesitas para especificar cuándo se produce exactamente el evento y si se repite alguna vez.

En primer lugar, utiliza los campos Starting Date & Time (fecha y hora de inicio) para especificar cuándo comienza la clase. Si este evento se inicia y finaliza el mismo día, puedes usar el control deslizante Duration slider que lo acompaña para especificar cuánto durará esta clase, que puede ir desde 5 minutos hasta un máximo de 24 horas.

Specify the class start and end time

Como alternativa, si esta clase abarca varios días, tendrás que seleccionar la casilla This is a multi-day event (este es un evento de varios días).

Una vez seleccionada esta casilla de verificación, podrás establecer una fecha y hora de finalización para tu evento. Simplemente, ten en cuenta que los eventos que se extienden durante varios días no son compatibles con todos los estilos de programación. Si deseas mostrar eventos de varios días, deberás usar uno de los siguientes estilos: Plain List (lista sin formato), Events Carousel (carrusel de eventos), Masonry Grid (cuadrícula Masonry), Cover (portada), or Countdown (cuenta atrás). Exploraremos diferentes estilos de programación más adelante en este tutorial.

Por último, si el evento es recurrente, abre el menú desplegable Repeat (repetir) y selecciona una perioricidad. Puedes elegir entre: Daily (diario), Weekly (semanal), Every Two Weeks (cada dos semanas), Monthly (mensual), Yearly (anual), o Custom (personalizado).

Si seleccionas Daily, obtendrás acceso a una serie de casillas de verificación para los días de la semana desde el lunes al domingo, Monday-Sunday. Si optas por Custom, podrás elegir la(s) fecha(s) exacta(s) en las que se repetirá este evento, usando el botón Add Date (añadir fecha).

Cuando creas un evento recurrente, tendrás la opción de establecer una fecha para la última repetición, Last Repeat Date, que es la fecha final en la que este evento aparecerá en tu programación. Si no especificas una fecha de última repetición, este evento seguirá repitiendose indefinidamente.

Create a repeating event using the Repeat dropdown menu

3. Asigna un Tipo, una Ubicación y un Instructor

Suponiendo que ya has añadido cada tipo de clase, ubicación e instructor a tu cuenta de WordPress, este paso debería ser muy sencillo:

  • Assign a class type (asigna un tipo de clase): Busca el cuadro Class Types y asegúrate de que la ficha All Class Types (todos los tipos de clase) esté seleccionada. En la lista siguiente, selecciona el tipo de clase que desees utilizar.
  • Assign a location (asigna una ubicación): Busca el cuadro Location y comienza a escribir tu ubicación en el campo de texto que lo acompaña; cuando aparezca la ubicación correcta, selecciónala.
  • Assign an instructor (asigna un instructor): Busca el cuadro Instructor y empieza a escribir el nombre del instructor en el campo de texto que lo acompaña; cuando aparezca el nombre del instructor adecuado, selecciónalo.

4. Opcional: Establecer una imagen para la clase

A continuación, puedes establecer una imagen de clase opcional, que se mostrará junto a la clase si utilizas cualquiera de los siguientes estilos de programación: Plain List, Monthly Calendar, Masonry Grid, o el Events Carousel.

Para establecer una imagen de clase:

  • Selecciona el botón Upload Image (subir imagen).
  • Elige la imagen que desees utilizar.
  • Selecciona Insert Image (insertar imagen).

5. Crear una llamada a la acción

Un programación estática es una excelente forma de comunicar información a los clientes potenciales, pero también puedes utilizar este plugin para crear programaciones interactivas.

El plugin Events Schedule admite varios botones de "llamada a la acción", que animan a los visitantes a interactuar con tu horario, ya sea solicitando más información, contactando con el instructor del evento o reservando una plaza para una próxima clase.

You can add a rang of CTA buttons to your schedule

De forma predeterminada, el plugin Events Schedule admite todos los siguientes botones de llamada a la acción:

  • Go to page (dirígete a la página): Este botón abre una página de WordPress. Puedes crear una página de WordPress dedicada para cada una de tus clases, y luego usar un botón "Ir a página" para dirigir a los visitantes a la página web correspondiente.
  • Go to custom URL (ir a la URL personalizada): Al hacer clic en este botón se abre una dirección URL, que podría formar parte de un sitio web externo de terceros. Puedes usar esta llamada a la acción para enlazar al sitio web personal del instructor o a su página de LinkedIn, donde los clientes potenciales pueden obtener más información sobre las cualificaciones del instructor.
  • Email (correo electrónico): Esto abre el cliente de correo electrónico predeterminado del usuario y crea un nuevo correo electrónico que contiene toda la información sobre esta clase en particular. Esto puede proporcionar a los asistentes potenciales una manera fácil de ponerse en contacto con el instructor de la clase, en caso de que tengan alguna pregunta, o que quieran reservar un lugar en una próxima clase.
  • Download iCal Event (descargar Evento de iCal): Lo último que quieres, es que un cliente potencial muestre interés en una clase, ¡y luego se olvide de asistir! Un botón Descargar evento de iCal puede ayudarte a mantener tu clase en la memoria del usuario añadiendo este evento a su calendario iCal.

¡Añadamos una llamada a la acción! En primer lugar, desplázate hasta la sección Class settings (ajustes de clase) y selecciona la pestaña Action Button (botón de acción). A continuación, introduce algo de texto en el campo Button Label (etiqueta de botón).

Dependiendo de la llamada a la acción que estés creando, esta etiqueta podría ser algo así como Contactar con el instructor, Añadir a mi iCal o Descubrir más. Si no especificas una etiqueta, este botón de acción no aparecerá en tu programación.

Use the Button Action section to specify the action that should be completed whenever this button is selected

Ahora puedes elegir la acción del botón, que se realizará cada vez que el usuario haga clic sobre él. Elige entre: Go to page (Ir a la página), Go to custom URL (ir a URL personalizada), Email (correo electrónico), o Download iCal Event (descargar evento de iCal).

Ten en cuenta que los botones de llamada a la acción sólo estarán visibles en los estilos de programación Plain List y Weekly Tabs.

6. ¿Tienes algo más que decir? Añade un extracto

A veces es posible que necesites proporcionar un poco de información adicional sobre una clase. Por ejemplo, tal vez los asistentes necesiten traer su propia estera de yoga, o si deseas incluir un aviso de descargo de responsabilidad advirtiendo a los asistentes potenciales de que se trata de una clase intensiva que requiere un nivel de condición física alto.

Si necesitas incluir información extra y diversa, puedes añadir un extracto. Simplemente, desplázate hasta la parte inferior de la página y después escribe el texto que quieras en el campo Excerpt (extracto).

Para asegurarte de que este extracto aparecerá en la programación final, desplázate hasta la parte superior de la pantalla y abre el menú desplegable Screen Options (opciones de pantalla). A continuación, asegúrate de que la casilla Excerpt esté seleccionada.

7. Añadir Google Maps a tu programación de WordPress

Ya hemos añadido algunas ubicaciones básicas a nuestra cuenta de WordPress, pero también puedes mostrar un mapa de Google con la ubicación exacta de cada clase.

Este mapa se mostrará en una ventana emergente que aparecerá cada vez que el usuario seleccione esta clase dentro de tu programación, suponiendo que hayas seguido las instrucciones para habilitar las ventanas emergentes dirigiéndote a Schedule Builder (constructor de programación) y seleccionando Show description (mostrar descripción).

Para añadir un mapa de Google a tu clase, selecciona la pestaña Map Details (detalles del mapa) y, a continuación, introduce parte o toda la siguiente información:

  • Map Latitude (latitud del mapa): Hace referencia a las coordenadas de latitud de la ubicación.
  • Map Longitude (longitud del mapa): Coordenadas de longitud de la ubicación.
Add optional Google Maps content to your class using the Map Details tab
  • Map Type (tipo de mapa): Elige entre los estilos Roadmap (hoja de ruta), Satellite (satélite), Hybrid (híbrido) o Terrain (terreno). El tipo de mapa predeterminado es hoja de ruta.
  • Map Color Theme (tema de color del mapa): Elige entre Light (claro), Dark (oscuro) o Default (predeterminado).
  • Map Zoom (zoom de mapa): Introduce el nivel de zoom del mapa, que oscila entre 1 y 18. El valor predeterminado es 15.

Si decides incluir Google Maps, para obtener los mejores resultados, es recomendable que añadas una clave de API de Google Maps a tu cuenta de WordPress.

Puedes obtener una clave de API a través de Google Cloud Console siguiendo estos pasos:

  • Dirígete a Google Cloud Console. Si es la primera vez que usas la consola, es posible que se te pida que crees una cuenta.
  • En la barra de herramientas, abre el menú desplegable y selecciona Nuevo proyecto.
  • Asígnale un nombre al proyecto y, a continuación, haz clic en Crear.
  • Haz clic en el icono de la parte superior izquierda y selecciona APIs & Services > Credenciales.
  • Selecciona el botón Crear credenciales y, a continuación, selecciona Clave de API en el siguiente menú desplegable.
  • La consola de Google Cloud generará ahora una clave de API; cópiala en el portapapeles.
  • De vuelta al panel de WordPress, selecciona Classes > Settings (ajustes) en el menú de la izquierda.
  • Selecciona la pestaña Google Maps.
  • Pega la clave de API en el campo Google Maps API (API de Google Maps).
  • Haz clic en Save Settings (guardar ajustes).

Cuando llegue el momento de probar tu programación, es posible que aparezca la ventana emergente sin ningún contenido de Google Maps. Si ocurre esto, comprueba que hayas introducido los valores de longitud y latitud correctos para tu ubicación, ya que las coordenadas incorrectas pueden impedir que Google Maps se muestre correctamente.

Si no aparece la ventana emergente en absoluto, comprueba que las ventanas emergentes están habilitadas, dirigiéndote a Schedule Builder y, seleccionando a continuación el control deslizante Show description (mostrar descripción). Por último, ten en cuenta que las ventanas emergentes de Events Schedule solo aparecerán cuando tengan contenido adicional para mostrar.

... ¡Y publica tu clase!

Una vez que estés satisfecho con la información que has introducido, puedes publicar esta clase como haces con cualquier otra entrada de WordPress: haciendo clic en el botón Publicar.

Una vez hayas publicado al menos una clase, estarás listo para crear tu programación.

Construir y aplicar estilo a tu programación

En esta sección, crearemos y aplicaremos un estilo a una programación y, a continuación, añadiremos todas nuestras clases a ella.

  • En el menú izquierdo de WordPress, selecciona Schedule Builder.
  • Selecciona Add New.
  • Asigna un nombre descriptivo para tu programación.
  • Abre el menú desplegable How many days to show? (¿cuántos días para mostrar?) y elige cuántos días o semanas deseas incluir en este horario.
Open the How many days dropdown and specify how many days should be included in your schedule

1. Elegir un estilo de programación

El plugin Events Schedule incluye 13 estilos de programación distintos, así que elige el estilo que mejor se adapte a la información que quieras mostrar:

  • List styles (estilos de lista): Estos son estilos de lista básicos que muestran diferentes niveles de información. Elige entre Lista sin formato, Lista compacta o Lista amplia.
  • Weekly Schedule (horario semanal): Esto es similar a un calendario y es un buen ajuste para los horarios que cuentan con un gran número de clases repetidas.
  • Weekly Tabs (pestañas semanales): Esto divide las clases en pestañas, donde cada pestaña representa un día diferente.
  • Events Carousel (carrusel de eventos): Una pantalla de carrusel gráfico.
  • Daily Agenda (agenda diaria): Una vista de calendario simple.
  • Masonry Grid (cuadrícula Masonry): Una cuadrícula dinámica con imágenes.
  • Monthly Calendar (calendario mensual): Una vista de calendario mensual.
  • Timeline (línea de tiempo): Una simple visualización vertical de la línea de tiempo.
  • Single event styles (estilos de evento único): Aunque es menos ampliamente utilizado, Cover y Countdown muestran un único evento.

2. Añadir tus clases

A continuación, desplázate hasta Choose contents (elegir contenido) y selecciona todos los tipos de clase, ubicaciones e instructores que desees incluir en esta programación.

Solo las clases que tengan uno o varios de los valores del tipo de clase, ubicación o instructor seleccionados aparecerán en la programación publicada.

3. Valora la posibilidad de añadir algunos filtros

Si tu horario contiene gran cantidad de información, es posible que desees dar a los visitantes una manera sencilla de filtrar esta información.

Para añadir un filtro, desplázate hasta la sección Available Filters (filtros disponibles). Esta sección contiene las siguientes pestañas:

  • Class Types (tipos de clase)
  • Locations (ubicaciones)
  • Instructors (instructores)

Cada una de estas pestañas contiene todos los elementos individuales que has creado dentro de esa categoría, por ejemplo, mi pestaña Locations contiene los siguientes elementos: Cycling Studio (estudio de ciclismo), Floor 1 (planta 1), Main Room (habitación principal), Swimming Pool (piscina) y Yoga Studio (estudio de yoga).

Spend some time exploring the following tabs Class Types Locations and Instructors

Ve a cada pestaña y selecciona todos los elementos que desees incluir en tus filtros.

Una vez que estés satisfecho con tu selección, tendrás que activar el correspondiente control deslizante Show Filter… (mostrar filtro). Busca la sección Filter options (opciones de filtro) y, a continuación, habilita uno, algunos o todos los siguientes controles deslizantes:

  • Show Class Type Filter (mostrar filtro de tipo de clase)
  • Show Class Type Filter (mostrar filtro de ubicaciones)
  • Show Instructions Filter (mostrar filtro de instrucciones)

Si no habilitas el correspondiente control deslizante Show..., a continuación, el usuario no podrá filtrar en función del tipo de clase, ubicación y/o instructor, incluso aunque hayas seleccionado todas las casillas de verificación dentro de esa categoría.

Mientras estés aquí, es posible que también quieras habilitar el filtro Show Day of the Week Filter (mostrar día de la semana) y el filtro Show Time of the Day Filter (mostrar hora del día).

Puedes personalizar dónde aparecen los filtros en pantalla, mediante la sección Filters Position (posición de filtros) y determinar si van a aparecer como conmutadores (Show Filters as Switches) o en formato expandido (Show Filters Expanded).

Customise your filters including their positioning and whether they appear as switches or in an expanded format

A continuación, desplázate hasta la sección Labels (etiquetas) y especifica las etiquetas que deben aparecer en cada uno de los filtros. Por ejemplo, si has habilitado el filtro de tipo de clase, tendrás acceso a un campo Class Types Filter Label (etiqueta de filtro de tipos de clase), donde puedes escribir el texto que debe aparecer junto a este filtro.

Añadir tu programación a tu sitio web

Una vez estés satisfecho con la información que has introducido, desplázate hasta la parte superior de la pantalla y haz clic en Save (guardar).

El siguiente paso consiste en incrustar esta programación en tu sitio web de WordPress, que requiere que copies y pegues algún shortcode.

Coloca el cursor sobre el nombre de la programación, debería aparecer una línea de shortcode, con una estructura simple similar a [wcs-schedule id=1]. Cuando se te solicite, haz clic en Copy to clipboard (copiar al portapapeles). Ahora puedes pegar esta información en cualquier ubicación que admita shortcodes.

Hover over the schedules title to get access to its shortcode

Navega a la página de WordPress donde desees mostrar tu programación. Selecciona el botón More options (más opciones) de tres puntos y, a continuación, selecciona Edit as HTML (editar como HTML). Pega el shortcode en la página web y guarda los cambios. Esta programación aparecerá ahora como parte de tu página web.

A simple schedule using the Weekly Tabs style

¿Necesitas cancelar un evento?

Cada evento de tu programación estará establecido como Live (activo) de forma predeterminada. Sin embargo, puede haber ocasiones en las que necesites cancelar un evento, por ejemplo, si el instructor se va de vacaciones o de permiso de maternidad, o simplemente comunicó que está enfermo.

En lugar de eliminar un evento de la programación, puedes cambiar su estado a Cancelled (cancelado) para que aparezca atenuado, con una línea que lo atraviesa.

Cancelled events appear greyed-out with a line through it

Para cancelar un evento, simplemente selecciona Classes > All Classes (todas las clases) en el menú de la izquierda de WordPress. A continuación, elige la clase que desees cancelar y abre el menú desplegable Status (estado) y selecciona Cancelled (cancelado).

Como alternativa, si se trata de un evento periódico, puedes cancelarlo en un día concreto, sin cancelar todas las instancias de este. Abre el menú desplegable Status y elige Cancelled Dates (fechas canceladas). En el campo siguiente, especifica la fecha en la que se cancela este evento.

Si necesitas cancelar varias instancias de este evento, haz clic en Add Date (añadir fecha) y, a continuación, escribe otra fecha. Repite este proceso, tantas veces como sea necesario.

Crear un sistema automatizado de reservas y pagos

En este punto, has creado una programación y tal vez hayas añadido algunos botones de "llamada a la acción", como por ejemplo para el envío de un correo electrónico al instructor de la clase o la adición de un evento a iCal. Aunque un cliente potencial podría reservar su plaza por correo electrónico, si vas a aceptar reservas, con frecuencia es más fácil implementar un sistema automatizado de reserva y venta de entradas.

En esta última sección, te mostraré cómo crear y vender entradas virtuales para cada uno de tus eventos, e incluso a aceptar pagos directamente desde tu programación.

Existen a nuestra disposición una serie de plugins para la venta de tickets, pero Events Schedule está diseñado para integrarse con el popular plugin WooCommerce, así que es el que yo voy a usar a lo largo de esta última sección.

Instalar WooCommerce

Si aún no tienes WooCommerce instalado, sigue los siguientes pasos:

  • Selecciona Plugins en el menú de la izquierda de WordPress, y a continuación Añadir nuevo.
  • Busca WooCommerce.
  • Cuando localices el plugin, haz clic en Instalar.
  • Selecciona Activar.
  • Cuando se te solicite, inicia el asistente de configuración y, a continuación, sigue las instrucciones en pantalla para configurar un método de pago.

Una vez que WooCommerce esté en funcionamiento, estarás preparado para crear algunos tickets y empezar a aceptar pagos.

Crear entradas para tu clase

El primer paso consiste en crear un producto, que representará los tickets para un evento o clase específico.

En el menú de la izquierda de WordPress, selecciona Productos y a continuación Añadir nuevo. Asigna a este producto un nombre descriptivo, como "Billetes de natación" o "Reservas de aeróbic". Desplázate hacia abajo hasta la sección Datos del producto, abre el menú desplegable adjunto y, a continuación, seleccione Programar ticket. Ahora puedes elegir entre proporcionar un Virtual Ticket (ticket virtual) o un Downloadable Ticket (ticket descargable). Para mantener las cosas claras, yo voy a seleccionar Virtual Ticket.

Ahora haz clic en la pestaña General. Ingresa el Precio habitual de cada ticket. Además, para que Schedule Ticket funcione correctamente, tendrás que configurarlo para que quede Hidden (oculto) en el catálogo. Desplázate hasta la sección Publicar, busca Visibilidad del catálogo y, a continuación, haz clic en el enlace Editar que aparece junto a él. Selecciona Oculto, y a continuación pulsa Aceptar.

Dont forget to set your products Catalog visibility to Hidden

Por último, selecciona Publish (publicar).

Repite esto para cada ticket que desees ofrecer. Dependiendo de tu estructura de precios, puedes crear tickets independientes para cada evento, o puedes crear categorías de tickets, como tickets diurnos a precio completo y tickets nocturnos a mitad de precio.

Asignar tus entradas a una clase

Después de crear tus tickets, debes asignarlos a la clase correspondiente:

Selecciona Classes en el menú izquierdo de WordPress y selecciona la clase a la que quieras asignar algunos tickets. Desplázate hacia abajo hasta la sección Class Settings (configuración de clase), que debería contener una nueva pestaña denominada Tickets de WooCommerce. Selecciona esta ficha y, en el campo Capacity (capacidad), especifica el número total de tickets que están disponibles para esta clase. En Button label (etiqueta del botón), escribe el texto que debe mostrarse junto al botón de emisión de tickets, por ejemplo, Reserva ahora o Reserva tu plaza.

En Sold Out Label (etiqueta de tickets agotados), escribe el texto que debe aparecer cuando no queden más entradas disponibles a la venta. Si dejas este campo vacío, el botón Sold Out (agotadas) no aparecerá una vez se hayan vendido todos los tickets disponibles.

En WooCommerce Event Ticket, abre el menú desplegable y selecciona los tickets que creaste en el anterior paso. Una vez estés satisfecho con la información que has introducido, haz clic en Update (actualizar).

Ahora, cuando revises tu programación deberías ver que ha aparecido junto a tu clase un botón de venta de entradas. Haz un clic en este botón y serás dirigido a una pantalla donde podrás comprar un ticket para este evento.

WooCommerce integration lets you quickly and easily add purchasing functionality to your website

Puedes realizar un seguimiento de todas tus reservas, seleccionando Classes > Bookings (reservas) desde el menú de la izquierda de WordPress. Esta pantalla contiene información sobre cada clase, incluida la ocupación actual y la capacidad total de esa clase, además del nombre, la dirección de correo electrónico y el número de teléfono de cada persona que haya comprado un ticket para esta clase.

Ten en cuenta que solo las clases que tengan al menos una reserva aparecerán en esta página, ¡así que no te asustes si esta pantalla aparece en blanco!

Conclusión

En este artículo, te mostré cómo construir una programación para tu sitio WordPress, con botones de llamada a la acción, integración con Google Maps y un sistema completo de pago y venta de entradas.

Si estás interesado en crear tu propia programación interactiva, puedes adquirir el plugin Events Schedule WP Plugin desde CodeCanyon, o puedes consultar la documentación del plugin para obtener más información.