插件中的WP_ADD_INLINE_STYLE不起作用

时间：2017-05-04 作者：Toniq

我正在尝试在插件中使用wp\\u add\\u inline\\u样式。我想在运行shortcode时添加一些样式。

add_action(\'wp_enqueue_scripts\', \'cod_enqueue_scripts\');
add_shortcode(\'cod\', \'cod_process_shortcode\');

function cod_enqueue_scripts() {
    wp_enqueue_style(\'cod-style\', plugins_url(\'css/style.css\', __FILE__));
}

function cod_process_shortcode(){
    $inline_css = "
        .icon-color{
            color:#ad3;
        }";

    wp_add_inline_style(\'cod-style\', $inline_css);
}
这不起作用，它不会与“cod风格”挂钩。

如果我这样做，它会起作用：（首先将CSS排队，然后立即调用wp\\u add\\u inline\\u style）

function cod_process_shortcode(){
    wp_enqueue_style(\'cod-custom\', plugins_url(\'css/blank.css\', __FILE__));
    $inline_css = "
        .icon-color{
            color:#ad3;
        }";

    wp_add_inline_style(\'cod-custom\', $inline_css);
}
在上面的示例中，我使用了一个空的CSS文件（blank.CSS）进行测试。

我认为可能我的原始css文件尚未加载，但即使我在cod\\u enqueue\\u脚本中将空css排队，它也不会这样做，如下所示：

function cod_enqueue_scripts() {
    wp_enqueue_style(\'cod-style\', plugins_url(\'css/blank.css\', __FILE__));
}

function cod_process_shortcode(){
    $inline_css = "
        .icon-color{
            color:#ad3;
        }";

    wp_add_inline_style(\'cod-style\', $inline_css);
}
在运行shortcode之前，我不知道我需要什么内联CSS，而且似乎奇怪的是，wp\\U add\\U inline\\U样式不会与原始wp\\U enqueue\\U样式挂钩。

3 个回复
最合适的回答,由SO网友:Dave Romsey 整理而成

以下是基于this post, 它允许内联CSS通过使用不带路径的依赖项（基本上是空文件）的短代码呈现。

// Optional base styles
add_action( \'wp_enqueue_scripts\', \'cod_enqueue_scripts\' );
function cod_enqueue_scripts() {
    wp_enqueue_style(\'cod-style\', plugins_url(\'css/style.css\', __FILE__));
}

// Shortcode handler which also outputs inline styles.
add_shortcode( \'cod\', \'cod_process_shortcode\');
function cod_process_shortcode() {
    $color = \'#ff0000\';
    $css = \'body { background-color: \' . $color . \'; }\';

    wp_register_style( \'cod-inline-style\', false );
    wp_enqueue_style( \'cod-inline-style\' );
    wp_add_inline_style( \'cod-inline-style\', $css );

    return "<p>Shortcode output...</p>";
}
或者，Rarst pointed out 那个WordPress gallery shortcode 输出动态样式。库快捷码未使用wp_add_inline_style(), 但最终结果基本相同。

Edit: 这里有一个替代版本，其中内联样式使用原始样式的依赖关系。

// Base styles
add_action( \'wp_enqueue_scripts\', \'cod_enqueue_scripts\' );
function cod_enqueue_scripts() {
    wp_enqueue_style(\'cod-style\', plugins_url(\'css/style.css\', __FILE__));
}

// Shortcode handler which also outputs inline styles.
add_shortcode( \'cod\', \'cod_process_shortcode\');
function cod_process_shortcode() {
    $color = \'#bada55\';
    $css = \'body { background-color: \' . $color . \'; }\';

    wp_register_style( \'cod-inline-style\', false, array( \'cod-style\' )  );
    wp_enqueue_style( \'cod-inline-style\' );
    wp_add_inline_style( \'cod-inline-style\', $css );

    return "<p>Shortcode output...</p>";
}

SO网友:Prakash Sunuwar

此代码适用于我。。

// Optional base styles 
add_action( \'wp_enqueue_scripts\', \'cod_enqueue_scripts\' );
function cod_enqueue_scripts() {
    wp_enqueue_style(\'cod-style\', plugins_url(\'css/style.css\', __FILE__));
}

// Shortcode handler which also outputs inline styles.
add_shortcode( \'cod\', \'cod_process_shortcode\');
function cod_process_shortcode() {
    // your fornt end html
}

function custom_inline_style(){
    $color = \'#ff0000\';
    $css = \'body { background-color: \' . $color . \'; }\';

    wp_add_inline_style( \'cod-style\', $css ); // hook to add inline style
}
add_action( \'wp_enqueue_scripts\', \'custom_inline_style\', 20 ); // if 20
如果优先级不起作用，您可以给出20个以上的优先级。

SO网友:NineTheme

         wp_enqueue_style( \'ninetheme-custom-style\', get_template_directory_uri() . \'/css/update.css\' );
         $css = \'.package .btn_acele { background-color: #333; }\';
         wp_add_inline_style( \'my-custom-style\', $css );
      }
您可以在WordPress快捷码中使用它，无需添加操作：）

标签： wp-enqueue-style   小码农  

相关推荐