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
(3 votos, promedio: 5,00 de 5)
Cargando…
Hola. Sí tengo todos los pasos tal cual y aunque la imagen casi cubre todo el ancho de la página, sigue teniendo espacios pequeños a la derecha, a la izquierda y en la parte de arriba, porque quiero que sea un header… ¿Será algo de mi tema? Qué podría hacer para que me imagen sí me quedara cubriendo todo el ancho de la página? Te agradecería muchísimo tu apoyo. Tengo horas tratando de resolverlo y no puedo 🙁
Hola, tendría que ver la url de tu sitio, de manera general es posible que sea algún estilo de tu theme. Si sigues con problemas puedes comunicarte a través del formulario de contacto y enviarme detalles adicionales.