2024年WordPress区块主题中JavaScript因<p>标签无法执行的解决方法

你的问题根源是WordPress默认的wpautop函数会自动将内容中的换行转换为<p>标签，直接包裹了你的<script>代码，导致JavaScript解析失败。以下是两种可行的解决方法：

方案1：临时禁用wpautop过滤（快速修复） #

通过在短码函数中临时移除wpautop过滤，避免脚本被错误格式化，处理完成后再恢复过滤不影响其他内容：

function eb_disclaimer() {
    // 临时移除wpautop，防止脚本被添加<p>标签
    remove_filter('the_content', 'wpautop');
    
    ob_start();
?>
<div id="disclaimer" style="position: fixed; z-index: 1; left: 0; top:0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 1)">
    <div style="text-align: center;"><h1></h1></div>
    <div style="text-align: center;"><h3></h3></div>
    <img style="display: block; margin-right: auto; margin-left: auto;" src="" title=""/>
    <div style="margin: 0 20px 0 20px;">blah blah blah</div>
    <button id="close_disclaimer" style="display: block; margin-right: auto; margin-left: auto; background-color: rgb(229, 184, 11); border-radius: 6px; height: 44px; color: rgb(255, 255, 255)" onclick="eb_start_session()">Confirm</button>
</div>
<script>
if(sessionStorage.getItem('website')!==null){document.getElementById('disclaimer').style.display='none';console.log('yes')}else{document.getElementById('disclaimer').style.display='block';console.log('no')}
function eb_start_session(){sessionStorage.setItem('website','value');document.getElementById('disclaimer').style.display='none'}
</script>
<?php
    $disclaimer = ob_get_clean();
    
    // 恢复wpautop过滤，不影响其他内容格式
    add_filter('the_content', 'wpautop', 99);
    
    return $disclaimer;
}
add_shortcode('disclaimer', 'eb_disclaimer');

关键修改点： #

• 临时移除并恢复wpautop过滤，精准控制短码内容的格式化
• 将两个<script>标签合并为一个，减少换行触发自动格式化的概率
• 修正style.display = true的错误，改为标准的'block'（布尔值会被解析为字符串，导致样式失效）

方案2：使用WordPress标准脚本加载方式（推荐） #

将JavaScript代码从短码HTML中分离，通过WordPress官方的脚本注册功能加载，彻底规避wpautop的干扰，同时代码更规范安全：

function eb_disclaimer() {
    // 注册空脚本载体，用于添加内联代码
    wp_register_script('eb-disclaimer-script', '', array(), false, true);
    // 添加内联JavaScript逻辑
    wp_add_inline_script('eb-disclaimer-script', "
        document.addEventListener('DOMContentLoaded', function() {
            const disclaimer = document.getElementById('disclaimer');
            
            // 检查sessionStorage状态控制显示
            if(sessionStorage.getItem('website') !== null){
                disclaimer.style.display = 'none';
                console.log('yes');
            } else {
                disclaimer.style.display = 'block';
                console.log('no');
            }
            
            // 绑定确认按钮点击事件
            document.getElementById('close_disclaimer').addEventListener('click', function() {
                sessionStorage.setItem('website', 'value');
                disclaimer.style.display = 'none';
            });
        });
    ");
    // 输出脚本
    wp_enqueue_script('eb-disclaimer-script');
    
    // 返回警告页HTML结构
    return '
    <div id="disclaimer" style="position: fixed; z-index: 1; left: 0; top:0; width: 100%; height: 100%; overflow: auto; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 1)">
        <div style="text-align: center;"><h1></h1></div>
        <div style="text-align: center;"><h3></h3></div>
        <img style="display: block; margin-right: auto; margin-left: auto;" src="" title=""/>
        <div style="margin: 0 20px 0 20px;">blah blah blah</div>
        <button id="close_disclaimer" style="display: block; margin-right: auto; margin-left: auto; background-color: rgb(229, 184, 11); border-radius: 6px; height: 44px; color: rgb(255, 255, 255)">Confirm</button>
    </div>';
}
add_shortcode('disclaimer', 'eb_disclaimer');

方案优势： #

• 完全符合WordPress开发规范，不受主题或插件自动格式化影响
• 使用DOMContentLoaded确保DOM加载完成后执行脚本，避免找不到元素的问题
• 移除内联onclick事件，改用事件监听，代码更安全、易维护

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