自定义WordPress菜单显隐异常求助：页面标题控制失效

让我们一步步拆解你的问题，找出核心原因并给出可靠的解决方案：

核心问题分析 #

你的代码出现“有时能隐藏有时不行”的情况，主要来自两个关键错误：

1. 错误的元素ID格式 #

你的菜单代码里，<a id="#portfolio"> 这个写法是错的！# 是CSS选择器里用来标识ID的前缀，实际HTML元素的ID属性不能带#。这就导致你的CSS规则 #portfolio{ display:none; } 根本找不到对应的元素，自然有时候看起来没生效。

2. 不可靠的自定义变量判断 #

你用的 $single_post_title 并不是WordPress的全局标准变量，它可能只在某些页面（比如单篇文章/页面模板）被定义，在首页、归档页等其他页面可能根本不存在。这种情况下，你的==判断会因为变量未定义出现非预期的结果，导致隐藏逻辑不稳定。

修复方案 #

下面是两种可靠的解决方式，推荐优先用第二种（更高效）：

方式一：修复ID+用WordPress原生函数判断输出CSS #

首先修正菜单的ID，去掉多余的#：

<div class="col-md-9 fancymenu">
  <a id="portfolio" href="/Portfolio/">Portfolio</a>
  <a id="about" href="/About-Me/">About Me</a>
  <a id="contact" href="/Contact-me/">Contact Me</a>
</div>

然后用WordPress官方的is_page()函数替代自定义变量，这个函数能精准判断当前是否是指定页面：

<?php
// 当访问Portfolio页面时，输出隐藏样式
if (is_page('Portfolio')) :
?>
<style type="text/css">
  #portfolio { display: none; }
</style>
<?php endif; ?>

提示：is_page() 还可以接受页面ID（比如is_page(123)），用ID判断比标题更稳定，因为页面标题可能会修改，而ID不会变。

方式二：直接控制菜单项的渲染（更高效） #

与其用CSS隐藏，不如直接在访问对应页面时不输出该菜单项，这样更节省资源：

<div class="col-md-9 fancymenu">
  <?php if (!is_page('Portfolio')) : ?>
    <a id="portfolio" href="/Portfolio/">Portfolio</a>
  <?php endif; ?>

  <?php if (!is_page('About Me')) : ?>
    <a id="about" href="/About-Me/">About Me</a>
  <?php endif; ?>

  <?php if (!is_page('Contact Me')) : ?>
    <a id="contact" href="/Contact-me/">Contact Me</a>
  <?php endif; ?>
</div>

额外优化建议 #

• 输出文本时建议用esc_html__()函数，既支持主题国际化，又能防止XSS安全问题，比如：<?php echo esc_html__('Portfolio', 'your-theme-slug'); ?>（把your-theme-slug换成你的主题 slug）。
• 尽量避免使用自定义未验证的变量，优先依赖WordPress提供的全局函数和变量，保证在所有页面上下文都能正常工作。

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