Dare priorità al foglio di stile del tema child

Question

Dare priorità al foglio di stile del tema child

23 feb 2016, 18:13:50

Visualizzazioni: 38.1K

Voti: 6

Ho creato un tema child e il file style.css principale funziona perfettamente. Tuttavia, il tema padre ha un altro foglio di stile che voglio importare e crearne uno uguale per il tema child e utilizzarlo al suo posto.

Struttura tema padre - ./woocommerce/woo.css
Struttura tema child - ./woocommerce/woo.css (Creato manualmente)

Ho accodato entrambi i fogli di stile nel functions.php del tema child come mostrato di seguito.

// Carica i fogli di stile del tema padre
function fruitful_load_parent_stylesheets() {
    wp_enqueue_style( 'layout', get_template_directory_uri() . '/woocommerce/woo.css' );
}
add_action( 'wp_enqueue_scripts', 'fruitful_load_parent_stylesheets' );

// Carica i fogli di stile del tema child
function fruitful_load_child_stylesheets(){
    wp_enqueue_style( 'woo', get_stylesheet_directory_uri() . '/woocommerce/woo.css');
}
add_action('wp_enqueue_scripts', 'fruitful_load_child_stylesheets');

Ora, se aggiungo uno stile al file woo.css del tema child, non funziona finché non aggiungo !important. Non voglio dover aggiungere !important ad ogni stile che aggiungo.

è

nimsrules

208

child theme wp enqueue style css

Commenti

Per favore dai un'occhiata a questo commento

Mayeenul Islam

23 feb 2016 18:40:45

Tutte le risposte alla domanda

Potresti provare ad aggiungere un valore di priorità a ciascun add_action per assicurarti che uno venga eseguito prima dell'altro.

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

Commenti

Non ha funzionato. Ecco il link allo screenshot dell'elemento inspect - http://i.imgur.com/Mb34NJa.png

Il terzo blocco proviene dal woo.css del tema child mentre i primi due sono del tema parent. Non capisco perché vengano caricati due volte.

nimsrules

23 feb 2016 19:53:31

Impostare la priorità ha funzionato per me. Ho dovuto impostarla superiore a 10 per "sovrascrivere" l'enqueue del tema parent.

Gavin

22 mar 2018 17:07:20

anche per me - ora posso sovrascrivere le impostazioni del mio tema parent (template acquistato)

cljk

25 mar 2020 12:49:20

Commenti

Ha funzionato dopo che ho commentato l'enqueue di woo.css nel functions.php del tema genitore. Accetterò questa risposta. Grazie!

nimsrules

23 feb 2016 20:32:35

Ho dovuto caricare il tema child in un secondo momento come mostrato sotto. Ho dovuto rimuovere dalla coda e deregistrare lo stile del parent, poi riaccodare lo stile del parent e quello del child. Spero che questo possa aiutare.

Il file functions.php del tema parent contiene:

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

Il file functions.php del tema child contiene:

add_action('wp_enqueue_scripts', 'load_child_style', 20);
function load_child_style() {
  // registra e accoda il parent con un nuovo nome 
  wp_register_style('parent-style', $url, array($deps));
  wp_enqueue_style('parent-style'); 

  // rimuovi dalla coda e deregistra l'handle del tema parent
  wp_dequeue_style('parent-theme-style'); // dal tema parent
  wp_deregister_style('parent-theme-style'); 

  // registra e accoda lo stile del child
  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

Il tuo tema child stylesheet verrà solitamente caricato automaticamente. Se così non fosse, dovrai enqueue anche quello. Impostare 'parent-style' come dipendenza garantirà che il stylesheet del tema child venga caricato successivamente.

/**
 * Accoda gli stili del tema (prima il parent, poi il child)
 * 
 */
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: dai un'occhiata al Manuale per Sviluppatori di Temi per ulteriori informazioni.

Charles

2.29K

23 feb 2016 20:23:53