Dar prioridad a la hoja de estilos del tema hijo

Question

Dar prioridad a la hoja de estilos del tema hijo

23 feb 2016, 18:13:50

Vistas: 38.1K

Votos: 6

He creado un tema hijo y el style.css principal funciona perfectamente. Sin embargo, el tema padre tiene otra hoja de estilos que quiero importar y crear la misma para el tema hijo y usarla en su lugar.

Estructura del tema padre - ./woocommerce/woo.css
Estructura del tema hijo - ./woocommerce/woo.css (Creado manualmente)

Ahora, he puesto en cola ambas hojas de estilo en el functions.php del tema hijo como se muestra a continuación.

function fruitful_load_parent_stylesheets() {
    // Cargar hoja de estilos del tema padre
    wp_enqueue_style( 'layout', get_template_directory_uri() . '/woocommerce/woo.css' );
}
add_action( 'wp_enqueue_scripts', 'fruitful_load_parent_stylesheets' );

function fruitful_load_child_stylesheets(){
    // Cargar hoja de estilos del tema hijo
    wp_enqueue_style( 'woo', get_stylesheet_directory_uri() . '/woocommerce/woo.css');
}
add_action('wp_enqueue_scripts', 'fruitful_load_child_stylesheets');

Ahora, si agrego un estilo al woo.css del tema hijo, no funciona hasta que le agrego !important. No quiero tener que hacer esto en cada estilo que agregue.

es

nimsrules

208

tema hijo wp enqueue style css

Comentarios

Por favor, revisa este comentario

Mayeenul Islam

23 feb 2016 18:40:45

Todas las respuestas a la pregunta

Quizás puedas intentar agregar un valor de prioridad a cada add_action para asegurarte de que uno se ejecute antes que el otro.

add_action( 'wp_enqueue_scripts', 'fruitful_load_parent_stylesheets', 10 );
add_action('wp_enqueue_scripts', 'fruitful_load_child_stylesheets', 20 );

WordPress Codex add_action()

goalsquid

91

23 feb 2016 19:20:47

Comentarios

No funcionó. Aquí está el enlace a la captura de pantalla del elemento de inspección - http://i.imgur.com/Mb34NJa.png

El tercer bloque es del woo.css del tema hijo mientras que los dos primeros son del tema padre. No sé por qué se están cargando dos veces.

nimsrules

23 feb 2016 19:53:31

Establecer la prioridad funcionó para mí. Tuve que configurarla más alta que 10 para que "superara" la cola del tema padre.

Gavin

22 mar 2018 17:07:20

para mí también - ahora puedo sobrescribir configuraciones de mi tema padre (plantilla comprada)

cljk

25 mar 2020 12:49:20

Comentarios

Esto funcionó después de comentar la llamada a woo.css en el functions.php del tema padre. Aceptaré esta respuesta. ¡Gracias!

nimsrules

23 feb 2016 20:32:35

Logré cargar el tema hijo más tarde como se muestra a continuación. Tuve que eliminar de la cola y desregistrar el estilo del padre, luego agregar a la cola el estilo del padre y el estilo del hijo. Espero que esto ayude.

El archivo functions.php del tema padre tiene:

add_action('wp_enqueue_scripts', 'load_parent_style', 10);
function load_parent_style() {
    wp_enqueue_style('parent-theme-style'); // código del tema padre
}

El archivo functions.php del tema hijo tiene:

add_action('wp_enqueue_scripts', 'load_child_style', 20);
function load_child_style() {
  // registrar y agregar a la cola el estilo padre con nuevo nombre 
  wp_register_style('parent-style', $url, array($deps));
  wp_enqueue_style('parent-style'); 

  // eliminar de la cola y desregistrar el manejador del tema padre
  wp_dequeue_style('parent-theme-style'); // del tema padre
  wp_deregister_style('parent-theme-style'); 

  // registrar y agregar a la cola el estilo hijo
  wp_register_style('child-style', get_stylesheet_uri(), array('parent-style'));
  wp_enqueue_style('child-style');
}

Vemman

41

17 mar 2018 17:08:07

Charles 2.29K · Accepted Answer · 2016-02-23T20:23:53Z

La hoja de estilos (stylesheet) de tu tema hijo generalmente se cargará automáticamente. Si no es así, necesitarás encolarla (enqueue) también. Establecer 'parent-style' como dependencia asegurará que la hoja de estilos del tema hijo se cargue después de esta.

/**
 * Encolar estilos del tema (primero el padre, luego el hijo)
 * 
 */
function wpse218610_theme_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/woocommerce/woo.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/woocommerce/woo.css', array( $parent_style ) );
}
add_action( 'wp_enqueue_scripts', 'wpse218610_theme_styles' );

Nota: revisa el Manual del Desarrollador de Temas para obtener información adicional.

Charles

2.29K

23 feb 2016 20:23:53