• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Themes / Páginas en ancho completo en el tema Storefront

Páginas en ancho completo en el tema Storefront

Páginas en ancho completo en el tema Storefront

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

mejoras

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

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:

Eliminar barra lateral tema Storefront

 

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.

El siguiente código lo puedes agregar como parte de un tema hijo o usando un plugin de Snippets
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;
		});
	}
}
Ten en cuenta que puedes usar las conditional tags de WooCommerce para especificar en qué páginas quiere quitar el sidebar y por lo tanto mostrar el contenido en ancho completo.

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.

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Modificar el orden de productos destacados en StoreFrontModificar el orden de productos destacados en StoreFront
  • Agregar un Slider al tema StorefrontAgregar un Slider al tema Storefront
  • CRUD en WordPress sin pluginsCRUD en WordPress sin plugins
  • Botón scroll hacia arriba en WordPress sin pluginsBotón scroll hacia arriba en WordPress sin plugins
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (3 votos, promedio: 5,00 de 5)
Cargando...

Interacciones con los lectores

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Cómo usar Roles y Capacidades en WordPress

Páginas en ancho completo en el tema Storefront

Insertar javascript en WordPress de forma correcta

Crear un Child Theme en WordPress de manera correcta

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados