Я делаю плагин, где я хочу создать опцию для пользователя, чтобы выбрать цвет значка, и есть проблема с вызовом его в css, не работает

Question

Мой основной php файл free-shipping-badge. php

/** REGISTER STYLES **/
add_action( 'wp_enqueue_scripts', 'fsb_stylesheet' );
function fsb_stylesheet() {
    wp_register_style( 'view-style', plugins_url('/view/fsb_badge_style.php', __FILE__) );
    wp_enqueue_style( 'view-style' );
}

/** ADD FREE SHIPPING BADGE SUFFIX AFTER PRICE **/
add_filter( 'woocommerce_get_price_suffix', 'fsb_suffix', 99, 4 );
function fsb_suffix( $html, $product, $price, $qty ){
    $fsb_price = (float) $product->get_price(); // Regular price
    $fsb_limit_price = esc_attr( get_option('fsb_limit_price_option') ); // Limit price
    $fsb_badge_text = esc_attr( get_option('fsb_badge_text_option') ); // Text to display on badge
    $fsb_badge_color = esc_attr( get_option('fsb_badge_color_option') ); // Text to display on badge
    if($fsb_price > $fsb_limit_price){
    $html .='</br>'.'<fsb_badge class="fsb_badge_view">' .$fsb_badge_text.' '.'</fsb_badge>';
    return $html;
}
}

Мой файл стилей: fsb_badge_style. php. Фон не получил значение из php переменной $ fsb_badge_color, и это главная проблема.

<?php
header('Content-type: text/css');
include('free-shipping-badge.php');     
?>
.fsb_badge_view{
    display: inline;
    padding: .3em .6em .3em;
    font-family: Arial;
    font-size: 10.5px;
    font-weight: bold;
    line-height: 1.5;
    color: #fff;
    text-align: center;
    white-space: middle;
    vertical-align: baseline;
    border-radius: .25em;
    background-color:  <?php echo $fsb_badge_color; ?>;

}

Answer 1

Как сказал @Tony Djuki c, вы не можете поместить файл PHP в таблицу стилей, он не обработает PHP. Что-то, что возможно, однако, выводит встроенный стиль в заголовке. Пример:

function fsb_badge_style()
{
    echo "<style type=\"text/css\">.fsb_badge_view{background-color: ".$fsb_badge_color.";}</style>";
}
add_action('wp_head', 'fsb_badge_style', 100);

Это позволит написать стиль прямо в заголовке.

<style type="text/css">.fsb_badge_view{background-color: #e7e7e7;}</style>

В качестве дополнительного бонуса это также будет работать для пользователей, у которых может не быть JavaScript.