在没有样式表的情况下使用wp_add_inline_style


18

我需要将自定义内联样式添加到正在创建的自定义主题的标题中。我遇到过wp_add_inline_style()功能,该功能可以工作,但由于它取决于特定的样式表,因此并不十分适合我。我需要在head标记的末尾添加内联样式,而不必依赖样式表。

我尝试设置主题样式表或不存在的样式表。在这两种情况下,它都可以工作,但是有点像IMO一样肮脏(要么加载主题样式表两次,要么引用幻影文件...)。有没有适当的方法可以在头中添加内联样式而不依赖样式表?

当然,我可以将它们直接添加到header.php文件中,但我想避免这种情况。

Answers:


24

您只需要将样式直接添加到页面标题即可。最好的方法是使用“ wp_head”动作挂钩,假设您使用的是带有挂钩的主题。像这样:

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

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

查看WP Codex,以了解有关动作挂钩的更多信息。


没问题!很高兴我能帮助你。
SkyShab 2014年

如果(像我一样)想要将自定义内联CSS添加到仪表板页面,则可以使用该admin_head操作。
那位巴西佬

16

您可以简单地使用“虚拟”句柄:

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

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

我真的很喜欢这种解决方案,因为我的样式有一个句柄,并且像从.css文件中包含的那样被加入队列。
dev_masta


3

您的主题肯定具有默认的样式表(否则,甚至不会将其作为主题加载)。只需将此样式表用作内联CSS的处理程序即可。可以在主题TwentyFifteen 的functions.php中找到一个示例(为简洁起见,跳过了代码):

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

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

1
OP特别要求使用除wp_add_inline_style()之外的方法。两种方法都可以工作,而且我还没有找到任何令人信服的理由来使用wp_add_inline_style()。如果您知道原因,我想知道。
SkyShab

您的解决方案有效,但根据我一次从WP团队某人那里听到的消息(如果我没有记错的话),它仍然是“ hacky”;不完全是我的意见。我认为OP认为没有办法两次加载样式表或使用幻影钩子就无法做到这一点。无论如何,如果他们不编写插件,总会有主题的样式表。我也在编辑我的答案,因为您的解决方案已记录在食典中。:)
卡斯珀

我玩过wp_add_inline_style(),这就是我发现的。将样式附加到样式表的好处在于,如果样式表出列,则样式不会被打印出来。但是任何一种方法都将它们内联打印在头部。假设您是一名插件开发人员,并且您的样式已打印在头部。这与主题样式无关,因此,如果子主题使主要主题样式出队以使用它自己的主题,那么现在不会输出您的插件样式。因此,OP可能由于这个原因已指定了请求的那部分。
SkyShab '18年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.