7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. WordPress

Muestra la Agenda de Cursos y Horarios con el Plugin Wordpress Calendar

Scroll to top
Read Time: 9 mins

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

Los sitios web a menudo necesitan dejarle saber a los usuarios sobre algún próximo evento, exhibiciones y clases. Listar la agenda de los próximos eventos le ayuda a cada uno a ahorrar tiempo y planear sus actividades.  Con un buen calendario que liste los eventos, tus usuarios podrán ver los eventos próximos junto a su hora, ubicación, disponibilidad y precio en un solo lugar.  Esto te ayuda a evitar darle respuesta a un montón de solicitudes repetitivas, y hace que los usuarios sean más propensos a comprar tiquetes para eventos. 

La utilidad de estos plugins para calendarios de eventos y agendas los hace muy populares entre los propietarios de los sitios web. Hay un montón de plugins gratuitos y de pago que pueden ayudarte a crear agendas y publicarlas en tu sitio web.  Una de las mejores es Timetable Responsive Schedule para Wordpress, disponible en CodeCanyon. En este tutorial, te mostraré cómo usar Timetable Responsive Schedule para crear una agenda semanal para enlistar diferentes cursos y sus detalles. 

Lo que construiremos: una Programación de Cursos

El plugin ofrece un montón de grandes características que se usarán cuando crees tu propia agenda de cursos. La imagen abajo muestra el resultado final que obtendrás tras este tutorial.

The course timetable well be buildingThe course timetable well be buildingThe course timetable well be building

Como lo sugiere el nombre del plugin, la programación que crearemos será responsiva y se verá genial en todos los dispositivos. El plugin también ofrece una destacada funcionalidad de booking. Esto significa que los usuarios podrán registrarse a los diferentes cursos haciendo clic en el mismo botón de la agenda.

Lo básico del plugin Timetable Responsive Schedule

En esta sección, simplemente cubriremos algunas de las bases que te ayudarán a entender cómo funciona el plugin.

Después de instalar el plugin, notarás que hay cuatro opciones de menú nuevas en el admin de tu Wordpress. Timetable, Timetable Bookings, Timetable Columns, Events. 

La opción de menú Timetable Columns se utiliza para especificar el contenido que va en el encabezado de nuestra tabla. Puede ser cualquier cosa que te guste. Por ejemplo, puedes crear columnas para los meses, días, fechas o lugares. 

La opción de menú Events contiene diferentes configuraciones que te ayudan a ajustar y crear eventos. Hay una opción para crear diferentes categorías para agrupar eventos.  Tal como la opción Timetable Columns, las categorías de eventos pueden tener diferentes valores con cualquier nombre que quieras. Por ejemplo, si el evento ocurre en diferentes lugares, podrías categorizarlos con ubicaciones. Si la agenda es para películas que se exhiben al mismo tiempo en diferentes cinemas, la categoría podría ser el género de la película.

No hay una forma correcta o incorrecta para fijar las columnas de la programación o las categorías de los eventos. Lo importante es agrupar los eventos de una manera organizada que le facilite a las personas encontrar rápidamente la información de los eventos que les gusta.

Ahora mismo, solo necesitamos conocer esas dos opciones de menú para crear nuestros eventos y categorizarlos. Hablaremos de las opciones faltantes más tarde.

Creando la Agenda de Cursos.

Luego de familiarizarnos con las bases, ahora podemos empezar a crear nuestra agenda responsiva. 

Primero, crearemos siete columnas -- una para cada día de la semana. Para ello, sencillamente ve a Timetable Columns > Agregar Nueva. Tan solo tendrás que llenar el campo de títulos de la columna y hacer clic en Publicar.  Esto agregará el día de la semana a la lista de columnas. Haz esto para cada uno de los siete días de la semana para que tengas siete columnas diferentes. 

Timetable ColumnsTimetable ColumnsTimetable Columns

Ahora es el momento de definir algunas categorías para nuestros cursos. Usaremos las asignaturas y categorías para nuestros cursos. Por ejemplo, en nuestro calendario los cursos de Álgebra y Estadística entrarán en la categoría Matemáticas. Del mismo modo, la Revolución Francesa y la Segunda Guerra Mundial entrarán en la categoría Historia.

Event CategoriesEvent CategoriesEvent Categories

Recuerda que puedes crear tus propias categorías en función de cómo quieras organizar los cursos. Como dije antes, aquí no hay nada más o menos correcto en términos absolutos. El objetivo es facilitar la búsqueda de la información.

Por último, podemos empezar a crear el calendario del curso que aparecerá en el sitio web. Sólo tienes que ir a Eventos > Añadir nuevo y empezar a rellenar todos los detalles. Parte de la información que se rellena solo se mostrará cuando los usuarios hagan clic en el enlace del evento para leer más información en detalle sobre él. Otra información aparecerá en el propio calendario.

Puedes comenzar rellenando el título y la descripción del curso. El título aparece en muchos lugares en forma de bocadillo contextual o "tooltip", también en la programación del curso, y en la página de detalles del curso. Trata de mantenerlo breve. La descripción solo aparecerá en la página de los detalles del curso.

