Mostrar el número de cursos de forma dinámica en la home de Genesis Sample

Descubre en este tutorial cómo introducir un numero de entradas de un CPT que se mantenga siempre actualizado en la home de Genesis Sample mediante código.

Una de las ventajas de pertenecer al club de Código Genesis es que puedes sugerir futuros tutoriales. 

Por ejemplo, Sergio, uno de nuestros suscriptores, me dejó este comentario:

¡Hola Nahuai! No se si esto te lo he preguntado ya o lo he soñado, jajaja. ¿Se puede hacer un código o shortcode para que salga automáticamente el número de vídeos, cursos (por CPT), suscriptores, etc. que hay en la web?
En plan: Ya hay más de 9 cursos y 30 vídeos con 50 suscriptores.
O algo parecido.
Que a todo esto, no se si me he explicado bien. XD
¡Gracias!

Son varias las preguntas que comenta Sergio (y sus respuestas). Además se pueden conseguir de forma distinta dependiendo del sistema que estés utilizando en cada una (plataforma de vídeos, plugin de suscripción…).

Así que vamos por partes: 

En este tutorial vas a descubrir cómo añadir un snippet que te permita mostrar un número de cursos que se actualice de forma automática en la home de Genesis Sample, aprovechando el código del artículo donde creaste una cabecera personalizada en la página principal.

Recuerda que aunque el ejemplo está realizado para Genesis Sample, puedes aplicarlo en cualquier otro child theme de Genesis tras realizar pequeños cambios en el código. 

Este es el resultado final:

¿Quieres algo así?

Instrucciones para insertar un número dinámico de CPT en la cabecera de la home de Genesis Sample

1. Crea una plantilla para la página principal

Genesis Sample carece de una plantilla front-page, así que el primer paso es crear un fichero front-page.php en la carpeta raíz del tema que contenga el siguiente código:

Con esto generas la plantilla que se mostrará en la página principal y le agregas una sección de cabecera en formato Hero.

Además, este bloque fuerza el diseño de ancho completo.

A diferencia del tutorial dónde enseñabas el texto introducido desde el personalizador, en este caso añades un snippet que contiene el número de entradas del CPT «Cursos» y el de entradas normales (en este caso, tutoriales).

La parte del fragmento anterior que deberías de modificar si prefieres introducir otro tipo de CPT o cambiar el texto es la siguiente:

Para ello solo tienes que sustituir ‘curso’ por el CPT que tú quieras.

Por otro lado, en este caso puedes modificar el título desde el snippet (en el apartado de hero-title) pero también tienes la opción de hacerlo desde el personalizador de WordPress combinándolo con el tutorial que te comentaba antes.

2. Personaliza el CSS de la cabecera

Una vez configurada la plantilla para la página principal, solo te falta asignar los estilos para que luzca tal y como deseas.

Para ello añade este bloque al final de style.css:

Al insertar estas líneas de CSS te aseguras de que la cabecera se visualiza correctamente.

Ahora solo te falta el último detalle.

3. Agrega la imagen de fondo

Por último, introduce la fotografía que deseas usar como fondo en la carpeta /images/ de la raíz de Genesis Sample. 

Hay 2 opciones:

1. Subir una imagen con el nombre hero-home.jpg (en este caso no tienes que hacer nada más). 
2. Cargar una foto con el nombre que quieras y editar la línea de CSS siguiente sustituyendo hero-home.jpg por el nombre de tu fichero.

background: #222 url(images/hero-home.jpg) no-repeat

Procura que la imagen tenga un ancho generoso (1600-2000px) para que también se adapte a los dispositivos de alta resolución.

Conclusiones

Ahora ya conoces el código para mostrar un número de cursos (u otro tipo de entrada) que se mantenga actualizado de forma automática en la home de Genesis Sample.

¿Quieres aplicarlo en otro child theme de Genesis? Haz unos pocos ajustes y ya lo tienes.  

Si te interesa introducir el número de cursos (u otro CPT) mediante un shortcode en cualquier texto de tu web (no solo en la home), puedo preparar un tutorial explicando el procedimiento. Pídemelo aquí abajo. 

Y si quieres mostrar la cantidad de vídeos y/o suscriptores, dame información sobre cómo están creados (plataforma de vídeo, plugin de suscripción….) e investigo el modo de conseguirlo. 😉

Ventajas de ser suscriptor. 

Tutoriales relacionados

• https://codigogenesis.com/anadir-imagen-cabecera-home-genesis-sample-personalizador-wordpress/
• https://codigogenesis.com/forzar-el-diseno-de-ancho-completo-en-genesis-framework/
• https://codigogenesis.com/anadir-imagen-cabecera-home-genesis-sample-personalizador-wordpress/
• https://codigogenesis.com/anadir-imagen-cabecera-home-genesis-sample-personalizador-wordpress/