Knowledgebase

Check the knowledge base articles to get a jump start on your integrations, modifications, and all around user questions. If you don’t find what you’re looking for hit the help desk.

Search Knowledgebase

Guía para Personalizar los Plugins

Looking for the English version? Click here

¿Estás buscando una forma directa de ajustar la apariencia del calendario? Revisa nuestra integración con el personalizador de tema — brinda una forma fácil y rápida de modificar varios aspectos de la apariencia del calendario. Si necesitas hacer un cambio algo más complejo, continúa leyendo…

 

Personalizando Plantillas

The Events Calendar viene con varios archivos de plantillas que determinan la visualización y el funcionamiento del plugin; las llamamos vistas. Además de poder crear nuevas plantillas, se pueden sobrescribir estos archivos con otros personalizados en tu propio tema.

Es importante no editar los archivos de las vistas directamente en el plugin. Se deben primero copiar en el tema y luego editarlos ahí. Esto asegura que cualquier modificación que hagas no sea eliminada al actualizar el plugin. (También se recomienda utilizar un tema hijo y copiarlo dentro del mismo. De esta manera tampoco se verá afectado al actualizar el tema padre). The Events Calendar se asegurará de que estos archivos modificados, dentro de las carpetas correspondientes, sean utilizados en lugar de los archivos originales del plugin.

Así es como se hace:

1. Haz una copia de las plantillas que quieras modificar

Los archivos de las vistas se encuentran dentro del directorio del plugin /src/views/. Por ejemplo:

  • The Events Calendar archivos de plantillas:
    /wp-content/plugins/the-events-calendar/src/views/
  • Events Calendar Pro archivos de plantillas:
    /wp-content/plugins/events-calendar-pro/src/views/
  • Community Events add-on archivos de plantillas:
    /wp-content/plugins/the-events-calendar-community-events/src/views/
  • Community Tickets add-on archivos de plantillas:
    /wp-content/plugins/the-events-calendar-community-events-tickets/src/views/
  • Event Ticket add-on archivos de plantillas:
    /wp-content/plugins/event-tickets/src/views/
  • Event Ticket Plus add-on archivos de plantillas:
    /wp-content/plugins/event-tickets-plus/src/views/
  • Eventbrite Tickets add-on archivos de plantillas:
    /wp-content/plugins/the-events-calendar-eventbrite-tickets/src/views/
  • Filter Bar add-on archivos de plantillas:
    /wp-content/plugins/the-events-calendar-filterbar/src/views/
  • iCal Importer add-on archivos de plantillas:
    /wp-content/plugins/the-events-calendar-importer-ical/src/views/

También puedes modificar la plantilla para eventos seleccionada. Para esto, primero encuentra la plantilla estás usando yendo a Eventos → Ajustes → Visualización dentro del wp-admin de tu sitio, y mira la opción en Plantilla para eventos. Si tienes seleccionada la Plantilla de eventos predeterminada, el plugin va a utilizar la plantilla /wp-content/plugins/the-events-calendar/src/views/default-template.php. Puedes modificar la estructura de esta plantilla haciendo una copia de la misma y pegándola dentro de una carpeta /tribe-events en tu tema.

Todas las opciones adicionales de Plantilla para eventos, utilizan una de las plantillas para páginas disponibles en tu tema (page.php, full-width.php, etc.), que también puedes editar.

Dependiendo de la Plantilla para eventos que hayas elegido, necesitarás usar estos condicionales que te ayudarán a determinar si mostrar o no cierta marcación en cada una de las páginas de los eventos.

2. Crear una nueva carpeta dentro de tu tema

  • Abrir la carpeta de tu tema que se encuentra en wp-content/themes/tu-tema/
  • Crear una nueva carpeta llamada /tribe-events. Esta será la carpeta padre que contendrá todas las sobrescrituras de las plantillas.
  • Crear una nueva carpeta dentro de /tribe-events para cada plugin específico:
    • Community Events: /tribe-events/community/
    • Events Calendar Pro: /tribe-events/pro/
    • Event Tickets: /tribe-events/tickets/
    • Filter Bar: /tribe-events/filter-bar/

