您有多种选择

---

A）使用内联CSS：

<button style="background: <?php echo CHOSEN_COLOR_HERE (possibly validated) ?>;">
    ...
</button>

将（特定于ID的）CSS样式写入页面。在shortcode函数中，回显<style> 标记，例如，like so：

<style>
#shortcode-button-1 {
    background: <?php echo CHOSEN_COLOR_HERE (possibly validated) ?>;
}

#shortcode-button-2 {
    background: <?php echo CHOSEN_COLOR_HERE (possibly validated) ?>;
}
</style>

对于这种方法，你需要跟踪你的短码按钮，这意味着：给它们一些你用来定位按钮的唯一ID

---

C）使用动态样式表（即shortcode-styles.php 用作CSS文件的文件）。

对于这种方法，您需要注册您的短代码按钮（例如，在某些全局变量、瞬态、选项等中）。然后，使用一些延迟运行的挂钩（例如。，wp_footer, wp_print_footer_scripts 等）将php/CSS文件排入队列，该文件可能如下所示：

<?php
header(\'Content-type: text/css\');
// Suppose you are using a global variable for your shortcode buttons
global $shortcode_buttons;
foreach ($shortcode_buttons as $id => $color) {
    ?>
    #shortcode-button-<?php echo $id; ?> {
        background: <?php echo $color; // maybe validate ?>;
    }
    <?php
}
?>

<小时>Note: 我没有对此进行任何测试，但是，我希望您能理解我的想法。