WordPress - 使用 wp_add_inline_style 添加动态样式

Posted 2023-02-22

【中文标题】WordPress - 使用 wp_add_inline_style 添加动态样式

【英文标题】：WordPress - adding dynamic styles with wp_add_inline_style

【发布时间】：2017-09-28 22:58:39

【问题描述】：

我正试图围绕 WordPress 中的 wp_add_inline_style 函数。

我已经成功地使用这个函数输出了我的定制器 CSS，它运行良好。

这是我使用 wp_add_inline_style 函数输出定制器样式的方法；

function theme_custom_css() 

    $header_height = get_theme_mod( 'header_height', '96' );

    $output .= '.site-header  height: ' . esc_attr( $header_height ) . 'px; ';

    if ( ! empty( $output ) ) 
        wp_add_inline_style( 'custom-style', $output );
    


add_action( 'wp_enqueue_scripts', 'theme_custom_css' );

这完全符合预期。它在 style.css 文件下方的头部添加了一个样式标签，其中包含所有自定义 css。太好了，这正是我想要的。

但是，如果我有另一个文件，其中有用户可以更改的 CSS，并且我想将更改后的 CSS 添加到由 wp_add_inline_style 函数打印的样式标记中。这行不通。这是我正在尝试的代码。

function theme_slider_css() 

    if ( get_field( 'slider_padding_top' ) ) 
        $slider_css .= '.slider-inner-wrap  padding-top: ' . get_field( 'slider_padding_top' ) . ';px ';
    

    if ( ! empty( $slider_css ) )                                          
        wp_add_inline_style( 'custom-style', $slider_css );
    


add_action( 'wp_enqueue_scripts', 'theme_slider_css' );

theme_slider_css 函数被完全忽略了。

我是否完全错过了这里的重点？我有什么明显的遗漏吗？

我很乐意在头部打印两个单独的样式标签，但我也无法做到这一点？

希望我已经解释清楚了，如果没有，请询​​问。

任何帮助将不胜感激。

提前谢谢你。

【参考方案1】：

最后一个' 不见了。

改成：

"$output .= '.site-header  height: ' . esc_attr( $header_height ) . 'px; ;"

到：

"$output .= '.site-header  height: ' . esc_attr( $header_height ) . 'px; ';"

【讨论】：

OP 说This works exactely as expected，他的问题在于第二个代码-sn-p