A partir de la versión 6.2 de WordPress el editor, antes conocido como Gutenberg y ahora integrado, nos permite decidir si queremos que un grupo de elementos quede fijo en pantalla o no mientras estamos realizando la maquetación. Internamente esto lo hace aplicando la propiedad position: sticky al contenedor. Es decir, esta función podemos usarla para anclar por ejemplo la cabecera del sitio y que quede siempre visible mientras el usuario navega, algo que como diseñador web freelance estoy acostumbrado a realizar en los desarrollos actuales.
En este artículo vamos a ver paso a paso cómo hacerlo usando el editor de temas de WordPress, para ello hay que tener en cuenta algunas consideraciones previas que son importantes, tanto para entender cómo funciona el sistema, como para evitar quebraderos de cabeza iniciales.
Incluir soporte para posición fija en un tema
Lo primero que debemos tener en cuenta es que el tema debe tener habilitada esta función en el archivo de parámetros theme.json, de lo contrario aunque activemos el selector, no se aplicarán los estilos que hacen que el grupo pase a tener la propiedad position: sticky y por tanto no ocurrirá nada. Tanto si estás trabajando en un tema ya existente como si estás realizando un desarrollo web desde cero, deberás ir al archivo e incluir el siguiente parámetro dentro de «settings» en caso de que no lo tenga:
"settings": {
"position": {
"sticky": true
},
...Tras incluir esto, ahora deberías ver un selector en la columna derecha de los ajustes que nos permite indicar si el bloque de grupo tendrá una posición fija.
Sin embargo es posible que aún habiendo habilitado el soporte y seleccionado la opción de dejar fijo el grupo no ocurra nada. Exploras el código y ves que ahora sí están metidos los estilos correctamente, de modo que la situación es desconcertante. Si este es tu caso, veremos a continuación qué puede estar pasando cuando ya me centre en el caso del header de la web.
Hacer que la cabecera del tema quede fija
Es buen momento para aclarar un detalle sobre cómo funciona position: sticky de CSS, ya que nos ayudará a entender por qué estructuraremos los bloques como veremos a continuación. Y es que la propiedad anterior es una mezcla de position: relative y position: fixed, lo que significa que su comportamiento a la hora de fijarse dependerá del elemento padre que lo contenga. Es decir, si el elemento que contiene el otro elemento tiene el mismo alto, entonces no hará nada al hacer scroll. De modo que el elemento padre debe ser más alto que el hijo con la propiedad fija. Lo anterior ha podido sonar un poco confuso así en abstracto, pero vamos a ver cómo aplicarlo dentro de WordPress y verás que queda todo claro.
Navegamos hacia el editor de WordPress en Apariencia >> Editor, una vez dentro recorreremos el menú lateral izquierdo para acceder Plantillas y después seleccionaremos la primera sobre la que queramos trabajar. Este proceso deberás repetirlo en todas aquellas plantillas en las que quieras que la cabecera se quede fija.
En la vista esquema, verás que la estructura contiene por norma general la cabecera, el contenido y el pie. Tanto la cabecera como el pie son patrones globales que deberían aparecer marcados con color violeta y cuyo contenedor usa las etiquetas estándar de HTML para tal cometido (header y footer).
En este punto uno pensaría que con meter un bloque de grupo dentro de la cabecera que contenga los elementos bastaría para que ésta se quedara fija. Sin embargo aquí es donde toma relevancia lo que comentaba al comienzo del apartado y es que si el grupo se encuentra dentro de la etiqueta del contenedor de cabecera, es decir, dentro de la etiqueta header, el alto que se tendrá en cuenta es el de esa etiqueta y por tanto la cabecera no se moverá.
Para que esto funcione, lo que debemos hacer es que sea un nuevo bloque de grupo el que contenga la cabecera. En el momento que definamos su posición como fija, tomará como referencia el elemento inmediatamente superior que se adapta al body de la web. De este modo ya solo tendremos que guardar y ver los resultados en el tipo de página que hayamos hecho las modificaciones.
Referencias:
- Soporte de bloque de position sticky (inglés) – Make WordPress Core
- Cómo crear una cabecera sticky con un bloque de grupo (inglés) – Full Site Editing
Deja una respuesta