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

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

padre hijo al reves

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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(16 votos, promedio: 4.3)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

6 comentarios en “Cómo cargar estilos de manera eficaz en un tema hijo”

  1. Ay ay ay… si antes hago el videotutorial del tema hijo, antes cambian algo que llevaba años utilizándose, jo que suerte la mía… 🙂
    Bueno, lo tendré que añadir en el artículo, al menos. Aunque para ser sincero se ve más engorroso que el anterior.
    Saludos y gracias por la info.

  2. Hare tiempo que el Codex no recomiendo el uso de @Import, y dice así: «Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style()».

  3. Pingback: Des-actualizar plugins y temas | Ayuda WordPress

  4. Hola Fernando, ¿se puede cargar una segunda hoja de estilos en el child theme para que si se hace una actualización tener esta hoja separada y que no se sobreescriba?

    Gracias

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Ir arriba Ir al contenido