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.

haz click en la imagen para ver a tamaño completo

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.

<?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:

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

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

haz click en la imagen para ver a tamaño completo

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

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

.footer-item {
float: left;
width: 33%;
padding-bottom: 10px;
}
.footer-item ul {
padding-left: 15px;
}

Tags de búsquedas:

añadir imagen footer wordpress,personalizar footer wordpress,botones fijos en avada,insertar una imagen en el footer wordpress,poner copyright en wordpress plugin,poner copyright wordpress,poner css wordpress a una zona widget,poner logo en el footer wordpress,poner un logotipo en el footer wordpress,poner widget en el footer,poner widget footer,poner widget wordpress solo en portfolio,poner widgets en el footer,puede ir el widget de facebook ir footer de pagina wordpress,plugins para footer wordpress

Noticias relacionadas »

25 comentarios en Truco WordPress. Añadir widgets al pie o footer de tu tema de wordpress

  1. Carlos
    / Responder

    Pedro, necesito agregar un widget a mi sidebar que me permita visualizar las categorías de portfolios y sus items (solo títulos).
    Algo muy similar al agregar el widget “Categorías” al sidebar que te permite ver todas las categorías con sus Entradas.
    Me estoy quemando la cabeza con esto, ¿me podrías dar una mano?

  2. VICTOR
    / Responder

    Gracias pedro !! me funcionó de maravilla… tienes un truco para agregar un widgets en el header?? estoy aprendiendo wp y quiero poner información en la parte superior.

  3. / Responder

    Me ha encantado tu post, porque me ha solucionado un problema que tenía
    Enhorabuena
    Guillermo

  4. / Responder

    hola gran tuto, la duda es que tengo que modificar para que salga en horizontal en css?, es lo unico que me falta para terminar con esta parte… si me guian seria de gran ayuda. muchisimas gracias ;D

  5. / Responder

    Gracias. No lo he aplicado a mi blog porque es en wordpress.com, pero si a un theme que preparé para un “cliente”. Te dejo el comentario porque me sentía culpable usándolo sin agradecerte la ayuda jajaja

  6. pedroventura
    / Responder
  7. Victoria
    / Responder

    Hola Pedro Ventura,
    Acabo de realizar el primer paso de ¨TRUCO WORDPRESS. AÑADIR WIDGETS AL PIE O FOOTER DE TU TEMA DE WORDPRESS¨ para agregar widgets en la parte inferior de mi blog, el cual esta hecho con la plantilla theattocreativity Y me ha dado el siguiente error: Parse error: syntax error, unexpected ‘)’ in /homepages/18/d339878873/htdocs/wp-content/themes/threattocreativity/functions.php on line 4

    Por favor, Podrías ayudarme?
    No puedo acceder a ninguna parte del blog, siempre me aparece el mismo error

    • Pedro Ventura
      / Responder

      Hola Victoria,

      El problema es que no está bien cerrado un paréntesis o un corchete, o quizá un punto y coma “;”. Quizá has copiado mal el código del artículo o lo has pegado donde no corresponde.
      Deberás restaurar una copia del código. En caso de que no tengas copias de seguridad y no sepas trabajar con el código PHP, que me imagino que así es, envíame tu archivo functions.php de tu template threattocreativity, sólo ese archivo a pedroventura@pedroventura.com, te intentaré ayudar lo antes posible.

      Un saludo!

  8. Mac
    / Responder

    Se agradece 😀 !!!!

  9. / Responder

    muchas gracias por este tuto en verdad me sirvio mucho para una plantilla que estaba haciendo.

  10. Nico
    / Responder

    Me sirvió muuuucho, esto gracias!

  11. Alejandro
    / Responder

    Excelente(:

  12. / Responder

    No consigo mas de una columna desde el archivo styles.css como podira conseguir por lo menos 3 en total? desde ya muchas gracias

  13. / Responder

    Hola Pedro como estas?, mira estoy haciendo esta pagina donde muestro algunos diseños, hice el paso a paso de tu explicacion, consegui el footer para agregar los widgets, pero aun asi me sigue mostrando los mismo en una lista hacia abajo. te adjunto mi css en la parte del footer. desde ya muchas gracias

    /* =Footer, copyright
    —————————————————————————– */
    }
    .footer-item ul {
    padding-left: 15px;
    }
    #footer {
    font-size: 11px;
    line-height: 16px;
    padding: 20px 0;
    height: 16px;
    }
    #footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #footer li {
    background-image: none;
    float: left;
    margin-right: 20px;
    padding: 0;
    overflow: hidden;
    }
    #copyright {
    float: right;
    }

  14. amdacoba
    / Responder

    Perfecto. Funciona a la perfección este tutorial. Gracias por la explicación y la sencillez

  15. x-son
    / Responder

    hola, es muy buena explicacion, solo tengo una pregunta, ¿como le hago para que los widgets salgan en forma horizontal y no vertical? espero me puedan ayudar, muchas gracias

    • Pedro Ventura
      / Responder

      Eso depende ya de maquetacion, es decir, del CSS que tengas y de la manera que presentes el HTML. Tendrás que maquetar el footer, con los divs que le metas y que todo te cuadre, supongo que los tendrás que meter con floats y con widths fijos. Esto es algo específico de cada web, no hay mucho mas que te pueda decir o ayudar, eres tu el que tendrás que tocar el CSS y ver como lo ordenas

  16. / Responder

    Gracias Pedro, me ha ayudado mucho

  17. RUBEN
    / Responder

    muy buena tu explicacion

  18. RUBEN
    / Responder

    muy buena la explicacion, gracias. Ruben Alcivar

  19. Gonzalo Catrinao
    / Responder

    No me quedo claro cuandotos witget puedes agregar….donde puedo encontrar un ejemplo pata ver como queda?

    • IM
      / Responder

      Hablo sin saber, no se nada de wordpress, pero si por el lateral te permite agregar cuantos widgets quieras y la pagina entonces se iria alargando, imagino que el footer sera igual. A mas widgets, mas ancho el footer, digo yo.

      No se, ya te digo, hablo por hablar, pero tal vez pueda sacarte algo en claro. Supongo que desde que Pedro pueda, te solventara la duda, pero hasta entonces, espero haberte servido de algo jaja.

      Saludos.

  20. Ari
    / Responder

    Muy buena la explicacion, FELICITACIONES!

  21. cooosmos
    / Responder

    Buen tuto, hace poco hice algo similar en mi blog pero agregue 3 columnas, aunque este se me hace interesante lo probare..

    pd: por cierto, tu sección Portfolio lo escribiste así al proposito o intentabas poner Portafolio… Saludos

    • Pedro Ventura
      / Responder

      Buenas,
      hice este truco con este tema que uso porque no podía agregar widgets en el footer, y quería meter uno.

      pues lo de portfolio es que siempre lo he puesto así, no se si las dos acepciones estarán bien…

      He ido a ver tu web y me ha dado este error: Bandwidth Limit Exceeded :S

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Invertir en criptomonedas: »

 

