WordPress - 使用 wp_add_inline_style 添加动态样式

Question

我正试图围绕 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 函数被完全忽略了。

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

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

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

任何帮助将不胜感激。

提前谢谢你。

Answer 1

最后一个' 不见了。

改成：

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

到：

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