Como Añadir Widgets al Footer
Ú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;
-
}
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>
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
-
'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
-
'before_widget' => '<li id="%1$s" class="widget %2$s">',
-
'after_widget' => '</li>',
-
'before_title' => '<h2 class="widgettitle">',
-
'after_title' => '</h2>',
-
));
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 …
-
|| !dynamic_sidebar('subfooterleft') ) : ?>
-
<?php endif; ?>
Sustituimos Widget 2 por …
-
|| !dynamic_sidebar('subfootercenter') ) : ?>
-
<?php endif; ?>
… y Widget 3 por esto otro:
-
|| !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;
-
}
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.
Modificado para aceptar widgets dinámicos (gracias NachitoX)
También te puede interesar:
Bitacoras
RSS
Blog EntreBlogs
Bocabit
Buscando Libertad
CiberPrensa
El Blog de
KnxDT
FreebsArg
Galaxia Blog
Ideas Geek
iPhoniac
Soy Plastic
Tecnodiva
Todos los Como
Verdadera Seducción
Eres un as Fernando! Que buen post, disfruté mucho. Muchas gracias. Y también gracias a todo el equipo de Ayuda WordPress.
Fernando, estás seguro de que no te faltó algo?
Antes de agregar el primer div, agregas esto:
Es para llamar la función que creamos en el archivo “functions.php”
De nada, solo quería ayudar a todo el que quiera llevar a la práctica este post. Y otra cosa, la última, jeje. Donde pusiste “Y widget 2 por esto otro…” debería ser “Y widget 3 por esto otro…” xD.
Jodo con las prisas
Lo cambio, y gracias.
De nada…
Hombre que buen tutorial, me sirvió no para hacer un footer sino una zona de videos que no estaba contemplada en el theme de mi blog.
Sino hubiese sido por esta estupenda ayuda no se en que andaría. miren ahi esta en http://masmuisca.info en la zona donde dice "Videos destacados" eso fue el widget que creé ya que el sideber estaba con ello pero esa zona nop.
gracias y los sigo leyendo.
Esto está muy bueno, y me viene muy bien para un theme que estoy haciendo, pero tengo un problema.
Mi theme tiene dos sidebar, y en el archivo functions.php dice lo siguiente:
<?php if ( function_exists('register_sidebars') ) register_sidebars(2); ?>Como tengo que modificarlo?
Porque poniendo como dice en el post, y agregando algo como:
register_sidebar(array('name'=>'sidebar_der'));(teniendo un archivo llamado sidebar_der.php), no me funciona, convierte a todas las palabras en links…
Me pasa lo mismo que Amattajm tengo un plntilla con con dos columnas que podemos hacer ??
@Amattajm & @Harold: ese código que mencionan deben agregarlo al fichero functions.php.
Se saltan alguna líneas y agregan el código.
Muchas gracias, me vino muy bien!