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)

Si ves un enlace de afiliado, te garantizo que es de un producto o servicio que realmente vale la pena. A diferencia de otras webs, aquí no se promociona nada solo porque paga más.

Deja un comentario

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