La inspiración para este tutorial proviene de un tweet que recibí con comentarios para el tema RS12, que pronto será lanzado.
Aunque el pie de página con widgets finalmente no se incluyó en el lanzamiento del tema RS12, decidí escribir este tutorial para mostrar cómo agregar un pie de página con widgets en tu tema. En esta guía, aprenderás:
- El código HTML y CSS necesario para producir el pie de página con widgets
- Cómo agregar etiquetas de plantilla de WordPress de uso común como marcadores de posición
- Cómo convertir el pie de página en un área de widgets y colocar widgets dentro de él
Habrá mucho código en esta publicación, así que si estás listo, sigue leyendo...
Usaré el tema de WordPress Green Rays como mi ejemplo en este tutorial. Por el momento, el pie de página solo tiene un mensaje estándar de "copyright" y créditos.
El HTML
El primer paso es agregar el marcado HTML. Digamos que tendremos tres secciones diferentes en el pie de página con widgets para listas de Publicaciones Recientes, Archivos Mensuales y Archivos Diarios. Colocaremos este código HTML encima de la línea actual de "derechos de autor".
<div class="footer-item">
<h3>Entradas Recientes</h3>
<ul>
<li><a href='#' title='Entrada destacada'>Entrada destacada</a></li>
<li><a href='#' title='Citas en bloque'>Citas en bloque</a></li>
<li><a href='#' title='Cómo funciona la etiqueta ‘more’'>Cómo funciona la etiqueta ‘more’</a></li>
<li><a href='#' title='Ordenar o Desordenar'>Ordenar o Desordenar</a></li>
</ul>
</div>
<div class="footer-item">
<h3>Archivos Mensuales</h3>
<ul>
<li><a href='#' title='Marzo 2008'>Marzo 2008</a></li>
<li><a href='#' title='Febrero 2008'>Febrero 2008</a></li>
<li><a href='#' title='Enero 2008'>Enero 2008</a></li>
<li><a href='#' title='Diciembre 2007'>Diciembre 2007</a></li>
</ul>
</div>
<div class="footer-item">
<h3>Archivos Diarios</h3>
<ul>
<li><a href='#' title='7 de marzo de 2008'>7 de marzo de 2008</a></li>
<li><a href='#' title='9 de febrero de 2008'>9 de febrero de 2008</a></li>
<li><a href='#' title='4 de enero de 2008'>4 de enero de 2008</a></li>
<li><a href='#' title='22 de diciembre de 2007'>22 de diciembre de 2007</a></li>
</ul>
</div>
<div class="clear"></div>
Básicamente, este código coloca cada “widget” en un div. Dentro de cada widget hay un encabezado y una lista desordenada con enlaces. Sí, sé que los enlaces no van a ninguna parte. Más tarde, reemplazaremos esto con etiquetas de plantilla de WordPress. Aquí está lo que tenemos hasta ahora:
El CSS
Como puedes ver, esto no se ve muy bien sin ningún estilo CSS. Agrega el siguiente código a tu hoja de estilos.
.footer-item {
float: left;
width: 33%;
padding-bottom: 10px;
}
.footer-item ul {
padding-left: 15px;
}
Lo que hace este código es flotar cada elemento del pie de página a la izquierda, lo que básicamente significa que pueden estar uno al lado del otro. El ancho se establece en 33%, lo que da suficiente espacio para tres elementos del pie de página en una sola fila. También se agrega un poco de relleno debajo de cada elemento del pie de página. La segunda parte es simplemente agregar un relleno de 15 píxeles a la izquierda de las listas.
Ahora puedes ver que el HTML y el CSS están empezando a unirse. Esto es lo que deberías tener hasta ahora:
Código de WordPress
Por el momento, tenemos un montón de enlaces HTML vacíos, sin código real de WordPress. Reemplacemos las listas debajo de Entradas Recientes, Archivos Mensuales y Archivos Diarios con los equivalentes de etiquetas de plantilla de WordPress. Reemplaza lo que tienes actualmente con lo siguiente:
<div class="footer-item"><h3>Entradas Recientes</h3><ul><?php wp_get_archives('type=postbypost&limit=4'); ?></ul></div><div class="footer-item"><h3>Archivos Mensuales</h3><ul><?php wp_get_archives('limit=4'); ?></ul></div><div class="footer-item"><h3>Archivos Diarios</h3><ul><?php wp_get_archives('type=daily&limit=4'); ?></ul></div>
Los parámetros deberían ser bastante autoexplicativos, pero si no estás seguro de alguno de ellos, intenta buscar wp_get_archives en la Herramienta de Búsqueda de Etiquetas de Plantilla de WordPress. Recuerda, solo estoy usando las etiquetas de plantilla wp_get_archives() como marcador de posición. Las cambiaremos por otros widgets de WordPress más tarde, después de que hagamos el pie de página con widgets.
Hazlo "Widgetizable"
Para esta sección del tutorial, tomaré prestadas partes de mi tutorial anterior sobre temas con widgets.
El primer paso es registrar las "barras laterales". Para hacer esto, simplemente reemplace el contenido actual del archivo functions.php con lo siguiente:
'Barra lateral',
'before_widget' => '',
'before_title' => '',
'after_title' => '
',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Pie de página',
'before_widget' => '',
'before_title' => '',
'after_title' => '
',
));
?>
Ahora iremos a sidebar.php y reemplazaremos la etiqueta condicional de barra lateral dinámica actual con esto:
Con esto:
Ahora iremos a nuestro archivo footer.php y envolveremos los elementos del pie de página en su propia etiqueta condicional de barra lateral respectiva. Justo antes del primer div de “sidebar-item”, agregue lo siguiente.
Justo después del último div de cierre “footer-item” (y encima del div “clear” que agregamos anteriormente) agregaremos lo siguiente:
<?php endif; ?>
Bien, ahora nuestra barra lateral y el pie de página deberían ser "widgetizados". Probémoslo agregando algunos widgets en el pie de página. Agregaré un widget de "Blogroll", un widget de "Comentarios recientes" y un widget de texto. Así es como debería verse:
Conclusión
Bueno, esos son los conceptos básicos para agregar un pie de página "widgetizado" a tu tema. Es posible que desees agregar reglas de estilo separadas para otros tipos de widgets, como el calendario o el cuadro de búsqueda. Esto probablemente no funcionará con todos los temas, como el tema RS12, por ejemplo, ya que tenía un pie de página no expandible.
Si alguien quiere el tema actualizado Green Rays, por casualidad, puede descargarlo aquí. De esta manera, podrá ver dónde agregué exactamente el código. También puede compararlo con el tema original.
Espero que les haya gustado el tutorial. ¿Agregarán un pie de página con widgets a su tema? ¿Hay algo en el código que usé anteriormente que harían de manera diferente? Preguntas, comentarios, sugerencias y críticas son bienvenidos, así que siéntanse libres de expresarse en los comentarios.
Estoy teniendo un error al agregar un widget personalizado en mi tema. Este es el código que he estado agregando en functions.php.
function widget()
{
register_sidebar(array(
‘name’ => __(‘Barra lateral principal’, ‘wpb’),
‘id’ => ‘primary_sidebar’
‘description’ => ”,
‘class’ => ”,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
));
}
add_action(‘widgets_init’, ‘widget’);
¿Qué mensaje de error están recibiendo?
¡Increíble trabajo en tu tutorial!
Una pregunta:
¿Por qué necesitaste agregar código al archivo sidebar.php cuando el propósito del tutorial es agregar tres áreas con widgets en el pie de página?
Hola Mark, buena pregunta.
Este tutorial asume que ya tienes un área con widgets en tu barra lateral. Cuando menciono el archivo
sidebar.php, básicamente estoy recodificando esa área con widgets para que tenga un nombre único (en este caso, "Sidebar") para diferenciarla del nuevo área con widgets del pie de página que estamos a punto de crear.Hay más información sobre cómo codificar múltiples áreas de widgets en mi tutorial de temas de WordPress con widgets.
¡Guau, en realidad logré que esto funcionara! (No es un comentario sobre tu código, solo un comentario sobre mi destreza para codificar). ¡Gracias!
Mi primer intento de widgetización, y esto funcionó a la perfección. ¡Gracias! 🙂
Dijiste:
“El primer paso es agregar el marcado HTML.” y “Colocaremos este código HTML encima de la línea actual de “derechos de autor”.”
OK… ¿agregarlo ¿A QUÉ? ¿Dónde pongo el marcado HTML? ¿A qué lo agrego? ¿Cómo encuentro el archivo que tiene la línea de ‘copyright’?
Intenta buscar en tu archivo
footer.php.¿Podrías darme un resumen rápido del nuevo pie de página del tema predeterminado de 2012? Quiero usar este tutorial, pero el pie de página de 2012 es extrañamente largo o “alto”. Quiero agregar 5 widgets de texto, y tiene una plantilla fluida, así que me gustaría que estuviera centrado. Puedes agregar una bolsa de papas fritas con eso si quieres 😛
El tutorial es maravilloso, pero me gustaría saber cómo colorear el fondo donde se encuentran los widgets o cómo agregar una imagen debajo de ellos. Si pudieras responder a este comentario o enviarme un correo electrónico, sería genial.
Una vez más, gran tutorial, funcionó perfectamente para el blog de mi tema y ahora solo quiero pintarlo un poco, si me entiendes.
Saludos cordiales y espero tu respuesta. :)
Creo que buscas la propiedad CSS background - http://www.w3schools.com/css/css_background.asp
Vaya, realmente no sé si podrías haberlo hecho más directo y simple. Excelente tutorial sobre un proceso que podría haber sido mucho más difícil… 10 minutos y ya estoy funcionando con widgets de pie de página completamente nuevos. ¡Gracias!
¡Muchas gracias por tomarte el tiempo para hacer esto! Publicación increíble. El tema con el que estoy trabajando ha sido muy personalizado, ¡así que esto debería ayudarme a agregar el pie de página que he estado buscando durante un tiempo!
Gracias por el gran tutorial. Tengo una pregunta. Agregar los widgets no es un problema, pero de alguna manera no quiere agregar un fondo a todo el pie de página. La parte donde están los widgets se queda blanca conmigo. ¿Alguna forma de arreglar eso?
http://blog.whenlovefalls.com/
Hmm… parece que olvidé mencionar poner
.clear { clear: both; }en tu hoja de estilos.Eso debería solucionar el problema.
¿No es un problema reemplazar el contenido del archivo functions.php? ¿No es ese uno de los archivos que se supone que no debo tocar?
Además, ¿qué llamada a función necesitaría para obtener una lista de páginas en cada sección del sitio web? Quiero una especie de pie de página de "mapa del sitio", si me entiendes (una lista horizontal de enlaces de nivel superior, cada uno con sus subpáginas listadas debajo).
Puedes tocarlo si quieres, pero haría una copia de seguridad antes de editarlo, ya que si cometes un error, puede causar problemas en el resto de tu sitio.
Probablemente estés buscando la función wp_list_pages o el widget "Páginas".
Esta publicación me salvó. Probé muchas otras publicaciones, casi me rindo y luego encontré la tuya. Funciona a la perfección. Siendo un Entrenador Personal de San Diego, tengo que tener la información disponible para la gente. Gracias de nuevo por la ayuda. 2001 Iron
Lo siento, presioné el botón de enviar por accidente. Ok, gracias por la publicación genial. ¿Te importa si pongo un enlace a ella? Gracias
Campeón de Fisicoculturismo del Ironman 2001, Hank Butler
Me alegra que te haya gustado la publicación, Hank. Siéntete libre de enlazarla.
¿Puedo reemplazar este pie de página con el pie de página de cualquier tema de WordPress?
Prácticamente. Hay algunos diseños de pie de página que no son muy flexibles y podría no funcionar en esos.
Hola Leland,
¿Cómo puedo cambiarlo para que el fondo de todo el pie de página tenga un color diferente al del resto de la página? Intenté usar `background-color` en la sección `footer-item` de la hoja de estilos, pero solo cambia el fondo de las áreas ocupadas por los widgets, por ejemplo, si el widget solo ocupa la mitad del área del widget, el fondo también solo ocupa la mitad del área.
Probablemente necesitarías poner otro div alrededor de todos los divs footer-item y establecer el background-color en ese. Asegúrate de que los divs footer-item también estén limpios.
Gracias Leland
Jugué un poco más y logré hacerlo. Tuve que poner mi etiqueta al principio del archivo y colocar el estilo `background-color` dentro de ella.
Gracias por la publicación. Probé muchas otras ideas de personas sobre cómo hacer esto y pasé la mayor parte de mi tiempo arreglando lo que habían arruinado. Esto funciona a la perfección y ahora lo tengo en todos mis sitios. Gracias
¡Hank, me alegra saber que te funcionó!
¡Muchas gracias por este buen tutorial, Leland! 🙂
¿Crees que podrías guiarme sobre cómo podría agregar separadores entre cada bloque (div) de enlaces o widgets, como en el pie de página de esta página?
@Saeed: Lo único que necesitarías hacer es cambiar tu CSS.
Puedes hacer algo como:
.footer-item { border-right:1px solid #000; }
O siempre puedes aplicar un fondo a cada elemento del pie de página.
@Leland: Me encontré con esta publicación, intentando hacer algo un poco más extenso y buscaba consejo. Digamos que el usuario quiere agregar más de 3 widgets (por ejemplo) y el ancho del contenedor del pie de página solo puede manejar 3. Quiero que los siguientes 3 widgets caigan directamente debajo. Donde me estoy atascando es que cuando se agregan los widgets 4 (y posteriores), no están alineados verticalmente correctamente... debido a que los 3 widgets superiores no tienen una altura fija. Pero no quiero que los widgets tengan una altura específica, quiero que sea dinámica.
Lo único que se me ocurre es tener una función que obtenga los widgets para el pie de página en grupos divisibles por 3, y los envuelva en un contenedor div. ¿Puedes ayudarme con eso? Si no, ¿tienes alguna otra sugerencia sobre cómo puedo abordar esto?
Gracias,
Jeff
Jeff, lo que yo haría es crear tres áreas de widgets separadas, una para cada columna. De esa manera podrías poner tantos widgets como quieras en cada columna y estarían alineados correctamente.
¡Gran idea! Gracias
Hola
No logro pasar la parte de los widgets del tutorial. Y ahora mi sitio está plagado de errores. Seguí los pasos exactamente como los explicaste.
¿Puedes responder para que podamos repasar lo que salió mal?
Gracias por hacer este tutorial. Estoy deseando que funcione para mi sitio. Es una buena idea.
Buen tutorial. Yo también estoy atascado en la parte de los widgets. Tengo múltiples barras laterales en mi sitio, así que tengo dos archivos sidebar.php. Intenté agregar el HTML de la barra lateral a mi archivo “sibebar1.php”, pero ahora obtengo un error similar a lo que otros han publicado.
¿qué estoy haciendo mal?
Artículo realmente genial, finalmente me funcionó, ahora está implementado en mi sitio. Me ayudó a diseñar el tema existente como me gusta en lugar de buscar un tema adecuado. Gracias de nuevo por esto.
Hola, ¿podría usar esto con Thesis Theme? Lo compré y estoy tratando de aprender a usar todas sus funciones, como Thesis OpenHook. Avísame.
Gracias, Tam
[…] En: Plugins de Wordpress 29 Jul 2009 Ir a la fuente […]
[…] Agrega un pie de página con widgets a tu tema de WordPress Un tutorial que te enseña cómo descifrar tu propio pie de página con widgets, incluyendo el código HTML, CSS y de WordPress necesario. […]
[…] Agrega un pie de página con widgets a tu tema de WordPress Un tutorial que te enseña cómo codificar tu propio pie de página con widgets, incluyendo el código HTML, CSS y de WordPress necesario. […]
[…] Agrega un pie de página con widgets a tu tema de WordPress Un tutorial que te enseña cómo codificar tu propio pie de página con widgets, incluyendo el código HTML, CSS y de WordPress necesario. […]
Leland:
Gracias por tu comentario en mi publicación. Mi único problema con este tutorial es que no sé dónde va el marcado "HTML" inicial. ¿Está en functions.php?
[…] ¿un pie de página con widgets en un tema minimalista de Wordpress? Ya probé el tutorial aquí y algo de solución de problemas aquí. Quizás pruebe este […]