Personalizar pie de página en Storefront

En este tutorial vamos a ver cómo personalizar el pie de página de Storefront de dos formas, usando un plugin y directamente con código.

El footer de Storefront

Cuando estamos en pleno proceso de creación de una nueva web y queremos ponerla a punto, o bien en actualizaciones posteriores, suele ser necesario adaptar la apariencia de la misma según el estilo al que debamos ajustarnos y las necesidades que tengamos.

Si trabajamos con el theme Storefront podemos realizar algunas de estas modificaciones desde el personalizador de WordPress. Sin embargo, es posible que necesitemos ampliar las opciones disponibles desde ese apartado. Si por ejemplo queremos personalizar el footer tendremos que solucionarlo de otro modo.

Así que vamos a ver cómo hacerlo usando código y también un plugin muy útil que permite personalizar el tema de forma sencilla a través del personalizador.

Si os interesa conocer todas las posibilidades que ofrece y verlo en funcionamiento, os recomendamos que echéis un vistazo al curso básico de Storefront y al curso intermedio de Storefront. Dicho todo esto, ¡vamos a empezar!.

Personalizar footer Storefront con un plugin

En primer lugar veremos cómo personalizar Storefront usando un plugin, en concreto Powerpack, que vemos y usamos en el curso intermedio. Se trata de un plugin premium que nos permite personalizar una gran cantidad de aspectos de Storefront sin tocar código.

Podemos, entre otras cosas, cambiar el header o encabezado de la tienda, el diseño de muchos de los elementos que la componen o jugar con los estilos. En este caso lo usaremos para eliminar o modificar el footer, así que vamos a ello.

Una vez tenemos en el equipo el archivo comprimido, podemos comenzar la instalación. Como siempre, tenemos que ir a "Plugin/Añadir nuevo/Subir plugin". Después seleccionaremos el archivo, y por último instalaremos y activaremos el plugin.

Cuando lo hayamos activado, tendremos que ir a "Apariencia/Personalizar" y, de todas las opciones disponibles, hacer clic en "Powerpack/Footer". Y ya hemos llegado, desde esta pantalla podemos personalizar el footer de Storefront. Veamos los campos disponibles:

• Tweak the copyright text in the footer: Aquí escribiremos el texto tal como queramos que aparezca en el pie de página. También podemos usar links si queremos, no hay problema.
• Display credit link: Cuando la casilla está seleccionada aparece una línea en el footer "Creado con Storefront y WooCommerce", si la deseleccionamos desaparece. Podríamos desactivar la misma en el caso de que usáramos el campo anterior para incluir enlaces con HTML.
• Handheld Footer Bar: Este checkbox sirve para activar la barra de pie de página en dispositivos portátiles. Concretamente muestra acceso a la cuenta del usuario, el buscador y el carrito de la compra.

Podríamos por ejemplo dejarlo en blanco o bien desactivar los enlaces relativos a los créditos y añadir en el campo de texto lo siguiente: "© 2018 boluda.com <p>Tutoriales Storefront</p>". Así de fácil :).

Personalizar footer Storefront con código

Como hemos visto, Powerpack nos permite realizar multitud de modificaciones en un eCommerce con WooCommerce instalado, por lo que es un plugin muy recomendable. Sin embargo, si sólo queréis realizar un par de cambios quizá prefiráis usar directamente código PHP. En cualquier caso vamos a dejar también esta alternativa para ver cómo sería.

Así que en este apartado vamos a ver qué líneas de código tendríamos que incluir en WordPress para poder personalizar el footer del sitio. Hay varias formas de hacerlo como vemos en el tutorial sobre añadir código a WordPress.

En este caso vamos a usar el plugin Code Snippets que está disponible en el repositorio. Si no lo tenéis instalado podéis hacerlo ahora o bien crear un plugin desde cero como vemos en el curso de desarrollo de plugins para WordPress.

Pues bien, para incluir el código tendremos que ir a "Snippets/Añadir nuevo", y dentro del apartado "Código" agregar las siguiente líneas y a continuación guardar. Esto borrará el footer al completo:

// Eliminar el footer en Storefront
add_action( 'init', 'bld_eliminar_footer_storefront', 10 );
function bld_eliminar_footer_storefront() {
remove_action( 'storefront_footer', 'storefront_credit', 20 );
}

¿Y si queremos personalizarlo? Bien, en ese caso el código será un poco distinto. Primero tendremos que eliminar el footer por defecto y después añadir el nuevo, veamos cómo:

// Eliminar el footer por defecto de Storefront y añadir uno personalizado
add_action( 'init', 'bld_eliminar_footer_storefront', 10 );
function bld_eliminar_footer_storefront() {
remove_action( 'storefront_footer', 'storefront_credit', 20 );
add_action( 'storefront_footer', 'bld_personalizar_footer_storefront', 10 );
}
function bld_personalizar_footer_storefront() {
?>
<div class="site-info">
&copy; <?php echo get_the_date( 'Y' ) . ' ' . get_bloginfo( 'name' ) ; ?>
<p>
<?php echo get_bloginfo( 'description' ); ?>
</p>
</div>
<?php
}

En este caso hemos creado una nueva función para personalizar el footer, "bld_personalizar_footer_storefront", la cual es llamada después de retirar los créditos que aparecen por defecto en Storefront. Como vemos, en dicha función aparece un código en negrita que es el que tenemos que modificar para cambiar el pie de página del tema. En el ejemplo que aparece arriba quedaría así:

Primero mostraría el símbolo de copyright, después el año en curso, para lo cual usamos la función "get_the_date()", y a continuación en la misma línea el nombre del blog tal como se recoge en "Ajustes/Generales/Título del sitio". Luego añadimos un párrafo y dentro colocamos la descripción usando get_bloginfo( 'description' ).

Además de todo esto podríamos incluir clases CSS, links, o lo que necesitemos, ¿interesante, verdad?. Bueno, pues sigamos. Vamos a compartir un último método. Hasta ahora hemos usado actions hooks para realizar las modificaciones, pero también podríamos usar filtros:

// Modificar footer aplicando un filtro
add_filter( 'storefront_copyright_text', 'bld_modificar_footer' );
add_filter( 'storefront_credit_link', __return_false );
function bld_modificar_footer() {
return 'Texto créditos';
}

Para personalizarlo habría que sustituir el texto "Texto créditos" por el que quisiéramos incluir en el footer, y listo. ¿Veis qué fácil? Pues ahora sólo queda que elijáis vuestro método preferido, ajustéis el footer y lo añadáis a WordPress. Con esos sencillos pasos habréis personalizado el footer en Storefront.

Resumen y conclusión

Personalizar el pie de página en Storefront, la plantilla oficial de WooCommerce, es muy sencillo. Podemos usar un pequeño fragmento de código PHP e incluirlo en un plugin de utilidades o en Code Snippets, o bien hacerlo a través de Powerpack.

Este plugin nos permite realizar este cambio, y muchos otros, sin escribir una sola línea de código, y además ofrece varias posibilidades de personalización con lo que podremos modificar el aspecto del sitio fácil y ampliamente.

¡Y esto es todo! Si queréis saber más os recomendamos el curso intermedio de Storefront, donde entre otras cosas veremos Powerpack a fondo. Si os suscribís tendréis acceso más de 4740 vídeos disponibles :)