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

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

    No da ningún error pero tampoco ningún resultado. He seguido los pasos y no me aparecen las nuevas zonas de widgets en la dashboard.

    Saludos.

  2. Hola Fabriciano, estaba buscando información sobre el tema de este post y me he decidido a intentarlo, ya que he visto otros post, pero no indican cómo realizar varias columnas. Por cierto, son responsivas?

    Otro problema que me surge de inicio es que cuando añado el código a la functions.php sólo aparecen en la zona de widgets del panel de control de WP la zona centro y la derecha, la izquierda no. No sé por qué.

    El Css respeta los colores y fuentes de la plantilla?

    Gracias,

    1. El artículo lo escribí hace ya tiempo y no lo probé en temas responsive. Respecto a lo de las zonas, en principio tendrían que aparecer las tres: izquierda, centro y derecha.

      Respecto a lo de los colores y fuentes del tema original, habría que hacer algunos ajustes, tal como indico en el artículo, adaptando colores de texto y fondo a tu plantilla. La fuente del texto de la plantilla no se toca, lo único que se fija es el tamaño del texto, que, si no te satisface, puedes cambiar.

      Saludos.

Deja una respuesta

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.