Hoy veremos como implementar una imagen de cabecera en el blog vía personalizador en Genesis Sample. Con el título de la sección superpuesto.
Que ganas tenía de crear este tutorial. Una vez que rompes el hielo con el personalizador, te da muchas posibilidades para trabajar y a la vez facilitas mucho la vida al cliente.
Esta sería una captura con la imagen por defecto que he elegido.
Otra captura. Esta vez con la imagen ya cambiada.
Pasos a seguir
Lo que vamos a hacer es colocar el título del blog con una imagen de fondo que configuraremos a través del personalizador.
Es un tutorial algo más largo de lo normal y seguiremos varios pasos:
- Creamos un archivo para agregar todos los snippets.
- Situamos el título bajo la cabecera.
- Creamos la sección del personalizador para configurar la imagen.
- Configuramos la imagen por defecto.
- Creamos un poco de CSS condicional.
- Terminamos de dar estilo con algo más de CSS.
Así que si te parece, pasamos directamente al primer paso.
Antes de empezar una aclaración! Todos los snippets de este tutorial, los he agrupado en un mismo archivo PHP y he llamado este archivo desde el functions. php. Esto lo deja mucho más organizado.
Si agregas todos los snippets al functions.php también funcionará. Así que si es tu caso, simplemente ignora el primer paso y añade todas las funciones al final del functions.php.
Creamos un nuevo archivo PHP
El archivo que yo he creado lo he llamado add-customize-option.php. Lo he colocado en la carpeta /lib de Genesis Sample.
Lo siguiente será hacer una llamada desde el functions.php para que se cargue este nuevo archivo. Así el código que tenga se ejecutará como si estuviese en el propio functions.php
Tras haber agregado el nuevo archivo a la carpeta /lib, añade esta línea de código al archivo functions.php.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Y ahora si, podemos ir añadiendo los snippets a este nuevo archivo.
Título del blog bajo la cabecera
No es algo que no hayamos hecho antes en otros tutoriales. Simplemente jugamos con los hooks y las funciones que hay en ellos.
Lo conseguiremos agregando este snippet de código al nuevo archivo add-customize-option.php.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Nota: Esta función está pensada para Genesis Sample. Si queremos adaptar este tutorial a otro theme, es una de las cosas que deberemos retocar.
Creamos la opciones en el personalizador
Con el siguiente snippet de código crearemos las opciones que necesitamos en el personalizador para configurar la imagen de portada. Puedes agregarlo al final del nuevo archivo add-customize-option.php.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Con este snippet no sólo creamos las nuevas opciones en el personalizador, sino un nuevo panel y dentro de ese panel una nueva sección. De esta manera, podríamos añadir nuevas opciones en el futuro, creando incluso más secciones dentro de ese nuevo panel.
Si te fijas bien, hemos añadido una imagen por defecto a los ajustes del personalizador.
Pues ese será el siguiente paso.
Configuramos la imagen por defecto
La opción de la imagen por defecto ya está configurada. Lo que nos falta es añadir la dicha imagen a la carpeta /images del theme. Eso sí, asegúrate de que la nombras como hero-bg.jpg.
La mejor opción es que la subas por FTP con tu cliente FTP habitual. Yo uso siempre Filezilla.
Yo me he descargado una de pexels.com. Ha de ser grande para que no aparezca pixelada en pantallas de escritorio.
Un poco de CSS condicional
¿Y porqué digo condicional? Bueno, no es más que una función que genera un código CSS en base a si se ha configurado la imagen o no.
Si no configuramos nada, el CSS mostrará la imagen de fondo por defecto que elegimos. Por el contrario, si configuramos una imagen, el CSS mostrará la imagen seleccionada.
Agrega este snippet al final del archivo que hemos creado.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Un último toque de CSS
No es necesario, pero he agregado un poco de CSS extra. Hará el contenedor de la imagen un poco más alto y el título de la sección más grande y legible.
Este snippet de CSS lo debes agregar al final el archivo styles.css.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Vaya, si que tenía ganas de escribir este tutorial. El personalizador era una de mis tareas pendientes. Y en parte lo sigue siendo. Todavía quedan cosas por explorar.
Habiendo trabajado con el persobalizador se le pierde un poco el miedo. Se me han ocurrido muchas ideas. Algunas complejas, otras no tanto, pero iré jugando más con él en futuros tutoriales.
Si también has tenido alguna idea, o cualquier duda acerca de este tutorial, puedes dejarlas en los comentarios.
Feliz día! 🙂