如何正确使用get_option实现后台控制前端元素显示/隐藏

一、先补全后台设置的PHP代码（核心：搞定选项的保存与读取） #

你之前的代码没完成WordPress选项的注册逻辑，导致get_option无法正常工作，先把这部分补上：

// 注册设置项，告诉WordPress要保存这个复选框的值
add_action('admin_init', 'vsuc_register_settings');
function vsuc_register_settings() {
    register_setting('vsuc_option_group', 'vsuc_checkbox1', array(
        'sanitize_callback' => 'sanitize_text_field',
        'default' => 'style1' // 默认选中状态
    ));
}

// 添加后台设置菜单（如果还没加的话）
add_action('admin_menu', 'vsuc_add_admin_menu');
function vsuc_add_admin_menu() {
    add_options_page(
        'VSUC插件设置',
        'VSUC设置',
        'manage_options',
        'vsuc-settings',
        'vsuc_page_html'
    );
}

// 后台设置页面的HTML
function vsuc_page_html() { ?>
<div class="wrap vsuc-wrapper">
    <form method="post" action="options.php">
        <?php settings_errors(); ?>
        <?php settings_fields('vsuc_option_group'); ?>
        <input type="checkbox" id="vsuc_checkbox1" name="vsuc_checkbox1" value="style1" 
        <?php checked(get_option('vsuc_checkbox1'), 'style1'); ?> >
        <label for="vsuc_checkbox1">隐藏前端标题</label>
        <?php submit_button('保存设置'); ?>
    </form>
</div>
<?php }

• register_setting：注册要保存的选项，指定分组和键名，确保WordPress能识别并存储这个值
• checked()：自动根据get_option的返回值，设置复选框的选中状态
• 必须加submit_button才能触发保存操作

二、解决「header_title is not defined」报错 #

这个错误是因为JS执行时，DOM还没加载完成，#header_title元素还不存在。修改JS代码，确保DOM渲染后再获取元素：

document.addEventListener('DOMContentLoaded', function() {
    const header_title = document.getElementById("header_title");
    // 先判断元素是否存在，避免报错
    if (header_title) {
        // 读取后台保存的设置，这里通过PHP直接把值传给JS
        const shouldHide = <?php echo get_option('vsuc_checkbox1') === 'style1' ? 'true' : 'false'; ?>;
        if (shouldHide) {
            header_title.style.display = "none";
        }
    }
});

三、更简单的实现方式（不用JS，直接用PHP输出CSS） #

对于新手来说，直接用PHP在前端输出条件样式更稳妥，不需要处理JS加载时机问题：

在插件文件里添加这段代码：

add_action('wp_head', 'vsuc_add_custom_css');
function vsuc_add_custom_css() {
    // 读取后台保存的选项，判断是否要隐藏元素
    if (get_option('vsuc_checkbox1') === 'style1') {
        echo '<style>#header_title { display: none; }</style>';
    }
}

这样只要后台勾选并保存，前端页面加载时就会自动隐藏#header_title元素，完全不需要JS。

四、完整操作流程 #

1. 把上面的PHP代码放到你的插件主文件里
2. 激活插件后，进入WordPress后台「设置」→「VSUC设置」
3. 勾选复选框，点击「保存设置」
4. 刷新前端页面，#header_title元素就会被隐藏

内容的提问来源于stack exchange，提问作者VSdev