Folosirea wp_add_inline_style fără foaie de stiluri

Question

Folosirea wp_add_inline_style fără foaie de stiluri

19 nov. 2014, 12:26:24

Vizualizări: 41.5K

Voturi: 32

Am nevoie să adaug stiluri CSS inline în header-ul unei teme personalizate pe care o creez. Am găsit funcția wp_add_inline_style(), care funcționează dar nu mi se potrivește deoarece depinde de o foaie de stiluri specifică. Aș avea nevoie să adaug stiluri inline la sfârșitul tag-ului head fără dependență de stylesheet.

Am încercat să setez fie stylesheet-ul temei, fie unul inexistent. În ambele cazuri funcționează, dar consider că este un hack murdar (fie încarc stylesheet-ul temei de două ori, fie fac referire la un fișier fantomă...). Există o modalitate corectă de a adăuga stiluri inline în head fără a depinde de un stylesheet?

Bineînțeles, aș putea să le adaug direct în fișierul header.php dar aș prefera să evit această variantă.

terzag

323

dezvoltare teme wp enqueue style

Toate răspunsurile la întrebare

Poți folosi simplu un "dummy" handle:

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

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

Flix

511

14 oct. 2017 03:42:33

Comentarii

Îmi place foarte mult această soluție pentru că stilul meu are un handle și este încărcat ca și cum ar fi inclus dintr-un fișier .css.

dev_masta

7 nov. 2018 13:33:10

Folosirea lui false ca sursă pentru wp_register_style nu este permisă conform documentației https://codex.wordpress.org/Function_Reference/wp_register_style#Parameters

16patsle

13 feb. 2019 14:56:59

@16patsle - Nu sunt sigur dacă ai dreptate. Dacă folosești false, stylesheet-ul devine un alias pentru alte stylesheet-uri de care depinde. Asta e tot.

kanlukasz

25 oct. 2020 17:21:59

Presupun că documentația a fost actualizată de când am postat acel comentariu, într-adevăr pare să fie permis acum. (Nu cred că transmiterea valorii false fără dependințe este explicit permisă, dar presupun că probabil încă funcționează)

16patsle

26 oct. 2020 18:51:10

Începând de astăzi (septembrie 2022) documentația a fost mutată la https://developer.wordpress.org/reference/functions/wp_register_style/ și acum acceptă în mod explicit această tehnică de setare a sursei la 'false' cu următoarea explicație: "Dacă sursa este setată la false, fișierul de stil este un alias al altor fișiere de stil de care depinde."

ChrisM

15 sept. 2022 04:37:52

Comentarii

Nicio problemă! Mă bucur că am putut ajuta.

SkyShab

19 nov. 2014 22:28:53

Dacă (ca mine) dorești să adaugi CSS personalizat inline pe paginile din panoul de administrare, poți folosi acțiunea admin_head.

That Brazilian Guy

29 ian. 2018 16:05:44

@SkyShab de ce există un asterisc după style>

Michael Rogers

10 aug. 2020 21:13:04

@MichaelRogers sunt doar stiluri CSS de exemplu. Simbolul "*" este un "selector universal". Acest lucru ar face toate elementele să aibă culoarea roșie.

SkyShab

21 aug. 2020 19:34:46

oh, haha mulțumesc

Michael Rogers

22 aug. 2020 04:54:56

Tema ta are cu siguranță o foaie de stiluri implicită (altfel nici nu ar fi încărcată ca temă). Poți folosi chiar această foaie de stiluri ca handler pentru CSS-ul inline. Un exemplu poate fi găsit în functions.php al temei TwentyFifteen (cod omis pentru concizie):

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 aug. 2017 07:40:41

Comentarii

OP a cerut în mod specific o metodă diferită de utilizarea wp_add_inline_style(). Ambele metode funcționează și nu am găsit niciun motiv convingător pentru a alege wp_add_inline_style(). Dacă știi vreun motiv, aș vrea să știu despre el.

SkyShab

30 ian. 2018 17:24:31

Soluția ta funcționează, dar este încă "hacky" conform cu ceva ce am auzit de la cineva din echipa WP odată (dacă nu mă înșel); nu exact opinia mea. Cred că OP se gândea că nu există nicio modalitate de a face acest lucru fără a încărca fișierul de stil de două ori sau fără a utiliza un cârlig fantomă. Oricum, dacă nu realizează un plugin, există întotdeauna un fișier de stil al temei care poate fi folosit. De asemenea, editez răspunsul meu deoarece soluția ta este documentată în Codex. :)

Casper

30 ian. 2018 21:37:39

Am experimentat cu wp_add_inline_style() și iată ce am descoperit. Beneficiul atașării stilurilor la un fișier de stil este că, dacă acesta este eliminat din coadă, stilurile nu vor fi afișate. Dar ambele metode le tipăresc inline în head. Deci, să presupunem că ești un dezvoltator de plugin-uri, iar stilurile tale sunt afișate în head. Acest lucru nu are nicio legătură cu stilurile temei, așa că, dacă o temă copil elimină din coadă stilurile temei principale pentru a utiliza propriile sale, acum stilurile plugin-ului tău nu mai sunt afișate. Prin urmare, este posibil ca OP să fi specificat această parte din cerință din acest motiv.

SkyShab

31 ian. 2018 22:47:28

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

Trebuie doar să adaugi stilurile direct în head-ul paginii. Cea mai bună metodă pentru a face acest lucru este să folosești action hook-ul 'wp_head', presupunând că folosești o temă care are acest hook. Iată cum:

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

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

Consultă WP codex pentru a afla mai multe despre action hooks.

SkyShab

1.43K

19 nov. 2014 16:39:40