Mejorando el pie de página de WordPress

Así como hicimos en el anterior artículo ‘Mejorando la cabecera de WordPress’, en este vamos a mejorar el pie de página. Para ello, vamos a introducir una zona de widgets (fuera de la barra lateral) e incorporaremos otra zona de menús, para poder establecer un menú secundario. Finalmente, unos efectos CSS le conferirán al pie de página un aspecto muy atractivo.

Repasemos, primero, el archivo footer.php que teníamos en el primer artículo de esta serie:

Realmente sencillo, esta plantilla simplemente nos establece la sección footer, y nos termina la página que se visualiza por pantalla.

Vamos a incluir finalmente, en el pie de página, 3 elementos: a la izquierda, el nombre del tema y el autor; en el centro, habilitaremos un espacio para poder poner un segundo menú que nos sirviera, por ejemplo, para poder visualizar “Condiciones de registro” o “Términos del servicio”; finalmente, a la derecha, una zona lista para widgets, donde incluir un widget de texto HTML.

Vamos a por ello:

Ahora, tenemos que habilitar el menú ‘Secundario’ y la nueva zona de widgets en el archivo functions.php:

Empezamos con la zona de widgets. En el archivo functions.php lo único que hacemos es habilitar una zona de widgets, de la misma forma que hacemos con la barra lateral. Luego, sólo tenemos que incluir esa zona de widgets en el archivo de plantilla que queramos, mediante

Por eso, el archivo sidebar.php era tan sencillo:

Luego, seremos nosotros quienes indiquemos el contenido de cada zona de widgets (Panel administrador -> Apariencia -> Widgets):

widgets

En cuanto a los menús, aquí se complica un poco más respecto al anterior artículo sobre la cabecera, ya que hemos de vigilar duplicidades.

En el archivo functions.php lo que hacemos es indicarle a WordPress, mediante una matriz, que vamos a tener dos menús: uno en la posición ‘main’, que se llamará ‘Principal’; y otro en la posición ‘second’, que se llamará ‘Secundario’. Luego, en el archivo footer.php le decimos que, si existe menú en la posición ‘second’, lo muestre por pantalla. Si no especificamos la sentencia if( has_nav_menu( ‘second’ ) ) : y ‘theme_location’ => ‘second’, se nos pueden producir duplicidades de menús, menús no deseados, o incluso incoherencias.

La gestión de los menús la llevaremos en Panel administrador -> Apariencia -> Menús:

menus

En el widget de texto del pie de página, introducimos lo siguiente:

Los archivos gráficos, los habremos subido previamente a una subcarpeta del tema, la carpeta iconos.

Por fin, vamos a formatear

Finalmente, volvemos otra vez a nuestro archivo style.css. Aquí, vamos a añadir lo siguiente:

con lo que obtenemos el siguiente resultado:

piedepagina

Dos simples comentarios: primero, cuando pasemos el ratón por encima de uno de los iconos de la derecha, éste se hará más grande gracias a la sentencia scale(1.2); el efecto reflejo se consigue con la última sentencia que hemos añadido en style.css, el -webkit-box-reflect.

Así pues, en este artículo hemos visto cómo mejorar el pie de página de WordPress, pero también hemos repasado los archivos functions.phpsidebar.php, además de aprender a crear zonas de widgets.

En el siguiente artículo, aprenderemos a crear un campo de búsqueda y crearemos el nuevo archivo de plantilla search.php, para mostrar los resultados de la consulta.

Deja un comentario

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