什么是 Gravatar

Gravatar 是 Globally Recognized Avatars (地球人公认的阿凡达)
可以去 http://gravatar.com/ 关联你的 Email 和头像
这样子在任何启用 Gravatar 的博客留言,即可显示对应的头像
例如 i(a)ooxx.me 对应的是

Gravatar 是如何构建滴

一个 Gravatar 是服务器动态返回的图片,下面是一坨 src 图片地址

http://www.gravatar.com/avatar/ddb61c44b09ee3e8cb2700249ec9eac7&r=X&s=80

我们来肢解一下

Gravatar 总是以如下URL开头

http://www.gravatar.com/avatar/

接下去是 E-mail 对应的 Hash 结果, 这 E-mail 地址在 hash 之前必须要小写,并且要木有空格

ddb61c44b09ee3e8cb2700249ec9eac7

然后是 rating 分级, 有[ G | PG | R | X ] 4档
(在网站设置头像的时候会让你分级,建议选G)
约X的头像越不和谐,用专业的英语就叫 hardcore sexual
网址里这个分级设置的是容许最极端的那档
例如网址设置容许G,那么只有G的头像会显示
容许PG 会显示 G 和 PG
容许X 会显示 G 和 PG 和 R 和 X

&r=X

最后是 size 图像尺寸 , 有效范围是1到512

&s=80

