Ú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.
Índice de contenidos
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
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'));
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; ?>
Sustituimos Widget 2 por …
< ?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; ?>
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.
Gracias
Modificado para aceptar widgets dinámicos (gracias NachitoX)
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 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.
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 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!
Excelente post 😀 por fin pude colocar una nube de tags 😀
Pregunto: ?y se puede hacer lo mismo con la cabecera? Es decir: el footer lo ve menos gente, especialmente si la pagina es laaaaarga (o alta). Pero hay un espacio a la derecha, digamos, del titulo, en mi caso http://hispanicLA.com , en donde quisiera poner informacion. Quizas un widget de Texto para ir cambiando. Muchas gracias, excelente estilo de explicacion. G
MILLLLL GRACIAS MONTRO, ESO TA COMO E' Y FELICIDADES POR ESTA GRAN TUTO
Que va….me salieron los widgets uno debajo del otro en una sola columna, aparte de que el espacio generado para dichos widgets no me salí centrado y era más reducido que el de mi plantilla, estoy tratando de eliminar los cambios, gracias de todas formas.
http://www.trascendencia.com.ve
muchas gracias..recien empiezo en esto yte agradezco muchoooooooo
Muchas gracias, me ha servido de mucho. Aunque tuve que adaptarla a mi propia theme pero igual me sirvió bastante.
Fántastico el tutorial. Muy bueno. Muy clarito. Muy práctico. Me sirvió, claro.
Excelente tutorial me sirvio al 100% gracias por la ayuda
Yo quiero hacer lo mismo pero solo un widget y en el header en vez del footer. Un widget en el que pueda poner el qTranslate de cambio de idioma. ¿Esto sirve o hay otra forma?
Gracias!
Graaacias. muy buen tutorial.. me sirvió para agregar un widget en el header.
saludos
Exelente! me gusto mucho y me sirvio para tener mas conocimientos sobre wp que es Infinito Siendo un CMS!
Estupendo Post, la verdad en ningun lado se consigue informacion de este tipo. Muy interesante, ya lo estoy aplicando a mi blog.
Llevaba días buscando esto…
Muchas gracias por compartirlo.
el paso 1 no dices en donde se coloca el codigo
Como puedo centrar las columnas? Me salen a la izquiera por defecto. Le he dado un text-aling:center; al subfooter y al footer pero naranjas de la china 🙁
Hola como estas, consulta cuales son los pasos que tengo que seguir para instalar 4 widget al final del main justo antes del footer. soy nuevo en wordpress y se me esta complicando. desde ya muchas gracias.
saludos.
Gracias.. No te iamgians cuanto me sirvió 😀
Gracias.. No te iamgians cuanto me sirvió 😀
Muy bueno, funciona muy bien y ahora entiendo como funciona mas la edicion CSS, felicidades por escribir este tipo de tutoriales/ayudas gracias!!!!
creeme me salvasrte la vida! Genio!!! mcuhsimas Gracias!!!
impresionante! gracias por semejante ayuda. Voy con una sonrisa de oreja a oreja. gracias
Hola una pregunta, como hago para que los widgets solo aparezcan en la pagina principal y no en todas?, lo que quiero es que en la pagina principal pueda insertar 3 widgets en el footer, pero luego cuando estoy en una pagina cualquiera, esos widgets aparezcan en el side que esta a un lado.
Saludos
En las 3 columnas, en vez de aparecer mis widgets, aparecen visibles los cóodigos
He revisado functions.php y footer.php, y he seguido todas las instrucciones A EXCEPCIÓN del cambio del código php original de la plantilla functions.php, ese que llama al sidebar lateral.
¿Es problema de compatibilidad de este código con mi theme, o con la nueva versión wp…? ¿qué será estimado?
Saludossss
Es tan sencillo como quitar los espacio en este apartado:
Sustituimos Widget 1 por …
QUITA EL ESPACIO ENTRE < ? para que se quede
< ?php if ( !function_exists('dynamic_sidebar')
etc.
Muchas gracias por el tutorial. Me sucede lo mismo que a felipe. Me ha funcionado hasta el punto de cambiar «widget1″ por la funcion php para que muestre los widgets. Fiajte lo que aparece en mi web: . En vez de los widgets aparece el texto » «.
El tema base que he usado es liquorice.
Gracias por adelantado!!!
Me pasa lo mismo que a Leo y Felipe. Me sale esos códigos en vez de los widgets.
Me pasaba lo mismo pero edite de esta manera.
en lugar de poner : Puse: Y queda:
.Y finalmente pude resolverlo ! Gracias por el aporte Fernando!
No me deja insertar correctamente el codigo. Pongo imagen.
Amigos Asi debe quedar:
Me resulto!
Perdon por mis comentarios anteriores ..no se entienden. Ya me registre cono user y voy nuevamente.
Me pasaba lo mismo que Leo y Mediterranea. Pero edite de esta manera y me resulto perfecto el aporte de Fernando.
Me da error en la plantilla :(((((
PHP Error MessageParse error: syntax error, unexpected ‘}’ in /home/a4419097/public_html/wp-content/themes/minimalist-love/functions.php on line 56Free Web Hosting
Hola, he seguido los pasos pero me envía el siguiente error:
Parse error: syntax error, unexpected $end in /home/domain/public_html/wp-content/themes/the_theme/footer.php on line 45. This is the code.
El html completo del footer es:
<!– .site-info –>
<!– .site-footer .site-footer –>
<!– #main –>
<!– subfooter–>
<!– subfooter –>
<!– #wrapper .wrap –>
<!– #page .hfeed .site –>
La función es:
register_sidebar(array('name'=>'subfooterleft'));
register_sidebar(array('name'=>'subfootercenter'));
register_sidebar(array('name'=>'subfooterright'));
register_sidebar(array('name'=>'subfooterright_r'));
Espero atento la ayuda, gracias.
gracias por la guia, pero me gustaria tener la fuente pq tengo algunas dudas, y e link de descarga no funciona podrias actualizar el link o enviramelo porfavor?
Hay muchas referencias sobre esto, he encontrado esta otra, mira a ver: http://wpshout.com/widgetised-footer-with-columns-in-wordpress/
mas o menos, poco claro
Excelente amigo, era lo que necesitaba, gracias!
Tengo un theme que no es el Kubrick, hasta el paso 2 todo bien, pero en el 3 no tengo register_sidebar, por lo que no sé donde debería añadir el código para que me admita widgets desde el editor. Os dejo un enlace para que veáis cómo es el código, a ver si me podéis echar un cable. Gracias de antemano.
muchas gracias aun funciona ese metodo con wordpress 3.8
Hola! Yo tengo una duda… una vez que tengo creados los widget, lo que no sé es cómo añadir páginas y que éstas no me aparezcan en el menú principal. No se si me explico… Quiero crear un pie de página con apartados de Contacto, Política de privacidad, acerca de nosotros…. pero cuando creo las páginas, éstas me aparecen también en el menú principal.
Noelia, pero los menus son editables y puedes añadir o quitar paginas y categorías a tu gusto. Esto es posible desde Apariencia > Menús
Hola! Yo tengo una duda… una vez que tengo creados los widget, lo que no sé es cómo añadir páginas y que éstas no me aparezcan en el menú principal. No se si me explico… Quiero crear un pie de página con apartados de Contacto, Política de privacidad, acerca de nosotros…. pero cuando creo las páginas, éstas me aparecen también en el menú principal.
Buenas.
Muchas gracias por vuestro tiempo!.
He estado probando el tutorial y a mi las columnas no me aprecen segun tu imagen, me aparecen una debajo de otra, Sabeis el motivo?
Muchas gracias.