En este artículo vamos a ver como añadir dos áreas de widgets más a la portada de Altitude Pro theme. Lo haremos mediante código claro está. Para ello tocaremos varios archivos. Será sencillo.
Altitude Pro es un tema muy versátil con una portada estilo One-page, aunque el theme en sí no sea puramente así. Esta portada está formada por varias áreas de widgets, varias de ellas con imágenes de fondo con efecto parallax.
Vamos a ver como añadir dos áreas de widgets. Una de ellas con imagen de fondo como las otras y la otra será funcional para mostrar los últimos artículos del blog.
Para facilitar su uso lo haremos con un widget propio de Genesis Framework. Este widget se llama Genesis – Featured Posts. Pero no nos adelantemos. Vayamos por partes.
Registrar las áreas de widgets
Lo primero será registrar esas dos nuevas áreas de widgets. Para ello añadiremos estas líneas al final del archivo functions.php de nuestro tema Altitude Pro.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Agregar las nuevas áreas a la portada
Lo siguiente es emplazar esas áreas de widget en la portada de Altitude Pro. Para ello editaremos el archivo front-page.php donde añadiremos este snippet de código.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
En este punto si vas a apariencia → wdigets, verás que ya puedes disponer de tus nuevas áreas de widgets. Sólo queda agregar la opción en el personalizador para poder configurar la imagen de fondo.
Opciones del personalizador
Dada la configuración del child theme, debemos editar un par de archivos. De esta manera se incluirán en el personalizador las opciones par configurar la imagen de fondo de nuestra nueva área de widgets. De esa manera podremos, cómodamente editar que imagen que queramos colocar.
El primero de ellos será el archivo lib/customize.php y le haremos esta sencilla modificación.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
La segunda edición es así de sencilla. Esta vez editaremos el archivo lib/outpup.php.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Nos quedan por hacer un par de cosas sencillas. Una de ellas es conseguir una imagen de fondo por defecto para nuestra nueva área de widgets. Esta la almacenaremos en la carpeta /images de nuestro tema Altitude Pro.
Imagen por defecto
Debe nombrarse de una manera determinada. Por defecto el theme buscará una imagen llamada bg-9.jpg, asi que la llamaremos así. Esto claro está, si queremos que tenga una imagen por defecto. Yo he bajado una de pexels.
Estilos básicos
La otra es editar el style.css para añadir ciertos estilo base para las nuevas áreas de widgets. Además, si queremos algo concreto como el ejemplo que he puesto de mostrar los últimos artículos del blog, deberemos maquetarlo. Veamos los estilos por defecto y después alguna edición extra.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
De esta manera nos aseguramos de que el área de widget de imagen que hemos añadido tenga el mismo efecto parallax que el resto de las distintas áreas con imagen de fondo.
Añadido este soporte, veamos que widgets he usado para crear el contenido. En el primer área donde vamos a mostrar el artículos del blog, harán falta dos widgets. El principal será Genesis – Featured Posts. En el marcaremos la imagen, el título y el contenido con límite para mostrar. Nada más.
En otro widgets es sólo para añadir títutlo a la sección si lo deseamos. Simplemente sobre ese, añadimos un widget de texto, y le ponemos título, pero no contenido.
Estilos personalizados
El siguiente código CSS es de mi cosecha, para dar estilo a esos artículos del blog que quiero mostrar en el área Front-page 8.
Lo haré con Flexbox. Algo sencillo con un poco de media queries para asegurarnos la adaptabilidad a pantallas. Veamos como queda.
Este contenido está sólo disponible para los suscriptores.
Puedes identificarte aquí o bien registrate en este enlace.
Ajustes y conclusiones
He elegido mostrar 3 artículos porque de esa manera queda un diseño limpio como el resto del theme. Si quieres puedes mostrar 4 o más artículos, claro está. Tan sólo tendrás que hacer algunos ajustes en el CSS. Concretamente en el ancho de los artículos.
Otra cosa que puedes hacer es variar el comportamiento de esos artículos según el tamaño de la pantalla, jugando un poco con las media queries.
No es sencillo, pero tampoco complicado en exceso. Con algunas modificaciones en el código original del theme y añadiendo nosotros algo de nuestra cosecha, los resultados sin duda merecen la pena.
Y ya sabes, cualquier duda sobre este código me la puedes dejar en los comentarios. 😉
Feliz semana!