Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Despliega un calendario de eventos con un complemento para calendarios gratuito de WordPress

by
Difficulty:BeginnerLength:MediumLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

Muchos negocios necesitan compartir calendarios de eventos con sus clientes. Por ejemplo, un restaurante puede usar un calendario de eventos para anunciar eventos musicales especiales o menús para días festivos. Del mismo modo, las escuelas pueden usar calendarios de eventos en sus sitios web para informar a los estudiantes y maestros sobre las próximas actividades escolares relacionadas con los deportes, exámenes u otros eventos.

Los complementos para calendarios de eventos también son útiles para las personas que desean realizar un seguimiento de las diferentes tareas que se supone deben hacer. Por ejemplo, puedes usar un complemento para calendarios de eventos para marcar reuniones y eventos importantes, como los cumpleaños de amigos y familiares.

En este tutorial aprenderás cómo usar el complemento gratuito de gestión de eventos My Calendar de WordPress para crear eventos. El complemento tiene muchas funciones sorprendentes que usaremos en el tutorial.

Lo que estaremos creando

Nuestro objetivo en este tutorial será crear un calendario que permita a una empresa marcar todos los eventos que gestiona, como fiestas, bodas, exhibiciones de arte, etc. Ellos podrán ver todos los eventos pasados y futuros.

My Calendar Final Result

Crearemos los eventos con un código de color para que sea fácil identificarlos. Los usuarios podrán hacer clic en cualquier categoría de evento específica y ver solamente los eventos que coincidan en el calendario. Al hacer clic en cualquier evento aparecerá una ventana emergente con toda la información básica de dicho evento, como su hora y lugar.

Vamos a comenzar instalando el complemento. Luego cambiaremos algunas configuraciones para modificar la entrada y la salida. Después de eso vamos a crear algunas categorías de eventos, a agregar algunas ubicaciones para ellos y finalmente a agregar los eventos en sí a nuestro calendario.

Además, es muy posible que quieras realizar algunos cambios en la apariencia del calendario de eventos para que se ajuste al resto de tu sitio web. Por lo tanto, vamos a añadir algunas de nuestras propias reglas CSS en el último paso para realizar algunos cambios cosméticos en el calendario.

Creando un calendario de eventos

Preparando las cosas

El primer paso para crear nuestro calendario de eventos sería instalar el complemento My Calendar. Una vez que hayas instalado y activado el complemento, ve a My Calendar > Settings (My Calendar > Configuraciones) en el panel de administración. Ahí verás una variedad de pestañas.

Haz clic en General y luego especifica el ID de la página en la que quieras que aparezca el calendario de eventos. En nuestro caso es 118. Este paso es opcional y el complemento creará automáticamente una página para el calendario de eventos por ti cuando publiques tu primer evento. Sin embargo es bueno saber cómo desplegar el calendario de eventos en una página específica.

General Settings

Cada vez que generes un nuevo evento con este complemento tendrás que escribir algunos detalles sobre el mismo. Esto puede incluir muchas cosas, como la ubicación del evento, una descripción breve, etc. No todos estos campos de entrada están activados de forma predeterminada. Por lo tanto, ahora debes dirigirte a la pestaña Input (Entrada) y marcar los campos que quieras mostrar, como se ve en la siguiente imagen.

Input Settings

Probablemente hayas notado que hay muchos botones y menús desplegables en la página del calendario de eventos además del calendario en sí. El orden en el que se muestran estos botones se controla mediante ciertas configuraciones en la pestaña Output (Salida). Puedes arrastrar los elementos hacia arriba y abajo para mostrarlos en un orden específico. Simplemente arrastra un elemento debajo de la fila Hide (Ocultar) para evitar que se muestre.

Output Settings

Es posible controlar la información que se muestra a los usuarios en la ventana emergente una vez que hacen clic en un evento al seleccionar algunas casillas de verificación dentro de Single Event Details (Detalles de evento individual).

Output Settings

Creando categorías de eventos

Ahora que hemos configurado todo, es hora de crear contenido real para nuestro calendario de eventos.

Vamos a comenzar agregando algunas categorías que se utilizarán para marcar diferentes eventos. Este complemento ofrece a los usuarios la opción de ver solamente los eventos de categorías específicas. Los eventos pueden filtrarse de esta manera una vez que se les hayan asignado categorías diferentes.

Para agregar una categoría nueva al calendario, simplemente ve a My Calendar > Manage Categories (My Calendar > Gestionar categorías) y luego especifica un nombre y un color de etiqueta para la categoría. También puedes elegir mostrar un icono antes de la categoría seleccionando uno del menú desplegable Category Icon (Icono de categoría).

Manage Categories

Una vez que hayas agregado todos los detalles de una categoría, haz clic en el botón Add Category (Agregar categoría) para añadir la categoría al calendario de eventos.

Agregando ubicaciones de eventos

Cualquier evento que organices ocurrirá en algún lugar. El complemento hace un gran trabajo cuando se trata de especificar las ubicaciones de diferentes eventos.

