使用后端插件中的命令更改前端中的样式

Question

我正在开发一个自定义wordpress插件，我想让用户可以选择更改插件打印内容的样式，我想从带有复选框的管理菜单中进行更改。我已经创建了复选框，现在我想要的是在按下后端复选框时对前端CSS进行更改
现在我想我有一个注册问题，因为保存更改后复选框不会保持活动状态。代码：

<div class="wrap vsuc-wrapper">
<form method="post" action="options.php">
<?php settings_errors() ?>
<?php settings_fields('vsuc_option_group'); ?>
<?php echo '<h3 class="header_admin">Viorel Stanciu User Counter Plugin</h3>'; ?>
<label class="label_text" for="vsuc_field_eat">Text Label: (only for not logged in users)</label>
<input name="vsuc_text_field" id="vsuc_field_eat" type="text" value=" <?php echo get_option('vsuc_text_field'); ?> "><br>
<h3 class= "styleChoose"> Choose display style </h3>
<input type="checkbox" id="vsuc_checkbox1" name="vsuc_checkbox1" value="style1">
<label for="checkbox1"><img src="<?php echo plugin_dir_url( __FILE__ ); ?>/img/style1.PNG" class="style1"></label>
<input type="checkbox" id="checkbox2" name="vsuc_checkbox2" value="style2">
<label for="checkbox2"><img src="<?php echo plugin_dir_url( __FILE__ ); ?>/img/style2.png" class="style1"></label><br>
<?php echo '<p class="shortcode"> Insert this shortcode where you want to display the plugin: [pagehits]';
submit_button(); ?>
</form>
function vsuc_register_settings() {
register_setting('vsuc_option_group', 'vsuc_text_field');
register_setting('vsuc_option_group', 'vsuc_checkbox1');
}

选项"；vsuc文本字段"；效果很好，我写的东西会留在那里，但不会出现在复选框中。

如果可以的话，我需要你检查一下这个代码，以及改变CSS的想法。当复选框被选中时，我应该在Js 中使用什么代码

Answer 1

您的复选框输入没有标记为已选中。

您需要根据选项值输出checked输出。

<input
type="checkbox"
id="vsuc_checkbox1"
name="vsuc_checkbox1"
value="style1"
<?php if (/** insert checked value logic here */) echo "checked"; ?>
/>