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
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)

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(4 votos, promedio: 5)

¿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.

55 comentarios en “Como Añadir Widgets al Footer”

  1. Eres un as Fernando! Que buen post, disfruté mucho. Muchas gracias. Y también gracias a todo el equipo de Ayuda WordPress.

  2. Antes de agregar el primer div, agregas esto:

    Es para llamar la función que creamos en el archivo «functions.php»

  3. 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.

  4. 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.

  5. 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…

  6. 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

  7. 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

  8. Muchas gracias, me ha servido de mucho. Aunque tuve que adaptarla a mi propia theme pero igual me sirvió bastante.

  9. Pingback: wp-popular.com » Blog Archive » Como Añadir Widgets al Footer | Ayuda WordPress

  10. Gonzalo (1 comentari

    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!

  11. Mathias San Miguel

    Estupendo Post, la verdad en ningun lado se consigue informacion de este tipo. Muy interesante, ya lo estoy aplicando a mi blog.

  12. Pingback: Anónimo

  13.  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 🙁

  14. 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.

  15. Muy bueno, funciona muy bien y ahora entiendo como funciona mas la edicion CSS, felicidades por escribir este tipo de tutoriales/ayudas gracias!!!!

  16. 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

  17. 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

    1. 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.

  18. 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!!!

    1. 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!

  19. 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.

  20. 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

  21. carlos vallenriquez

     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.

  22. 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?

  23. 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.

  24. 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.

    1. 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

  25. 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.

  26. 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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido