Truco WordPress. Añadir widgets al pie o footer de tu tema de wordpress
¿Cómo meter widgets en el pie o footer de tu wordpress cuando no existe esa zona en la sección widgets de tu panel de control de WordPress?
Éstos días he conseguido hacer una mejora de funcionalidad en el tema de mi blog. La situación es la siguiente: El tema de mi blog es un template premium que he comprado a una empresa de diseño. Si queréis saber mas sobre el template y la empresa que hace los hace (la cual recomiendo) ver este post: nuevo look & feel, bueno pues el template no tenia una zona para meter widgets en el footer.
[caption id=”attachment_722” align=”aligncenter” width=”300” caption=”haz click en la imagen para ver a tamaño completo”][/caption]
Normalmente las zonas que vienen por defecto en los templates son: “Left column” y “Right column” o solo una de ellas, que son las zonas dentro del template donde irán los widgets es decir en la columna izquierda o en la columna derecha. (mis zonas son un poco distintas porque sólo tengo una columna pero muestro unos widgests u otros dependiendo si estoy en la home de la web o en el resto del blog).
Pero que pasa si queréis meter widgets en el footer?! Os cuento como lo he hecho.
1.- Lo primero es registrar la zona como un “sidebar”. Para hacer esto simplemente ir al archivo functions.php que encontrareis en la ruta: /ruta_wordpress_en_mi_server/wp-content/themes/mi_tema/functions.php al principio de este archivo es donde se registran las zonas para los widgets. Tendréis algo parecido a esto o a lo mejor alguna zona mas.
1
2
3
4
5
6
7
8
9
10
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Sidebar',
'before_widget' => '<div class="sidebaritem">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
?>
Añadir la zona para el footer y tendreis algo parecido a esto:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Sidebar',
'before_widget' => '<div class="sidebaritem">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
?>
Si queréis rodear los widgets que metáis en el footer con alguna capa div u otra etiqueta html tendréis que definirlas en las variables del array: before_widget y after_widget
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Sidebar',
'before_widget' => '<div class="sidebaritem">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Footer',
'before_widget' => '<div class="footer-item">',
'after_widget' => '</div>',
'before_title' => '<h3>',
'after_title' => '</h3>',
));
?>
De esta manera ya podemos ver que se ha creado la zona “footer” en el administrador de de widgets de nuestro panel de Wordpress.
[caption id=”attachment_723” align=”aligncenter” width=”300” caption=”haz click en la imagen para ver a tamaño completo”][/caption]
2.- Lo segundo es llamar a la función para incluir los widgets de la zona footer. Para ello vamos al archivo footer.php en la siguiente ruta: /ruta_wordpress_en_mi_server/wp-content/themes/mi_tema/footer.php y dentro de la maquetación de vuestro blog indicar donde queréis que aparezca el footer mediante el siguiente script
1
2
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Footer") ) : ?>
<?php endif; ?>
De esta manera aparecerán los widgets que hayáis incluido en la zona footer.
Queda el tema de maquetarlos los widgets que aparecen en el footer pero ese tema es algo mas personal porque cada uno tiene una hoja de estilos diferente. Yo os paso unos estilos genéricos que a lo mejor os pueden servir.
1
2
3
4
5
6
7
8
.footer-item {
float: left;
width: 33%;
padding-bottom: 10px;
}
.footer-item ul {
padding-left: 15px;
}