Como Añadir Widgets al Footer

Publicado por Fernando Tellado el 25 Jul, 2008

Índice de contenidos

1 Paso 1 Crea el CSS
2 Paso 2 El HTML
3 Paso 3 Haciendo que admita Widgets
4 Paso 4 Añadiendo los Widgets
5 Paso 5 Mejorando su Aspecto
6 Resultado

Últimamente es hasta habitual encontrarse con blogs en los que hay widgets en el pié de página, son prácticos pues añade un área en la que incluir bloques de información que igual no quedarían bien en la barra lateral.

Es interesante tener widgets en el fondo del blog, por ejemplo, para poner enlaces a otros artículos del blog o quizás para añadir información sobre ti mismo. En este tutorial vamos a crear 3 áreas de widget en el pié de página que podrán editarse desde el panel de administración. Usaremos la plantilla por defecto de WordPress: Kubrick.

Paso 1 Crea el CSS

Lo primero que tenemos que hacer es crear el CSS del área del pié de página. Abre el archivo “style.css” de la plantilla Kubrick en tu editor de código para añadirle el siguiente código, lo llamaremos subfooter:

#subfooter {
width:730px;
margin-left:15px;
margin-right:15px;
height:300px;
background-color:#d5d6d7;
clear:both;
}
#subfooter .widget {
width:240px;
height:300px;
float:left;
}
#subfooter .widget .inner {
padding:10px;
}

#subfooter {

width:730px;

margin-left:15px;

margin-right:15px;

height:300px;

background-color:#d5d6d7;

clear:both;

}

#subfooter .widget {

width:240px;

height:300px;

float:left;

}

#subfooter .widget .inner {

padding:10px;

}

El código anterior crea un área llamada subfooter y una clase widget, en el código HTML, en la que añadiremos las tres instancias de la clase widget y con la opción float:left; se alinearán uno junto al otro.

–

Paso 2 El HTML

Abre el archivo “footer.php” y añade el siguiente código antes del código <div id=”footer”>:

<div id="subfooter">
<div class="widget"><div class="inner">
Widget 1
</div></div>
<div class="widget"><div class="inner">
Widget 2
</div></div>
<div class="widget"><div class="inner">
Widget 3
</div></div>
</div>

Widget 1

</div></div>

Widget 2

</div></div>

Widget 3

</div></div>

</div>

Ahora, si observas el blog podrás ver al fondo de la página algo que se parezca a esto:

Paso 3 Haciendo que admita Widgets

En este momento aún no está listo para widgets, lo que significa que tendrías que añadir código manualmente en cada widget en el fichero “footer.php”. En este paso vamos a ver como hacer que admita widgets para que puedas añadirlos desde la sección “Diseño -> Widgets” de tu panel de administración. Para hacerlo usaremos el fichero “functions.php” como hemos visto en otras ocasiones. Abre este archivo en tu editor de código.

Verás en la parte superior del fichero “functions.php” lo siguiente:

< ?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));

< ?php

if ( function_exists('register_sidebar') )

register_sidebar(array(

'before_widget' => '<li id="%1$s" class="widget %2$s">',

'after_widget' => '</li>',

'before_title' => '<h2 class="widgettitle">',

'after_title' => '</h2>',

));

Cámbialo a esto otro:

< ?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>',
));
register_sidebar(array('name'=>'subfooterleft'));
register_sidebar(array('name'=>'subfootercenter'));
register_sidebar(array('name'=>'subfooterright'));

< ?php

if ( function_exists('register_sidebar') )

register_sidebar(array(

'before_widget' => '<li id="%1$s" class="widget %2$s">',

'after_widget' => '</li>',

'before_title' => '<h2 class="widgettitle">',

'after_title' => '</h2>',

));

register_sidebar(array('name'=>'subfooterleft'));

register_sidebar(array('name'=>'subfootercenter'));

register_sidebar(array('name'=>'subfooterright'));

Lo que hemos hecho es registrar 3 barras laterales llamadas subfooterleft, subfootercenter y subfooterright que corresponderán a los widgets izquierdo, central y derecho del subfooter.

A continuación hay que hacer que el footer sea “widget ready”. Para eso también añadiremos, en vez de lo comentado en el punto 2, lo siguiente:

Sustituimos Widget 1 por …

< ?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar('subfooterleft') ) : ?>
< ?php endif; ?>

< ?php if ( !function_exists('dynamic_sidebar')

|| !dynamic_sidebar('subfooterleft') ) : ?>

< ?php endif; ?>

Sustituimos Widget 2 por …

< ?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar('subfootercenter') ) : ?>
< ?php endif; ?>

< ?php if ( !function_exists('dynamic_sidebar')

|| !dynamic_sidebar('subfootercenter') ) : ?>

< ?php endif; ?>

… y Widget 3 por esto otro:

< ?php if ( !function_exists('dynamic_sidebar')
        || !dynamic_sidebar('subfooterright') ) : ?>
< ?php endif; ?>

< ?php if ( !function_exists('dynamic_sidebar')

|| !dynamic_sidebar('subfooterright') ) : ?>

< ?php endif; ?>

Paso 4 Añadiendo los Widgets

Para añadir los widgets tienes que ir al panel de administración, al apartado “Diseño -> Widgets“. Veras un menú desplegable, haces clic en el y verás 3 opciones nuevas:

Ya sabes como se hace, eliges una de las opciones que inlcuimos en el subfooter y puedes ir añadiendo widgets a esa barra lateral especial. Eso si, añade solo un widget por cada área del subfooter.

Si vas ahora a tu blog deberías ver algo similar a lo de esta captura:

Paso 5 Mejorando su Aspecto

Ya lo tenemos configurado y funcionando, pero seguro que no tiene un aspecto todo lo interesante que desearíamos.

Añádele el siguiente código al fichero “style.css” para mejorarlo:

#subfooter li {
list-style-type: none;
list-style-image: none;
}

#subfooter li ul {
padding-left:0px;
font-size:12px;
}

#subfooter a {
padding:5px;
width:90%;
text-decoration:none;
clear:both;
display:block;
}

#subfooter a:hover {
background-color:#1a6198;
color:#FFFFFF;
}

#subfooter li {

list-style-type: none;

list-style-image: none;

}

#subfooter li ul {

padding-left:0px;

font-size:12px;

}

#subfooter a {

padding:5px;

width:90%;

text-decoration:none;

clear:both;

display:block;

}

#subfooter a:hover {

background-color:#1a6198;

color:#FFFFFF;

}

Resultado

Y así es como queda, un estupendo subfooter listo para widgets en WordPress.

Si quieres puedes descargar los archivos modificados de la plantilla Kubrick aquí en formato .zip y revisar el código para adaptarlo como desees.

Gracias

Modificado para aceptar widgets dinámicos (gracias NachitoX)

PUEDE QUE TAMBIÉN TE INTERESE…

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.