3. Coloca la plantilla copiada que deseas modificar dentro de la correspondiente carpeta dentro del directorio de tu tema

Por ejemplo, si realizaste una copia del siguiente archivo:

  • /wp-content/plugins/the-events-calendar/single-event.php

…entonces deberás colocar esa copia dentro de la carpeta /tribe-events creada dentro de tu tema en el paso 2.

De manera similar, si creaste una copia de la plantilla vista de foto en Events Calendar PRO:

  • /wp-content/plugins/events-calendar-pro/photo.php

…entonces deberías pegar esa copia dentro de la carpeta correspondiente dentro de tu tema:

  • /wp-content/themes/[tu-tema]/tribe-events/pro/

Ahora que las plantillas están en tu tema, puedes modificar el código para que se adapte a tus necesidades y eso sobreescribirá las plantillas del plugin.

Ejemplo de Personalización

Veamos un ejemplo de como sería una personalización muy simple de una vista. Esto debería darte una idea del flujo de trabajo.

De manera predeterminada, The Events Calendar muestra solo el nombre del lugar del evento por debajo de la fecha de cada evento. Así es como se ve:

KB themers guide 1

Pero, ¿qué pasa si quisiéramos mostrar el organizador del evento? Por ejemplo, en cambio tienes algo que luce de la siguiente manera:

KB themers guide 2

Así es como se hace:

    1. Copia /wp-content/plugins/the-events-calendar/src/views/list/single-event.php a /tu-tema/tribe-events/list/single-event.php (por supuesto, reemplazar /tu-tema con el nombre actual de la carpeta de tu tema)

    2. Edita /tu-tema/tribe-events/list/single-event.php y agregar el siguiente código debajo de venue details (detalles del evento):

      <p>Organized by: <?php echo tribe_get_organizer(); ?></p>
    3. Guarda, y listo!

Todas las personalizaciones de las vistas siguen este mismo patrón: copiar el archivo que deseas editar dentro de la carpeta de tu tema, luego personalizar el archivo copiado. Esto protege las modificaciones que hagas al actualizar The Events Calendar y sus agregados.


⚠️ Por favor Recuerda! Si cambias tu tema de WordPress, necesitarás copiar todas las plantillas personalizadas a la carpeta del tema nuevo. Y, si realizas una actualización automática del tema con la carpeta /tribe-events adentro, es probable que pierdas esa carpeta y todos los archivos ya que no es una carpeta por defecto del tema. Asegúrate de realizar una copia de seguridad de todos estos archivos con frecuencia!

Ahora estás listo para personalizar The Events Calendar.

Vistas & Plantillas

The Events Calendar

La carpeta padre se encuentra en:
/wp-content/plugins/the-events-calendar/src/views/

Vista de evento individual (Single Event View)

  • single-event.php — Usada para mostrar los eventos individuales
  • modules/address.php — Muestra la dirección del lugar del evento
  • widgets/calendar-widget.php
  • modules/meta.php — Usada dentro de single-event.php para mostrar la meta información de un evento
  • modules/meta/details.php — Agrega información como la hora de comienzo y finalización dentro de la sección de meta información
  • modules/meta/map.php — Muestra el mapa dentro de la sección meta
  • modules/meta/organizer.php — Agrega información del organizador a la sección meta
  • modules/meta/venue.php — Agrega información del lugar a la sección meta

Vista del Día (Day View)

  • day.php — Contenedor para la plantilla de vista en Día, incluye la tribe bar y la plantilla del contenido de Día
  • day/content.php — Plantilla del contenido principal, contiene el título, incluye la plantilla de navegación, el bucle de eventos y el pie. Esta es la plantilla que se usa para devolver las llamadas por ajax de la navegación y de los resultados de los filtros en la vista de lista
  • day/nav.php — Contiene los enlaces de anterior y siguiente
  • day/loop.php — Contiene la estructura para el bucle de eventos. Incluye la plantilla de evento individual
  • day/single-event.php — Plantilla del evento individual en la vista de Día.

