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

时间:2011-02-20 22:14:14

标签: wordpress dynamic navigation sprite highlighting

我在wordpress网站上有一个基于图像的菜单我喜欢能够动态突出显示每个部分& 更重要的是突出显示每个访问者在其相应页面中查看子页面或发布时

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

由于我正在利用类别将内容过滤到特定网页,因此我可以通过使用<?php if ( is_page('page-name') || is_category('cat-name') || in_category('cat-name')) { echo ' class="xxxx_highlight" '; } ?>来查看帖子时仍然突出显示每个部分,但这也会导致一些问题很不幸......发生了什么事,只要有内容发布到BLOG&amp;媒体部分 - 这两个部分将同时突出显示,这显然不是这里的目标。无法弄清楚为什么会发生这种情况,所以我删除了in_category()&amp; is_category() ...

过去几周我一直在查看条件标签部分,但是为了通过精灵菜单实现这一点,我无法使用哪些附加标签。如果有一个标签可以简单地查找单个.php页面&amp;菜单中父母的子页面正在使用中...无法找到任何有效的东西,所以我希望有些php / wordpress大师可以指向正确的方向!

这是我目前的标记:
HTML MENU

<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>

2 个答案:

答案 0 :(得分: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:你甚至可以使用像“classname”这样的自定义字段来获得更好的菜单控制..

答案 1 :(得分:0)

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

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

希望能帮我解决其他人的困境!