Utilizzo di wp_add_inline_style senza un foglio di stile


18

Devo aggiungere stili incorporati personalizzati all'intestazione di un tema personalizzato che sto creando. Mi sono imbattuto nella wp_add_inline_style()funzione, che funziona ma non mi soddisfa perché dipende da un foglio di stile specifico. Avrei bisogno di aggiungere stili incorporati alla fine del tag head senza una dipendenza del foglio di stile.

Ho provato a impostare il foglio di stile del tema o uno inesistente. In entrambi i casi, funziona ma è un po 'un imo sporco dell'IMO (o carica due volte il foglio di stile del tema o fai riferimento a un file fantasma ...). Esiste un modo corretto per aggiungere stili incorporati in testa senza dipendere da un foglio di stile?

Certo, potrei aggiungerli direttamente nel file header.php ma vorrei evitarlo.

Risposte:


24

Devi solo aggiungere gli stili direttamente all'intestazione della pagina. Il modo migliore per farlo è usare l'hook dell'azione 'wp_head', supponendo che tu stia usando un tema che ha l'hook. Così:

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

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

Dai un'occhiata al codice WP per saperne di più sugli hook di azione.


Nessun problema! Sono contento di aver potuto aiutare.
SkyShab,

Se (come me) desideri aggiungere CSS inline personalizzati alle pagine del dashboard, puoi utilizzare l' admin_headazione.
Quel ragazzo brasiliano, il

16

Si potrebbe semplicemente usare una maniglia "fittizia":

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

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

Mi piace molto questa soluzione perché il mio stile ha un handle ed è accodato come se fosse incluso in un file .css.
dev_masta,

Anche l'uso di false come fonte di wp_register_style non è consentito dalla documentazione codex.wordpress.org/Function_Reference/…
16patsle

3

Il tuo tema ha sicuramente un foglio di stile predefinito (altrimenti non sarebbe nemmeno caricato come tema). Usa questo foglio di stile come gestore per il tuo CSS inline. Un esempio può essere trovato nel function.php del tema TwentyFifteen (codice ignorato 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 );
}

1
L'OP ha specificamente richiesto un metodo diverso dall'uso di wp_add_inline_style (). Entrambi i metodi funzionano e non ho trovato alcun motivo convincente per andare con wp_add_inline_style (). Se conosci un motivo, vorrei saperlo.
SkyShab,

La tua soluzione funziona, ma è ancora "confusa" secondo qualcosa che ho sentito da qualcuno del team del WP una volta (se non sbaglio); non esattamente la mia opinione . Penso che l'OP pensasse che non c'era modo di farlo senza caricare due volte il foglio di stile o usare un gancio fantasma. Ad ogni modo, se non stanno creando un plugin, c'è sempre un foglio di stile a tema da seguire. Sto anche modificando la mia risposta poiché la tua soluzione è documentata nel Codice. :)
Casper

Ho giocato con wp_add_inline_style (), e questo è quello che ho trovato. Il vantaggio di associare gli stili a un foglio di stile è che se viene rimosso dalla coda, gli stili non verranno stampati. Ma entrambi i metodi li stampano in linea nella testa. Quindi supponiamo che tu sia uno sviluppatore di plugin e che i tuoi stili siano stampati nella testa. Questo non ha nulla a che fare con gli stili del tema, e quindi se un tema figlio ha dequementato gli stili del tema principale per usarne uno proprio, ora gli stili del tuo plugin non vengono emessi. Pertanto, l'OP potrebbe aver specificato quella parte della richiesta per questo motivo.
SkyShab
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.