Vista en Listado (List View)

  • list.php – Contenedor para la plantilla de vista en Lista, incluye la tribe bar y la plantilla del contenido de Lista
  • list/content.php – Plantilla del contenido principal para la vista en Lista, contiene el título, incluye la plantilla de navegación, el bucle de eventos, y el pie. Esta es la plantilla que se usa para devolver las llamadas por ajax de la navegación y de los resultados de los filtros en la vista de lista.
  • list/nav.php – Contiene los enlaces de anterior y siguiente
  • list/loop.php – Contiene la estructura para el bucle de eventos. Incluye la plantilla de evento individual
  • list/single-event.php – Plantilla del evento individual en la vista en Lista

Vista Mes (Month View)

  • month.php – Contenedor para la plantilla de vista de Mes, incluye la tribe bar y la plantilla del contenido del Mes
  • month/content.php -Plantilla del contenido principal para la vista de Mes, contiene el título, incluye la plantilla de navegación, el bucle de la grilla, y el pie. Esta es la plantilla que se usa para devolver las llamadas por ajax cuando se navega y se usan los filtros en la vista de Mes
  • month/mobile.php – Plantilla usada para mostrar la vista de mes en la version para móvil.
  • month/nav.php – Contiene los enlaces de anterior y siguiente
  • month/loop-grid.php – Contiene la estructura del bucle de todos los días del mes, incluye la plantilla del día individual
  • month/single-day.php – Contiene el número del día y el bucle de los eventos para cada día, incluye la plantilla individual del evento.
  • month/single-event.php – Contiene un evento individual en la vista del mes
  • month/tooltip.php – Construye el efecto pop-over cuando se pasa el cursor sobre un día de la vista del Mes. Ten en cuenta que esta plantilla utiliza el sistema de plantilla en Javascript

Módulos (Modules)

  • modules/bar.php – La navegación principal del calendario
  • modules/map.php – Muestra el Mapa embebido de Google en la vista del evento individual y el archivo de Lugar

Eventos Embebidos (Embedded Events)

  • embed.php – Contiene la plantilla base para una entrada embebida
  • embed/content.php – La plantilla de contenido para la vista embebida
  • embed/cost.php – El plantilla de costo para la vista embebida
  • embed/footer.php – La plantilla del pie para la vista embebida
  • embed/image.php – La plantilla de la imagen principal para la vista embebida
  • embed/meta.php – La plantilla para mostrar la información meta para la vista embebida
  • embed/schedule.php -La plantilla para los detalles de horarios para la vista embebida
  • embed/venue.php – La información del lugar para la vista embebida

Widgets

  • widgets/list-widget.php – Plantilla para el widget de lista de eventos incluido en la versión gratuita del plugin

Events Calendar PRO

La carpeta padre se encuentra en:
/wp-content/plugins/events-calendar-pro/src/views/

Vista de evento individual (Single Event View)

  • modules/meta/additional-fields.php – Agrega campos adicionales a la sección meta (ver modules/meta.php, más adelante)
  • related-events.php – Plantilla para mostrar los eventos relacionados dentro de la vista individual del evento

Vista en Mapa

  • map.php – Contiene el contenedor global de la vista en Mapa, incluye la plantilla para el contenedor de Google Map.
  • map/gmap-container.php – Contiene el elemento HTML vacío donde se inserta el mapa de Google usando javascript
  • map/content.php – Plantilla del Contenido principal para la vista en Mapa. Contiene el título, incluye la plantilla de navegación, el bucle de eventos, y el pie. Esta es la plantilla que se usa para devolver las llamadas por ajax cuando se navega y se usan los filtros en la vista de Mapa
  • map/nav.php – Contiene los enlaces de anterior y siguiente
  • map/loop.php – Contiene la estructura para el bucle de los eventos. Incluye la plantilla individual del evento
  • map/single-event.php – Plantilla para un evento individual dentro de la vista en Mapa

