需要帮助，在 wordpress 中动态突出显示图像精灵导航菜单

Question

我在我正在构建的 wordpress 网站上有一个基于图像的菜单，我希望能够为每个部分动态突出显示 &更重要的是在每个访问者查看子页面或在其各自页面内发布时突出显示强>。

我已经整理好如何在查看父页面时让每个部分突出显示，但是当我选择查看帖子或子页面时，我遇到了一些问题来实现相同的效果。

由于我使用类别将内容过滤到特定页面，我能够在查看帖子时仍然突出显示每个部分，使用：<?php if ( is_page('page-name') || is_category('cat-name') || in_category('cat-name')) { echo ' class="xxxx_highlight" '; } ?> 但不幸的是，这也导致了一些问题....发生的事情是，一旦有内容发布到博客和媒体部分 - 两个部分将同时突出显示，这显然不是这里要做的。但是我无法弄清楚为什么会发生这种情况，所以我删除了 in_category() 和 is_category()...

在过去的几周里，我一直在上下浏览条件标签部分，但对于我可以使用哪些额外的标签来使用精灵菜单实现这一点无济于事。如果有一个标签可以简单地查找菜单中父级的 single.php 页面和子页面是否正在使用中，那么理想而不是定位“类别”将是理想的……但实际上找不到任何有用的东西所以我希望一些 php/wordpress 大师可以指出正确的方向！

这是我当前的标记：
HTML 菜单

<ul id="nav">
    <li>
        <a href="/" id="logo"></a>
    </li>
    <li>
        <a href="/" id="home" <?php if ( is_front_page('events')) { echo ' class="home_highlight" '; } ?>></a><!-- HOME -->
    </li>
    <li>
        <a href="/artists" id="artists" <?php if ( is_page('artists')) { echo ' class="artists_highlight" '; } ?>></a><!-- ARTISTS -->
    </li>
    <li>
        <a href="/media" id="media" <?php if ( is_page('media')) { echo ' class="media_highlight" '; } ?>></a><!-- MEDIA -->
    </li>
    <li>
        <a href="/blog" id="blog" <?php if ( is_home('blog')) { echo ' class="blog_highlight" '; } ?>></a><!-- BLOG -->
    </li>
    <li>
        <a href="/store" id="store" <?php if ( is_page('store')) { echo ' class="store_highlight" '; } ?>></a><!-- STORE -->
    </li>
    <li>
        <a href="/contact" id="contact" <?php if ( is_page('contact')) { echo ' class="contact_highlight" '; } ?>></a><!-- CONTACT -->
    </li>
</ul>

Answer 1

我建议你在 "ul" 中使用 echo，类似

<ul id="nav" class="<?php echo $post->ID; ?>">
..... li's and a's here

所以通过 CSS 你就可以了

.N #home, .M #artists, .X #media { [active styling] } /* where N is home ID, M is artists ID, X is media ID and so on */

因此，当您在提供 ul 类“N”的页面中时，您知道#home 将处于活动状态。当您处于“M”时，您就知道艺术家很活跃。

PS：您甚至可以使用“类名”之类的自定义字段来获得更好的菜单控件..

Answer 2

以防万一其他人可能遇到我在这里遇到的同样问题，经过几个小时筛选 wordpress 代码后，我终于自己找到了解决方案...

事实证明，这个问题的答案比我想象的要容易得多。您需要做的就是利用 wordpress 自己的 <?php body_class($class); ?> 标签...一旦您将其编码，转到 firebug 并检查标签生成的输出类，具体取决于您所在的页面。因此，现在很容易使用生成的类（特别是 page-template-xxxx 类）并通过 CSS 定位该类，以使用静态站点的老式方式突出显示您需要的内容。

希望能帮助其他遇到同样困境的人！