Ideale inline dynamische CSS-Injektion

Es gibt einen Code , der das benutzerdefinierte Skript dynamisch lädt.

 

Ich brauche nur den dynamischen CSS-Teil ( $custom_css ) zu laden und muss custom_script.css nicht laden. Gemäß diesem Dokument wird von hook like wp_print_styles abgeraten. Was wäre der beste Weg, Inline-Stil in WordPress zu laden. Vielleicht vermisse ich etwas.

Ich habe wp_head auch aus dem gleichen Grund wie wp_print_styles .

Solutions Collecting From Web of "Ideale inline dynamische CSS-Injektion"

wp_add_inline_style muss an ein vorhandenes Stylesheet gebunden sein, damit es richtig funktioniert. Die Inline-Stile werden nur gedruckt, wenn das Stylesheet, an das sie angehängt sind, in die Warteschlange eingereiht wird. Dies ist sehr praktisch, um den scope der Inline-Stile zu steuern. Wenn die Idee darin besteht, sie global drucken zu lassen, ist das sicherste Handle, mit dem sie verknüpft werden, das des Haupt-Stylesheets des aktiven Themas.

Die Methode zum Anfügen der Inline-Skripte an ein Stylesheet besteht darin, das Stylesheet-Handle als ersten Parameter an wp_add_inline_style zu wp_add_inline_style . Die Stylesheet-Handles können sich je nach Thema und auch abhängig von der betrachteten Seite ändern, müssen also herausgefunden werden. Eine einfache Möglichkeit, die vollständige Liste der Stylesheets und ihrer Handles kennenzulernen, die für eine bestimmte Seite geladen wurden, ist folgender Code:

 global $wp_styles; echo '
' . var_export( wp_list_pluck( $wp_styles->registered, 'src', 'handle' ), true ) . '

';

Angenommen, das Haupt-Stylesheet-Handle des Themas ist 'active-theme-style' , dann wäre der Aufruf:

wp_add_inline_style( 'active-theme-style', $custom_css );

Einige alte oder schlecht geschriebene Themen laden das CSS möglicherweise nicht richtig. In diesem Fall ist es sicherer, ein Stylesheet in die Warteschlange einzureihen. Wenn das keine Option ist, wird das funktionieren:

 wp_enqueue_style( 'any-handle', '/' ); wp_add_inline_style( 'any-handle', $css ); 

Es fühlt sich ein wenig hacky an, aber die Alternative, ein Style-Tag direkt auf wp_head zu wp_head , ist auch nicht gut.

Nur um die Lösung von @ luis-sanz hinzuzufügen, füge ich hinzu, dass bei jedem Thema die style.css Datei in die Warteschlange style.css werden muss. Dem Beispiel https://codex.wordpress.org/Function_Reference/wp_add_inline_style aus dem Codex folgend, können wir die function get_stylesheet_uri() verwenden und die dynamischen CSS-Daten mit der function wp_add_inline_style auf folgende Weise anfügen.

 < ?php function my_styles_method() { wp_enqueue_style( 'active-theme-style', get_stylesheet_uri() ); $color = get_theme_mod( 'my-custom-color' ); //Eg #FF0000 $custom_css = ".mycolor{ background: {$color}; }"; wp_add_inline_style( 'active-theme-style', $custom_css ); } add_action( 'wp_enqueue_scripts', 'my_styles_method' ); ?> 

'/css/custom_script.css' muss zugeben, dass die Verwendung des benutzerdefinierten Skripts '/css/custom_script.css' absolut nicht benötigt wird, und das dynamische Skript wird direkt nach der Standard-Stil-Aufnahme des -Abschnitts ausgeführt.