Viernes , 1 agosto 2014
Inicio » Herramientas de Internet » Blogs / Wordpress » Crear una zona de widgets en el footer de WordPress

Crear una zona de widgets en el footer de WordPress

Si el tema o plantilla que utilizas en WordPress para gestionar tu sitio web no tiene una zona de widgets en el footer o pie de página, puedes crearlo haciendo unos pequeños cambios y ajustes en algunos archivos. Con ello conseguirás que tu sitio muestre información, la que tu quieras, en una zona cada vez más cuidada en muchas webs y examinada por muchas personas.

Crear una zona de widgets en el footer de WordPress

Para conseguir lo que pretendemos debemos efectuar los cambios en tres archivos del tema: functions.php, style.css y footer.php. Esto es lo que debes hacer en cada uno de ellos:

Cambios en functions.php

Debes añadir, mejor al final del archivo, la siguiente porción de código:

if ( function_exists('register_sidebar') )
{
register_sidebar(array('name' => 'Footer Left','before_widget' => '','after_widget' => '','before_title' => '<h3>','after_title' => '</h3>'));
register_sidebar(array('name' => 'Footer Center','before_widget' => '','after_widget' => '','before_title' => '<h3>','after_title' => '</h3>'));
register_sidebar(array('name' => 'Footer Right','before_widget' => '','after_widget' => '','before_title' => '<h3>','after_title' => '</h3>'));}

Cambios en style.css

Añade, también al final del archivo, las definiciones siguientes:

/* Widgets Footer */
#front-popular {
font-size:11px;
color:#fff;
width: 950px;
background:#303030;
margin: 0 auto;
padding:15px;
border-left:5px solid #fff;
border-right:5px solid #fff;
border-bottom:5px solid #fff;
}
#front-popular h3 {
color:#fff;
}
#front-popular img {
background-color:transparent;
}
#left-footer, #center-footer {
width:289px;
float:left;
padding:0px 20px 0px 0px;
border-right:1px solid #808080;
}

#center-footer {
margin-left:20px;
}

#right-footer {
width:290px;
float:right;
padding:0px;
}

#left-footer a, #center-footer a, #right-footer a {
color:#fff;
}

#left-footer ul, #center-footer ul, #right-footer ul {
margin-top:5px;
}

#left-footer li, #center-footer li, #right-footer li {
list-style:none;
padding-top:1px;
}

#left-footer ul li a, #center-footer ul li a, #right-footer ul li a {
padding:5px;
display:block;
text-decoration:none;
}

#left-footer ul li a:hover, #center-footer ul li a:hover, #right-footer ul li a:hover {
background:#000000;
color:#fff;
}

#left-footer ul li:first-child, #center-footer ul li:first-child, #right-footer ul li:first-child {
background:none;
}

/* Float Properties*/
.clearfloat:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfloat {
display: inline-block;
}

En función de la anchura que tenga tu plantilla tendrás que efectuar los ajustes pertinentes en las variables width de #front-popular, #left-footer, #center-footer y #right-footer. Si no te gustan los colores del fondo y del texto, deberás cambiarlos en todos los lugares en los que aparezcan color y background.

Cambios en footer.php

Debes añadir en la zona que desees, mejor justo antes de los créditos, la siguiente porción de código:

<div id="front-popular">

<div id="left-footer">
<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Left') ) : ?>
<?php endif; ?>
</div>

<div id="center-footer">
<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Center') ) : ?>
<?php endif; ?>
</div>

<div id="right-footer">
<?php
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Right') ) : ?>
<?php endif; ?>
</div>

</div>

Después de hacer los cambios y los ajustes que consideres necesarios verás, en Apariencia -> Widgets de tu Dashboard, una nueva zona con los tres apartados especificados: Footer Left, Footer Center y Footer Right. Añade algunos widgets en cada uno de esos apartados y tendrás algo similar a lo que puedes ver en el footer de todas las páginas de Lecciones.

Acerca de Fabriciano González

Amante de la informática y de Internet entre otras muchas pasiones. Leo, descifro, interpreto, combino y escribo. Lo hago para seguir viviendo y disfrutando. Trato de dominar el tiempo para que no me esclavice.

7 Comentarios

  1. gracias por contestar tant rapido!! acabo de cambiar en el footer el orden de unos parametros y veo que me sale bien. Todo lo que indicabas es correcto eran los parametros que venian con la plantilla que unos lo he tenido que poner antes y otros depues. GRacias de verdad!!

  2. Buenas, gracias por la informacion, tengo una duda he tenido que añadir este codigo para que el recuadro negro fuera mayor:

    * Widgets Footer */

    #front-popular {

    font-size:11px;

    color:#fff;

    width: 930px;

    height: 250px; (ESTE!!!!!!)

    background:#303030;

    margin: 0 auto;

    padding:15px;

    border-left:0px solid #fff;

    border-right:0px solid #fff;

    border-bottom:0px solid #fff;

    }

    Tengo una duda!!! el recuadro solo me sale a la pagina principal, cuando voy a las otras no hay recuadro negro en la zona de pie de pagina esta situado arriba de todo. Como lo soluciono???

    muchas gracias!! mencantaria una respuesta porque me estoy volviendo loco!

    Gracias!
    Albert

    • Partimos de la base de que has hecho las modificaciones en los tres archivos que indico. ¿Es así?

      Si la respuesta a la pregunta del párrafo anterior es positiva, necesitaría echarle un vistazo al sitio web en el que has hecho los cambios con el fin de averiguar en donde se produce el fallo. ¿Puedes darnos la dirección?

      Saludos.

  3. Hola que tal… tu ayuda me fue muy grata y muy sencilla… solo que tengo un problema del widget left se me crean dos y no se por que… si me pudieras ayudar gracias…

Deja un comentario