背景
本站使用的是 Argon 主题，原本的 Banner（顶部大图）默认在所有页面显示。但我的首页是一个自定义导航页面（page_by_alice.php），其他页面如文章、站点收藏、留言板等并不需要 Banner 展示。这就需要一个方案：只在首页显示 Banner，其他页面隐藏，并且要在 PJAX 页面切换时实时反映。
方案设计
核心思路分三层：
- PHP 过滤器 — 修改
option_argon_banner_size选项，按页面类型返回不同的值 - JavaScript 动态切换 — 在 PJAX 导航完成后根据路径名切换
no-bannerCSS class - CSS 内置支持 — Argon 主题原生支持
no-bannerclass，无需额外样式
第一步：PHP Filter
Argon 主题的 header.php 中有一段逻辑：检查 get_option('argon_banner_size') 的值，如果为 hide 就给 <html> 加上 no-banner class。我们通过 WordPress 的 add_filter 来覆盖这个选项值：
// 动态 Banner 显示状态：首页/Alice模板 → full，其他页面 → hide
add_filter('option_argon_banner_size', function($value) {
if (is_front_page() || is_page_template('page_by_alice.php')) {
return 'full';
}
return 'hide';
});这段代码加到主题的 functions.php 里。逻辑很简单：
- 如果是首页（
is_front_page()）或者是 Alice 的模板页面（is_page_template('page_by_alice.php')），就返回'full'，Banner 正常显示 - 其他所有页面返回
'hide'，Banner 被隐藏
注意： 如果你的首页用的是其他模板，把 page_by_alice.php 换成对应的模板文件名即可。
第二步：PJAX 动态切换
上面的 PHP filter 只在整页加载时生效。本站使用了 Argon 的 PJAX 功能，页面切换不刷新，所以 PHP 不会重新运行。需要加一段 JS 在 PJAX 完成后动态切换 no-banner class：
// PJAX 时动态切换 Banner 显示状态
add_action('wp_footer', function() {
if (is_admin()) return;
?>
<script>
(function($) {
function updateBannerDisplay() {
var isHome = window.location.pathname === '/' || window.location.pathname === '';
$('html').toggleClass('no-banner', !isHome);
}
$(document).on('pjax:complete', updateBannerDisplay);
})(jQuery);
</script>
<?php
});这段代码也是在 functions.php 里：
- 监听 Argon 的
pjax:complete事件 - 判断当前路径是否为根路径
/ - 如果是首页就移除
no-banner显示出 Banner，否则加上no-banner隐藏 Banner
第三步：CSS
Argon 主题自带了 no-banner class 的样式（在 style.css 第 948 行）：
html.no-banner .banner {
display: none;
}所以不用额外写任何 CSS。
完整效果
- 首次访问首页 → Banner 正常显示 ✅
- PJAX 从首页跳转到其他页面 → Banner 立刻隐藏 ✅
- PJAX 从其他页面跳转回首页 → Banner 立刻显示 ✅
- 整页刷新其他页面 → Banner 隐藏 ✅
扩展：文章页隐藏 Banner
如果你还想在文章页面也隐藏 Banner，可以在 style.css 加一行：
.single #banner {
display: none !important;
}利用 WordPress <body> 上的 single class，文章页会通过简单 CSS 隐藏 Banner，无需任何 JS 干预。
总结
这个方案的核心思路是选项过滤 + PJAX 事件监听。三个部分各司其职、代码简洁，加起来不超过 30 行。如果你用的是其他支持 PJAX 的主题，思路同样适用：PHP 做初始状态，JS 做动态同步。
与旧方案对比
此前 AT 在 在Agron主题中实现仅在首页启用顶部Banner 一文中发布了另一种实现方式。那个方案将所有逻辑塞进 argon_custom_html_foot 页尾脚本中，通过 JS 检测 DOM 元素来决定 Banner 的显隐。相比之下存在以下不足：
- DOM 嗅探不可靠 — 通过
document.querySelector('.page-information-card-container')判断页面类型，但这个容器在 Argon 的所有页面都存在，无法区分首页和其他页面，逻辑上就有缺陷 - 纯客户端方案 — 没有 PHP 层参与，首次渲染时 Banner 会先闪现再被 JS 隐藏，体验不够干净
- 责任混杂 — 同一个脚本里同时处理 Banner 显隐和打字动画，两个功能耦合在一起，维护困难
- 需要额外 CSS 补偿布局 — Banner 隐藏后还需要专门写样式调整
#content的上边距
新方案将逻辑分散到三个层次（PHP filter → JS 事件 → CSS class），每层只做自己该做的事，代码量更少、可维护性更高。
