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

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

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

其中,首页的这个提示在很多主题下都有实现,然后是其他页面的链接,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 么,在后台编辑页面的时候会有类似的链接:https://dallas.lu/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>

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