Estás creando mal tus temas hijos de WordPress

Publicado en Optimización web( WPO ) hace 1 año y 7 meses. Leído 1368 veces.

Nunca he sido partidario de usar temas hijos. Cuando lo he hecho, lo he hecho en su forma inversa( que ya explicaré algún día ). Hoy, curioseando en la página de un conocido, leí uno de sus posts sobre crear Child Themes. Entonces, hubo algo que me descuadró: el uso de import hacía el archivo CSS del padre en el archivo CSS del hijo.

Pensé que sería una metedura de pata de él pero, para asegurarme, busqué en Google. Para mi sorpresa, la totalidad de las páginas que explicaban como crear un Child Theme estaban igual. ¿ Cómo un error tan garrafal podía haberse extendido tanto ?.

Entonces, entré en la página de WordPress sobre creación de un tema hijo y se podía leer al respecto:

"The final step is to enqueue the parent and child theme stylesheets. Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice, as it increases the amount of time it takes style sheets to load. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme's functions.php."

Me quedé con la boca abierta con la parte: "Note that the previous method". Desde WordPress habían estado fomentando una mala práctica. Por suerte, se cayó en ello y al menos en la documentación está enmendada. Sin embargo, los desarrolladores siguen y siguen usando esa mala práctica. No sólo eso, se puede ver que los nuevos posts que se escriben hablando de como crear temas hijos siguen fomentando el mismo fallo, porque se basan en post antiguos.

¿ Por qué es malo usar import en el tema hijo de WordPress ?. Si eres seguidor habitual de este blog, seguramente ya te figurarás que puede ser por el bloqueo de hilos de los cuales ya se habló en el post de Cómo se renderiza una página web. Si esta es la primera vez que me lees, trataré de explicártelo usando un gráfico en cascada.

Cuando se usa un import en un child theme

childtheme1 Este gráfico muestra como procesaría un navegador los dos CSS( el del hijo y el del padre ). Primero se descargaría el del hijo, el navegador vería la cadena de @import y entonces pasaría a descargar el segundo archivo CSS( el del padre ). Una vez descargado, lo empieza a interpretar y a cargar los estilos en su memoria. Una vez terminado con el archivo CSS del padre continua, por la siguiente línea al @import que tenía el CSS hijo, cargando los estilos del CSS hijo en memoria.

Cuando no se usa un import en un child theme

childtheme2

Cuando no se usa el @import, hacemos uso de la capacidad multihilo del navegador. Con lo que ambos archivos CSS se bajan al mismo tiempo. Nada más que esté bajado el archivo CSS del padre( aunque el del hijo aún no se haya bajado ) se empieza a cargar los estilos en memoria. Una vez terminado de cargar, el navegador pasa a hacer lo mismo con el CSS del hijo ( que ya habrá terminado de bajar ).

Como se puede ver, el modo sin @import es el más optimo. Muchísimo más si desglosáramos el gráfico y tuvieramos también en cuenta la descarga de recursos asociados a estos dos archivos( imágenes, fuentes, ... ).

Ahora seguro que estarás diciendo: "bueno, vale, no hay que añadir import en el archivo CSS, ¿ pero cómo lo hago ?". En la página de WordPress sobre Chid Themes te ofrecen una manera. Sin embargo, además de confusa también es poco optima. Ya que cargará los archivos CSS de tu web incluso cuando estás en la zona de administración. Aquí te presento una alternativa, que aunque tampoco es perfecta, sí es más optima y menos confusa.

El código debería de ser escrito en el archivo functions en la carpeta del tema hijo. Luego, con trasweb_add_css vas especificando los archivos CSS del padre o del hijo, según lo necesites.

Si tienes alguna duda no dejes de escribir un comentario.

0 comentarios

Deja un comentario

Puedes usar Markdown para formatear tu comentario.

Este sitio utiliza cookies propias y de terceros para mejorar tu experiencia con el sitio web. Al continuar con la navegación consideramos que acepta su uso.