Probleme de prioritate CSS la teme copil fără a folosi !important

Question

Probleme de prioritate CSS la teme copil fără a folosi !important

12 feb. 2015, 00:18:52

Vizualizări: 34.6K

Voturi: 11

Mi-am schimbat site-ul WordPress pentru a folosi teme copil, dar stilul temei părinte are prioritate față de orice modificare pe care o fac în CSS-ul temei copil. Pot să rezolv problema folosind !important, totuși aceasta este o soluție provizorie și temele copil ar trebui să funcționeze ca prima resursă a site-ului.

De exemplu, pe site-ul meu, bordura care include .wp-caption are aceeași culoare ca fundalul folosind eticheta !important, dar nu funcționează fără aceasta.

Are această problemă legătură cu fișierul functions.php?

Acesta este conținutul fișierului meu PHP:

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

Dharkov

113

css tema copil

Comentarii

cum adaugi fișierul style.css al temei child?

Milo

12 feb. 2015 02:18:15

Folosesc sistemul recomandat de WordPress în acest articol: http://codex.wordpress.org/Child_Themes

Dharkov

12 feb. 2015 03:06:00

se pare că fișierul de stil al temei tale child se încarcă foarte devreme, îl înqueue-ui sau adaugi tag-ul link direct în header? Ar trebui să fie încărcat după fișierul de stil al părintelui, astfel încât să poți folosi aceiași selectori CSS pentru a suprascrie părintele fără !important sau specificitate mai mare. vezi răspunsul lui rambillo mai jos.

Milo

12 feb. 2015 03:35:29

Toate răspunsurile la întrebare

Comentarii

Mulțumesc mult, noul array funcționează perfect și este și mai curat și mai clar.

Dharkov

13 feb. 2015 19:36:52

încă nu funcționează.. este foarte ciudat. 40 de minute și cel puțin 20 de tutoriale pe tema twentysixteen. Nu reușesc să suprascriu stilurile. body, select { color: red !important; font-size:200% !important; }

roberthuttinger

8 mar. 2016 20:53:37

Dă-mi voie să văd un cod pe Codepen și o să aruncăm o privire.

rambillo

10 mar. 2016 08:02:17

PHP_INT_MAX a rezolvat problema în cazul meu. Forțează încărcarea CSS-ului copilului după cel al părintelui.

mefiX

18 oct. 2016 22:41:19

roberthuttinger ai reușit vreodată să rezolvi această problemă?

Cognibuild

19 apr. 2020 04:49:05

Răspuns TLDR: primul parametru al fiecărui wp_enqueue_style() nu ar trebui lăsat ca 'parent-style' și 'child-style'. Acestea ar trebui redenumite pentru a se potrivi cu numele temei părinte și a temei copil.

Problemă

Dacă nu redenumești parametrii, tema copil va fi încărcată de două ori, ceea ce poate duce la apariția regulilor CSS de două ori în Firebug. Schimbarea valorilor în versiunea greșită poate avea niciun efect vizibil, iar acest lucru te poate induce în eroare, făcându-te să crezi că regulile din tema copil nu suprascriu cele din tema părinte.

Așteptări

Pagina Codex despre Teme Copil indică corect că, dacă nu faci nimic, CSS-ul temei copil este încărcat automat. Acest lucru se întâmplă, dar doar atât. Fluxul de lucru cu CSS este puțin diferit: vrei să suprascrii, nu să înlocuiești. Este logic (funcționează ca celelalte fișiere ale temei), dar ar fi putut include o notă explicativă.

Soluție

Redenumește parametrii. Eu o fac așa cum este prezentat mai jos pentru a obține (puțin) mai mult control. Important: înlocuiește twentysixteen și twentysixteen-child cu numele temei tale și al temei copil:

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

    //...aici poți adăuga încărcarea personalizată a fișierelor .js și .css pentru plugin-uri Javascript etc.

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

(De asemenea, reține că nu ai control asupra ordinii de încărcare a link-urilor pentru unele (toate?) plugin-urile WordPress în această acțiune. Acestea sunt încărcate după.)

Vânare plăcută de selectori ;)

Henrik Erlandsson

502

8 apr. 2016 17:02:01

Comentarii

Mi se pare că acesta este răspunsul corect, deoarece folosește corect framework-ul WordPress fără a forța nimic.

quasi

8 dec. 2019 15:09:07

Poți folosi un selector mai specific în fișierul CSS al temei copil pentru a-l face să aibă prioritate.

Deci, în loc de:

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

Folosește:

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

De asemenea, asigură-te că încarci fișierul de stiluri al temei copil în fișierul functions.php dacă nu ai făcut-o deja.

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

Twodogstar

1

12 feb. 2015 02:06:55

Soluția propusă de Rambillo nu a funcționat pentru mine. Am făcut asta, iar acum funcționează:

function my_theme_enqueue_styles() {
        wp_enqueue_style( 'name-child-style', get_stylesheet_directory_uri() . '/style.css' );
    }
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', PHP_INT_MAX );

Azodium

101

11 feb. 2022 17:08:51

rambillo 357 · Accepted Answer · 2015-02-12T03:17:34Z

Încercați să încărcați CSS-ul temei copil astfel:

// Încarcă mai întâi stilul părinte, apoi stilul copil/personalizat
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' ) );
}

Observați câteva lucruri:

1) PHP_INT_MAX ca prioritate pentru a rula acest cod ultimul

2) get_stylesheet_directory_uri() vs. get_template_directory_uri() care va indica către directorul template-ului temei copil și nu al părintelui.

Am adăugat un subfolder acolo, de asemenea /styles/ pentru că de obicei păstrez CSS-ul într-un subfolder al temei mele.

3) urmat de array( 'parent-style' ) pentru a face CSS-ul copil să aibă CSS-ul părinte ca dependență, ceea ce are efectul de a așeza mai întâi tema părinte în head și apoi CSS-ul temei copil. Din această cauză, orice apare în tema copil care există deja în tema părinte va suprascrie versiunea din tema părinte.