Cómo incluir los estilos CSS en el tema hijo

Cuando se crea un tema hijo en WordPress, hay que tener unas cuantas cosas presentes, pero la más importante es quizás tener en cuenta que hay que importar los estilos CSS del tema padre. Entonces, la pregunta clara es: ¿cómo incluirlos en el tema hijo?

Cómo no hacerlo

La forma más sencilla y que más fácilmente se encuentra en Internet es la de usar la regla @import en el archivo style.css del tema hijo:

@import url('../mi_tema/style.css');

Esa forma no es la recomendada actualmente, debido a que aumenta el tiempo de carga de la página web y no funciona bien en navegadores antiguos.

La manera correcta

Entonces, la forma correcta de incluir los estilos CSS en el tema hijo es la siguiente:

  1. Abrimos el archivo functions.php de nuestro tema hijo.
  2. Añadimos el siguiente código:
 /* Importando estilos CSS del tema padre */
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    if ( is_rtl() ) {
        wp_enqueue_style( 'parent-style-rtl', get_template_directory_uri() . '/rtl.css' );
    }
}

Además, con el código de arriba también estaremos importando los estilos para idiomas RTL (hebreo, árabe…).

(Fuentes: Ulrich y el propio WordPress)

En esta entrada pueden haber enlaces de afiliado a productos y servicios en los que a veces podrás obtener descuentos si compras algo, y yo, como autor de la entrada, una pequeña comisión. No te preocupes, nunca pagarás de más y nunca verás enlaces de afiliados de algo que yo mismo no utilice o recomiende.

Deja un comentario

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