Vista Foto

  • photo.php – Contenedor para la plantilla de la vista Foto, incluye la tribe-bar y la plantilla del contenido de Foto
  • photo/content.php – Plantilla del Contenido principal. Contiene el título, incluye la plantilla de navegación, el bucle de eventos, y el pie. Esta es la plantilla que se usa para devolver las llamadas por ajax cuando se navega y se usan los filtros en la vista de Foto
  • photo/nav.php – Contiene los enlaces de anterior y siguiente
  • photo/loop.php – Contiene la estructura para el bucle de los eventos. Incluye la plantilla individual del evento
  • photo/single-event.php -Plantilla para un evento individual dentro de la vista Foto

Vista Semanal

  • week.php – Contenedor para la plantilla de la vista Semanal, incluye la tribe-bar y la plantilla del contenido de Semana
  • week/content.php – Plantilla del Contenido principal. Contiene el título, incluye la plantilla de navegación, el bucle de eventos, y el pie. Esta es la plantilla que se usa para devolver las llamadas por ajax cuando se navega y se usan los filtros en la vista Semanal
  • week/loop-grid.php – Contenedor del bucle de la grilla, contiene los encabezados de los días en la grilla semanal
  • week/loop-grid-allday.php – Contiene la estructura de columnas para el bucle de los eventos de día completo. Incluye la plantilla de los eventos de día completo
  • week/loop-grid-hourly.php – Contiene la estructura de columnas para el bucle de los eventos por hora. Incluye la plantilla de los eventos por hora
  • week/nav.php – Contiene los enlaces de anterior y siguiente para navegar entre semanas
  • week/tooltip.php – Plantilla para la caja de información que se expande al pasar el cursor por encima del evento

Lugares y Organizadores

  • single-organizer.php – Usado para listar los próximos eventos relacionados a un organizador individual. Utiliza la plantilla de lista de eventos que se usa para mostrar cualquier evento próximo
  • single-venue.php — Equivalente a la plantilla single-organizer.php pero corresponde para los lugares de eventos. También utiliza la plantilla de lista de eventos que se usa para mostrar cualquier evento próximo.

Widgets

  • widgets/countdown-widget.php – Contiene el widget de cuenta regresiva
  • widgets/list-widget.php – Contiene el widget de lista de eventos incluido en el plugin premium Events Calendar PRO: Esta sobrescribe cualquier plantilla existente en widgets/list-widget.php (por fuera del subdirectorio pro). Ten en cuenta que la plantilla será respetada hasta que sea eliminada o una nueva sea creada dentro del subdirectorio pro
  • widgets/mini-calendar-widget.php – Contenedor para el widget mini calendario. Incluye la plantilla para la grilla del mini calendario y la plantilla para la lista del mini calendario
  • widgets/mini-calendar/grid.php – Contiene la parte de la grilla (calendario mensual) del widget mini calendario. Incluye la plantilla de cada día
  • widgets/mini-calendar/list.php – Este archivo configura la estructura del bucle de la lista
  • widgets/mini-calendar/single-day.php – Contiene un día dentro del widget mini calendario. Incluye la plantilla individual de un evento.
  • widgets/this-week-widget.php – Contiene el widget Eventos de la Semana
  • widgets/venue-widget.php – Contiene el widget de Eventos por lugar

Events Tickets

La carpeta padre se encuentra en: /wp-content/plugins/event-tickets/src/views/

  • shortcodes/my-attendance-list-logged-out.php – Muestra el mensaje que debes tener iniciada la sesión para ver la lista de eventos a los que vas a asistir
  • shortcodes/my-attendance-list.php – Muestra la lista de eventos a los que vas a asistir
  • tickets/attendees-email.php –  La plantilla para el email con la lista de asistentes cuando se integra con un plugin de ecommerce (como WooCommerce)
  • tickets/email.php – Plantilla del email que los clientes reciben cuando adquieren un ticket para un evento. Este es el email que las personas utilizan en la puerta del evento para ingresar
  • tickets/orders.php – La plantilla para mostrar las ordenes de compra realizadas por el cliente
  • tickets/orders-link.php – El enlace generado para el usuario para ver todas las ordenes de compra
  • tickets/orders-rsvp – Esta plantilla genera el formulario para un ticket RSVP
  • tickets/rsvp.php – El formulario que se muestra a los usuarios en un evento para realizar un RSVP. Se muestra en la vista individual del evento si el evento tiene habilitada las opciones de RSVP

