11

J'utilise le thème œnologique bien écrit de Chip Bennett comme thème Parent à mon propre enfant.

Dans mon processus de développement, j'ai découvert qu'il y a des défis pour les personnes qui écrivent des thèmes enfants quand il s'agit de contrôler les styles.

Je viens de découvrir que mon fichier principal style.css est chargé avant tous les autres liens ou instructions de feuille de style dans <head>, et cela explique pourquoi j'avais du mal à remplacer certains des styles parents.

une étude plus approfondie du problème montre que diverses feuilles de style parent et styles peuvent être mis en file d'attente dans la <head> à trois endroits; add_action('wp_print_styles',, add_action('wp_enqueue_scripts',Et puis add_action('wp_head',.

pour garder les choses simples, je prévois de créer deux feuilles de style. la première feuille principale 'style.css' inclurait uniquement la @import url()commande, nécessaire pour charger la feuille de style principale d'Oenology.

la deuxième feuille de style contiendrait mes règles enfant. pour m'assurer qu'il est chargé après toutes les autres règles, je le mettrais en file d'attente à l'aide add_action( 'wp_head',.

Est-ce-que ça semble raisonnable? ou existe-t-il une meilleure façon (plus correcte) de le faire?

~~btw, quelqu'un sait-il ce que '/parent-theme/style.css ? MRPreviewRefresh = 723 ' signifie?~~

Mise à jour

wp_enqueue_style () ne semble pas fonctionner dans wp_head ().

cheers,
Gregory

child-theme css parent-theme

— Gregory
source

21

Juste pour info, cette question est probablement trop localisée , car elle est spécifique au thème œnologie.

Cela dit, voici où je pense que vous rencontrez un problème: Oenology met en file d'attente deux feuilles de style:

style.css, directement dans la tête du document (donc avant le wp_head() tir)

{varietal}.css, à wp_enqueue_scripts, en priorité 11, dans functions/dynamic-css.php:

/**
 * Enqueue Varietal Stylesheet
 */
function oenology_enqueue_varietal_style() {

// define varietal stylesheet
global $oenology_options;
$oenology_options = oenology_get_options();
$varietal_handle = 'oenology_' . $oenology_options['varietal'] . '_stylesheet';
$varietal_stylesheet = get_template_directory_uri() . '/varietals/' . $oenology_options['varietal'] . '.css';

wp_enqueue_style( $varietal_handle, $varietal_stylesheet );
}
// Enqueue Varietal Stylesheet at wp_print_styles
add_action('wp_enqueue_scripts', 'oenology_enqueue_varietal_style', 11 );

La feuille de style variétale, qui applique le "skin", est mise en file d'attente en priorité 11, pour garantir que la feuille de style de base style.css, se charge en premier , et la feuille de style variétale se charge en second , afin de provoquer la cascade correcte.

Donc, si vous devez remplacer la feuille de style variétale , mettez simplement votre deuxième feuille de style en file d'attente après la feuille de style variétale; c'est-à-dire avec une priorité d'au moins 12ou plus.

Éditer

Pour donner une réponse plus générale à la question plus générale:

Pour remplacer une mise en file d'attente de feuille de style de thème parent, vous devez connaître deux choses:

Le crochet d'action auquel la feuille de style est mise en file d'attente
La priorité à laquelle le rappel est ajouté au hook

Les fonctions de mise en file d'attente ( wp_enqueue_script()/ wp_enqueue_style()) peuvent être correctement exécutées n'importe où entre le inithook et les wp_print_scripts/ wp_print_styleshooks. (Le hook sémantiquement correct auquel exécuter les wp_enqueue_*()fonctions est actuellement wp_enqueue_scripts.) Cette liste comprend les actions suivantes (entre autres; ce ne sont que les suspects habituels):

init
wp_head
wp_enqueue_scripts
wp_print_scripts/wp_print_styles

(Notez que wp_enqueue_scripts, wp_print_styleset wp_print_scripts tous tirent à l' intérieur de wp_head, à une priorité spécifique .

Ainsi, afin de remplacer une feuille de style Parent-Theme, vous devez effectuer l'une des opérations suivantes:

Annulez la mise en file d'attente de la feuille de style Parent-Theme, viawp_dequeue_style( $handle )
Supprimez le rappel du thème parent qui met le style en file d'attente, viaremove_action( $hook, $callback )
Utilisez la cascade CSS pour remplacer la feuille de style Parent-Theme, en raccordant votre wp_enqueue_style()appel de feuille de style Child-Theme au même crochet avec une priorité inférieure ou à un crochet ultérieur .

Pour cette dernière option, si le thème parent utilise:
```
`add_action( 'wp_enqueue_scripts', 'parent_theme_enqueue_style', $priority )`
```
... alors le thème enfant utiliserait:
```
`add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_style', {$priority + 1} )`
```

— Chip Bennett
source

merci Chip. Je peux en effet utiliser wp_enqueue_scripts et un ordinal élevé pour que ma feuille de style enfant se charge en dernier. il y a cependant encore 3 déclarations de style différentes après ma déclaration de feuille de style enfant. 2 d'entre eux sont sortis par WP lui-même !!!, et 1 est sorti par Oenology via la fonction add_custom_image_header () de wp.

— Gregory

la déclaration de style body.custom-background est produite par WP lui-même, mais il semble que je puisse spécifier une couleur d'arrière-plan personnalisée en définissant «BACKGROUND_COLOR». étrange qu'une règle css de base doive être définie via une constante WP personnalisée.

— Gregory

1

dernier commentaire Chip. cette question n'est pas trop localisée. de nombreux thèmes utiliseraient tous les crochets disponibles pour mettre en file d'attente ou imprimer des styles, et les développeurs de thèmes enfants doivent savoir comment remplacer ces styles sans nécessairement les désactiver. à votre santé.

— Gregory

Le problème que je vois avec cela est que le child_theme_enqueue_style chargera le style enfant avec une priorité plus élevée, plus bas dans le wp_head MAIS il dupliquera la feuille de style enfant - Wordpress chargera automatiquement la feuille de style enfant à sa priorité normale, puis le rechargera, plus bas avec la nouvelle priorité. Bien qu'il obtienne le résultat de remplacer toutes les autres feuilles de style, il crée une feuille de style en double dans la page.

— php-b-grader

2

la seule façon de garantir que mes styles aient le dernier mot dans la cascade était de les inclure à la fin de <head> via le hook wp_head. wp_enqueue ne fonctionne pas dans wp_head, j'ai donc dû faire écho au lien directement:

function gregory_enqueue_stylesheets() {
    $base = get_stylesheet_directory_uri();
    echo '<link rel="stylesheet" href="'.$base.'/style-gregory.css" type="text/css" media="all">';
    return;
}
add_action( 'wp_head', 'gregory_enqueue_stylesheets', 18 );

~~enfin, je peux définir mes styles avec une relative facilité, et sans utiliser des niveaux de spécificité élevés, ou la règle! importante qui ne doit être utilisée qu'en dernier recours.~~

WP a besoin d'un meilleur système de mise en file d'attente de style. chaque style, qu'il s'agisse d'un lien de fichier ou d'un style en ligne, doit être passé par le même crochet permettant à la priorité de déterminer leur ordre. éventuellement à des fins de débogage, il serait utile que le hook affiche également les valeurs de priorité de chaque style, peut-être sous forme commentée.

Mise à jour

J'ai pu garder le contrôle des styles de mon thème enfant tout en conservant la cascade d'origine du thème parent (qui utilise une feuille de style principale, une sous-feuille de style et quelques déclarations de style) en divisant ma feuille de style en deux comme expliqué dans la question. Je n'utilise plus le crochet wp_head (), mais plutôt le crochet wp_enqueue_scripts () approprié et standard avec un ordinal élevé pour m'assurer que ma feuille de style est chargée en dernier.

Feuille de style par défaut de mon thème enfant:

/*
Theme Name: Oenology-Gregory
Template: oenology
Version: 20120506-0026
*/

@import url("/wp-content/themes/oenology/style.css");

la fonction pour mettre en file d'attente ma feuille de style principale:

function gregory_enqueue_stylesheets() {
    $base = get_stylesheet_directory_uri();
    wp_enqueue_style( 'style-gregory', $base.'/style-gregory.css' );
    return;
}
add_action( 'wp_enqueue_scripts', 'gregory_enqueue_stylesheets', 18 );

il y a cependant quelques instructions de style générées par WP (c'est-à-dire pas le thème parent) qui sont indiquées après ma feuille de style, et je devrai utiliser soit des règles CSS de haute spécificité pour remplacer les règles qui me concernent, soit chercher des crochets pour les désactiver, en particulier la règle body.custom-background.

Merci à tous pour vos commentaires.

cheers,
Gregory

— Gregory
source

1

Vous devez toujours utiliser wp_enqueue_style()pour charger votre feuille de style et que les fonctions doivent être accrochées au crochet wp_enqueue_scripts avec des exécutions dans la tête . Je soupçonne que vous n'y étiez pas accroché, d'où votre problème. (À partir de WP 3.3, s'il wp_enqueue_style()est accroché à autre chose, il lance une notice avec WP_Debug activé).

— mrwweb
source

@ La réponse de Chip est meilleure que la mienne et il est sans doute plus qualifié pour discuter du thème de l'œnologie;) Est-ce un cas où je devrais supprimer ma réponse même si c'est juste?

— mrwweb

Non, je laisserais votre réponse. Il est correct et répond à une partie spécifique de la question.

— Chip Bennett

comment mettre en file d'attente ma / mes feuille (s) de style enfant * après * chaque feuille de style / instruction parent?

Mise à jour

Éditer

Mise à jour