如何在WordPress中结合PHP与JS双条件控制侧边栏隐藏

嘿，我来帮你搞定这个需求！你的思路方向是对的，但代码里有个关键错误导致功能失效，咱们一步步梳理修正：

问题分析 #

你代码里的jQuery(\`)是核心问题——get_sidebar()`函数会直接输出侧边栏的全部HTML代码，这就相当于让jQuery把一大段HTML当作选择器来用，完全不符合语法规则，自然无法选中侧边栏元素。

修正后的JS方案 #

首先你需要确认主题中侧边栏的CSS选择器（比如ID是#sidebar，或者类是.sidebar，可以通过浏览器开发者工具右键侧边栏→检查元素来查看），然后用正确的选择器来操作元素，同时建议加上窗口 resize 监听，适配用户调整窗口大小的场景：

<?php if (is_category()) : ?>
<script>
// 封装成函数，方便重复调用
function handleSidebarVisibility() {
    const screenWidth = jQuery(window).width();
    // 替换成你侧边栏的实际选择器
    const $sidebar = jQuery('#sidebar');

    if (screenWidth <= 1024) {
        $sidebar.css('display', 'none');
    } else {
        // 可选：窗口宽度超过1024时恢复显示
        $sidebar.css('display', 'block');
    }
}

// 页面加载完成后执行一次
jQuery(document).ready(function() {
    handleSidebarVisibility();
});

// 窗口大小改变时实时调整
jQuery(window).resize(function() {
    handleSidebarVisibility();
});
</script>
<?php endif; ?>

更高效的CSS方案（推荐） #

其实这个需求完全可以用CSS媒体查询实现，比JS更轻量高效，而且WordPress的分类页面会自动在<body>标签上添加category类，刚好可以用来限定生效范围：

/* 仅在分类页面、窗口宽度≤1024px时隐藏侧边栏 */
@media (max-width: 1024px) {
    .category #sidebar {
        display: none;
    }
}

把这段CSS添加到你的主题自定义CSS区域，或者子主题的style.css里就可以了，不需要写JS代码，体验更流畅。

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