Events Tickets Plus

La carpeta padre se encuentra en: /wp-content/plugins/event-tickets-plus/src/views/

  • attendees-list.php – La plantilla para la lista pública de asistentes. Ten en cuenta que no se necesita ninguna subcarpeta para esta plantilla y puede ir directamente en la carpeta tribe-events
  • login-to-purchase.php – Genera un enlace que se muestra a los usuarios cuando deben tener iniciada una sesión antes de poder comprar tickets
  • meta.php – La plantilla que muestra los campos de información del asistente que han sido creados para un ticket y que serán completados cuando se compra. Ten en cuenta que no se necesita ninguna subcarpeta para esta plantilla y puede ir directamente en la carpeta tribe-events
  • meta/checkbox.php – La plantilla utilizada para mostrar las opciones de un campo casilla (checkbox) que serán importadas por meta.php
  • meta/number.php – La plantilla utilizada para mostrar los campos numéricos que serán importadas por meta.php
  • meta/radio – La plantilla utilizada para mostrar las opciones de un campo radio que serán importadas por meta.php
  • meta/select – La plantilla utilizada para mostrar las opciones de un campo desplegable (select) que serán importadas por meta.php
  • meta/text – La plantilla utilizada para mostrar los campos de texto que serán importadas por meta.php
  • tickets-plus/orders-edit-meta.php – Genera los campos meta para editar en la orden
  • tickets-plus/orders-tickets.php – La lista de ordenes de tickets
  • eddtickets/tickets.php – La tabla de tickets de Easy Digital Downloads con el botón para comprar en la página del evento. Se muestra en la página individual del evento, si el evento tiene tickets de EDD para vender
  • wootickets/tickets.php – La tabla de tickets de WooCommerce con el botón para comprar en la página del evento. Se muestra en la página individual del evento, si el evento tiene tickets de WooCommerce para vender.

Community Events

La carpeta padre se encuentra en: /wp-content/plugins/the-events-calendar-community-events/src/views/

  • community/blank-comments-template.php
  • community/default-placeholder.php
  • community/edit-event.php – La plantilla para añadir un nuevo evento de la comunidad
  • community/edit-organizer.php – La plantilla para editar organizadores de los eventos de la comunidad
  • community/edit-venue.php – La plantilla para editar lugares de los eventos de la comunidad
  • community/email-template.php — La plantilla usada por las alertas de la comunidad por email
  • community/event-list.php – La plantilla para listar los eventos añadidos por un usuario de la comunidad
  • community/modules/captcha.php – Genera el campo captcha en el formulario de añadir evento
  • community/modules/cost.php – Genera los campos de precio en el formulario de añadir evento
  • community/modules/custom.php – Esta es usada para agregar un metabox al formulario de añadir evento y permitir que el usuario complete campos personalizados
  • community/modules/datepickers.php – Esta es usada para agregar el metabox dentro del formulario de añadir evento y permite seleccionar el día y hora del evento
  • community/modules/delete.php – Esto es utilizado para eliminar un evento añadido por un usuario
  • community/modules/header-links.php – Los enlaces en el encabezado del formulario de editar evento
  • community/modules/image.php – Genera el campo para subir una imágen en el formulario de añadir evento
  • community/modules/organizer-fields.php – Esta es usada para editar los detalles individuales de los organizadores (teléfono, email, etc)
  • community/modules/organizer-multiple.php – La plantilla para construir multiples organizadores en un mismo evento. Para evitar duplicación de código, esta plantilla reside en The Events Calendar > the-events-calendar/src/admin-views/linked-post-section.php.
  • community/modules/organizer.php – Esta es usada para agregar el metabox que permite seleccionar o crear un organizador de un evento en el formulario de añadir evento
  • community/modules/recurrence.php – Esta es usada para agregar el metabox al formulario de añadir eventos que permite crear eventos recurrentes
  • community/modules/taxonomy.php – Genera los campos de taxonomía en el formulario de añadir evento
  • community/modules/venue.php – Esta plantilla se usa para agregar al formulario de añadir eventos el metabox que permite seleccionar o crear un lugar del evento. Esta también se usa para la pantalla de editar lugar, por lo que ten en cuenta que los cambios que realices se verán en ambas lugares
  • community/modules/website.php – Genera los campos de web del evento al formulario de añadir eventos

