如何在WordPress特定页面和文章中隐藏粘性浮动页脚栏？

解决方案 #

方法1：通过Elements模块规则直接排除（操作最简单，优先推荐） #

你当前用的是站点后台Elements模块添加的全局代码，直接进入对应两个Elements的设置界面，在「显示规则」的「排除」选项中，勾选你需要隐藏页脚的特定文章、页面、分类、标签等规则，保存后即可生效，不需要修改任何现有代码，是主题原生支持的功能，没有兼容问题。

方法2：使用页面唯一类加CSS控制（适合灵活自定义隐藏规则） #

WordPress站点的每个页面、文章的<body>标签都会自动生成唯一的ID类（页面对应为.page-id-xxx，文章对应为.postid-xxx，xxx为对应内容的数字ID），你只需要在主题自定义CSS中添加如下代码即可：

/* 替换下面的ID为你需要隐藏的页面/文章ID，多个规则用逗号分隔 */
.page-id-123 .wplogout-footer-bar-fixed,
.postid-456 .wplogout-footer-bar-fixed {
    display: none !important;
}

你可以打开对应页面的审查元素，查看body标签的类名就能拿到对应的ID值。

方法3：JS动态判断隐藏（适合动态路由/单页场景） #

如果你的站点是动态加载的单页结构，无法通过CSS类匹配，可以在现有JS代码中添加路径判断逻辑，示例如下：

// 页面加载完成后判断是否要隐藏页脚
window.addEventListener('load', function() {
    // 替换下面的路径为你需要隐藏的页面路径，多个用逗号分隔
    const hidePages = ['/about/', '/special-post/'];
    const currentPath = window.location.pathname;
    const footerBar = document.querySelector('.wplogout-footer-bar-fixed');
    if (hidePages.includes(currentPath) && footerBar) {
        footerBar.style.display = 'none';
    }
})

现有实现代码整理 #

1. After Footer钩子插入的HTML代码 #

<div class="wplogout-footer-bar-fixed">
<div class="notice-inner grid-container">
        <div id="wplogout-footer-bar-fixed">
    <span>Get Free Access and VIP Support</span><button id="wplogout-closebar" type="button">X</button>
</div>

2. WP Footer钩子插入的JS代码 #

document.getElementById("wplogout-closebar").onclick = function() {
    var z = document.getElementById("wplogout-footer-bar-fixed");
    if (z.style.display == 'none') {
        z.style.display = 'block';
    } else {
        z.style.display = 'none';
    }
}

3. 全局CSS代码 #

.wplogout-footer-bar-fixed {
    position: fixed;
    bottom: 0;
    text-align: center;
    padding: 20px 0;
    z-index: 9999;
    background-color: #0f0f0f;
    color: #ffffff;
    width: 100%;
}
.wplogout-footer-bar-fixed span {
    padding-right: 10px;
    font-size: 16px;
}
#wplogout-closebar {
    float: right;
    padding: 5px 9px;
    border-radius: 15px;
    background-color: #eee;
    color: #34495e;
    line-height: 1em;
}

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