SummArg | Cursos y recursos para webmasters

Clase 9: el archivo footer.php

El archivo footer.php cumple una función similar al header.php en cuanto a que sirve para cargar scripts y archivos pertenecientes a plugins, tal como indicamos en la Clase 6. En dicho archivo colocamos tres cosas fundamentales: la función wp_footer(), el cierre de la etiqueta <body> y el cierre de la etiqueta <html>.

La función wp_footer() es utilizada por muchos plugins para cargar plugins y scripts en general que deban ir al final de la página por sus características de programación o para no demorar la carga de determinados contenidos de la página.

<?php wp_footer(); ?>
</body>
</html>

La mayoría de los diseños web tienen un pie de página bien definido en donde casi siempre podemos encontrar:

  • El copyright y/o leyenda del diseñador
  • Últimos comentarios
  • Últimas noticias
  • Últimos mensajes en redes sociales
  • Información de contacto (e incluso algún formulario de contacto pequeño)
  • Una barra de navegación secundaria
  • Publicidades
  • etc.

Nosotros vamos a intentar incorporar un área de widgets, en uno de los cuales insertaremos nuestros íconos sociales, un menú al final de la página que sea réplica del menú princial pero con un estilo diferente, y un link para volver al inicio que animaremos con jQuery.

Area de widgets

Hasta ahora en el div #footer tenemos lo siguiente:

<div id="footer">
 <ul class="social">
 <li><a href="#"><img src="http://localhost/wp-content/themes/themetaller/images/skype.png" /></a></li>
 <li><a href="#"><img src="http://localhost/wp-content/themes/themetaller/images/facebook.png" /></a></li>
 <li><a href="#"><img src="http://localhost/wp-content/themes/themetaller/images/twitter.png" /></a></li>
 <li><a href="#"><img src="http://localhost/wp-content/themes/themetaller/images/rss.png" /></a></li>
 </ul>
 </div><!-- end of footer -->

Vamos a modificarlo para que dentro haya tres áreas de widgets. En la primera colocaremos cualquier contenido a modo de pruebas, en la segunda colocaremos un área de widgets que crearemos para esta sección y en la tercera dejaremos los íconos sociales. Primero colocamos el código para crear nuestro área de widgets en el functions.php.

register_sidebar(array(
 'name' => 'Widget Footer',
 'before_widget' => '<div class="widget">',
 'after_widget' => '</div>',
 'before_title' => '<h3>',
 'after_title' => '</h3>',
 ));

Y ahora todo el contenido del #footer.

<div id="footer">
 <div class="widget">
 <h3>Footer</h3>
 <ul>
 <li>Contenido de prueba</li>
 <li>Contenido de prueba</li>
 <li>Contenido de prueba</li>
 <li>Contenido de prueba</li>
 <li>Contenido de prueba</li>
 </ul>
 </div>
 <?php
 if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Widget Footer') ) : endif;
 ?>
 <ul class="social">
 <li><a href="#"><img src="http://localhost/wp-content/themes/themetaller/images/skype.png" /></a></li>
 <li><a href="#"><img src="http://localhost/wp-content/themes/themetaller/images/facebook.png" /></a></li>
 <li><a href="#"><img src="http://localhost/wp-content/themes/themetaller/images/twitter.png" /></a></li>
 <li><a href="#"><img src="http://localhost/wp-content/themes/themetaller/images/rss.png" /></a></li>
 </ul>
 </div><!-- end of footer -->

Las rutas a los íconos sociales deben arreglarse para que funcionen cuando el theme esté instalado en cualquier sitio web, por lo que necesitamos usar la función bloginfo() para lograr que éstas sean dinámicas.

<ul class="social">
 <li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/skype.png" /></a></li>
 <li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/facebook.png" /></a></li>
 <li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/twitter.png" /></a></li>
 <li><a href="#"><img src="<?php bloginfo('template_url'); ?>/images/rss.png" /></a></li>
 </ul>

El resultado es un área de widgets que tiene fondo gris, como los que agregamos anteriormente en las sidebars.

Sería bueno que los widgets del footer tengan su propio estilo, por lo que añadimos un nuevo estilo para todo .widget que se encuentre dentro de #footer de la siguiente manera:

#footer .widget {
 width:281px;
 float:left;
 margin-left:20px;
 background:none;
 border:none;
 padding:0;
 }
#footer .widget h3{
 color: #7b7b7b;
 border-bottom: 2px solid #fff;
 padding-bottom: 5px;
 margin-bottom:5px;
 width:281px;
 float:left;
 margin-left:20px;
 text-shadow: 0px 0px 2px #bdbdbd;
 filter: dropshadow(color=#bdbdbd, offx=0, offy=0);
 }
#footer .widget p, #footer .widget a, #footer .widget li{
 color: #7b7b7b;
 text-decoration:none;
 }
#footer .widget a:hover {
text-decoration:underline;
}

 

Al título h3 del widget notarán que le agregué text-shadow. Pueden agregar toda clase de efectos geniales con CSS3 usando este generador de código css3generator.com. Quienes tengan navegadores actualizados a las últimas versiones podrán ver los nuevos efectos, y quienes tengan navegadores mas antiguos verán simplemente el texto sin el efecto, completamente funcional.

Los íconos sociales quedaban en dos líneas porque el contenedor resultaba muy angosto, por lo que aumentamos el width y ya caben perfectamente.

