web-dev-qa-db-fra.com

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 de thème parent a priorité sur tout changement que je fais sur le thème CSS de thème enfant. Je peux contourner ce problème à l'aide de !important; toutefois, cette solution est inégale et les thèmes enfants doivent fonctionner en tant que première ressource du site.

Par exemple, dans mon site , la bordure qui inclut .wp-caption a la même couleur que l'arrière-plan utilisant la balise !important, mais ne fonctionnera pas sans elle.

Est-ce que cela a à 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' );
}
csschild-theme
7
Dharkov

Essayez de mettre en file d'attente le code 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' ) );
}

Notez quelques petites choses:

1) PHP_INT_MAX en priorité pour qu'il soit exécuté en dernier

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

J'ai ajouté un sous-dossier à cet endroit, ainsi que /styles/ car je conserve normalement mon code CSS dans un sous-dossier de mon thème.

3) suivi de array( 'parent-style' ) pour que le CSS enfant ait le CSS parent en tant que 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 après. De ce fait, tout ce qui apparaît également dans le thème enfant qui se trouve déjà dans le thème parent remplacera la version du thème parent.

15
rambillo

Réponse TLDR: le premier paramètre de chaque wp_enqueue_style() ne doit pas être laissé comme 'parent-style' et 'child-style'. Ils doivent êtrerenommépour correspondre au nom du thème parent et à son enfant.

Problème

Si vous ne renommez pas les paramètres, le thème enfant sera mis en file d'attente une seconde fois. Les règles apparaissant deux fois dans Firebug et la modification des valeurs dans le mauvais n'ayant aucun effet apparent, ce qui peut vous amener à penser que vos règles enfants ne 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é. C'est le cas, mais seulement ça. Le flux de travail CSS est un peu différent: vous voulez remplacer, pas remplacer. C'est logique (cela fonctionne comme les autres fichiers de thème) mais ils auraient pu avoir une note.

Solution

Renommez les paramètres. Je le fais comme ci-dessous pour obtenir (un peu) plus de contrôle, note qu'il faut remplacer vingt-six ans et vingt-seize ans avec les noms de votre thème et de votre enfant thème:

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 n’obtenez pas le contrôle de l’ordre des liens de certains plugins (tous?) WP dans cette action. Ils sont liés après.)

Bonne séléction-chasse;)

1
Henrik Erlandsson

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

Donc au lieu de:

 
. wp-caption {
 background: # 2d2d2d! important; 
}

Utilisation:

 
. entry .wp-caption {
 background: # 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 ce n'est déjà fait.

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

0
Twodogstar