Puedes añadir una nueva ubicación al complemento del calendario yendo a My Calendar > Add New Location (My Calendar > Agregar nueva ubicación). La siguiente página contendrá muchos campos de entrada que solicitan diferentes detalles de la ubicación. Esto incluye los datos habituales como la dirección, ciudad, código postal y país, etc. No es necesario que rellenes todos estos valores. Algunos de estos detalles pueden omitirse.

Asegúrate de haber escrito un nombre para la ubicación en la parte superior. Esto te ayudará a identificar fácilmente estas ubicaciones en el menú desplegable al crear eventos.

En este ejemplo agregaremos una ubicación para una exhibición de arte que se llevará a cabo en Kentucky, EE. UU. La dirección es ficticia, pero te dará una idea sobre cómo escribir tus propios detalles.

Add Location

El complemento le dará a los usuarios un vínculo a Google Maps con la dirección que especificaste. Esto permite que sea más fácil para las personas averiguar exactamente en dónde va a ocurrir el evento. Puedes editar cualquier ubicación que agregues al complemento haciendo clic en My Calendar > Manage Locations (My Calendar > Gestionar ubicaciones).

Agregando eventos

Ahora podemos comenzar a agregar eventos a nuestro calendario. Para añadir un evento, simplemente ve a My Calendar > Add New Event (My Calendar > Agregar evento nuevo).

Ahora escribe el título y la descripción del evento. El título se muestra entre las fechas en el calendario de eventos. La descripción será mostrada en la página de descripción del evento cuando los usuarios hagan clic en el vínculo Read More (Leer más) en la ventana emergente. Configura la categoría del evento como Exhibit (Exhibición) usando el menú desplegable.

Event Details Description

Ahora puedes especificar una fecha y una hora para el evento. Es muy posible que al menos algunos de los eventos que agregues al calendario sean eventos recurrentes. En este caso tomaría mucho tiempo agregar todos los eventos repetidos al calendario uno por uno.

Para facilitarte las cosas, el complemento My Calendar te da la opción de especificar el patrón de repetición de un evento. Esto significa que puedes especificar cuántas veces se repetirá un evento y la frecuencia con la que se repetirá.

Recurring Event Details

Al principio del tutorial marcamos la casilla para habilitar un campo de entrada en los eventos para escribir una descripción corta. Esto nos permite proporcionar un breve resumen del evento, que se mostrará en la ventana emergente cada vez que un usuario haga clic en el evento del calendario.

Short Event Description

Puedes especificar una ubicación para el evento en la parte inferior de la página Add New Event (Agregar evento nuevo). Simplemente elige Art Exhibit (Kentucky) para este ejemplo. Después de eso, haz clic en el botón Publish (Publicar) en la parte superior o inferior de la página.

Cambia el estilo del calendario de eventos

Después de seguir todos los pasos de este tutorial, tu calendario de eventos se verá como el de la siguiente imagen. Si su estilo es diferente al de la siguiente imagen, simplemente ve a My Calendar > Style Editor (My Calendar > Editor de estilo) y luego elige el archivo twentyeighteen.css del menú desplegable en la barra lateral como la hoja de estilo principal para el calendario. Hay muchos otros temas que puedes aplicar al calendario. Solamente elige el que te guste más. Algunos de ellos, como inherit.css, tienen como objetivo proporcionar el estilo más simple posible para que la mayoría de las reglas de estilo de tu tema se apliquen automáticamente al calendario.

Event Calendar Unstyled

La página del editor de estilo muestra todas las reglas CSS del archivo seleccionado que se aplican al calendario. Puedes realizar todo tipo de cambios aquí y estos se verán reflejados en la página del calendario de eventos.

Por ahora, simplemente vamos a ajustar el espaciado y las fuentes que se aplican a los distintos elementos, como el título de la tabla, el encabezado y la leyenda para las categorías en la parte inferior. También agregaremos algunas de nuestras propias reglas de estilo para ajustar la apariencia del calendario a nuestro gusto.

Estas son todas las reglas que agregaremos a nuestro calendario de eventos. Simplemente colócalas en la parte inferior del editor de estilo y los cambios se reflejarán en la página del calendario de eventos una vez que hagas clic en el botón Save Changes (Guardar cambios) de la parte inferior.

Ahora ve a la página del calendario de eventos y haz clic en alguno de los eventos que agregaste. Esto deberá abrir una bonita ventana emergente que muestra todos los detalles básicos del evento, como la hora, ubicación y una descripción breve.

Event Calendar Styled

Consideraciones finales

En este tutorial aprendimos cómo usar el complemento My Calendar para crear un calendario de eventos básico para nuestro sitio web. El complemento permite que sea realmente fácil crear y agregar elementos junto con una descripción simple.

Sin embargo aún faltan un par de cosas en el complemento, como widgets y una página de descripción más avanzada que proporcione características adicionales, tales como opciones de pago y la posibilidad de que los usuarios puedan agregar reseñas sobre un evento. El complemento también es un poco difícil de estilizar. Si quieres usar un complemento para calendarios de eventos más avanzado en tu sitio web, deberías echar un vistazo a los complementos para calendarios de eventos de WordPress en CodeCanyon.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.