Używanie wp_add_inline_style bez arkusza stylów

18

Muszę dodać niestandardowe style wstawiane do nagłówka niestandardowego motywu, który tworzę. Natknąłem się na wp_add_inline_style()funkcję, która działa, ale tak naprawdę mi nie pasuje, ponieważ zależy od konkretnego arkusza stylów. Musiałbym dodać style wbudowane na końcu znacznika head bez zależności arkusza stylów.

Próbowałem ustawić arkusz stylów motywu lub nieistniejący. W obu przypadkach działa, ale to trochę brudne włamanie IMO (albo załaduj arkusz stylów motywu dwa razy, albo odwołaj się do pliku widma ...). Czy istnieje właściwy sposób dodawania stylów wbudowanych w głowie bez uzależnienia od arkusza stylów?

Oczywiście mogę dodać je bezpośrednio do pliku header.php, ale chciałbym tego uniknąć.

terzag
źródło

Odpowiedzi:

24

Wystarczy dodać style bezpośrednio do nagłówka strony. Najlepszym sposobem na to jest użycie haka czynności „wp_head”, przy założeniu, że używasz motywu z hakiem. Tak jak:

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

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

Sprawdź kodeks WP, aby dowiedzieć się więcej o hakach akcji.

SkyShab
źródło
Nie ma problemu! Cieszę się, że mogłem pomóc.
SkyShab
Jeśli (podobnie jak ja) chcesz dodać niestandardowy wbudowany CSS do stron panelu kontrolnego, możesz użyć admin_headakcji.
Ten Brazylijczyk
16

Możesz po prostu użyć „manekina”:

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

wp_add_inline_style( 'dummy-handle', '* { color: red; }' );
Flix
źródło
Naprawdę podoba mi się to rozwiązanie, ponieważ mój styl ma uchwyt i jest kolejkowany tak, jakby był zawarty w pliku .css.
dev_masta
Używanie false jako źródła wp_register_style również jest niedozwolone zgodnie z dokumentacją codex.wordpress.org/Function_Reference/…
stron
3

Twój motyw z pewnością ma domyślny arkusz stylów (inaczej nie zostałby nawet załadowany jako motyw). Wystarczy użyć tego arkusza stylów jako modułu obsługi wbudowanego CSS. Przykład można znaleźć w functions.php tematu TwentyFifteen (kod pominięty ze względu na zwięzłość):

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

}
function twentyfifteen_post_nav_background() {
    wp_add_inline_style( 'twentyfifteen-style', $css );
}
Kacper
źródło
1
OP konkretnie poprosił o metodę inną niż użycie wp_add_inline_style (). Obie metody działają, a ja nie znalazłem żadnego ważnego powodu, aby przejść do wp_add_inline_style (). Jeśli znasz powód, chciałbym o tym wiedzieć.
SkyShab
Twoje rozwiązanie działa, ale nadal jest „hacking” według czegoś, co usłyszałem od kogoś z zespołu WP (jeśli się nie mylę); nie do końca moja opinia . Myślę, że OP myślał, że nie da się tego zrobić bez dwukrotnego załadowania arkusza stylów lub użycia haka-widma. W każdym razie, jeśli nie są autorami wtyczki, zawsze istnieje arkusz stylów motywu. Ja również edytuję swoją odpowiedź, ponieważ twoje rozwiązanie jest udokumentowane w Kodeksie. :)
Casper
Grałem z wp_add_inline_style () i to właśnie znalazłem. Zaletą dołączania stylów do arkusza stylów jest to, że jeśli zostanie odznaczone, style nie zostaną wydrukowane. Ale jedna z metod drukuje je w linii w głowie. Powiedzmy, że jesteś programistą wtyczek, a Twoje style są drukowane w głowie. Nie ma to nic wspólnego ze stylami motywów, więc jeśli motyw podrzędny usunął zaznaczenie z głównego stylu motywu, aby użyć własnego, teraz style wtyczek nie są generowane. Z tego powodu PO mógł określić tę część żądania.
SkyShab