Cómo comprar bitcoin

Invertir y comprar Bitcoin y otras altcoins es más fácil de lo que crees.

1) Si sólo quieres comprar Bitcoin, Ethereum o Litecoin como inversión, tu opción es Coinbase

2) Si quieres probar con otras criptomonedas tu opción es Binance

3) Cualquier duda escríbeme con total libertad al formulario de contacto para resolver dudas: https://www.pedroventura.com/contacto/

¡Comparte este artículo! »

  • Irene (3 días)
    I used www.zerobounce.net and it is an amazing platform for…
  • Felipe Albornoz (4 días)
    Agradecido. Saludos.
  • Joel (2 semanas)
    Este grupo es buenísimo hay personas de todo el mundo…
  • Citricus (3 semanas)
    Análisis muy buenos y detallados: Crypto Trading Campus https://t.me/cryptotradingcampus
  • Vane (2 meses)
    Hola muy buena información, en lo personal mino con Javascript…
  • Gabriel Roncancio (2 meses)
    Hola Pedro, gracias por compartir. Tu artículo me dió algunas…

Suscríbete al newsletter »

Proporciona tu correo electrónico a continuación y recibe las últimas noticias! Funciona con Feedburner de Google

Archivo »

Leer entrada anterior
pautas y consejos para comparar y elegir un servidor dedicado

Desde hace mucho tiempo, aproximadamente 4 meses, llevo buscando un nuevo servidor dedicado para el nuevo desarrollo de la web...

Cerrar