Il modo migliore per sostituire i CSS dei plugin?

36

Attualmente, utilizzo la specificità CSS per sovrascrivere gli stili di plugin. Preferisco questo per la modifica del plugin in quanto rende meno mal di testa durante l'aggiornamento.

Sarebbe bello se il mio foglio di stile si caricasse dopo i plugin, quindi devo essere solo specifico, non di più. Ciò renderebbe i miei fogli di stile molto più belli.

plugins css

— Fuzz delicato
fonte

1

voto per avermi insegnato sulla specificità CSS, mai sentito parlare prima della tua domanda e mi ha aiutato un sacco!

— luke_mclachlan,

21

Come suggerisci, l'approccio più elegante è quando i tuoi override CSS vengono caricati dopo che i CSS hanno iniettato i plugin. Questo è abbastanza facile da ottenere: devi solo assicurarti che le tue header.phpchiamate wp_head()prima che facciano riferimento al tuo foglio di stile:

<head>
    <!-- all the usual preamble stuff goes here -->

    <?php wp_head(); ?>

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
</head>

— Tim Coulter
fonte

E se sto usando un tema figlio? Non mi piace sostituire l'header.php del mio tema genitore.

— Jules,

19

Esistono diversi modi in cui i plugin possono gestire i CSS.

nella migliore delle ipotesi: il plug-in mette in coda il CSS e fornisce l'opzione per disabilitarlo (disabilitarlo, copiare il codice CSS sul foglio di stile ed essere contento);
buon caso: plug-in hooks funzione che accoda lo stile (funzione di sgancio, hook tuo con mods se necessario);
Caso normale: plug-in accoda direttamente CSS. Vedi Come dequeue uno script? (vale anche per gli stili). Versione breve - ci sarà la funzione di dequeue nella futura versione di WP, per ora potrebbe funzionarewp_deregister_*
brutto caso: il plugin fa eco al CSS tra un sacco di altre cose. Caso per caso...

Nel complesso, a mio avviso, è meglio e più semplice disabilitare fogli di stile separati e incorporarli nel proprio per ridurre al minimo i problemi e migliorare le prestazioni (meno file da recuperare).

— Rarst
fonte

Come faccio a sapere quale è?

— IanEdington,

1

Guardando il codice principalmente. :)

— Rarst

2

Un altro modo abbastanza elegante è usare la specificità dei CSS.

Quindi se il CSS del plugin dice:

div.product div.images img {
  ......
}

hai definito nel tuo css:

body div.product div.images img {
  ......
}

Vedi anche la risposta di Michael Rader per una domanda simile.

— Andreas
fonte

Ok grazie mille. Questa sarebbe la risposta accettata per me. Basta usare il generale style.css e la specificità funziona come un fulmine!

— Luca Reghellin,

1

Salvo una copia del CSS del plug-in "non disposto" nella cartella del tema e lo importa nel css del tema aggiungendo

@import url('name-of-the-plugin-css.css');

ad esso (sostituendo, ovviamente, il nome del .css con quello che sto iniettando). Quindi modifico la copia css nella cartella del tema e la salvo sul server come faccio per gli altri file. Oh, sì, a volte potrebbe essere necessario "inchiodare" gli ID o le classi alterate assegnandogli un "! Important".

Non so se questo è lo stato dell'arte, ma non fa male e funziona bene.

— Sven Knoch
fonte

0

Per sovrascrivere il CSS del plugin, che già utilizzava la specificità e! Importante, ho usato l'id per sovrascrivere le classi. Questo ha ripulito un po 'il mio codice. Naturalmente, anche questa non è una soluzione perfetta in quanto funziona solo se ci sono ID assegnati a elementi e classi.

In teoria puoi anche utilizzare i selettori di attributi. Tuttavia, devo ancora mettere questa teoria alla prova.

— Sean H. Smith
fonte

0

Ho finito per usare! Important per il mio css personalizzato e che ha la precedenza sullo stile del plugin con cui ho avuto problemi. Lo sviluppatore del plugin stava usando! Important in tutto il plug-in CSS ed è per questo che non avrei potuto sovrascriverlo senza! Important.

body {
font-family: "Open Sans", Arial, sans-serif !important;
font-weight: 300 !important;    
}

— Randy D
fonte

-1

Per sovrascrivere il CSS del plugin, che già utilizzava la specificità e! Importante, ho usato l'id per sovrascrivere le classi. Questo ha ripulito un po 'il mio codice. Naturalmente, anche questa non è una soluzione perfetta in quanto funziona solo se ci sono ID assegnati a elementi e classi.

In teoria puoi anche utilizzare i selettori di attributi. Tuttavia, devo ancora mettere questa teoria alla prova.

— dsdsd
fonte