导航栏优化

0 Share

导航栏优化

所谓的导航,固然是要浏览者了解自己身在何处,可去向何方。在首页的时候,“首页”两个字就变成白色背景,其他诸如“链接”、“关于”也是如此。当我进入某篇文章的 时候,也就是 single 页面时,导航栏该作出什么样的反应呢?

看到上面的一堆东东了吧,“首页”、“存档”、“链接”……当然我这里仅仅是一些页面的链接而已,也算是导航栏吧。

既然是导航,固然是要浏览者了解自己身在何处,可去向何方。

我这里有明显的提示了,在首页的时候,“首页”两个字就变成白色背景,其他诸如“链接”、“关于”也是如此。

其中,首页的这个提示在很多主题下都有实现,然后是其他页面的链接,WordPress 的 wp_list_pages 函数,默认就给出了当前页面一个 current_page_item 标签。这样我们只要在 CSS 里面对 current_page_item 进行设置就能给浏览者提示了。

那么,当我进入某篇文章的 时候,也就是 single 页面时,导航栏该作出什么样的反应呢?

像我这样的导航栏或者称之为“菜单栏”自然无法做到对没一篇文章都来个提示。从概念上讲,文章应该属于菜单项目中的那一类呢?“存档”可以包含“文章”。很多人都会搞一个存档页面吧,来展示一下博客上的文章,方便用户查找。甚至不仅仅是文章(日志),分类页面、标签页面、作者页面都可以看成是从属于 archives (档案)的。

那么怎么在导航栏中表现出来呢?

首先,WordPress 本身的函数无法满足这一要求。所以要像首页链接一样,让 archives 不通过 wp_list_pages 函数直接显示。那么,从 wp_list_pages 中把 archives 页面排除掉。打开主题中的 header.php(一般都是在这里),搜索 wp_list_pages,找到类似这样的代码:

<ul id="menubar">
<li class="<?php echo($home_menu); ?>"><a href="<?php echo get_settings('home'); ?>/">首页</a></li>
<?php wp_list_pages('depth=1&title_li=0&sort_column=menu_order'); ?>
</ul>

然后把 wp_list_pages('depth=1&title_li=0&sort_column=menu_order') 改成:

wp_list_pages('depth=1&exclude=109&title_li=0&sort_column=menu_order')

就是为参数中添加了一个 exclude=109 ,这个意思是说不显示 ID 为 109 的页面。至于 ID 么,在后台编辑页面的时候会有类似的链接:http://lorz.me/wp-admin/page.php?action=edit&post=109 ,最后面的 post=109 ,这个109就是该页面ID了。

然后自己加上“存档”页面的连接,放在“首页”那行的下面。我这里是这样的,:

<li class="<?php echo($archives_class) ?>" ><a href="<?php echo get_settings('home'); ?>/archives/" title="文章列表">存档</a></li>

然后就是对什么时候的当前页面算 archives 的判断了。顺便提及判断是否为首页的方法如下:

if (is_home()) {
$home_menu = 'current_page_item';
} else {
$home_menu = 'page_item';
}

那么,我是这样写的:

if ((is_page()&&$post->ID==109)|(is_archive()|is_single())){
$archives_class='current_page_item';
}else{
$archives_class='page_item';
}

其中 is_page()&&$post->ID==109 意思是说,不要忘记存档页本身;你也可以写成: is_page('archives'),这个 archives 就是你页面的缩略名啦。然后呢,is_archive 的情况包括了标签和分类。好吧,简单而言之,最后是这么办的:

<ul>
<?php
if ((is_page()&&$post->ID==109)|(is_archive()|is_single())){
$archives_class='current_page_item';
}else{
$archives_class='page_item';
}

if (is_home()) {
$home_menu = 'current_page_item';
} else {
$home_menu = 'page_item';
}
?>
<li class="<?php echo($home_menu); ?>">
<a href="<?php echo get_settings('home'); ?>/" title="首页">首页</a></li>
<li class="<?php echo($archives_class) ?>" >
<a href="<?php echo get_settings('home'); ?>/archives/" title="存档">存档</a></li>
<?php wp_list_pages('depth=1&exclude=109&title_li=0&sort_column=menu_order'); ?>
</ul>

一点点关于提高用户体验的小经验,欢迎指导。

Comments ( 8 )

  1. ReplyDianso
    好方法 收藏了
  2. Reply忘记月亮
    不错,改天修改一下
  3. Replyk2max
    这篇文章您也许可以参考一下 .. 打造更为强健的 Wordpress 导航栏
    • Reply卢达
      呃,shawn 的博客最近一周才开始看。
      • Replyk2max
        哦 .. 他那好东西很多 ...
  4. Replyedikud
    有时间就用上
  5. Replyedikud
    shawn 的打造更为强健的 Wordpress 导航栏 也好
    • Reply卢达
      嗯。不过 shawn 同学消失一年多了

Leave a reply

Your email address will not be published.