come faccio a mettere in coda il / i mio / i foglio / i di figlio * dopo * ogni foglio / dichiarazione del genitore?


11

Sto usando il tema enologico ben scritto di Chip Bennett come genitore del mio tema Child.

Nel mio processo di sviluppo, ho scoperto che ci sono alcune sfide per le persone che scrivono temi per bambini quando si tratta di controllare gli stili.

Ho appena scoperto che il mio file style.css principale viene caricato prima di ogni altro link o istruzione di foglio di stile in <head>, e questo spiega perché avevo problemi a sovrascrivere alcuni degli stili Parent.

un ulteriore studio del problema mostra che vari fogli di stile e stili genitore possono essere messi in coda nella <head> in tre posizioni; add_action('wp_print_styles',, add_action('wp_enqueue_scripts',e quindi add_action('wp_head',.

per semplificare le cose, sto progettando di creare due fogli di stile. il primo foglio 'style.css' principale includerebbe solo il @import url()comando, necessario per caricare il foglio di stile principale di Enologia.

il secondo foglio di stile conterrebbe le mie regole figlio. per assicurarmi che sia caricato dopo tutte le altre regole, lo accoderei usando add_action( 'wp_head',.

sembra ragionevole? o c'è un modo migliore (più corretto) per farlo?

a proposito, qualcuno sa cosa significa '/parent-theme/style.css ? MRPreviewRefresh = 723 ' significa?

Aggiornare

wp_enqueue_style () non sembra funzionare in wp_head ().

saluti,
Gregory

Risposte:


21

Cordiali saluti, questa domanda è probabilmente troppo localizzata , in quanto è specifica per il tema dell'enologia.

Detto questo, ecco dove penso che tu abbia un problema: l'enologia accoda due fogli di stile:

  1. style.css, direttamente nella testa del documento (quindi prima che wp_head() venga sparato)
  2. {varietal}.css, a wp_enqueue_scripts, con priorità 11, in 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 );

Il foglio di stile varietale, che applica la "skin", si accoda per priorità 11, per garantire che il foglio di stile di base venga style.csscaricato per primo e il foglio di stile varietale venga caricato per secondo , al fine di causare la corretta cascata.

Quindi, se è necessario sostituire il foglio di stile varietale , è sufficiente accodare il secondo foglio di stile dopo il foglio di stile varietale; cioè con una priorità almeno 12o maggiore.

modificare

Per fornire una risposta più generale, alla domanda più generale:

Per sovrascrivere un accodamento del foglio di stile del tema principale, devi conoscere due cose:

  1. Il gancio di azione in cui il foglio di stile è accodato
  2. La priorità con cui il callback viene aggiunto all'hook

Le funzioni Enqueue ( wp_enqueue_script()/ wp_enqueue_style()) possono essere eseguite correttamente in qualsiasi punto tra il initgancio e wp_print_scripts/ i wp_print_stylesganci. (L' hook semanticamente corretto in cui eseguire le wp_enqueue_*()funzioni è attualmente wp_enqueue_scripts.) Questo elenco include le seguenti azioni (tra le altre; questi sono solo i soliti sospetti):

  • init
  • wp_head
  • wp_enqueue_scripts
  • wp_print_scripts/wp_print_styles

(Si noti che wp_enqueue_scripts, wp_print_stylese wp_print_scripts tutto il fuoco all'interno di wp_head, con una priorità specifica .

Quindi, per sovrascrivere un foglio di stile Parent-Theme, devi effettuare una delle seguenti operazioni:

  • De-accodare il foglio di stile Parent-Theme, tramitewp_dequeue_style( $handle )
  • Rimuovere il callback del tema principale che accoda lo stile, tramiteremove_action( $hook, $callback )
  • Utilizzare la cascata CSS per sovrascrivere il foglio di stile Parent-Theme, agganciando la wp_enqueue_style()chiamata del foglio di stile Child-Theme nello stesso hook con una priorità inferiore o in un hook successivo .

    Per quest'ultima opzione, se il tema principale utilizza:

    `add_action( 'wp_enqueue_scripts', 'parent_theme_enqueue_style', $priority )`

    ... quindi il tema Child userebbe:

    `add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_style', {$priority + 1} )`

grazie Chip. Posso davvero usare wp_enqueue_scripts e un alto ordinale per far caricare il foglio di stile di mio figlio per ultimo. ci sono comunque ancora 3 diverse dichiarazioni di stile dopo la mia dichiarazione sul foglio di stile di Mio figlio. 2 di questi sono prodotti dallo stesso WP !!!, e 1 è prodotto dall'enologia tramite la funzione add_custom_image_header () di wp.
Gregorio,

l'istruzione di stile body.custom-background viene generata dallo stesso WP, ma sembra che sia possibile specificare un colore di sfondo personalizzato definendo "BACKGROUND_COLOR". strano che una regola CSS di base debba essere impostata tramite una costante WP personalizzata.
Gregorio,

1
ultimo commento Chip. questa domanda non è troppo localizzata. molti temi utilizzerebbero tutti gli hook disponibili per accodare o stampare stili e gli sviluppatori di temi Child devono sapere come sovrascrivere quegli stili senza necessariamente disabilitarli. Saluti.
Gregorio,

Il problema che vedo in questo è che child_theme_enqueue_style caricherà lo stile figlio con una priorità più alta, più in basso wp_head MA duplicherà il foglio di stile figlio - Wordpress caricherà automaticamente il foglio di stile figlio con la sua priorità normale e poi lo caricherà di nuovo, più in basso con la nuova priorità. Mentre ottiene il risultato della sostituzione di tutti gli altri fogli di stile, crea un foglio di stile duplicato nella pagina.
php-b-selezionatore

2

l'unico modo per garantire che i miei stili avessero l'ultima parola nella cascata era includerli alla fine di <head> tramite il gancio wp_head. wp_enqueue non funziona all'interno di wp_head, quindi ho dovuto fare eco direttamente al link:

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 );

infine, posso impostare i miei stili con relativa facilità e senza usare alti livelli di specificità, o la regola!! importante che dovrebbe essere usata solo come ultima risorsa.

WP ha bisogno di un sistema di accodamento di stile migliore. ogni stile, sia che si tratti di un collegamento a un file o di uno stile in linea, deve essere passato attraverso lo stesso hook, consentendo alla Priorità di determinare il proprio ordine. opzionalmente per scopi di debug, sarebbe utile se l'hook emettesse anche i valori di Priorità di ogni stile, magari in forma commentata.

Aggiornare

Sono stato in grado di mantenere il controllo degli stili nel tema Mio figlio mantenendo la cascata originale del tema Genitore (che utilizza un foglio di stile principale, un foglio di stile secondario e alcune dichiarazioni di stile) suddividendo il mio foglio di stile in due come spiegato in la domanda. Non sto più usando l'hook wp_head (), ma usando l'hook wp_enqueue_scripts () corretto e standard con un ordinale alto per garantire che il mio foglio di stile venga caricato per ultimo.

foglio di stile predefinito del tema di mio figlio:

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

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

la funzione per accodare il mio foglio di stile 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 );

ci sono tuttavia alcune dichiarazioni di stile generate dal WP (ovvero, non il tema principale) che sono riportate dopo il mio foglio di stile, e dovrò cercare di utilizzare le regole css ad alta specificità per sovrascrivere le regole che mi riguardano, o cercare si aggancia per disabilitarli, in particolare la regola body.custom-background.

grazie a tutti per i vostri commenti.

saluti,
Gregory


1

Dovresti sempre usare wp_enqueue_style()per caricare il tuo foglio di stile e che le funzioni dovrebbero essere agganciate al gancio wp_enqueue_scripts con le esecuzioni nella testa . Ho il sospetto che non lo stavi collegando lì, quindi il tuo problema. (A partire da WP 3.3, se wp_enqueue_style()è collegato a qualsiasi altra cosa, genera un avviso con WP_Debug attivato).


La risposta di @ Chip è migliore della mia ed è probabilmente più qualificata per discutere del tema dell'enologia;) È un caso in cui dovrei cancellare la mia risposta anche se è giusto?
mrwweb,

No, lascerei la tua risposta. È corretto e affronta una parte specifica della domanda.
Chip Bennett,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.