刚刚过去的 1 月 1 日，是我的摄影网站 Camarts 正式上线两周年的日子，经常关注的朋友们应该已经发现它有了些变化。没错，在它的两岁生日之际，我给它做了一次小更新。现在写一篇博文，总结一下更新的过程。

Camarts 基于 WordPress，前端界面是我基于自带的 twentyeleven 主题深度修改、重新设计而成。因为自带的主题代码非常规范，注释也比较清晰，用它来深度修改比重新制作一个主题要轻松得多。在最近这两年时间里，我的网页设计和开发水平提升了不少，对 Camarts 虽然一直有些小修小补，但它总体上仍然反映着我两年前的水平，还有不少 twentyeleven 的影子。以现在的眼光来看，不足是难免的，有些结构和代码幼稚得让我一看就想笑，嘿嘿。很久前我就想把它的框架整体翻新一下，可一直没有完整的时间来做，只好一直拖着。直到两三个月前，在我个人主页（dandyweng.com）的带动下，Camarts 的访问量也增加了不少，这时我才渐渐意识到一个严重的问题：虽然来访的 IP 量上去了，可 PV 量却没比 IP 高多少。这意味着绝大多数访客都只看了一个页面就关掉了——网站粘性太差，这可是个硬伤啊。看来不能再拖了，只好平均每天抽出一两个小时，说做就做！

但是在开工之前，还得先好好想想：Camarts 的粘性为什么差呢？其实我以前也注意过这个问题，观察身边的亲朋好友们浏览页面时，发现他们在看完一个页面之后总会有点迷茫——没有一个东西吸引他们去点开另一个页面。如果不是刻意想多看一些作品，估计就直接关闭页面了。所以，要达到提高网站粘性的目的，优化最大的两个重点就是导航和推荐功能。第一个下手的，就是这个一直让我看不顺眼的 footer。

重新设计 Footer

这是它曾经的样子：

先分析一下吧，这个 footer 从 Camarts 两年前上线时到现在就几乎没有变过，使用的是默认主题 twentyeleven 的 footer，所谓“索引”只是用了一个 Tag Cloud 把所有分类和标签乱七八糟地堆在一起而已，让人一看就晕；而“最新作品”那一栏几乎就是个废物——大多数人都已经看过那几篇了，还推荐个啥？看来，只有搜索和最右边的“快速导航”是有用的。

据我的分析和统计，来 Camarts 访客通常可以分为两类：一类是有明确目标，就想看在某地拍摄的照片；另一类没什么目标，只是随便看看打发时间，新 footer 要在有限的空间里，有效地同时满足这两类人的需求，还得把他们吸引住。想了想，可以通过一个随机推荐模块和一个基于地图的中国省份索引来解决这个问题。

开工！果断把它删个干干净净、片甲不留，一切重来，做一个高端大气上档次的新 footer。

删掉之后，页面就变成了这样：

高端大气上档次的 footer 首先要够宽。多宽呢？那就全屏吧……

嗯，这下够大气了。再填上九张随机推荐的图片和一个地图，高端的感觉瞬间就出现了。当然不能忽略掉重要的交互效果，所以我给鼠标在缩略图上 hover 时增加了一个把图片掀起来的 3D 效果。并让它的背景显示那篇作品的第二张照片，给人一种那里有“一摞照片”的感觉：

把地图的省份链接好，没有照片的省份暂时填成深色。开始做中间的两个菜单：

再把 Copyright 和搜索框补上，功能全部到位，看起来也高端大气了，可是似乎还不够上档次。

接下来给它加上质感、完善细节，马上就上档次了有木有？顺手再做一个图片 AJAX 刷新：

再做一下响应式处理并优化触屏体验，在 iPad 上打开看看，顺便测试一下 Retina 效果。

横屏 竖屏 iPhone

页面加载 AJAX 化

其实我早在初学 Web 开发的时候，就很讨厌页面跳转时的闪烁，总想寻找一种更“优雅”的方式来加载页面。后来了解到 AJAX 跳转，但是缺点很多，对旧浏览器和搜索引擎也不太友好，于是就慢慢地打消了念头。几个月前我才了解到 HTML 5 的新 API pushState 和 replaceState，可以免刷新替换 URL 并把旧地址放进历史记录里，再配合 AJAX 就可以实现完美的免刷新跳转，不但可以使用正常的 URL，还能响应浏览器的前进后退功能，几乎弥补了纯 AJAX 跳转的所有缺点；而且由于 AJAX 不需要重新载入整个页面，也就不需要重复载入 CSS 和 JS 等外部文件，这样就能减少重复的 HTTP 请求，大幅提高页面的加载速度。更令人惊喜的是，已经有人开发了现成的库，叫做 PJAX，可以直接使用，省下不少时间和精力。

我在前段时间做的“旅行足迹”网页里就已经对 PJAX 做了一个不太成熟的试用，现在要配合 WordPress 使用还需要一些调整，还好文档写得很详细，配合 Google 和 Stack Overflow，轻松完成。不但页面加载得更“优雅”了，顺便把 PHP 部份的代码贴出来，供大家参考一下：


/*
* 检测 pjax 请求
* @return bool
*/
function is_pjax_request() {
return (isset($_SERVER['HTTP_X_PJAX']) && $_SERVER['HTTP_X_PJAX'] == 'true');
} /*
* 如果是 pjax 请求，引入专用 header，否则引用普通 header
*/
function the_header($name = null) {
if (! is_pjax_request())
get_header($name);
else {
if (isset($name))
get_header('pjax-' . $name);
else
get_header('pjax');
}
} /*
* 如果是 pjax 请求，引入专用 footer，否则引用普通 footer
*/
function the_footer($name = null) {
if (! is_pjax_request())
get_footer($name);
else {
if (isset($name))
get_footer('pjax-' . $name);
else
get_footer('pjax');
}
}