Event Title DescriptionEvent Title DescriptionEvent Title Description

Hay un par de opciones debajo de la descripción como el Subtítulo y los colores para el fondo y el texto. El subtítulo solo aparece en la página de detalles y se encuentra justo bajo el título. En nuestro caso, lo usaremos para especificar el nombre del instructor que impartirá ese curso.

Event OptionsEvent OptionsEvent Options

Si no quieres que las personas hagan clic en el título del evento para ser dirigidos a la página de detalles del mismo, establece el valor de Deshabilitar la URL del horario del evento en Sí. Para nuestro tutorial lo dejaremos como No.

Ahora, estableceremos algún valor para los campos en la sección Horas de evento. Aquí, simplemente proporcionamos los detalles básicos del evento junto con la hora exacta en que tendrá lugar.

Event HoursEvent HoursEvent Hours

Selecciona uno de los días de la semana en el menú desplegable junto a la Columna calendario. Mostrará todas las columnas que creaste anteriormente. Los valores Hora de inicio y Hora final especifican cuándo comienzan y terminan las clases del curso. Debes especificarlos en formato de 24 horas sin añadir ningún AM o PM al final. Esto significa que las 9:00 AM tienen que especificarse como 09:00 y 2:00 PM tiene que especificarse como 14:00. No obstante, el formato final en el que aparece la fecha en el calendario todavía se puede configurar para mostrar otros formatos.

No tienes que rellenar ambos campos de descripción. El texto dentro de la Descripción 1 aparece antes del título del evento. El texto dentro de la Descripción 2 aparece después del título del evento. El texto dentro de Tooltip aparece como mensaje emergente contextual cuando los usuarios coloquen el cursor sobre el evento.

Establece el número de plazas disponibles indicando el número máximo de alumnos a los que se les permite asistir a una clase. Los usuarios podrán inscribirse en una clase siempre y cuando el total de estudiantes registrados esté por debajo del límite especificado.

Haz clic en el botón Añadir una vez hayas rellenado todos los detalles. Esto añadirá el evento a nuestro horario. Una vez que hayas agregado todos los horarios del evento, haz clic en el botón Actualizar situado en la parte superior.

Mostrar el horario en el sitio web

Para añadir la tabla de horarios en cualquier página o entradas de tu sitio web debes usar shortcodes. Los shortcodes para añadir el horario pueden llegar a ser bastante largos y complicados si se configuran un montón de opciones. Para asegurarte de que no cometes ningún error, el plugin viene con un generador de shortcodes al que puedes acceder yendo a Timetable > Generador de shortcode.

Debes crear un identificador único para cada horario que crees. En este caso, introduciremos el identificador course-schedule en el campo shortcode id.

En la pestaña Configuración principal, podemos establecer diferentes opciones para determinar lo que aparecerá dentro de nuestra tabla de programación para el curso. En Eventos, selecciona todos los cursos que has creado. En Categorías de eventos, selecciona todas las categorías cuyos eventos deseas mostrar en la programación. Puedes seleccionar días específicos para los que deseas mostrar la programación desde Columnas. Yo he seleccionado todos los días de la semana excepto el domingo.

Shortocode Generator EventsShortocode Generator EventsShortocode Generator Events

Permitiremos que nuestros usuarios filtren los cursos para que puedan ver mejor solo los cursos que les interesan. Establece el Estilo de filtro en Pestañas para mostrar las categorías de eventos como pestañas en la parte superior de la tabla. El texto dentro de la Etiqueta de filtro determina qué textos se deben mostrar a los usuarios cuando deseen ver la tabla de horarios sin filtrar. Lo estableceremos en Todos los cursos.

Shortcode Generator FiltersShortcode Generator FiltersShortcode Generator Filters

Estas son las opciones más importantes en la sección Configuración principal. Puedes dejar el resto de los campos en sus valores predeterminados. Ahora, haz clic en el botón Guardar en la página Generador de shortcode y copia el shortcode generado.

Pega el shortcode copiado en cualquier página o entrada donde desees que aparezca la tabla de horarios. Deberías obtener un resultado similar a la siguiente imagen.

Course Schedule Final ResultCourse Schedule Final ResultCourse Schedule Final Result

Ideas finales

En este tutorial, hemos aprendido a usar el plugin Timetable Responsive Schedule para crear una tabla con programación horaria para cursos. El plugin viene con una gran cantidad de características que lo convierten en una solución para mostrar la programación perfecta para muchos proyectos. Usamos el plugin en este tutorial para crear un calendario del curso, pero puedes usarlo para muchas otras cosas como para planificar y reservar, vender entradas de cine en diferentes salas de cine, o mostrar el horario de diferentes exposiciones en distintos lugares de la ciudad durante la semana.

Puedes leer sobre todas las características del plugin en su página de descripción. La compra del plugin te dará acceso a seis meses de soporte gratuito y actualizaciones de por vida. ¿Cómo planeas usar este plugin? Cuéntanoslo en la sección de comentarios que viene a continuación.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.