WordPress : Comment puis-je charger correctement cette feuille de style de thème enfant ? Ou si c’est correct, pourquoi l’apparence de mon thème enfant ne correspond-elle pas au parent ?

J’ai lu l’article du Codex sur les thèmes enfants et de nombreuses questions-réponses sur StackExchange, mais je n’ai pas réussi à comprendre cela. L’impact est que mon thème enfant ne présente pas le même style que le thème parent, ce qui le rend inutilisable.

J’utilise le thème Nisarg en tant que parent et j’ai créé l’enfant en utilisant nisarg-childtout en créant les en-têtes appropriés dans ce fichier style.css. Il n’y a pas de style dans cette feuille.

Si j’ai le parent actif, une seule instance de style.csscharges :

<link rel="stylesheet" id="nisarg-style-css" href="https://mydomain/wp-content/themes/nisarg/style.css?ver=4.9.6" type="text/css" media="all">

Tout est comme il se doit.

Si j’active le thème enfant et que j’utilise le code ci-dessous comme mon function.php, j’obtiens trois instances de style.cssloaded :

<?php

function my_theme_enqueue_styles() {

    $parent_style = 'nisarg';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'nisarg-child-style', 
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

}

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Et les trois instances :

<link rel="stylesheet" id="nisarg-css" href="https://mydomain/wp-content/themes/nisarg/style.css?ver=4.9.6" type="text/css" media="all">
<link rel="stylesheet" id="nisarg-child-style-css" href="https://mydomain/wp-content/themes/nisarg-child/style.css?ver=1.0.0" type="text/css" media="all">
<link rel="stylesheet" id="nisarg-style-css" href="https://mydomain/wp-content/themes/nisarg-child/style.css?ver=4.9.6" type="text/css" media="all">

Si c’est vrai, mes apparences ne le sont pas.

Parce que le thème parent a aussi wp_enqueue_style( 'nisarg-style', get_stylesheet_uri() );dans son functions.php, j’ai aussi essayé l’approche de cette question. Cela se traduit par le chargement d’une seule copie de chaque feuille de style parent et enfant, mais mon thème ne s’affiche toujours pas correctement :

<link rel="stylesheet" id="nisarg-css" href="https://mydomain/wp-content/themes/nisarg/style.css?ver=4.9.6" type="text/css" media="all">
<link rel="stylesheet" id="nisarg-style-css" href="https://mydomain/wp-content/themes/nisarg-child/style.css?ver=4.9.6" type="text/css" media="all">

Si ce chargement semble correct, qu’est-ce qui me manque ? Qu’est-ce qui fait que les deux thèmes ont des différences dans leur apparence ? Et comment puis-je le réparer?

Solution n°1 trouvée

Je pense que vous devez déclarer la bootstrapdépendance lorsque vous mettez en file d’attente la feuille de style parent (bootstrap.css est mis en file d’attente par le thème parent).

Le thème parent ne déclare pas la dépendance mais met en file d’attente style.css après bootstrap.css, donc cela fonctionne « juste ». Mais lorsque vous modifiez l’ordre de la mise en file d’attente, les dépendances sont rompues. Utilisez le troisième paramètre de wp_eneuque_style()pour déclarer les dépendances et WordPress se chargera de l’ordre, peu importe l’ordre dans le code.

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {

    wp_enqueue_style(
        'nisarg', // Handler/key
        get_parent_theme_file_uri( 'style.css' ), // URL
        ['bootstrap'] // Dependencies (bootstrap is enqueued by parent them)
    );

    wp_enqueue_style(
        'nisarg-child-style',  // Handler/key
        get_stylesheet_uri(), // URL
        ['nisarg'], // Dependencies
        wp_get_theme()->get('Version') // version
    );

}