落雪实验室

       通常我们会将重要的页面（Pages）放到导航栏上，以便读者可以更快地发现该内容。而这时如能高亮显示浏览是哪个页面，既能让浏览者更好地判断他们的位置，也能丰富页面的设计。

        如果你的页面不多，而且都很重要。这时你可以选择把页面都放到导航栏上：

 <div id="nav">
        <ul>
<li<?php if ( is_home() ) { echo ' class="current_page_item"'; }?>>

<a href="<?php echo get_option('home'); ?>/">首页</a></li>
            <?php wp_list_pages("title_li="); ?>
        </ul>
    </div>

<?php if ( is_home() ) { echo ‘ class=”current_page_item”‘; }?>，这句的意思是，当在首页时，添加class=”current_page_item”到此li标签上。

用wp_list_pages()函数生成的li标签都带有值为page_item的class，而且如果在某个页面上时，它的class将是这样class=”page_item current_page_item”，也就是class多了一个current_page_item值。这时已经实现当前页面都具有一个值为page_item current_page_item的class，我们只要在CSS上定义current_page_item，就能实现当前页面的高亮效果。

例如：

#nav li.current_page_item a{background:#FFF;color:#000;}

如果你的页面很多，或者你只是想把页面中的其中几项放到导航栏上。例如只是把关于页面放到导航栏上：

<div id="nav">
        <ul>
<li<?php if ( is_home() ){echo ' class="current_page_item"'; 

}?>><a href="<?php echo get_option('home'); ?>/">首页</a></li>
<li<?php if ( is_page('2') ) {echo ' class="current_page_item"'; }?>>

<a href="/about/">关于</a></li>
        </ul>
    </div>

 

红色框中的数字就是该页面的id。

同样，这是在CSS中定义current_page_item就能得到高亮效果

#nav li.current_page_item a{background:#FFF;color:#000;}

落雪猜您还对以下文章感兴趣：

• 2010/07/22 -- WordPress 3.0 菜单管理系统使用
• 2010/07/22 -- WordPress 技巧：不用插件实现 Pagenavi 功能
• 2010/01/24 -- 提高WordPress 博客手机用户的用户体验 MobilePress
• 2010/01/09 -- IE下查看WordPress站点源代码为乱码的问题解决
• 2009/12/21 -- WordPress 2.9 中文版终于发布
• 2009/08/23 -- WordCampChina 2009 Beijing 清华科技园阳光厅归来与演讲感触