WordPress : Thèmes enfants Problèmes de priorité CSS sans utiliser !important

J’ai changé mon site WordPress pour utiliser des thèmes enfants, mais le style du thème parent a priorité sur toute modification que j’apporte au CSS du thème enfant. Je peux contourner ce problème en utilisant !important, mais il s’agit d’une solution inégale et les thèmes enfants devraient fonctionner comme la première ressource du site.

Par exemple, sur mon site, la bordure qui inclut .wp-captionest de la même couleur que l’arrière-plan à l’aide de la !importantbalise, mais ne fonctionnera pas sans elle.

Cela a-t-il à voir avec le fichier functions.php ?

Voici le contenu de mon fichier PHP :

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Solution n°1 trouvée

Réponse TLDR : le premier paramètre de chacun wp_enqueue_style()ne doit pas être laissé en tant que « style parent » et « style enfant ». Ils doivent être renommés pour correspondre au nom du thème parent et de son enfant.

Problème

Si vous ne renommez pas les paramètres, vous obtiendrez le thème enfant mis en file d’attente une deuxième fois, ce qui peut entraîner l’apparition de règles deux fois dans Firebug et la modification des valeurs dans le mauvais sans effet apparent, ce qui peut vous faire croire que vos règles enfants ne le font pas. t remplacer le parent.

L’attente

La page Codex sur les thèmes enfants indique correctement que si vous ne faites rien, le CSS enfant est automatiquement lié. Oui, mais seulement ça. Le workflow CSS est un peu différent : vous voulez remplacer, pas remplacer. C’est logique (ça marche comme les autres fichiers de thème) mais ils auraient pu avoir une note.

La solution

Renommez les paramètres. Je le fais comme ci-dessous pour avoir (un peu) plus de contrôle, notez que vous devez remplacer vingt -six et vingt-six-enfant par les noms de votre thème et thème enfant :

function theme_enqueue_scripts() {
    //FIRST
    wp_enqueue_style( 'twentysixteen-style', get_template_directory_uri() . '/style.css' );

    //...custom queueing of .js and .css for Javascript plugins and such here

    //LAST
    wp_enqueue_style( 'twentysixteen-child-style', get_stylesheet_directory_uri() . '/style.css', array( 'twentysixteen-style' ) );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' );

(Notez également que vous ne contrôlez pas l’ordre des liens de certains (tous?) Plugins WP dans cette action. Ils sont liés après.)

Bonne chasse aux sélecteurs 😉

Solution n°2 trouvée

Essayez de mettre en file d’attente le CSS de votre thème enfant comme suit :

// Queue parent style followed by child/customized style
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', PHP_INT_MAX);

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/styles/child-style.css', array( 'parent-style' ) );
}

Remarquez quelques points :

1) PHP_INT_MAX en priorité pour que cela s’exécute en dernier

2) get_stylesheet_directory_uri() contre get_template_directory_uri() qui pointera vers le dossier de modèles du thème enfant au lieu des parents.

J’y ai également ajouté un sous-dossier, /styles/car je conserve normalement mon CSS dans un sous-dossier de mon thème.

3) suivi de array( 'parent-style' )pour que le CSS enfant ait le CSS parent comme dépendance, ce qui a pour effet de placer le thème parent en premier dans la tête et le CSS du thème enfant qui le suit. Pour cette raison, tout ce qui apparaît également dans le thème enfant qui est déjà dans le thème parent écrasera la version du thème parent.

Solution n°3 trouvée

Vous pouvez utiliser un sélecteur plus spécifique dans le CSS de votre thème enfant afin qu’il soit prioritaire.

Donc au lieu de :

.wp-légende {
     arrière-plan : #2d2d2d !important ;
}

Utilisation:

.entrée .wp-légende {
     arrière-plan : #2d2d2d ;
}

Vous voudrez également vous assurer de mettre en file d’attente votre feuille de style de thème enfant dans votre fichier functions.php si vous ne l’êtes pas déjà.

http://codex.wordpress.org/Function_Reference/wp_enqueue_style