Ayuda WordPress

Recursos, themes, plugins y tutoriales en español

Cómo cargar estilos de manera eficaz en un tema hijo

Por Fernando el Jan 27, 2016 10:16 am

El modo que se recomienda en el codex e incluso en los plugins plugins para crear temas hijos es cargar la hoja de estilos del tema superior (o tema padre) usando @import en la hoja de estilos del tema hijo, así:

@import url("../twentytwelve/style.css");

Pero esto conlleva una serie de problemas.

Velocidad

El uso de CSS con @import en una hoja de estilos externa puede añadir retardos adicionales durante la carga de la web.

Compatibilidad de media query en Internet Explorer

Las media queries no están soportadas por Internet Explorer 8 y versiones anteriores, así que para las media queries sean compatibles con Internet Explorer 8 y anteriores JavaScript utiliza css3-mediaqueries-js y respond.js.

En un mundo ideal no nos importaría no ser compatibles con versiones antiguas de Internet Explorer pero la base instalada es aún demasiado enorme como para despreciarla.

Una posible solución sería copiar las media queries del tema superior e incluirlas en el tema hijo pero sería complicado si hay cambios en las media queries.

La solución

La solución pasa porque, en vez de usar @import añadamos un poco de PHP al archivo functions.php del tema hijo:

<?php  /**   * Carga de estilos del tema superior.   *   */  function theme_name_parent_styles() {    	// Enqueue de la hoja de estilos del tema superior  	wp_enqueue_style( 'theme-name-parent-style', get_template_directory_uri() . '/style.css', array(), '0.1', 'all' );    	// Enqueue de la hoja de estilos RTL del tema superior  	if ( is_rtl() ) {  		wp_enqueue_style( 'theme-name-parent-style-rtl', get_template_directory_uri() . '/rtl.css', array(), '0.1', 'all' );  	}    }  add_action( 'wp_enqueue_scripts', 'theme_name_parent_styles' );  ?>

Te puedes encontrar con temas en que la hoja de estilos del tema hijo cargase antes de la del tema superior. Estos temas suelen llevar un código de este tipo en su cabecera:

<?php wp_enqueue_style( 'parent-theme-style', get_stylesheet_uri(), false, '2.0' ); ?>  <?php wp_head(); ?>

Y la solución sería usar este otro código PHP en el archivo functions.php:

<?php  /**   * Carga de estilos del tema superior   *   */  function child_theme_styles() {  	wp_dequeue_style( 'parent-theme-style' );  	wp_enqueue_style( 'child-theme-style', get_stylesheet_uri() );  }  add_action( 'wp_enqueue_scripts', 'child_theme_styles' );  ?>

En cualquier caso este sistema es más eficaz que el uso de @import, que no es que no sirva, pero si sabes un modo mejor de hacer las cosas ¿por qué no usarlo?

El tema hijo de ejemplo que publiqué el otro día ya usa este método, por cierto.

Verlo en el navegador »