wordpress 的插件越来越多,速度也越来越慢,咋整?

静态化!

今天主要是把流程 Step by Step 一下,不用理解为啥这么设置, 只需要知道设置后会变的很快

所谓提前优化是万恶之源的意思就是说,之前网站做的越烂,优化的空间就越多
和老板说看,之前多烂多烂,俺给你省了多少多少钱,一般都能拿奖金
静态化也一样,之前一大堆插件,开个页面上百次MYSQL查询,或烂人写的没效率SQL会让人不禁抓栏杆撕床单

WP Super Cache 并不是100%静态化,不过这个不重要,他把最卡的部分搞定了即可

WP Super Cache 他唯一的缺点就是如果你在改主题或搞啥插件,后台设置了前台看不出变化,为毛?下面有解决方案

OK, let's gou

1. 首先，永久连接不能使用默认格式
2. 修改永久链接格式,中文推荐采用 /%post_id%.html (这下你知道我的.orz哪里来了吧)
   如果你和我一样蛋疼愿意为每篇文章写一个英语的post slug
   建议采用这样的格式：/%postname%.html (百分号外面的随意写)

这里我一二三四五六七都标注了就不介绍了吧,常规装插件也是这个套路

那些个神马ftp时代都已经过去鸟过去鸟

装完后激活一下

激活了,但他说还需要去设置一把, Rock it

凡是推荐的都打钩,无脑输出嘛

需要注意的是(miao)的用户不要开Compress pages so they’re served more quickly to visitors. (Recommended)

因为默认已经压缩了,再压缩一次一是可能乱码,而是增加不必要的损耗变得更慢

需要注意的是Don't cache for known users的意思是对已经登录的用户不缓存

这就解决的后台改主题无法更新的缺点

也就是说,平时的时候这个选项不打钩,当你需要改主题或调试插件什么时候就打他,改完了再去掉

因为我们选择了最快的mod_rewrite 方式,所以继续往下拉,会看到一坨螺旋状大黄色的容器,点里头的update mod_rewrite rules

不出意外会给个绿色的确认,某某.htaccess被插了...

有个激动人心的功能上几个版本才加进来的叫Preload,具体有兴趣可以看我写过的Preload 就不累赘再说一次了

全都搞定后去前台页面,右键查看源代码,拉到最下面,会有三行状态告诉你已经搞定鸟

FAQ:

Q: 我流量那么小,有必要搞这个么?
A: 搞这个纯粹为了自High,和流量没关系,例如打开自己的网站快个两三秒不是一键很爽的事咩?

Q: 那个过期时间我能改咩?
A: 建议用默认的

Preload 模式下更改过期时间,会导致全站文件一遍遍的重新生成,这是完全没必要的
普通模式下更改过期时间,太短或太长都会导致CPU飙升,得不偿失,除非你流量大一个月五六千才有必要

Q: 我发表新日志,或访客留言后他会全站再静态化一次么?
A:不用担心,使用起来和没有装是一样的,有内容更新它会重新生成对应的页面的静态文件,没有更新的就没必要再去重新生成一次

Q: 这个对SEO有没有影响?
A: 有,SEO里爬虫对页面打开速度比较敏感,

常规模式下第一次访问才生成,到期后回收掉,也就是说第一次比较慢
Preload模式先给你都静态了,不管何时访问都快,对SEO更好

Q: 乱码啦乱死人啦～～～

A: 关掉 Compress pages so they’re served more quickly to visitors. (Recommended)

还有啥Q请留言

什么是 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固定连接的同学会链接失效