web-dev-qa-db-de.com

Verwendung von wp_add_inline_style ohne Stylesheet

Ich muss dem Header eines benutzerdefinierten Themas, das ich erstelle, benutzerdefinierte Inline-Stile hinzufügen. Ich bin auf die Funktion wp_add_inline_style() 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.

13
terzag

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>";
}

Lesen Sie den Codex WP , um mehr über Aktions-Hooks zu erfahren.

19
SkyShab

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; }' );
13
Flix

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 );
}
3
Casper