Community Tickets

La carpeta padre se encuentra en: /wp-content/plugins/the-events-calendar-community-events-tickets/src/views/

  • community-tickets/modules/email-item-event-details.php – El enlace al evento desde la página de detalles de la orden
  • community-tickets/modules/orders-report-after-organizer.php – Muestra la dirección de email de Paypal asociada al organizador, después del nombre del organizador
  • community-tickets/modules/payment-options.php – La plantilla que muestra las opciones de pago del plugin
  • community-tickets/modules/tickets.php – Genera las configuraciones de los tickets en el formulario de añadir evento

Eventbrite Tickets

La carpeta padre se encuentra en: /wp-content/plugins/the-events-calendar-eventbrite-tickets/src/views/

  • eventbrite/add-existing-event.php – Muestra el evento de Eventbrite existente (campos del wp-admin)
  • eventbrite/eb-admin-notices.php – Genera los mensajes de Eventbrite en la pantalla de editar evento en el admin
  • eventbrite/eventbrite-events-table.php – Muestra el evento de Eventbrite existente en el metabox del evento
  • eventbrite/eventbrite-meta-box-extension.php – Muestra el evento de Eventbrite existente en el metabox del editor de evento
  • eventbrite/import-eventbrite-events.php – Importa eventos desde Eventbrite en el formulario del admin
  • eventbrite/hooks/ticket-form.php – Este archivo contiene la lógica del hook para crear una vista efectiva del módulo de vista de dirección
  • eventbrite/modules/ticket-form.php – Esta vista contiene los filtros necesarios para crear una vista efectiva del módulo de ticket

Filter Bar

La carpeta padre se encuentra en: /wp-content/plugins/the-events-calendar-filterbar/src/views/

  • filter-bar/filter-view-horizontal.php – Esta contiene los hooks para generar la barra de filtros en disposición horizontal
  • filter-bar/filter-view-vertical.php – Esta contiene los hooks para generar la barra de filtros en disposición horizontal

Personalizando los Estilos

Hay dos formas distintas de personalizar los estilos de las páginas de eventos:

  • Agregando estilos personalizados a las hojas de estilos por defecto – Este método es el mejor cuando solo tienes que realizar unos pocos cambios a los estilos de las páginas de eventos
  • Reemplazando las hojas de estilo por defecto por unas propias – Este método es el mejor cuando quieras cambiar la mayoría de los estilos de las páginas de eventos.

Agregando Estilos Personalizados

The Events Calendar ofrece 3 opciones de estilo por defecto para elegir:

  • Estilos Básicos – Incluye solo el css suficiente para lograr los diseños complejos como el calendario y la vista semanal
  • Estilos Completos – Diseños más detallados, dependen fuertemente de las tipografías y colores de tu tema
  • Estilos Tribe Events – Una apariencia completamente estilizada y diseñada para tus páginas de eventos

De manera similar a como los archivos de plantillas son sobrescritos, puedes agregar tus propios archivos dentro de tu tema en una carpeta llamada tribe-events/ para cargar tus propias hojas de estilo. Esto te permite cargar una hoja de estilos en tu tema que solo contenga tus propios estilos que necesites sin tener que duplicar uno de los nuestros como punto de partida, o usando @import. Ten en cuenta que cuando agregas tu propia hoja de estilos dentro de la carpeta tribe-events, esta será cargada además de nuestros estilos. Esto es diferente a colocar plantillas personalizadas en esa carpeta, que reemplazan nuestras plantillas.

