玩WordPress » 技巧方法 » 2008 » 10 » 22 » 如何高亮显示当前页面

如何高亮显示当前页面

通常我们会将重要的页面(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>

这里的首页跟上面是一样的。在关于有一句<?php if ( is_page(‘2’) ) { echo ‘ class=”current_page_item”‘; }?>,它的作用是,当在id为2的页面上时,添加 class=”current_page_item”到这个li标签上。
如何得到WordPress页面的id:到“页面的管理”页(Manage -> Pages),把鼠标放在页面链接上,然后看状态栏
如何得到wordpress页面的id
如何得到wordpress页面的id
红色框中的数字就是该页面的id。

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

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

参考资料:wp_list_pagesis_page

Comments are closed.