Crear un Footer con Widgets y columnas en WordPress fácil y rápido

La mayoría de los blogs que existen en internet actualmente, tienen en su estructura de diseño un footer o pie de página donde se pueden colocar todo tipo de widgets como entradas recientes, comentarios, información del autor, etc. Pero así como la mayoría de los temas para wordpress cuentan con un footer exactamente como lo queremos, otros no lo tienen, o simplemente no cumplen nuestras espectativas y entonces no podemos poner la información de la forma en la que la queremos mostrar.

Este es mi caso, ya que mi tema cumplía a cabalidad con todo lo que quería para mi blog, menos en el Footer. Pero con este sencillo manual, van a poder crear un pié de página en cuestión de minutos, con varias columnas, 2, 3, 4 según su gusto y con el diseño y forma que quieran darle. Al final del post, si se siguen correctamente los pasos de este tutorial van a tener un footer como el que tengo al final de este blog, donde podrán colocar sus Widgets favoritos y con el diseño, colores y forma que ustedes deseen.

Paso 1:

Lo primero que se debe hacer es crear un nuevo Sidebar Dinámico, el cual se convertirá posteriormente en su Footer. Este Sidebar se debe colocar en el Archivo functions.php de los archivos de su tema actual. Nos dirigimos a este archivo y copiamos el siguiente bloque de código justo después del código de su sidebar que ya se encuentra registrado.

Copia y pega el siguiente código:

register_sidebar(array(
‘name’ => ‘footer’,
‘before_widget’ => ‘<div id=”%1$s”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));

Al haber pegado el anterior código, el archivo deberá quedar de la siguiente forma:

Como se ve en la figura, el código resaltado con color amarillo, es el que acabamos de pegar para registrar el nuevo Sidebar que se convertirá en el footer. El código que está sin resaltar, es el Sidebar que ya estaba registrado en el tema que uso actualmente. Los corchetes que tienen al lado un pequeño cuadro azul, no estaban antes de pegar el código, por lo que hay que ponerlos justo en la posición que ven en la figura, al inicio y al finalizar el registro de los Sidebar.
Debe tenerse en cuenta que dependiendo del tema que tengan, la estructura puede cambiar y se debe prestar más atención de donde colocarán su código. Una vez terminado este paso, se debe guardar/actualizar el archivo.

Paso 2:

Lo siguiente es copiar el siguiente código:

<div id=”chunkyfooter”>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Footer’) ) ?>
</div>

Y pegarlo en donde quieras que salga el nuevo Sidebar (footer). Mi recomendación es que lo pegues en el archivo footer.php, que es donde normalmente debería ir, además que allí saldrá en todas las páginas de tu blog. Al hacerlo deberá quedar de la siguiente forma:

El código resaltado en amarillo es el que acabamos de pegar en el archivo.

Paso 3:

Esto es todo lo que se debe hacer para tener nuestro propio Footer. Pero si se fijan en su sitio, aún no aparece nada porque no hemos agregado widgets aún. El siguiente paso es dirigirnos al panel de nuestro WordPress y colocar unos dos o tres Widgets en el nuevo Footer:

El problema ahora no es nada más que DISEÑO. Si después de colocar los Widgets y dirigirse a su página o blog, ven que lo que acaban de hacer está superpuesto y todo encima del texto original, no se preocupen. Aún falta organizar el estilo CSS para que el footer quede bien y donde debe.

Paso 4:

Se dirigen a los archivos del tema y abren el style.css o el archivo de hoja de estilo por defecto de su tema. Posteriormente empezamos a configurar el estilo del nuevo footer:

/* Chunky Footer */

#chunkyfooter {
clear: both;
margin: 0 10px;
}

Al aplicar este cambio en su estilo, podrán ver en su página que las cosas van mejorando notablemente, pero aún se encuentran verticalmente nuestros widgets, y lo ideal es que queden varias columnas y se pueda visualizar mejor el pie de página. Para colocar varias columnas deben tener en cuenta el ancho de su tema y dependiendo de esto dividirlo entre el número de columnas que deseen. Así si el ancho de su tema es de 900 px y se desean 3 columnas, cada una será de 300 px o un poco menos para evitar posibles problemas:

/* Chunky Footer */

#chunkyfooter div {
width: 270px;
float: left;
}

Es cuestión únicamente de empezar a jugar con el valor del width hasta que se acomode al número de columnas que deseen y el ancho quede bien configurado y se vea adecuadamente para los visitantes.

Después de esto, solo se deben empezar a corregir pequeños detalles de espacios, márgenes, colores, tamaños, y ese tipo de cosas que pueden arreglar fácilmente según sus gustos. Por último les dejo mi código CSS para que miren y puedan comparar lo que hice, con lo que ustedes quieran para su diseño:

/* Chunky Footer */
#chunkyfooter {
clear: both;
margin: 0 10px;
background: #e9ece8;
overflow: hidden;
padding-top: 15px;
border-left: 10px solid gray;
}

#chunkyfooter div {
width: 270px;
float: left;
padding: 0 10px;
}

#chunkyfooter h2 {
margin-top: 0;
font-size:20px;
line-height:55px;
}

#chunkyfooter ul {
padding-left: 14px;
}

.narrowcolumn {
float: left;
padding: 0 0 20px 20px;
margin: 0px 0 0;
width: 472px;
}

#chunkyfooter a {
color:black;
}

Más información en Apaddedcell.com

Cualquier duda, pregunta u opinión en los pasos de este tutorial, no duden en comentar. Sus mensajes serán respondidos a la mayor brevedad posible.

Puedes seguir los comentarios de esta entrada a través de RSS 2.0 Usted puede dejar un comentario, o trackback.

Acerda de Juan Sebastián

Ingeniero de Sistemas y Telecomunicaciones de la Universidad de Manizales (Colombia) con énfasis en Redes y Seguridad Informática. Creador y administrador de ComuSOFT.com y apasionado del mundo de las redes de telecomunicaciones, el Software libre, Linux y la Seguridad de la Información. Actualmente me desempeño como Help Desk Engineer en una importante Multinacional de Seguridad Informática en Latino América. En lo que pueda colaborarte, lo haré con gusto!
Escribe un Comentario

Una respuesta

  • Hola:

    La verdad es que no soy muy ducho en php u otro lenguaje de programación. Tengo un amigo que me ha ayudado configurando casi todo mi tema lamoon responsive pero me he cargado una columna de pie y no consigo añadirla otra vez.

    Me indicó que podría arrastrar el witget dentro del footer, pero eso no funciona ya que no los puedo arrastrar de nignuna manera.

    Necesito ayuda específica ya que he eliminado la columna 2 y quisiera añadirla otra vez.

    ¿Pueden ustedes ayudarme?

    Gracias por adelantado.



Escribe un comentario

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