Cargando Estilos Personalizados para The Events Calendar

  • Para cargar estilos personalizados para las vistas y elementos principales, crea una hoja de estilos que se llame tribe-events.css dentro de la carpeta llamada tribe-events/ de tu tema

Cargando Estilos Personalizados para Events Calendar PRO (premium)

  • Para cargar estilos personalizados para las vistas y elementos de Events Calendar PRO, crea una hoja de estilos llamada tribe-events-pro.css dentro de la carpeta tribe-events/pro/ de tu tema
  • Para cargar estilos personalizados para los widgets the Events Calendar, crea una hoja de estilos llamada widget-calendar.css dentro de la carpeta tribe-events/pro/ de tu tema

Cargando Estilos Personalizados para Community Events (premium)

  • Para cargar estilos personalizados para las vistas y elementos de Community Events, crea una hoja de estilos llamada tribe-events-community.css dentro de la carpeta tribe-events/community/ de tu tema

Por ejemplo:

Digamos que quieres agregar un pequeño ajuste de estilo que cambie el color de fondo del metabox en un evento individual de gris a blanco. En tribe-events.css dentro de la carpeta tribe-events/ de tu tema, puedes simplemente agregar:

.single-tribe_events .tribe-events-event-meta {
    background: #fff;
}

Reemplazando Hojas de Estilo por Defecto

Si deseas reemplazar las hojas de estilo por defecto ofrecidas por The Events Calendar, puedes utilizar uno de los filtros provistos para esto:

  • tribe_events_stylesheet_url (estilos del núcleo de The Events Calendar)
  • tribe_events_pro_stylesheet_url (estilos de Events Calendar PRO)
  • tribe_events_pro_widget_calendar_stylesheet_url (estilos de los widgets de calendario de The Events Calendar)

Por ejemplo:

Digamos que quieres reemplazar las hojas de estilo provistas en The Events Calendar y PRO por tus propias hojas de estilo llamadas custom-events-stylesheet.css y custom-events-pro-stylesheet.css respectivamente. Puedes usar los filtros antes mencionados de la siguiente manera:

function replace_tribe_events_calendar_stylesheet() {
   $styleUrl = get_bloginfo('template_url') . '/custom-events-stylesheet.css';
   return $styleUrl;
}
add_filter('tribe_events_stylesheet_url', 'replace_tribe_events_calendar_stylesheet');
function replace_tribe_events_calendar_pro_stylesheet() {
   $styleUrl = get_bloginfo('template_url') . '/custom-events-pro-stylesheet.css';
   return $styleUrl;
}
add_filter('tribe_events_pro_stylesheet_url', 'replace_tribe_events_calendar_pro_stylesheet');

Nota: La hoja de estilo por defecto Tribe continuará cargando además de las propias que hayas definido arriba, a menos que selecciones otra opción distinta a Estilos Tribe Events para Hoja de estilo predeterminada en los ajustes. En el panel de control, dirigiéndote a Eventos -> Ajustes -> Visualización (pestaña), cambiar ‘Hoja de estilo predeterminada utilizada para las plantillas de eventos’ por Estilos básicos si deseas reemplazar completamente los estilos por defecto.

Plantillas Adaptativas

Hay varias partes claves a tener en cuenta respecto al comportamiento adaptativo de las plantillas de eventos, especialmente si deseas personalizar como funciona este componente

Puntos de Quiebre (Breakpoints)

El punto de quiebre por defecto en el cual el comportamiento adaptativo se activa en dispositivos pequeños es 768px. Este valor puede ser modificado o incluso eliminado utilizando los siguientes filtros:

  • tribe_events_mobile_breakpoint – Te permitirá editar el valor del punto de quiebre
  • tribe_events_kill_responsive – Te permite eliminar el comportamiento adaptativo

Por ejemplo: Digamos que deseas personalizar el punto de quiebre para que sea 600px. Puedes usar el filtro tribe_events_mobile_breakpoint de la siguiente manera:

function customize_tribe_events_breakpoint() {
    return 600;
}
add_filter( 'tribe_events_mobile_breakpoint', 'customize_tribe_events_breakpoint' );

