理想的内联动态CSS注入

时间：2016-05-02 作者：prosti

中有一个代码here 动态加载自定义脚本。

<?php
function my_styles_method() {
    wp_enqueue_style(
        \'custom-style\',
        get_template_directory_uri() . \'/css/custom_script.css\'
    );
        $color = get_theme_mod( \'my-custom-color\' ); //E.g. #FF0000
        $custom_css = "
                .mycolor{
                        background: {$color};
                }";
        wp_add_inline_style( \'custom-style\', $custom_css );
}
add_action( \'wp_enqueue_scripts\', \'my_styles_method\' );
?>
我实际上只需要加载动态CSS部分($custom_css) 我不需要加载custom\\u脚本。css。根据this document 钩状物wp_print_styles 不鼓励。在WordPress中加载内联样式的最佳方式是什么。也许我错过了什么。

我拒绝了wp_head 也是出于同样的原因wp_print_styles.

2 个回复
最合适的回答,由SO网友:Luis Sanz 整理而成

wp_add_inline_style 需要绑定到现有样式表才能正常工作。只有当内联样式所附加到的样式表排队时，才会打印内联样式。这对于控制内联样式的范围非常方便。如果想法是在全球范围内打印它们，那么将它们与活动主题主样式表联系在一起的最安全的句柄就是活动主题主样式表。

将内联脚本附加到样式表的方法是将该样式表句柄作为第一个参数传递给wp_add_inline_style. 样式表句柄可能会根据主题和查看的页面而变化，因此必须找到它们。了解为给定页面加载的样式表及其句柄的完整列表的一种简单方法是使用以下代码：

global $wp_styles;
echo \'<pre>\' . var_export( wp_list_pluck( $wp_styles->registered, \'src\', \'handle\' ), true ) . \'</pre>\';
假设主题的主样式表句柄是\'active-theme-style\', 那么电话是：

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

一些旧的或写得不好的主题可能无法以正确的方式加载css。在这种情况下，将样式表排队更安全。如果这不是一个选项，这将起作用：

wp_enqueue_style( \'any-handle\', \'/\' );
wp_add_inline_style( \'any-handle\', $css );
感觉有点黑，但另一种选择是，将样式标记直接打印到wp_head, 也不好。

SO网友:prosti

仅附加来自@luis sanz的解决方案，我将添加一条注释，即每个主题都必须有style.css 文件已排队。遵循示例https://codex.wordpress.org/Function_Reference/wp_add_inline_style 根据法典，我们可以使用get_stylesheet_uri() 函数并使用wp_add_inline_style 按以下方式运行。

<?php
function my_styles_method() {
    wp_enqueue_style( \'active-theme-style\', get_stylesheet_uri() );

    $color = get_theme_mod( \'my-custom-color\' ); //E.g. #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\' 完全不需要自定义脚本，动态脚本将在默认样式包含<head> 部分

标签： theme-development   wp-enqueue-style   css   小码农  

相关推荐

将页面特定的css文件入队的正确方法

我正在寻找一种替代使用函数的方法。php并基于每个页面的ID应用条件，相反，我希望将CSS排在每个页面的顶部，如下所示：<?php defined(\'ABSPATH\') or die(); ?> <?php get_header();?> <?php wp_enqueue_style(\'home\', get_template_directory_uri() . \'/assets/css/style.css\', \'\',