Cum pot pune în coadă foile de stil ale temei copil după toate foile de stil ale temei părinte?

5 mai 2012, 20:18:18
Vizualizări: 49.4K
Voturi: 14

Folosesc tema Oenology bine dezvoltată de Chip Bennett ca temă părinte pentru propria mea temă copil.

În procesul meu de dezvoltare, am descoperit că există provocări pentru cei care scriu teme copil când vine vorba de controlul stilurilor.

Tocmai am descoperit că fișierul meu principal style.css este încărcat înaintea tuturor celorlalte foi de stil sau declarații din <head>, și asta explică de ce aveam probleme la suprascrierea unor stiluri din tema părinte.

Studiind mai departe problema, am observat că diferitele foi de stil și stiluri ale temei părinte pot fi puse în coadă în <head> în trei locuri: add_action('wp_print_styles', , add_action('wp_enqueue_scripts', , și apoi add_action('wp_head', .

Pentru a simplifica lucrurile, plănuiesc să creez două foi de stil. Prima foaie principală 'style.css' ar include doar comanda @import url(), necesară pentru încărcarea foii de stil principale Oenology.

A doua foaie de stil ar conține regulile temei mele copil. Pentru a mă asigura că este încărcată după toate celelalte reguli, aș pune-o în coadă folosind add_action( 'wp_head', .

Pare rezonabil acest lucru? Sau există o modalitate mai bună (mai corectă) de a face asta?

apropo, știe cineva ce înseamnă '/parent-theme/style.css?MRPreviewRefresh=723'?

Actualizare

wp_enqueue_style() nu pare să funcționeze în wp_head().

Cu respect,
Gregory

0
Toate răspunsurile la întrebare 3
4
21

Doar pentru informație, această întrebare se încadrează probabil în categoria prea localizată, deoarece este specifică temei Oenology.

Cu toate acestea, iată unde cred că ai o problemă: Oenology încarcă două fișiere de stil:

  1. style.css, direct în head-ul documentului (astfel înainte de declanșarea lui wp_head())

  2. {varietal}.css, la wp_enqueue_scripts, cu prioritatea 11, în functions/dynamic-css.php:

     /**
      * Încarcă Fișierul de Stil Varietal
      */
     function oenology_enqueue_varietal_style() {
    
         // definește fișierul de stil varietal
         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 );
     }
     // Încarcă Fișierul de Stil Varietal la wp_print_styles
     add_action('wp_enqueue_scripts', 'oenology_enqueue_varietal_style', 11 );
    

Fișierul de stil varietal, care aplică "skin-ul", se încarcă cu prioritatea 11, pentru a se asigura că fișierul de stil de bază, style.css, se încarcă primul, iar fișierul de stil varietal se încarcă al doilea, pentru a asigura cascadarea corectă.

Deci, dacă trebuie să suprascrii fișierul de stil varietal, pur și simplu încarcă al doilea fișier de stil după fișierul varietal; adică cu o prioritate de cel puțin 12 sau mai mare.

Editare

Pentru a oferi un răspuns mai general, la întrebarea mai generală:

Pentru a suprascrie un fișier de stil încărcat de tema Părinte, trebuie să știi două lucruri:

  1. Action hook-ul la care se încarcă fișierul de stil
  2. Prioritatea la care callback-ul este adăugat la hook

Funcțiile de încărcare (wp_enqueue_script()/wp_enqueue_style()) pot fi executate corect oriunde între hook-ul init și hook-urile wp_print_scripts/wp_print_styles. (Hook-ul semantic corect la care se execută funcțiile wp_enqueue_*() este în prezent wp_enqueue_scripts.) Această listă include următoarele acțiuni (printre altele; acestea sunt doar cele mai comune):

  • init
  • wp_head
  • wp_enqueue_scripts
  • wp_print_scripts/wp_print_styles

(Reține că wp_enqueue_scripts, wp_print_styles și wp_print_scripts se declanșează în interiorul lui wp_head, la o anumită prioritate.

Deci, pentru a suprascrie un fișier de stil al temei Părinte, trebuie să faci unul dintre următoarele:

  • Dezactivează încărcarea fișierului de stil al temei Părinte, prin wp_dequeue_style( $handle )

  • Elimină callback-ul temei Părinte care încarcă stilul, prin remove_action( $hook, $callback )

  • Folosește cascada CSS pentru a suprascrie fișierul de stil al temei Părinte, prin conectarea fișierului de stil al temei Copil wp_enqueue_style() la același hook cu o prioritate mai mică sau la un hook ulterior.

    Pentru această ultimă opțiune, dacă tema Părinte folosește:

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

    ...atunci tema Copil ar folosi:

    add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_style', {$priority + 1} );
    
9 mai 2012 19:27:08
Comentarii

mulțumesc Chip. Pot folosi într-adevăr wp_enqueue_scripts și o ordine mare pentru a încărca fișierul meu Child stylesheet ultimul. totuși, există încă 3 declarații de stil după declarația mea din Child stylesheet. 2 dintre ele sunt generate de WP însuși!!!, iar 1 este generat de Oenology prin funcția add_custom_image_header() din wp.

Gregory Gregory
10 mai 2012 05:38:03

declarația de stil body.custom-background este generată de WP însuși, dar se pare că pot specifica o culoare de fund personalizată prin definirea 'BACKGROUND_COLOR'. ciudat că o regulă CSS de bază ar trebui setată printr-o constantă WP personalizată.

Gregory Gregory
10 mai 2012 05:47:39

ultimul comentariu Chip. această întrebare nu este prea localizată. multe teme ar folosi toate hook-urile disponibile pentru a încărca sau afișa stiluri, iar dezvoltatorii de teme Child trebuie să știe cum să suprascrie acele stiluri fără a le dezactiva neapărat. noroc.

Gregory Gregory
10 mai 2012 05:49:49

Problema pe care o văd aici este că child_theme_enqueue_style va încărca stilul child cu o prioritate mai mare, mai jos în wp_head, DAR va duplica fișierul de stil al child theme-ului - Wordpress va încărca automat fișierul de stil al child theme-ului cu prioritatea sa normală și apoi îl va încărca din nou, mai jos, cu noua prioritate. Deși obține rezultatul de a suprascrie toate celelalte fișiere de stil, creează un fișier de stil duplicat în pagină.

php-b-grader php-b-grader
10 nov. 2015 03:56:25
0

singura modalitate de a garanta că stilurile mele au ultimul cuvânt în cascadă era să le includ la sfârșitul <head> prin intermediul hook-ului wp_head. wp_enqueue nu funcționează în interiorul wp_head, așa că a trebuit să afișez link-ul direct:

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

în final, pot seta stilurile mele cu relativă ușurință și fără a folosi niveluri ridicate de specificitate sau regula !important care ar trebui folosită doar ca ultimă soluție.

WP are nevoie de un sistem mai bun de încărcare a stilurilor. fiecare stil, fie că este un link către un fișier sau un stil inline, ar trebui să fie transmis prin același hook, permițând Prioritatea să determine ordinea lor. opțional, pentru scopuri de depanare, ar fi util dacă hook-ul ar afișa și valorile Priorității pentru fiecare stil, poate în formă comentată.

Actualizare

Am reușit să păstrez controlul asupra stilurilor din tema mea Child, păstrând în același timp cascada originală a temei Parent (care folosește un fișier principal de stiluri, un sub-fișier de stiluri și câteva declarații de stil), prin împărțirea fișierului meu de stiluri în două, așa cum am explicat în întrebare. Nu mai folosesc hook-ul wp_head(), ci folosesc hook-ul corect și standard wp_enqueue_scripts() cu un ordin ridicat pentru a mă asigura că fișierul meu de stiluri se încarcă ultimul.

fișierul implicit de stiluri al temei Child:

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

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

funcția pentru a încărca fișierul meu principal de stiluri:

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

totuși, există câteva declarații de stiluri generate de WP (adică nu de tema părinte) care sunt afișate după fișierul meu de stiluri și va trebui să analizez utilizarea unor reguli CSS cu specificitate ridicată pentru a suprascrie regulile care mă preocupă sau să caut hook-uri pentru a le dezactiva, în special regula body.custom-background.

mulțumesc tuturor pentru comentarii.

salutări,
Gregory

6 mai 2012 05:32:29
2

Ar trebui să folosești întotdeauna wp_enqueue_style() pentru a încărca fișierul tău de stiluri, iar această funcție ar trebui să fie conectată la hook-ul wp_enqueue_scripts care rulează în head. Presupun că nu l-ai conectat acolo, de aceea ai această problemă. (Începând cu WP 3.3, dacă wp_enqueue_style() este conectat la altceva, va arunca un Notice când WP_Debug este activat).

9 mai 2012 18:22:40
Comentarii

Răspunsul lui @Chip este mai bun decât al meu și el este, fără îndoială, mai calificat să discute despre tema Oenology ;) Este acesta un caz în care ar trebui să-mi șterg răspunsul, chiar dacă este parțial corect?

mrwweb mrwweb
9 mai 2012 19:45:55

Nu, aș lăsa răspunsul tău. Este corect și abordează o parte specifică a întrebării.

Chip Bennett Chip Bennett
9 mai 2012 19:54:23