El footer (pie de página) es un elemento muy importante en nuestro site. La información que pongamos en él estará accesible desde todas nuestras páginas, nuestros visitantes la verán durante toda su navegación y los robots de búsqueda nos indexarán en función de su contenido.

Puedes poner más o menos contenido en él, pero es importante que el pie de página contenga la información más relevante y los accesos a las secciones más importantes de tu página.

Aún así, hay temas que no incluyen opciones para crear footers potentes.

WTF? Where's the footer?
WTF? Where’s the footer?

Bueno, pues vamos a añadir un footer “widgetizado” al tema que estamos utilizando en WordPress. En este ejemplo vamos a crear un footer con 3 áreas de widgets, pero verás que es muy sencillo modificar el código para que sean 2, 4 o las áreas que necesites.

Antes de empezar: es muy importante (pero mucho) que realices estas modificaciones sobre un tema hijo para no perder los cambios. Si aún no has creado un tema hijo para tu tema principal, mira aquí cómo hacerlo “Crear un tema hijo en WordPress”

Crear zonas de widgets para el footer

En primer lugar vamos a crear los contenedores de widgets para el footer. Estos contenedores no son más que “sidebars” adicionales que colocaremos después donde nosotros queramos.

La forma de hacer esto será creando una función que defina estas áreas de widgets y, mediante un hook, hacer que WordPress la ejecute cuando nos interesa. (Suena complicado, pero es sencillo)

En el fichero functions.php (el del tema hijo, nunca el del tema padre), añade el siguiente código:

function ferbcn_register_widget_areas() {

  // Aquí el código de la función...

}

add_action( 'widgets_init', 'ferbcn_register_widget_areas' );

Hemos creado la función register_widget_areas (vacía de momento) y mediante add_action la hemos “enganchado” (hooked) al proceso de WordPress de registro de áreas de widgets.

Ahora mismo esta función no hace nada, así que vamos a añadir el código para registrar las áreas del footer.

function ferbcn_register_widget_areas() {

   register_sidebar( array(
    'name'          => 'Footer area 1',
    'id'            => 'footer_area_1',
    'description'   => 'Sección izquierda del footer',
    'before_widget' => '<section class="footer-area footer-area-1">',
    'after_widget'  => '</section>',
    'before_title'  => '<h4>',
    'after_title'   => '</h4>',
  ));
  register_sidebar( array(
   'name'          => 'Footer area 2',
   'id'            => 'footer_area_2',
   'description'   => 'Sección central del footer',
   'before_widget' => '<section class="footer-area footer-area-2">',
   'after_widget'  => '</section>',
   'before_title'  => '<h4>',
   'after_title'   => '</h4>',
 ));
 register_sidebar( array(
  'name'          => 'Footer area 3',
  'id'            => 'footer_area_3',
  'description'   => 'Sección derecha del footer',
  'before_widget' => '<section class="footer-area footer-area-3">',
  'after_widget'  => '</section>',
  'before_title'  => '<h4>',
  'after_title'   => '</h4>',
));

}

add_action( 'widgets_init', 'ferbcn_register_widget_areas' );

¿Qué hemos hecho? Llamando 3 veces a la función register_sidebar hemos creado tres áreas de widgets (3 sidebars). A cada una de ella le hemos pasado valores diferentes para identificarlas y preparar su contenido.

Una pequeña explicación de los parámetros del array de register_sidebar:

  • name: El nombre del área. Se mostrará en la zona de”admin”
  • id: un identificador único para el área. Solamente acepta números, letras y sub-guiones..
  • description: La descripción del área que se mostrará en la zona de “admin”
  • before_widget: Html que aparecerá antes de la sección. Normalmente un contenedor con la clase que definiremos en el CSS.
  • after_widget:  Html que aparecerá después de la sección. Normalmente el cierre de un contenedor.
  • before_title: Html que aparecerá antes del título. Normalmente una etiqueta de apertura de título .
  • after_title: Html que aparecerá después del título. Normalmente una etiqueta de cierre de título.

Y ya tenemos 3 nuevas áreas de widgets preparadas para nuestro footer.

Nuevas secciones para el footer

Ya podemos añadir widgets a las nuevas áreas del footer, pero todavía no aparecerán en la página. Nos falta un poco más.

Mostrar las áreas de widgets del footer en la página.

Nos faltan dos pasos más.

  • Modificar el footer.php para añadir el html necesario y las llamadas a las funciones que cargan las sidebars.
  • Añadir un poco de CSS para que el estilo encaje en nuestro tema.

En primer lugar vamos a modificar el código del fichero footer.php. Esta modificación dependerá de lo que quieras hacer. En mi caso, el tema incluye un código muy sencillo para el footer que solamente muestra el texto del copyright. Voy a mantener ese texto y voy a añadir mi footer sobre el que ya existe.

<div id="footer">
            <div class="container">
                <?php 
                $footerCopy = cvit_opt('cvit_copyright_text');
                
                    echo '<div class="footer--copyright">';
                ?>
            </div>
</div>

Si quieres eliminar el footer existente, reemplaza el código que hay dentro de la DIV de “footer”. En mi caso, dejaré esto como está y añadiré mi footer antes.

No voy a entrar a fondo en el código html. En mi caso voy a utilizar clases de bootstrap para colocarlo en su sitio.

<div id="ferbcn_footer" class="container">
    <div class="row">
      <div class="col-md-4 col-lg-4 col-xl-4 col-sm-1"><?php dynamic_sidebar( 'footer_area_1' ); ?></div>
      <div class="col-md-4 col-lg-4 col-xl-4 col-sm-1"><?php dynamic_sidebar( 'footer_area_2' ); ?></div>
      <div class="col-md-4 col-lg-4 col-xl-4 col-sm-1"><?php dynamic_sidebar( 'footer_area_3' ); ?></div>
    </div>
  </div>

Lo más importante en este código es la función dynamic_sidebar( ‘footer_area_X’ ); Esta es la función que incluye el código html de cada área de widgets. Solamente tienes que crear un contenedor para cada área y llamar a esa función.

Y ahora vamos a darle un poco de estilo