Usare wp_add_inline_style senza un foglio di stile

Question

Usare wp_add_inline_style senza un foglio di stile

19 nov 2014, 12:26:24

Visualizzazioni: 41.5K

Voti: 32

Ho bisogno di aggiungere stili inline personalizzati nell'header di un tema custom che sto creando. Ho trovato la funzione wp_add_inline_style(), che funziona ma non fa esattamente al caso mio poiché dipende da un foglio di stile specifico. Avrei bisogno di aggiungere stili inline alla fine del tag head senza dipendenze da fogli di stile.

Ho provato a impostare sia il foglio di stile del tema che uno non esistente. In entrambi i casi funziona, ma secondo me è un hack poco elegante (o si carica il foglio di stile del tema due volte o si fa riferimento a un file fantasma...). Esiste un modo corretto per aggiungere stili inline nell'head senza dipendere da un foglio di stile?

Ovviamente, potrei aggiungerli direttamente nel file header.php ma vorrei evitare questa soluzione.

terzag

323

sviluppo temi wp enqueue style

Tutte le risposte alla domanda

Puoi semplicemente utilizzare un handle "fittizio":

wp_register_style( 'dummy-handle', false );
wp_enqueue_style( 'dummy-handle' );

wp_add_inline_style( 'dummy-handle', '* { color: red; }' );

Flix

511

14 ott 2017 03:42:33

Commenti

Mi piace molto questa soluzione perché il mio stile ha un handle e viene accodato come se fosse incluso da un file .css.

dev_masta

7 nov 2018 13:33:10

Usare false come sorgente di wp_register_style non è permesso secondo la documentazione https://codex.wordpress.org/Function_Reference/wp_register_style#Parameters

16patsle

13 feb 2019 14:56:59

@16patsle - Non sono sicuro che tu abbia ragione. Se usi false il foglio di stile è un alias di altri fogli di stile da cui dipende. Tutto qui.

kanlukasz

25 ott 2020 17:21:59

Presumo che la documentazione sia stata aggiornata da quando ho pubblicato quel commento, ora sembra effettivamente essere consentito. (Non credo che passare false senza dipendenze sia esplicitamente permesso, ma immagino che probabilmente funzioni comunque)

16patsle

26 ott 2020 18:51:10

Ad oggi (settembre 2022) la documentazione è stata spostata a https://developer.wordpress.org/reference/functions/wp_register_style/ e ora approva esplicitamente questa tecnica di impostare la sorgente a 'false' con la seguente spiegazione: "Se la sorgente è impostata su false, il foglio di stile è un alias di altri fogli di stile da cui dipende."

ChrisM

15 set 2022 04:37:52

Commenti

Nessun problema! Felice di esserti stato utile.

SkyShab

19 nov 2014 22:28:53

Se (come me) vuoi aggiungere CSS personalizzato inline alle pagine della dashboard, puoi usare l'azione admin_head.

That Brazilian Guy

29 gen 2018 16:05:44

@SkyShab perché c'è un asterisco dopo style>

Michael Rogers

10 ago 2020 21:13:04

@MichaelRogers sono solo stili CSS di esempio. L'asterisco "*" è un "selettore universale". Questo assegnerebbe il colore rosso a tutti gli elementi.

SkyShab

21 ago 2020 19:34:46

oh, ahah grazie

Michael Rogers

22 ago 2020 04:54:56

Il tuo tema ha sicuramente un foglio di stile predefinito (altrimenti non verrebbe nemmeno caricato come tema). Puoi semplicemente utilizzare questo stesso foglio di stile come gestore per il tuo CSS inline. Un esempio può essere trovato nel functions.php del tema TwentyFifteen (il codice è stato omesso per brevità):

function twentyfifteen_scripts() {
    wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );

}
function twentyfifteen_post_nav_background() {
    wp_add_inline_style( 'twentyfifteen-style', $css );
}

Casper

58

17 ago 2017 07:40:41

Commenti

L'OP ha specificamente chiesto un metodo diverso dall'uso di wp_add_inline_style(). Entrambi i metodi funzionano e non ho trovato alcun motivo convincente per preferire wp_add_inline_style(). Se conosci un motivo, mi piacerebbe saperlo.

SkyShab

30 gen 2018 17:24:31

La tua soluzione funziona, ma è comunque "hacky" secondo qualcosa che ho sentito dire da qualcuno del team di WP una volta (se non sbaglio); non esattamente la mia opinione. Penso che l'OP pensasse che non ci fosse modo di farlo senza caricare il foglio di stile due volte o usare un hook fantasma. Comunque, se non stanno sviluppando un plugin, c'è sempre un foglio di stile del tema da usare. Sto anche modificando la mia risposta poiché la tua soluzione è documentata nel Codex. :)

Casper

30 gen 2018 21:37:39

Ho sperimentato con wp_add_inline_style() e questo è quello che ho scoperto. Il vantaggio di allegare gli stili a un foglio di stile è che se viene rimosso dalla coda, gli stili non verranno stampati. Ma entrambi i metodi li stampano inline nell'head. Quindi supponi di essere uno sviluppatore di plugin e i tuoi stili vengono stampati nell'head. Questo non ha nulla a che fare con gli stili del tema, quindi se un child theme rimuove gli stili del tema principale per usare i propri, ora i tuoi stili del plugin non vengono più stampati. Quindi, l'OP potrebbe aver specificato quella parte della richiesta per questo motivo.

SkyShab

31 gen 2018 22:47:28

SkyShab 1.43K · Accepted Answer · 2014-11-19T16:39:40Z

Devi solo aggiungere gli stili direttamente nell'head della pagina. Il modo migliore per farlo è utilizzare l'hook di azione 'wp_head', assumendo che tu stia usando un tema che lo supporta. In questo modo:

add_action('wp_head', 'my_custom_styles', 100);

function my_custom_styles()
{
 echo "<style>*{color: red}</style>";
}

Dai un'occhiata al WP codex per saperne di più sugli action hook.

SkyShab

1.43K

19 nov 2014 16:39:40