Aprende en este tutorial cómo mostrar eventos creados con The Event Calendar en cualquier child theme de Genesis Framework mediante código.
Una de las ventajas de ser suscriptor de Código Genesis es que puedes proponer nuevos tutoriales.
Por ejemplo, hace poco Javi me preguntó:
Hola, Nahuai. ¿Qué tal?
Me gustaría poder mostrar, en la home del I Theme, en vez de las últimas entradas, los últimos eventos creados con el plugin The Events Calendar, ¿es posible?Estaba mirando este snippet por si podía adaptarlo pero no veo nada parecido en el front-page.php del I Theme. ¡Un saludo!
Es una petición algo específica, pero The Events Calendar (Modern Tribe) es uno de los plugins más populares para crear eventos.
Así que, ¿a ti también te interesa saber cómo mostrar sus últimos eventos en cualquier plantilla de página (front-page.php, archive.php, home.php…) independientemente del tema de Genesis que uses?
Este es el resultado final:
¿Quieres algo así? Sigue leyendo.
Instrucciones para visualizar eventos de The Event Calendar en cualquier página de Genesis
1. Crear los eventos con The Event Calendar
Para mostrar los eventos creados con The Events Calendar, lo primero que debes hacer es instalar y activar el plugin (por si hay algún despistado en la sala). 😉
A continuación, genera los eventos y acuérdate de completar en ellos título, contenido e imagen destacada.
Puedes elegir la imagen desde tu biblioteca de medios.
2. Agrega los eventos a la plantilla deseada
Por ejemplo, si ya estás utilizando un tema que tenga front-page.php (como ocurre en la mayoría de AsiThemes), puedes introducir este snippet en la sección donde quieres mostrarlos.
Otra opción es crear propia plantilla y añadir en ella:
Para ver este código y los otros 2055 snippets de esta web,
identifícate o suscríbete aquí.
Con esto enseñas los eventos creados con The Events Calendar con la siguiente información:
- El título del evento (enlazado al mismo).
- La imagen destacada (enlazada al mismo).
- Su contenido.
En el fragmento anterior usas el tamaño de imagen ‘grid‘, pero puedes de modificarlo por el que te interese (‘medium‘, ‘full‘ u otro personalizado).
¿Prefieres mostrar el excerpt en lugar del contenido? Sustituye post_content por post_excerpt.
Otro truco: al envolver el contenido con una clase llamada .event-wrapper, también tienes la posibilidad de aplicar los estilos que desees.
Aquí tienes como ejemplo front-page.php, pero recuerda que puedes incluirlo en cualquier plantilla.
3. Modifica functions.php (opcional)
Por último debes crear un nuevo tamaño de imagen llamado «Grid» que se ajuste a las medidas necesarias agregando la siguiente línea a functions.php:
Para ver este código y los otros 2055 snippets de esta web,
identifícate o suscríbete aquí.
Si ya cuentas con un tamaño adecuado puedes ahorrarte este paso, pero acuérdate de regenerar todas la miniaturas de las imágenes que ya tienes en WordPress con el plugin Regenerate Thumbnails.
4. Personaliza el CSS de la rejilla
Una vez realizados los cambios en la plantilla, solo te falta asignar los estilos para que se visualice en formato de grid.
Para ello, introduce este bloque al final de style.css:
Para ver este código y los otros 2055 snippets de esta web,
identifícate o suscríbete aquí.
Al insertar estas líneas de CSS consigues que las categorías se muestren en una rejilla de 3 columnas en pantallas de más de 960px de ancho y que se adapte a dispositivos móviles.
Puedes combinar este tutorial con otros como el de crear una cabecera personalizada en la página principal de Genesis Sample para modificar la home a tu gusto.
Conclusiones
Ahora ya sabes cómo introducir los eventos de The Events Calendar en formato rejilla en la home de Genesis Sample.
¿Lo mejor? Puedes usar este código en cualquier plantilla de Genesis.
Si deseas hacerme alguna pregunta o darme una sugerencia para próximos tutoriales, déjamela en los comentarios (opción exclusiva para suscriptores).