Ahora digamos que deseas eliminar el comportamiento adaptativo completamente. Puedes utilizar el filtro tribe_events_kill_responsive de esta forma:

add_filter( 'tribe_events_kill_responsive', '__return_true');

Por último, hemos provisto de algunas clases al elemento body para que puedas utilizarlas como lo necesites:

  • .tribe-is-responsive – Esta clase se agrega si el punto de quiebre no ha sido eliminado
  • .tribe-mobile – Esta clase se agrega una vez que se llega al punto de quiebre establecido

CSS

Además de las media quieries retina / hdpi (utilizadas para íconos solamente), el css adaptativo ha sido separado en sus propias hojas de estilo (*-mobile.css). Vas a encontrar que cada opción de estilos, excepto los estilos básicos, incluyen una hoja de estilo tanto para The Events Calendar como para Events Calendar PRO, que contienen el CSS necesario para estilizar las plantillas responsive.

Puedes ver en la sección Personalizando los Estilos, respecto a como trabajar con las hojas de estilo adaptativo recientemente agregadas, ya que esta información también se aplica a estas hojas de estilo.

Por último, un media query adicional ha sido incluida a un max-width de 600px para manejar específicamente con algunos de los plugins que extienden la funcionalidad de los tickets y la vista de foto en algunas de las hojas de estilo.

JS

Javascript se usa como ayuda para algunas de las funcionalidades en mobile y es altamente utilizado para las vistas mensuales y semanales. También hemos tomado un paso importante y significativo en utilizar plantillas en Javascript para hacer funcionar las áreas mobile tanto para las vistas mensuales y semanales como también para los tooltips en otros lugares de los plugins.

Si has sobrescrito:

  • views/month/content.php
  • views/pro/week/content.php

Necesitarás actualizar tus plantillas con el último código de las plantillas desde por lo menos la versión 3.5 para los plugins The Events Calendar y PRO, para asegurarte tener las nuevas inclusiones necesarias para esta funcionalidad.

Si deseas entender mejor como funciona el sistema de plantillas en Javascript o necesitas personalizar estas plantillas, por favor referirse a nuestra guía de plantillas en Javascript.

Por último, si has sobrescrito la marcación de tus tooltips, necesitarás trasladar esto a la plantilla JS, que incluye instrucciones en profundidad para esto.

Plantillas

(Aplica a usuarios actualizando a la versión 3.5 y superior de los plugins The Events Calendar y PRO)

Vas a querer revisar todas las modificaciones hechas, ya sean sobrescritura de plantillas o estilos, o si también has hecho tu propia versión mobile. Asegúrate de probar las modificaciones hechas contra las nuevas actualizaciones.

Definitivamente deberás actualizar las plantillas sobrescritas, y potencialmente el punto de quiebre (breakpoint) y/o CSS mobile y/o CSS sobrescrito para agregar el CSS adaptativo por defecto, pero como siempre, puedes preguntar a nuestro soporte si tienes alguna pregunta durante este proceso.

Sistema de plantillas en Javascript

Desde la versión 3.5 hemos empezado a utilizar algunos el sistema de plantillas en Javascript de manera simple para el funcionamiento de tanto las plantillas de eventos en mobile como los tooltips de la vista mensual y semanal. Son bastante sencillas de seguir y entender, y hemos provisto de documentación detallada como ayuda si necesitas personalizar alguna de esas partes.

Vas a encontrar estas plantillas junto con la documentación y ayuda adicional para lo siguiente:

Documentación del Core: core/src/views/month/single-event.php
Documentación de PRO: pro/src/views/week/single-event-allday.php

Plantillas Mobile:

  • core/src/views/month/mobile.php
  • pro/src/views/week/mobile.php

Plantillas de Tooltips:

  • core/src/views/month/tooltip.php
  • pro/src/views/week/tooltip.php

Puedes ver la sección más arriba, Personalizando los Estilos, sobre como trabajar con estas plantillas recientemente agregadas, ya que esta información también se aplica a los archivos de plantillas.