还有一坨可选的默认头像地址,就是说如果email找不到对应的头像了或者不在分级范围内,就用这张默认图
可选参数为
* '404' (返回 a 404)
* 'mm' (mysteryman)
* 'identicon' (unique, generated image)
* 'monsterid' (unique, generated image)
* 'wavatar' (unique, generated image)
都是些奇形怪状的丑图,建议自定义一张拉轰的(http://ooxx.me/me.jpg)

&d=http%3A%2F%2Fooxx.me%2Fme.jpg

那么在主题里调用 Gravatar 就很简单的用

 <?php
   echo get_avatar(i@ooxx.me,50);
   ?>

这里的邮件地址可以用 get_the_author_meta('user_email') 获取本文作者的email
如果用在评论循环里,可以用 get_comment_author_email() 获取当前循环里的email
记得小写哦 strtolower(get_comment_author_email()) 会自动转为小写
记得MD5哦 md5(strtolower(get_comment_author_email())) 会进行 hash

加起来就是

 <?php
   echo get_avatar(md5(strtolower(get_comment_author_email())),50);
   ?>

会吐出来

<img alt='{$safe_alt}' src='{$out}' class='avatar avatar-{$size} photo' height='{$size}' width='{$size}' />

不幸的是get_avatar()默认吐img标签
幸运的是如果只要src值,可以这么写

<?php
echo "http://www.gravatar.com/avatar/".md5(strtolower(get_comment_author_email()))."&r=X&s=80";
?>

挨吻老湿就是这么写再结合jQuery 配合 CSS3 搞图片圆角来输出头像滴
点这里看

开始本文之前请先阅读 WordPress 技巧：不用插件实现 Pagenavi 功能

接着是一坨广告：如果有企业要建站，推荐凶器 WP Jam

然后开始正文：

根据先阅读的那篇文章，教偶们如何用 wordpress 自带函数实现 pagenavi 功能
整完后输出的就是12344567的数字了

但还木有实现 pagenavi 的表现,也木有 左边那坨当前页面/总页面指示数
这就是为啥要写这篇文章的原因了

pagenav的缺点：多一个外挂样式表 一个http 请求是非常占速度的，可参考yslow说明书
以插件形式载入，虽然灵活，但以性能为代价

因为水煮鱼已经介绍过了，我直接就说修改的地方了，输出结果可以参考截图

第一步：在 functions.php 的 <?php 和 ?> 之间插入

function ooxx_nav(){
global $wp_query, $wp_rewrite;
$wp_query->query_vars['paged'] > 1 ? $current = $wp_query->query_vars['paged'] : $current = 1;

$pagination = array(
'base' => @add_query_arg('paged','%#%'),
'format' => '',
'total' => $wp_query->max_num_pages,
'current' => $current,
'prev_text' => '« ',
'next_text' => ' »'
);

if( $wp_rewrite->using_permalinks() )
$pagination['base'] = user_trailingslashit( trailingslashit( remove_query_arg('s',get_pagenum_link(1) ) ) . 'page/%#%/', 'paged');

if( !empty($wp_query->query_vars['s']) )
$pagination['add_args'] = array('s'=>get_query_var('s'));

echo '<div class="ooxx_nav"><span class="page-numbers pages">Page'.$pagination[current].' of '.$pagination[total].'</span>'.paginate_links($pagination).'</div>';
}

第二步： 在 style.css 里插入

.ooxx_nav{clear:both;margin:5px -2px;overflow:hidden;zoom:1;text-align:center;}
.ooxx_nav .page-numbers:hover{background:#FF3D86;color:#FFF;-moz-box-shadow:1px 1px 1px #DDD;-webkit-box-shadow:1px 1px 1px #DDD;box-shadow:1px 1px 1px #DDD;}
.ooxx_nav .page-numbers,
.ooxx_nav .dots:hover,
.ooxx_nav .pages:hover{-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#FFF;display:inline-block;float:left;height:18px;margin:2px;min-width:28px;_width:28px;padding:1px;}
.ooxx_nav .page-numbers:visited{opacity:0.5;}
.ooxx_nav .current,
.ooxx_nav .current:hover{background:#7BAFA7;color:#FFF;font-weight:bold;-moz-box-shadow:1px 1px 1px #DDD;-webkit-box-shadow:1px 1px 1px #DDD;box-shadow:1px 1px 1px #DDD;}
.ooxx_nav .pages,
.ooxx_nav .pages:hover{color:#CCC;width:120px;}

第三步： 在需要导航的适当位置，例如index.php search.php 里插入

<?php if(function_exists('ooxx_nav')) {ooxx_nav(); } ?>

要直接用的拷贝上头代码直接用即可，听解释的继续看

第一步里 function ooxx_nav() 作用就是新建一个输出页码的函数，名字随便来，当然调用的时候要对上
这里改动不大

1. 基于语义考虑<p />标签改为<div />，当然最好改成<nav />如果你已经createElement的话，哈
2. 调用变量 $pagination 数组里的当前页和总页数组重新合成左侧那坨功能
3. 左箭头和右箭头用字符实体标示一下更规范

第二步里 你可以根据自己的主题修改颜色
box-shadow 为页码数投影
border-radius 为圆角程度
-moz- firefox 私有
-webkit- chrome safari qq浏览器 maxthon 等webkit内核私有
不细说，有需求留言即可

第三步加入 function_exists() 判断 ooxx_nav() 是否存在，要是不存在也没关系
如果不加判断，天会塌下来

--update--

感谢 yun77op 找茬

'base' => @add_query_arg('page','%#%'),
应改为
'base' => @add_query_arg('paged','%#%')

少了个d,非permalinks固定连接的同学会链接失效

挨吻老湿分享了一坨圆角图像的另类实现方式文章 CSS3 Rounded Image With jQuery

很赞,翻译了下记录一把

开始之前,可以先把 Demo 点开对照着看

目标

目标是用 CSS3 border-radius 和 box-shadow 来实现如下图效果

左手: 圆角+外投影
你的右手旁边是我的左手: 圆角+内投影

问题
问题是这年头木有一档浏览器可以完美的在图片上应用圆角和阴影
webkit 可以显示圆角,但木有内投影
firefox 和内裤被戳破一样还坚挺的直着

CSS 淫技

灰常简单: 在图片外头套一层超薄<span />然后把原图作为 background-image.
要隐藏原图的话,可以 opacity:0 或 display:none
偶发现 opacity 更淫荡点,因为这么整用户还能图片另存为
当然出于某些阴暗目的或光明磊落隐私考虑,可能会偏向 display

最终用 jQuery 的解决方案

本着怎么偷懒怎么来的原则,我们用 jQuery 来自动给图片套<span />

不解释, 上代码先

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

  $(".rounded-img, .rounded-img2").load(function() {
    $(this).wrap(function(){
      return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    });
    $(this).css("opacity","0");
  });

});

</script>

接下来开始解释
1. 调用 jQuery 库
2. ready 就是 DOM 全部加载后再触发的事件, 否则一旦有图片的 DOM 节点后于 JS 加载,就会绑定不到
3. $(".rounded-img, .rounded-img2") 选中所有 class 名为 rounded-img 和 rounded-img2 的元素
4. 给俩元素集绑定 load 事件 (偶很疑惑为何这么写)
5. 在每个图片外面包含一个 span, 这个 span 的 class 为原元素的 class ,这个 span 的 style 里的 background 取值自原图的 src 值, 宽高同理
6. 给每个图片写个style="opacity:0"

看起来素酱紫滴:

大猫的调整

$(function(){
  $(".avatar").wrap(function(){
      return '<span class="' + $(this).attr('class') + '" style="background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
    }).css("opacity","0");
});

理由:
1. $(document).ready(function(){}) 相当于 $().ready(function(){}) 相当于 $(function(){}) ,貌似有这么一说,嘻嘻
2. class名改为 .avatar 如果你是 wordpress 的评论头像, 都封装好了,要改结构也不是很方便,哈
3. 去掉图片的 .load 事件, 因为如果图片从缓存中获取, 有可能就不会触发这个事件, 反正是 DOM ready,霸王硬上弓了
4. 直接用链式写法点花点月点秋香

然后你得在你的主题 style.css 加上那么几条
因为 webkit 的内阴影配合圆角就是一坨屎,所以我用外阴影了
iPhone 的safari 还不支持 inset 内阴影, 如果有内阴影控, 可以用线性渐变配合RGBA假装是阴影...

.avatar {
	display: inline-block;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

IE 呢?
screw you!

不过目前偶是弄个中间镂空PNG遮罩,多一个请求
要是平滑那还得PNG32
要是PNG32那IE6捏?
IE6用 AlphaImageLoader 滤镜一旦图片加载失败,整个页面就脱光了死给你看

screw IE!

Opera
这孩子长得漂亮,龙飞(dragonfly)也不错 就是没有用的欲望
10.x之后不用-o-了直接支持圆角阴影,值得鼓励

今天遇到一挺郁闷的bug
IE8 标准模式
要实现如图的效果,图片宽度最大100px,小于100就自适应,
右边文字围绕左边的图

症状:
图片外容器宽度还是取决于图片原始大小而非max-width定义的大小

测试可跑如下代码
<!DOCTYPE html><html><body><div style="background:#2CA0B7;float:left;"><img src="http://ooxx.me/me.jpg" style="max-width:50px;" /></div></body></html>


也可以看DEMO页
http://code.sh/lab/demo/bug_ie8_max-width.html

哪位大湿有无解决方案?

不知道 wp-super-cache 的建议看一下最佳 WordPress 缓存插件：WP Super Cache补补课

这会儿后台直接升级Wordpress 3.0 花了1秒钟,感觉巨爽
wp-super-cache 顺手也升了,有几个特性还是要提一下

下面是翻译自官方blog的预缓存(Preload cache) 介绍
Preload the cache in WP Super Cache

看到本周帅气的下垂了么? 我上周日启用了 WP Super Cache 的预缓存(preload cache),这玩意儿明显的降低了服务器的负载,创建缓存时会有个峰值,很黄很暴力

我一直不鼓励用户使用预缓存,主要是因为文件数量会导致一些问题,如果你有几千个缓存文件,硬盘挂了会需要很长时间才能恢复.
(注: 有些主机商会限制文件数)
但反过来说,Google把速度作为一个网站的衡量标准之一.在过去,这个插件会忽略爬虫,因为爬虫每次只访问每个页面一次,缓存相对它们是毫无意义的.所有的页面都应该在 Google 还没开始爬过来之前就缓存好
(注: WP Super Cache 工作流程是第一次请求页面时把PHP+MySQL处理结果生成静态页面,再次访问时甚至都不用执行一行代码 )

如图所示,一旦你启动预缓存,它会挂载在 wp-cron 去获取100 个帖子, 过10秒后再去获取100个帖子 直到读完所有帖子. 它同时会禁止掉老帖子的垃圾回收机制,但有评论和新帖子的时候还是会干掉一些适当的缓存文件
目前它只缓存 文章页 (注:is_single()那种,中文差不知道咋翻译),貌似没啥必要去缓存 archive 或 tag 页,因为很多站已经写了 robots.txt去忽略这些页面

这次 WP Super Cache 的更新包括了

1. 更好的支持移动设备插件,例如 MobilePress (注:之前会有电脑访问出现手机界面的bug,不知道现在如何,有遇到问题的朋友请留言)
2. 增加了缓存测试功能(注:之前只能通过查看页面源代码最底下的注释了解情况)
3. 可设置只在评论更新的时候更新缓存,而不是前台或相关页面
4. Works in WordPress 3.0.

它还有一堆 bug 要修, 和其他功能要增加

愿意当小白鼠的可以尝试开发版本 from the download page ,有问题就反馈到 support forum

=====补刀======================

如何安装 WP Super Cache ?
答: 进入后台,选择左侧 plugins -> Add New ->输入 WP Super Cache 点 Search Plugs -> Install Now

小博客很适合开启全站预缓存
个人觉得没必要设置定时重新生成全站缓存,如果你老帖子变动不频繁的话
因为即使老帖子变动了,对应的也会自动生成

有同学问,我网站规模太小,是不是不需要缓存?
答: 缓存是为了自己爽, 提速不是一个段位

=====补2刀=====================

使用 (miao) 服务器的同学不用开启 gzip ,偶已经配置了默认压缩指定文件类型
也不用担心文件数的问题, 偶木有做限制

QQREADERD1F79C5048631991