Páginas en ancho completo en el tema Storefront

[ 21 agosto 2020 ] [ Autor: Jhon Marreros Guzmán ][ Themes - Intermedio] [ ]

mejoras

Storefront es un tema gratuito para WooCommerce, tiene funcionalidad básica, pero siempre se puede extender su funcionalidad a través de plugins o de código, en este artículo veremos cómo eliminar la barra lateral para que algunas páginas se vean en ancho completo.

Resultado Final

Al final lo que queremos obtener será algo similar a lo que se muestra en la siguiente imagen:

Código para ocultar la barra lateral en determinadas páginas

Al ocultar la barra lateral o sidebar tendremos el espacio para ampliar el contenido y mostrarlo al ancho completo.

add_action( 'wp', 'dcms_remove_storefront_sidebar' );

function dcms_remove_storefront_sidebar() {
	// Condiciones en donde se tiene que remover el sidebar
	if ( is_shop() || is_product() || is_cart() || is_checkout() ){
		remove_action( 'storefront_sidebar', 'storefront_get_sidebar' );

		add_filter( 'body_class', function( $classes ){
			$classes[] = 'page-template-template-fullwidth-php';
			return $classes;
		});
	}
}

En el código anterior:

• Utilizamos el Hook wp el cual hace referencia a la función dcms_remove_storefront_sidebar
• Dentro de la función primero evaluamos en qué páginas se quitará el sidebar a través de los conditional tags de WooCommerce
• Luego removemos la acción llamada storefront_sidebar que hace referencia a la función storefront_get_sidebar
• Hasta aquí sólo hemos removido el sidebar, pero ahora especificaremos una clase CSS para en el body para que el contenido tenga el ancho completo
• Usamos el hook de filtro body_class, el cual hace referencia a una función anónima en donde se agrega la clase page-template-template-fullwidth-php, esta clase evidentemente ya existe para el tema Storefront
• Finalmente se retorna la variable con la clase agregada

Conclusión

Tal como hemos visto, es posible cambiar el comportamiento por defecto del tema Storefront y hacer que muestre el contenido sin el sidebar, es decir ocupando todo el ancho disponible.

 
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.

Valora este artículo : (3 votos, promedio: 5,00 de 5)

Cargando...