En el artículo anterior adaptar un theme WordPress a Gutenberg vimos una forma de dar la funcionalidad de ancho ampliado y ancho completo, sin embargo en este artículo veremos una forma alterna de realizar esto sin modificar la estructura del theme.
Generalidades
La funcionalidad de ancho ampliado y ancho completo lo obtenemos combinando código PHP y código CSS, el ancho ampliado ocupa un poco más del ancho del contenedor, mientras que el ancho completo ocupa la totalidad del ancho del navegador.
Código PHP
Puedes colocar el siguiente código al final de tu archivo functions.php de tu child theme
add_theme_support( 'align-wide' );
Colocando este código obtendremos los botones de ancho ampliado y ancho completo en Gutenberg, tal como se muestra en la siguiente imagen:
Código CSS
Si ya tienes tu theme configurado para mostrar una página en ancho completo, entonces simplemente puedes agregar el siguiente código CSS en el archivo style.css de tu child theme
.alignfull {
margin: 32px calc(50% - 50vw);
max-width: 100vw;
}
.alignwide {
margin: 32px calc(25% - 25vw);
max-width: 100vw;
}
En el código anterior:
- Tenemos dos clases, ambas tienen un código similar, la primera de ellas alignwide especifica un ancho ampliado, la clase alignfull específica un ancho completo.
- Para el ancho completo, los márgenes laterales están dados por el ancho del navegador menos el ancho del contenedor divido entre dos, además como margen superior e inferior tenemos un margen fijo de 32px
- Para el ancho ampliado, los márgenes laterales están dados por el ancho del navegador menos el ancho del contenedor divido entre cuatro, además como margen superior e inferior tenemos un margen fijo de 32px
- Ambas classes tienen un max-width de 100vw que quiere decir que ocupan todo el ancho del navegador
Conclusión
Tal como hemos visto el código CSS nos permite especificar márgenes negativos ampliando el ancho de los bloques que usen ancho ampliado o ancho completo y con esto evitaremos hacer modificaciones a la estructura de los archivos del theme.
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores.
Artículos Relacionados
(2 votos, promedio: 5,00 de 5)
Cargando…