Verwendung von wp_add_inline_style ohne Stylesheet

18

Ich muss dem Header eines benutzerdefinierten Designs, das ich erstelle, benutzerdefinierte Inline-Stile hinzufügen. Ich bin auf die wp_add_inline_style()Funktion gestoßen, die funktioniert, mir aber nicht wirklich zusagt, da sie von einem bestimmten Stylesheet abhängt. Ich müsste Inline-Stile am Ende des Head-Tags ohne Stylesheet-Abhängigkeit hinzufügen.

Ich habe versucht, entweder das Stylesheet des Themas oder ein nicht vorhandenes Stylesheet festzulegen. In beiden Fällen funktioniert es, aber es ist ein bisschen schmutziger Hack IMO (entweder laden Sie das Theme Stylesheet zweimal oder verweisen Sie auf eine Ghost-Datei ...). Gibt es eine geeignete Möglichkeit, Inline-Stile in head hinzuzufügen, ohne von einem Stylesheet abhängig zu sein?

Natürlich könnte ich sie direkt in die header.php-Datei einfügen, aber ich möchte dies vermeiden.

theme-development wp-enqueue-style

— terzag
quelle

24

Sie müssen nur die Stile direkt zum Seitenkopf hinzufügen. Der beste Weg, dies zu tun, ist die Verwendung des Aktions-Hooks 'wp_head', vorausgesetzt, Sie verwenden ein Thema, das den Hook hat. Wie so:

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

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

Schauen Sie sich den WP-Codex an, um mehr über Action Hooks zu erfahren.

— SkyShab
quelle

Kein Problem! Froh, dass ich helfen konnte.

— SkyShab,

Wenn Sie (wie ich) benutzerdefiniertes Inline-CSS zu Dashboard-Seiten hinzufügen möchten, können Sie die admin_headAktion verwenden.

— Der Brasilianer

16

Sie könnten einfach einen "Dummy" -Handle verwenden:

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

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

— Flix
quelle

Ich mag diese Lösung wirklich, weil mein Stil ein Handle hat und in die Warteschlange gestellt wird, als wäre er aus einer CSS-Datei enthalten.

— dev_masta

Die Verwendung von false als Quelle für wp_register_style ist gemäß der Dokumentation codex.wordpress.org/Function_Reference/…

— 16patsle

3

Ihr Thema hat mit Sicherheit ein Standard-Stylesheet (ansonsten würde es nicht einmal als Thema geladen werden). Verwenden Sie einfach genau dieses Stylesheet als Handler für Ihr Inline-CSS. Ein Beispiel finden Sie in der Datei functions.php des Themas TwentyFifteen (der Kürze halber übersprungener Code):

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

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

— Kasper
quelle

1

Das OP hat speziell nach einer anderen Methode als wp_add_inline_style () gefragt. Beide Methoden funktionieren, und ich habe keinen zwingenden Grund gefunden, mit wp_add_inline_style () zu arbeiten. Wenn Sie einen Grund kennen, würde ich gerne davon erfahren.

— SkyShab

Ihre Lösung funktioniert, aber sie ist immer noch "hackig", wie ich einmal von jemandem aus dem WP-Team gehört habe (wenn ich mich nicht irre). nicht genau meine meinung . Ich denke, dass das OP dachte, es gäbe keine Möglichkeit, dies zu tun, ohne das Stylesheet zweimal zu laden oder einen Ghost Hook zu verwenden. Jedenfalls gibt es immer ein Stylesheet für ein Theme , wenn sie kein Plugin erstellen. Ich bearbeite auch meine Antwort, da Ihre Lösung im Codex dokumentiert ist. :)

— Casper

Ich habe mit wp_add_inline_style () herumgespielt und das habe ich gefunden. Der Vorteil des Anhängens der Stile an ein Stylesheet besteht darin, dass die Stile nicht ausgedruckt werden, wenn sie aus der Warteschlange entfernt werden. Bei beiden Methoden werden sie jedoch inline im Kopf gedruckt. Angenommen, Sie sind ein Plug-in-Entwickler, und Ihre Stile werden im Kopf ausgedruckt. Dies hat nichts mit den Themenstilen zu tun. Wenn also ein untergeordnetes Thema die Hauptthemenstile aus der Warteschlange entfernt hat, um seine eigenen zu verwenden, werden Ihre Plug-in-Stile jetzt nicht ausgegeben. Aus diesem Grund hat das OP möglicherweise diesen Teil des Antrags angegeben.

— SkyShab