先添加这三个函数，再把主题文件模板里的 get_header() 和 get_footer() 全都改成 the_header() 和 the_footer()，最后新建 header-pjax.php 和 footer-pjax.php 文件放到主题目录里即可。这两个文件是给 PJAX 专用的 header 和 footer，它们不需要引入通用外部文件，header 只需要提供一个标签，footer 可以放入统计代码。

优化正文页面导航

很多访客都喜欢按顺序一篇篇地往下看，可是之前正文页面里的“上一篇”和“下一篇”按钮实在是太小了，不仔细找都注意不到，而且无论如何总要把页面滚到顶部或者底部才能翻页，不够方便。

那就试试把它们放大，放大，再放大，直到……

嗯，够大够明显了，就是页面看起来有那么一点点挤（废话）。而且只是简单地把它们加大，似乎并不能解决便利性的问题。那就把它们挪到页面外面去，改成在两侧固定浮动，再简化一下，问题解决：

再美化一下，加上文章名：

可是这样又有一个新问题：箭头颜色深了不好看，颜色浅了又容易被无视。怎么办呢？还好，我高智商的大脑灵机一动，想出了一个“基于光标位置的三段渐进式颜色深度动态改变模式”……好吧，叫“三段式 hover”就行：

使用最简单的箭头，并把它的颜色调到最浅，优先保证美观。在鼠标靠近（移入绿色区域内）时，箭头颜色会变得稍微深一些，吸引人的注意；当鼠标移到箭头上时，颜色最深并显示对应的文章名。下面的动态图比较直观地展示了这个过程：

问题完美解决，实际用起来感觉也挺不错的，感兴趣的同学可以随便戳一篇体验一下。

重新设计顶部导航

接下来就是 header 导航栏的问题了。它是一年半之前设计的，我那个时候的设计水平可以参考我个人网站的 2012 版。这是它之前的样子：

实在是配不上那高端大气的 footer，而且在触摸屏设备上还会有打开菜单后关不掉的问题……果断把它全部删干净，连 WordPress 的自带菜单 wp_nav_menu() 也一并抛弃，因为自动生成的菜单限制太多，还是自己直接写 HTML 代码自由一些。这是重写好 HTML 的 ul li 结构后的样子：

剩下的 CSS 部份就比较简单了，加大字体、多留空白，看起来大气多了。顺手再用 Font Awesome 加了些图标，更生动一点：

至于响应式处理和触摸屏优化，我参考了这篇文章。这是在 iPhone 上的效果：

重新设计评论框

说到评论，我真的好伤心——据粗略统计，平均每天只有不到 1% 的访客在 Camarts 评论或者留言，实在是太冷清了……，还是重新设计一下评论框吧，希望能有所好转。这也是一个从上线到现在就没有怎么改动过的东西，虽然细节部份优化过一些，但总体上还是 twentyeleven 的样子：

其实整个评论表单里，除了评论内容之外，其他三项信息都是非必填的，可还是有人误以为它们是必填的……。在评论内容前还要填这么多东西，换成我，也会少掉一些兴致；再懒一点的，可能就直接不评论了。

我想，如果能把这个表单顺序改成“称呼 → 评论 → Email → 网站”，这样就能突出最主要的“评论”框，而显得“Email”和“网站”这两项没那么重要，这个问题就也许能得到解决。可是翻遍了 WordPress 的文档，又查遍了 Google 和 Stack Overflow，竟然找不到一个能有效地调整评论框表单顺序的方法，也没有几个人想到要这么做。确实，翻遍收藏夹里的所有博客型网站，几乎所有的评论框都是传统的“称呼 → Email → 网站 → 评论”。看来还是不能偷懒，自己动手吧。既然 WordPress 的 comment_form() 不能改，那就照着它自己重写一个，问题解决：

再优化一下细节，增加说明文字和图标，调整输入框和按钮的位置，最后再加上背景底纹，现在漂亮多了：

写在最后

再在各个浏览器上测试优化之后，这次的更新就告一段落了。在这次更新里，变化最大的就是 footer 了，它除了之前提到的实用功能外，还有一个重要的意义：重新定义了页面的视觉层级，在原来的“背景层”和“内容层”底下，又增加了一个“底层”，虽然现在看起来这不算什么，但“层级”的概念在以后的更新中会越来越明显；还有一点同样重要：它能把原本因为页面整体色调偏浅而略显轻浮的界面压下来，变得更沉稳一些，起到平衡作用。

不知道大家注意过没有，Camarts 的所有界面元素全部是黑白的，没有颜色。这是为了尽可能地避免照片受到其他界面元素的影响，最大限度保证照片的展示效果。但追求极致素雅的代价就是：在照片不是页面主体的地方，页面整体就会略显单调和轻浮，比如 footer。

我觉得黑白界面比彩色界面要难设计得多，毕竟不能通过颜色来调节页面整体的平衡，取而代之的只是深浅不同的灰色；在追求极致素雅的同时，还得尽可能地避免单调。困难确实不少，这算是我给自己的一个小挑战吧，学着慢慢把握好它的平衡。

此次更新上线才短短几天，就已经初见成效：PV 提高了近两倍，评论率也提高到了 2%……(ノ=Д=)ノ┻━┻ ，基本上达到了提高网站粘性和活跃度的目标。在做这次更新的几天里，我又发现了不少需要改进的地方，脑海中也冒出了很多新的创意，会在以后慢慢实现。至于是什么，我就先卖个关子吧，嘿嘿。希望大家多看看，多体验，多给建议：http://www.camarts.cn

为了印证一些判断，我做了个小调查问卷，希望大家能花一分钟时间做一下 »