Descubre en este tutorial cómo añadir la imagen destacada en la cabecera de las entradas al estilo Hero en Genesis Sample mediante código.
A raíz de una de la petición sobre cómo introducir una imagen en la cabecera de la página de blog, Vicente me dejó la siguiente sugerencia:
¡Hola!
¿Y si lo que quiero es que esa imagen Hero se cargue en todas las páginas y artículos añadiéndola desde la opción de imagen destacada?
En resumen, lo que Vicente está pidiendo es mostrar una cabecera de ancho completo con el título superpuesto sobre la imagen destacada de cada entrada antes del contenido.
Pues dicho y hecho. 😉
Aunque he creado estos snippets para Genesis Sample, puedes aplicarlos en cualquier otro child theme de Genesis tras realizar pequeños cambios en el código.
Este es el resultado final:
Se trata solo de un ejemplo. Cada post mostrará en la cabecera su título e imagen destacada.
¿Te interesa? Vamos allá.
Instrucciones para añadir una cabecera Hero con la imagen destacada en los artículos de Genesis Sample
1. Crea una plantilla para las entradas
Genesis Sample carece de una plantilla dedicada por defecto a los posts, así que el primer paso es generar un fichero single.php en la carpeta raíz del tema que contenga el siguiente código:
Para ver este código y los otros 2057 snippets de esta web,
identifícate o suscríbete aquí.
Con esto creas la plantilla que se mostrará en las entradas y le añades una sección de cabecera en formato Hero.
No solo eso, sino que le indicas que utilize la imagen destacada para cada artículo.
Además, este bloque fuerza el diseño de ancho completo.
2. Personaliza el CSS de la cabecera
Una vez configurada la plantilla para los posts, solo te falta asignar los estilos para que luzca tal y como deseas.
Para ello, introduce este bloque al final de style.css:
Para ver este código y los otros 2057 snippets de esta web,
identifícate o suscríbete aquí.
Al insertar estas líneas de CSS te aseguras de que la cabecera se visualiza correctamente.
¡Listo!
Conclusiones
Ahora ya conoces el código para añadir una cabecera que muestre el título y la imagen destacada al estilo Hero en las entradas de Genesis Sample.
¿Quieres aplicarlo en otro child theme de Genesis? Haz unos pocos ajustes y ya lo tienes.
Si deseas hacerme alguna pregunta o darme una sugerencia para próximos tutoriales, no te cortes. Cuéntamela en los comentarios (opción exclusiva para suscriptores).
