Ya te comente en el post donde hablaba como conseguir que mi blog cargue en menos de un segundo, que recientemente he trabajado en el rediseño del blog de Florencio Martínez.
Y una de las cosas que me pedia era añadir simple social icons en el footer de su tema, y que particularmente le gustaba como lo había hecho Brian Gardner y además explicaba como hacerlo en su blog.
Pero como ese blog esta en ingles, y yo te lo quiero explicar con mis palabras, mejor os traigo aquí como se hace.
Por cierto este tutorial solo te sirve si utilizas Genesis Framework.
Una de las cosas que más llaman la atención de este diseño es que el area de widget en si, no esta en una zona diferenciada, si no que se solapa entre el area de footer tipica, y justo la anterior.
Si te fijas en la imagen destacada de este post, hablamos que esta sobre la franja blanca y la negra.
En un tema típico de Genesis además es bastante sencillo de implementar. En el post de Brian nos habla de que lo probo con Mobile First theme, y yo lo he realizado en Magazine Pro de Studio Press.
Logicamente antes de empezar, asegurate de haber instalado el plugin Simple Social Icons para WordPress.
¿Preparado? ¡Vamos alla!
Paso #1. Registrando el Area de Widget Nuevo.
El primer paso va a ser crear un nuevo area de widget, donde pondremos nuestro widget del simple social icons.
Aqui debajo te dejo el código que debes pegar en el fichero functions.php de tu child theme.
¡Recuerda hacer copias antes!
//* Register social footer widget area
genesis_register_sidebar( array(
'id' => 'social-footer',
'name' => __( 'Social Footer', 'bg' ),
'description' => __( 'This is the social footer widget area.', 'bg' ),
) );
Paso #2. Enganchando la nueva area.
Ahora que tienes ya registrada una nueva area para el widget, es hora de que lo «enganchemos» dentro del footer de tu sitio web.
Y eso lo hacemos usando los ganchos o hooks de Genesis.
De nuevo en el functions.php, a continuación del código anterior, pega este que te dejo aquí:
//* Hook social widget area before site footer
add_action( 'genesis_footer', 'bg_social_footer_widget_area', 7 );
function bg_social_footer_widget_area() {
genesis_widget_area( 'social-footer', array(
'before' => '<div class="social-footer">',
'after' => '</div>',
) );
}
Por último, necesitas añadir un pequeño fragmento de estilo CSS a tu fichero style.css para posicionar Simple Social Icons en el Footer tal y como queremos.
Este es el código que produce ese solapamiento entre la dos zonas, creando ese efecto tan chulo.
Además le da algo más de espacio entre ellos.
/* Social Footer
--------------------------------------------- */
.social-footer {
margin-top: -70px;
}
.social-footer .simple-social-icons ul li {
margin: 0 10px 20px !important;
}
¿Se te ocurre otra utilidad?
Recuerda siempre que aunque estos tutoriales sean un paso a paso, aplicando algo de imaginación podemos hacer virguerías.
Por ejemplo se me ocurre poner un botón de Call to Action, para la suscripción a mi newsletter, y destacará entre dos zonas tan diferenciadas.
Y desde luego es una gran idea colocar los iconos sociales al final.
Tienes que dirigir a tus vistas a que profundicen en tu blog, y no ha echarlos a las redes sociales, plataformas que no te pertenecen y que no son tu «casa digital».
Y tú, ¿dónde opinas que deberían ir los iconos de redes sociales?
