Descubre en este tutorial cómo mostrar una cabecera con imagen en la pagina de blog de Genesis Sample desde el personalizador de WordPress mediante código.
Una de las ventajas de pertenecer al club de Código Genesis es que puedes dejar tus sugerencias para futuros tutoriales.
A raíz de una petición de Carlos, uno de nuestros suscriptores, preparé un tutorial sobre cómo añadir una sección Hero en la página de blog.
Sin embargo, en él debías introducir la ruta de la imagen en el snippet de CSS.
Esto no es un problema para ti, de eso estoy seguro. 😉 Pero sí podría suponer una limitación para tus clientes.
Así que con esta versión 2.0 del tutorial vas a aprovecharte del personalizador de WordPress para añadir la imagen, elegir su encuadre y el color del título.
Suena bien ¿verdad? Este es el resultado final:
Aunque de nuevo 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.
Vamos allá.
Instrucciones para mostrar una cabecera con imagen a la página de blog desde el personalizador de WordPress
1. Crea una plantilla para la página de blog
Genesis Sample carece de una plantilla dedicada por defecto al blog, así que el primer paso es crear un fichero home.php en la carpeta raíz del tema que contenga el siguiente código:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
Con esto generas la plantilla que se mostrará en la página de blog y le añades una sección de cabecera en formato Hero.
Además, este bloque fuerza el diseño de ancho completo, aunque si prefieres dejar la sidebar puedes eliminar la línea responsable y listo.
2. Modifica el customize.php
Para agregar las opciones en el personalizador de WordPress debes editar el fichero customize.php situado en la carpeta /lib/.
En concreto, introduce el siguiente código al final del mismo:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
Con este bloque insertas una nueva sección al personalizador de WordPress llamada «Cabecera del Blog» dentro de la cual se encuentran las opciones de añadir y posicionar la imagen.
Por cierto, esta parte del código está inspirada en uno de los módulos del fantástico curso de creación de plantillas de Silicodevalley.com.
3. Personaliza el CSS de la cabecera
Una vez configurada la plantilla para la página de blog y el fichero del personalizador, solo te falta asignar los estilos para que luzca tal y como deseas.
Para ello pega este bloque al final de style.css:
Para ver este código y los otros 2063 snippets de esta web,
identifícate o suscríbete aquí.
Al introducir estas líneas de CSS te aseguras de que la cabecera se visualiza correctamente.
Ahora solo te falta el último detalle.
4. Añade la imagen de fondo desde el personalizador de WordPress
Por último, introduce la fotografía que deseas usar como fondo directamente desde el personalizador de WordPress.
Tal y como te indica esta sección del personalizador, 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 de añadir una cabecera con imagen y título en la página de blog de Genesis Sample desde el personalizador de WordPress.
¿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 snippets, no te cortes. Cuéntamela en los comentarios (opción exclusiva para suscriptores).
Tutoriales relacionados
- https://codigogenesis.com/mostrar-imagen-cabecera-pagina-blog-genesis-sample/
- https://codigogenesis.com/mostrar-imagen-cabecera-pagina-blog-genesis-sample/
- https://codigogenesis.com/mostrar-imagen-cabecera-pagina-blog-genesis-sample/
- https://codigogenesis.com/forzar-el-diseno-de-ancho-completo-en-genesis-framework/