ul.social {
 list-style-type:none;
 float:right;
 width:190px;
 padding:0px;
 margin:0px;
 }

Menú adicional

No resulta mala idea añadir un menú al pie de página. Ayuda a que el sitio resulte mas fácil de navegar. Por eso vamos a repetir nuestro “Menú Principal” debajo pero definitivamente debemos modificar el estilo del mismo. Vamos a utilizar el id #menuFooter para la etiqueta <ul>, así que modificamos y pegamos el siguiente código antes del cierre del div #footer.

<?php wp_nav_menu(
 array(
 'container' => false,
 'items_wrap' => '<ul id="menuFooter">%3$s</ul>',
 'theme_location'=> 'menu',
 )); ?>

Para este segundo menú no vamos a colocar los submenús desplegables debido a que para que funcione correctamente necesitamos pasar un valor fijo para un alto que no conocemos, por lo que ahora evitaremos entrar en un script para calcular cuanto debe trasladarse el submenú y que se abra como corresponde. Hecha esta aclaración, le damos estilo a la nueva clase #menuFooter.

#menuFooter {
 -webkit-box-shadow: inset 0px 3px 1px 0px #ccc;
 box-shadow: inset 0px 3px 1px 0px #ccc;
 width: 960px;
 background: #e1e1e1;
 border:none;
 margin: 10px 0 0 0;
 -webkit-border-radius: 0px 0px 10px 10px;
 border-radius: 0px 0px 10px 10px;
 list-style-type:none;
 float:left;
 height:35px;
 }
 #menuFooter a {
 float:left;
 display:block;
 text-decoration:none;
 color:#666;
 font-weight:bold;
 margin-left:10px;
 padding: 10px;
 border-right: none;
 background: none;
 }
 #menuFooter a:hover {
 color:#666;
 background: #f4f4f4;
 }
 #menuFooter ul {
 background:none;
 list-style-type:none;
 }
 #menuFooter li ul {
 display:none;
 }
 #menuFooter ul a {
 float:left;
 }

Y modificamos el padding de #footer.

#footer {
 float:left;
 background: #e6e6e6;
 width: 960px;
 padding: 20px 0 0 0;
 }

 

Volver arriba

El usuario hizo scroll luego de revisar mucho texto y llegó hasta nuestro footer, si necesita volver al inicio de la página para usar el menú desplegable completo o el menú top, nosotros podemos hacerle la tarea mas fácil si le ofrecemos al pié un link que diga “volver arriba” o similar. En nuestro caso, deseamos colocar el link en la misma barra en donde está el menú del footer, sólo que alineado a la derecha para separarlo de los items del menú.

Para eso lo agregamos como un elemento mas de la lista #menuFooter pero con una clase diferente. Modificamos las líneas en donde insertamos el menú de la siguiente manera:

<?php wp_nav_menu(
 array(
 'container' => false,
 'items_wrap' => '<ul id="menuFooter">%3$s<li class="toTop"><a href="#top">Volver arriba</a></li></ul>',
 'theme_location'=> 'menu',
 )); ?>

De este modo al final de la lista que conforma el menú, metemos el elemento con clase .toTop y dentro un link con href #top. Aprovechando que estamos en la plantilla footer.php, añadimos las siguientes líneas de jQuery luego de las que ya figuran de nivoslider entre etiquetas <script>.

$(document).ready(function() {
 $('a[href=#top]').click(function(){
 $('html, body').animate({scrollTop:0}, 'slow');
 return false;
 });
 });

Y finalmente necesitamos indicar en nuestro CSS que el <li> con class .toTop debe flotar a la derecha.

.toTop {
float:right;
}

Demo | Descargar ThemeTaller | Clase 9 (585)

Volver al temario del taller

Dejar un comentario

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: El archivo footer.php cumple una función similar al header.php en cuanto a que sirve para cargar scripts y archivos pertenecientes a plugins, tal como indicamos en la Clase 6. En dicho archivo colocamos tres cosas fundamental…..

  2. oskar

    hola nekko;
    contenido espectacular, como siempre!!

    existe la posibilidad de añadir una clase determinada a nivel de etiqueta < a>?

    es decir: obtener en los menús que se generan con wp_nav_menu y similares que las etiquetas < a> pasen a ser, por ejemplo < a>??

    un saludo.

  3. Oskar

    quería decir, que en lugar de aparezca la etiqueta con una clase,

  4. Nekko

    Para ello hay que modificar con un gancho la función que construye los items del menú llamada walker_nav_menu_start_el.

    Utilizá el siguiente código en tu functions.php, en donde tenés que modificar “tu_clase” por lo que quieras.

    function clase_personalizada($item_output, $item, $depth, $args) {
       $attributes = ' class="tu_clase"';
    	$item_output = $args->before;
               $item_output .= '<a'. $attributes .'>';
               $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
               $item_output .= '</a>';
               $item_output .= $args->after;
       return $item_output;
    }
    add_filter('walker_nav_menu_start_el', 'clase_personalizada', 10, 4);
  5. Hola desde Santo Domingo, me gustaría colocar el menú que estoy creando debajo de la imagen de cabecera, pero no sé como hacerlo. Me ayudas, por favor?

  6. […] Clase 9: El archivo footer.php […]

  7. […] Clase 9: El archivo footer.php […]

Dejar un comentario