web-dev-qa-db-fra.com

Comment remplacer les styles en file d'attente à l'aide d'un thème enfant

Je crée un thème enfant (mon premier depuis plus de 3 ans) d'un thème WooCommerce et j'ai quelques problèmes avec le fait que certains styles de mise en page sont mis en file d'attente dans le thème parent et je dois ajouter !important à tous les styles que je veux remplacer.

Il s'agit du code de mise en file d'attente actuel dans les thèmes parents functions.php;

if ( ! is_admin() ) { add_action( 'wp_enqueue_scripts', 'woo_load_frontend_css', 20 ); }

if ( ! function_exists( 'woo_load_frontend_css' ) ) {
function woo_load_frontend_css () {
    wp_register_style( 'theme-stylesheet', get_stylesheet_uri() );
    wp_register_style( 'woo-layout', get_template_directory_uri() . '/css/layout.css' );
    wp_enqueue_style( 'theme-stylesheet' );
    wp_enqueue_style( 'woo-layout' );
} // End woo_load_frontend_css()
}

Ce que je dois faire, c'est charger le css du thème enfant APRÈS le fichier layout.css chargé par le thème parent.

functionschild-themewp-enqueue-style
2
Poisontonomes

J'ai eu le même problème et la réponse de l'épilepsie m'a mis sur le droit chemin.

J'utilise wootheme "function" et il doit charger le fichier style.css avant un autre fichier CSS appelé layout.css. Cet ordre doit donc être conservé lors du chargement du fichier style.css du thème enfant.

En résumé, pour éviter d'utiliser !important pour remplacer tous les styles, nous devons charger les fichiers de style dans l'ordre suivant:

  1. Style.css du thème parent
  2. Layout.css du thème parent
  3. Thème de l'enfant thème.css

Pour y parvenir, nous devons changer:

  1. Thème de l'enfant thème.css
  2. Functions.php du thème enfant

Thème de l'enfant thème.css

Modifiez ce fichier pour importer les fichiers CSS du thème parent dans le bon ordre:

@import url("../function/style.css");
@import url("../function/css/layout.css");

Functions.php du thème enfant

Ajoutez ensuite ceci à votre fichier functions.php pour éviter de recharger layout.css (woo-layout) et de charger le fichier css du thème enfant (style.css):

if ( ! function_exists( 'woo_load_frontend_css' ) ) {
    function woo_load_frontend_css () {
        // comment this, as we will be loading this css with a different priority
        //wp_register_style( 'theme-stylesheet', get_stylesheet_uri() );

        // we can register the style here for future manipulation...
        wp_register_style( 'woo-layout', get_template_directory_uri() . '/css/layout.css' );

        // comment this, as we will be loading this css with a different priority
        //wp_enqueue_style( 'theme-stylesheet' );

        // ... but we will not be enqueuing it, instead we will import it in the child theme's style.css
        //wp_enqueue_style( 'woo-layout' );
    } // End woo_load_frontend_css()
}

Vous pouvez également charger une fonction vide comme celle-ci pour obtenir le même effet:

if ( ! function_exists( 'woo_load_frontend_css' ) ) {
    function woo_load_frontend_css () {

    } // End woo_load_frontend_css()
}

Puis inscrivez-vous et ajoutez le css de votre thème enfant en l'ajoutant au fichier functions.php de votre thème enfant juste après le function woo_load_frontend_css précédent:

function cherrypick_child_enqueue_css()
{
    wp_register_style( 'theme-stylesheet', get_stylesheet_uri() );
    wp_enqueue_style( 'theme-stylesheet' );
}
add_action( 'wp_enqueue_scripts', 'cherrypick_child_enqueue_css', 99 ); // using priority 99 we make sure the child theme style.css will be loaded after all other css

Maintenant, tous les fichiers de feuilles de style seront chargés dans le bon ordre.

3
estepix

Comme la fonction Woo est encapsulée dans if( ! function_exists('function_name') ), vous pouvez la remplacer dans le fichier functions.php de votre thème enfant.

Ajoutez la fonction au fichier, puis ajustez l'ordre de la file d'attente pour charger style.css après layout.css.

if ( ! function_exists( 'woo_load_frontend_css' ) ) {
    function woo_load_frontend_css () {
        wp_register_style( 'theme-stylesheet', get_stylesheet_uri() );
        wp_register_style( 'woo-layout', get_template_directory_uri() . '/css/layout.css' );

        wp_enqueue_style( 'woo-layout' );

        //load stylesheet after layout.
        wp_enqueue_style( 'theme-stylesheet' );

    } // End woo_load_frontend_css()
}
1
epilektric