Hoy vamos a ver cómo añadir un Widget Area en el footer de cualquier Child Theme de AsiThemes utilizando la potencia y flexibilidad que nos ofrece Genesis Framework.
¿Qué vamos a necesitar?
Para llevar a cabo este sencillo ejercicio vamos a necesitar los siguientes elementos:
- Un editor de código tales cómo Sublime Text, Atom o Vim aunque, yo voy a utilizar Coda.
- Acceso via FTP a los archivos de nuestra página web.
- Una sencilla función de Genesis.
- Un poco de CSS.
- Un Theme de AsiThemes. Yo he decidido utilizar el I Theme ;)
Paso número uno: añadimos la función al archivo functions.php
Accedemos vía FTP a los archivos de nuestro Child Theme y abrimos el archivo ‘functions.php’ con nuestro editor de código favorito.
Hacemos scroll hasta encontrar el final del archivo y añadimos esta simple función:
[code]
//* Añadir soporte para un widget area en el footer de nuestra web
add_theme_support( ‘genesis-footer-widgets’, 1 );
[/code]
Una vez añadido guarda los cambios y navega hasta Apariencia > Widgets desde el area de administración de tu WordPress.
Deberías ver algo parecido a esto:
Lógicamente, si ahora visualizas la parte pública de tu página web no verás ninguna diferencia ;)
¡Añadamos algo al nuevo widget area!
Puedes añadir lo que tu quieras pero, para el ejemplo, yo he añadido un pequeño texto ‘Lorem Ipsum’ mediante un Widget de Texto:
Ahora navega a la portada de tu web y verás algo parecido a esto:
¡Qué feo! ¿No?
Vamos a arreglarlo con un poco de CSS.
Paso número dos: lo dejamos bonito con un poco de CSS
Puedes añadir el CSS bien al archivo ‘style.css’ de tu Genesis Child Theme aunque yo personalmente prefiero hacerlo a traves de Apariencia > Personalizar > CSS adicional.
[code]
.footer-widgets {
background: #535364;
color: #fff;
}
.footer-widgets-1 {
width: 100%;
padding: 1%;
}
.footer-widgets-1 {
float: left;
}
[/code]
Guarda los cambios y ahora en la parte pública de tu web deberías ver algo parecido a esto:
¡Mucho mejor! :)
Ahora es tu turno
Ahora es cuestión de jugar con diferentes Widgets para conseguir el resultado que tu quieras :).
Para cambiar los colores lo único que has de hacer es cambiar los valores en el CSS de los parámetros ‘background’ y ‘color’.
Tanto si te ha gustado, o no, este tutorial aceptamos ‘fan mail’ y críticas (constructivas o no) aquí.