Archive
Posts Tagged ‘Wordpress’

博客回来了

March 9th, 2010 2 comments

前几天阿熊跟我说我的博客打不开了。最开始我还当作是服务器的临时性故障,就没有放在心上。后来在工作时间里偷了个空看看,果然不是服务器的故障,而是我的账户被禁用了,cpanel 和 FTP 都无法登录。

立即联系了主机提供者 jiang,得到回复说是主机可能是没有安装缓存插件的原因导致资源使用量达到限额所以被自动关闭账户了,也承诺尽快给我想办法解决。可是等来等去大概过了一个星期,事情没有得到好转(的确也因为是 jiang 太忙的缘故),只好放弃 wpchina 的服务另投别家了。

这段时间一直加班卖命去了,好不容易今天活干得差不多回得早(晚上十点,对现在的我来说很早了……)终于在新开的主机上利用备份数据恢复了 wordpress 程序以及数据库内容。最近一次的备份是去年12月6日的,好遥远啊。幸好这三个月我总共也就三篇文章,遗失了也就放弃不补算了。Sigh,数据备份果然是要紧且重要的活儿!

最近加班卖命,把剩余价值都贡献给了国家和伟*大*的*党,辛苦已然不觉。在qq上曾经发过一次牢骚“为谁辛苦为谁甜?” 有人说是为了自己和将来,可我只觉得辛苦,不觉得甜,杯具。

被spam流攻击

October 30th, 2009 4 comments

可恶的 Spam !

Yinheli 同学的这个主题里有一个 About 页面模板,作者好心提供了一个邮件表单功能,可以让访客直接填写表单,把表单内容通过邮件发送给博客作者,达到沟通的目的。可是不知道为什么,邮件里经常收到一些莫名期妙的垃圾信。开始还以为博客出现了啥灵异事件…… 后来才意识到是别人通过邮件表单发过来的垃圾信。

可是页面上明明有验证码。 估计是流程上有什么漏洞,或者是对方有验证码识别技术(估计我这个破地方还不值得人肉识别并攻击),导致我的邮件里一日之内收到近百封的垃圾信。

一怒之下索性把页面里的邮件表单取消掉。反正自开通以来,没有人通过这个与我联系……

另外还有一种很可恶的spam,现在在许多论坛上也很多见。 就是发表那些“万金油”的评论。评论内容一律是称赞、鼓励之类(反正就是通用于任何一篇文章,比如“博主写得不错,受教了”),但评论者的个人信息里却带有推广的目的,比如评论者名称为“快速减肥”,留的博客地址打开一看果然是一个减肥的网站。对于这种“软spam”,我是不愿意接受的。目前还不知道有什么有效的方法可以阻止,目前都是统统归到 spam 中,一个也不放过,让 akismet 自己去学习,有一个封一个。

升级到了Wordpress 2.8.1

July 11th, 2009 8 comments

这段时间一直在忙毕业的事情,没有抽出时间来更新博客。现在总算是轻松下来了,只剩 15 号的毕业典礼,拿到毕业证两天之后就要被驱逐了。

正好昨天看到 Wordpress 升级的消息。本来之前由 2.7.1 升级到 2.8 我就很犹豫要不要升级。虽然版本号的变动比较大,但实质上的变动不是太多,唯有新添了在线安装主题的功能,省了点下载和上传的时候而已,不是太激动人心。后来有人建议我等到 2.8.1 出来的时候再升,版本会稳定一些,同时我有些忙碌,于是心安理得地等到现在 2.8.1 发布。

2.8.1 的 change log 我没有太仔细地看,无非是一些小细节的修正。为了保持继续折腾的热情,偶在认真备份之后,悍然点击 Upgrade ,升级到了 WP 2.8.1。升级完成之后看了一下,一切顺利,主题和插件都没有出现不兼容问题。只是主题的 Archives 侧边栏显示有点不正常,每个条目都显示成了 Jul,2009  ,还好 Yinheli 同学的代码比较规范,稍微改了一下源代码中的时间转换参数就搞定了。

目前还没有热情去尝试 2.8 新增的功能,先让 blog 运转一阵再说。

Wordpress 手动提速 – 缓存优化

May 19th, 2009 13 comments

由于大多数的 wordpress 博客都架设在与他人共享的虚拟主机上,所以速度和优化便成了 blogger 们经久不哀的话题。为了优化,我也看过不少的文章。看来看去,很多人只是老调重弹地讲了 WP Super Cache 插件;以及有些空泛地提出要去除不必要插件、优化 javascript 等,可惜这只说明了方向问题却没有点明该如何朝这个方向去做。只好依自己生平所学,手动地折腾了一把 Wordpress 优化。

服务器端缓存机制

虚拟主机用户一般无法更改服务器的配置,我们也就不能在这方面有很大的期望。不过“缓存”这一手段仍然是一种相对可行的底层优化方法。Wordpress 有众多的缓存插件来支持这一行为,包括 WP Cache、WP Super Cache、DB Cache 等。

WP Cache 和 WP Super Cache 这样的插件通过生成 HTML 静态页面来降低服务器负荷,达到提速的目的。我个人却不太喜欢这样的方式。其原因有:一,这样做会丧失动态网站的灵活性。特别是那些根据客户端不同会作出不同响应的功能。比如我的主题中有一个 is_bot() 函数,用来针对搜索引擎的机器人作出一些 SEO 的调整。一旦我启用了静态缓存插件,便丧失了这种灵活性。有人说这些功能可以改成 Javascript 实现,但真要改动起来也比较麻烦,有些得不偿失。二,某些个人博客的瓶颈并不在PHP执行这个环节,而是客户与服务器之间的网络线路。甚至我认为,个人博客没有上万的 PV 完全没有必要采用静态化的策略。

DB Cache 插件我觉得可以试试,因为它的原理是缓存数据库查询,特别是虚拟主机中数据库服务器不是本机(localhost)时,这个插件会提高响应速度。但必须注意的一点是很多虚拟主机对于每用户可占用的内存是有限制的,如果这个值太低,那么这个插件也不太适用。

把缓存交给用户

与其在服务器上费力地设置缓存,更好的办法其实是“把缓存交给用户”。我用 Firebug + Yslow 分析自己博客的时候,发现它提示我的博客没有给静态内容设置缓存。于是用 cURL 连接到网站上通过观察 HTTP Header 来分析了缓存的机制。我的博客上 Apache 会发送“Last-modified”和“E-Tag” Header,这似乎也是大多数博客虚拟主机的配置。这样浏览器在请求的时候会发出“If-modified-since”请求,让服务器判断请求的内容(比如图片)是否在某个时间(通常是浏览器缓存的时间)以后发生变化。如果没有变化,服务器返回 HTTP 304 Not Modified 响应,浏览器则可以放心地使用本地缓存,从而降低了 HTTP 请求开销。

Yslow 建议给静态内容设置一个“永久”的缓存。这个永久通常是设置一年甚至更长的缓存期来实现的。设置缓存以后,服务器在对请求作出响应的时候会附加一个 Expires Header,告诉浏览器这个东西在多长时间内不会过期。这样浏览器就可以放心地使用缓存,甚至连 If-modified-since 请求和一个 HTTP 304 响应也不必要了。这样就大大地节省了在网络上的开销。访问者只是在第一次访问时会请求动态内容,接下来则会直接使用缓存的内容,达到了“把缓存交给用户”的目的。

实现方法

要做到这个也是件很容易的事情,对于 Apache 服务器来说,使用 mod_expire 就能轻松地设置缓存期。在 .htaccess 文件中加入以下内容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<IfModule mod_expires.c>
# 启用缓存机制
ExpiresActive On
 
# 图片缓存时间为 1 年
ExpiresByType image/gif "now plus 1 year"
ExpiresByType image/jpeg "now plus 1 year"
ExpiresByType image/x-icon "now plus 1 year"
ExpiresByType image/png "now plus 1 year"
 
# Javascript, CSS 缓存时间为 12 小时
ExpiresByType text/css "now plus 12 hours"
ExpiresByType text/javascript "now plus 12 hours"
ExpiresByType application/javascript "now plus 12 hours"
</IfModule>

有人要说,如果我的内容改变了怎么办呢?因为这样设置以后浏览器并不会向服务器询问是否有新的内容,而是老老实实地相信自己的缓存内容了。
如果你的改动是少数的几个图片,那么只需要在图片的 URL 后面自己加上一个任意的 query string 即可。比如说原来的图片 URL 是

http://blog.xiaoding.org/wordpress/wp-includes/images/smilies/icon_smile.gif

现在只需要在原地址后面加上一个 query 参数即可,此参数对于静态内容可以任意构造,我此处写的是 AnyQueryString

http://blog.xiaoding.org/wordpress/wp-includes/images/smilies/icon_smile.gif?AnyQueryString

这样浏览器会认为此时的图片与原来的不同,将再一次下载它。于是我们就达到了更新的目的。

盗版aw的网页加载进度条

May 14th, 2009 8 comments

网页上的加载进度条

网页上的加载进度条

在换这个主题前我使用过 awflasherTES 主题,主题很优秀,特别是左上角的那个“正在加载”的进度条给我留下了比较深的印象。换上这个主题之后,有点念念不忘,所以就想着把这个效果再实现出来。

awflasher 早先发了一篇文章《给页面加上Loading效果最简单实用的办法》。然而这篇文章只是给页面左上角加了一个红色的提示块,在网页加载完成的时候消失,并没有进度显示功能。aw 在后来的 TES 主题中融入了此功能,可是文章却没有更新,我只好半是摸索半是学习地盗版了此功能。

首先要给网页加上进度条的代码。如 aw 所言,进度条的位置很重要。如果你的 <head> 部分要加载的东西太多,导致网页迟迟显示不出来,那进度条也没必要加了。用户可能等不及进度条显示出来就关闭页面了。针对这个问题,我作了手动的优化,让自己的页面在 <head> 部分只加载 CSS 和 favicon,至于 javascript 统统挪到后面。这样打开网页的时候就能迅速地显示出进度条,起到提示的作用。

HTML 代码我加在 <body> 的后面了,内容如下,这个“载入中”的提示也可以用 Javascript 输出(有利于SEO)

1
2
3
4
5
<div id="progressbar">
<span id="progressdone"></span>
<span id="progressing"></span>
<span id="progresstip">载入中&hellip;</span>
</div>

progressbar 用来包含内部的三个 span,并进行统一的定位。内部的三个 span 各司其职,progressdone 用来显示已完成的进度,progressing 用来显示进度条的底色,progresstip 则是载入中的文字提示。

接下来是三者的 CSS 样式,决定了这个进度条显示出来会是什么样子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
#progressbar{
top:0;
left:0;
position:fixed; /* 固定在浏览器窗口的左上角 */
border:none;
z-index:4;
}
#progressbar span{
position:absolute; /* 绝对定位 */
height:1.5em;
opacity:0.6;
}
#progressdone{
background:#888; /* 底色 */
width:100px; /* 进度条宽度 */
z-index:5;
}
#progressing{
background:#454545;  /* 进度的颜色 */
width:6px;  /* 初始宽度 6 */
z-index:5;
}
#progresstip{
font-size:12px;
font-weight:lighter;
text-align:center;
vertical-align:middle;
z-index:7;
width:100px;
color:#FFF;
}

接下来是用 Javascript 来动态地控制进度的显示。由于 js 中并没有一种完善的方法可以判断浏览器加载的情况,所以只好用土办法直接上了。

土办法就是在页面的不同位置加上不同的进度值。比如我的页面在文章显示完后显示为 50%,在评论加载完成后显示为 75%,最后的 25% 留给页面的侧边栏和底部。查看我的页面源代码就可以看到 jQuery 控制的进度值:

1
<script type="text/javascript">$('#progressing').width(25);</script>

没有 jQuery 库也可以直接用 javascript 来搞定

1
2
3
4
5
<script type="text/javascript">
// <![CDATA[
document.write('<style type="text/css">#progressing{width:25px;}</style>');
// ]]>
</script>

这样就实现了对进度的控制,在页面的不同地方放上不同的加载值,这要改一下主题的源文件。

最后在 <body> 前插入一段 js 代码来终止这个进度条的使命:

1
2
3
4
5
6
7
8
9
<script type="text/javascript">
$('#progressing').width(97);
$(document).ready(function(){ // document 加载完的时候
 $('#progressing').width(100);  // 宽度调整为 100px 
 $('#progresstip').html('100%');  // 进度字符显示 100%
 // 停顿 0.5 秒后,将进度条隐藏
 setTimeout(function(){$('#progressbar').hide();}, 500);
});
</script>

没有 jQuery 的版本要麻烦一点:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type="text/javascript">
//<![CDATA[
document.write('<style type="text/css">#progressing{width:97px;}</style>');
 
function hideProgressBar(){
 document.write('<style type="text/css">#progressbar{display:none;}</style>');
}
 
function finishMyProgress(){
 document.write('<style type="text/css">#progressing{width:100px;}</style>');
 document.getElementById('progresstip').innerHTML = '100%';
 setTimeout(hideProgressBar, 500);
}
document.body.onload = finishMyProgress;
//]]>
</script>

折腾完毕,Enjoy!

自制了山寨版的评论框表情插件

May 14th, 2009 23 comments
自制的表情选择框

自制的表情选择框

最初在博客中也是用的 mg12 写的 Highslide4WP 插件,主要用途是评论框的那个表情弹窗。因为 mg12 不再更新原来的 WP Grins Popup ,只有这个好用了。

前几天给博客做了一下手动优化,主要是加快页面的载入速度。除了 HTML 缓存这种传统的技术之外,还分析了页面 <head> 部分载入的代码。纯HTML代码无关紧要,无非是给页面定义了一些 meta tag 之类的东西,关键是看载入的 Javascript 和 CSS 代码。最后无奈地发现 Highslide4wp 中用到的 javascript 库居然有 31KB 之大,对我来说这无法忍受,只好把这个插件撤下了。mg12 在 WP Grins Popup 的说明中也写到:

但前提是你正在使用 Highslide JS. 如果你不喜欢 Highslide 那样的效果, 只是为了这个表情图标的 pupop 而浪费 50kB 左右的开销以加载 JavaScript 代码, 会显得有些不值得.

后来换上了 ThinkAgain 写的 Wordpress Smilies,虽然效果不够炫丽,但是网页的开销是降低了不少。由于博客中使用了 jQuery 库的缘故,一直琢磨着用 jQuery 做出一个与 Highslide4wp 类似的表情弹窗出来。今天折腾了大半个晚上,总算是搞定了。

弹窗的CSS样式我没有重写(准确地说俺还不太会创造,只能改改),而是直接借用了主题中的 div 容器效果,协调一点也好。至于动画效果,我琢磨着 Highslide4wp 中的那种 expand 效果比较困难,要在四个边上同时进行移动,自己对 CSS 又不太熟,干脆直接用了 jQuery 中的几个效果,看上去也不错 :-) 至少也是动画的嘛。

感谢 mg12 的插件以及主题作者 yinheli ,借用了不少东西。    :-)  

这等山寨的东西我拿不出手,自己凑合着用就行啦。

PS: 下次写一写盗版 awflasher 的“正在加载”进度条的过程。

Wordpress 与 Qzone 和 Live Space 同步

May 11th, 2009 60 comments

背景及插件介绍

很多人倾心于 Wordpress 博客平台的灵活性和可定制性,跑到 Wordpress 中来写文章。但这样的话,文章一般只在由评论、Trackback/Pingback 等构成的博客圈内有影响,我们在 QQ、MSN 等即时通讯工具上的朋友就很难看到文章了(大多数人还不会用 RSS)。再者,QQ 和 MSN 对于自家的空间有良好的支持,如果有文章更新的话会有小星星或者小黄花的提示。这样我们如果将文章同步到 Qzone 及 Live Space 上,则可以达到一个推广的效果,可以利用之。

李光明同学写了一个 Post2qzone 插件,用来将 Wordpress 中发布的文章同步到 Qzone 中。插件的原理比较容量理解。Qzone 和 Live Space 都支持邮件发布的功能。也就是说,可以通过发邮件到指定的邮箱来更新你的 Qzone 和 Live Space。但由于 Qzone 的邮件发布只接受从 QQ Mail 寄来的邮件,这就要求必须使用 QQ 邮箱的 SMTP 服务向 Qzone 的指定邮箱发信以同步更新 Qzone。 Live Space 的要求则宽松一些,可以自行设置发信的邮箱地址。

安装和设置

在安装前,首要先确认你的空间支持 socket 功能。没有此功能将无法使用 SMTP 服务来发送邮件,也就无法实现发布文章时同步更新。在 PHP 中调用 phpinfo() 函数,输出信息中有一个“Sockets support”,支持的话显示为 Enabled。

接下来是开通 QQ 空间、QQ 邮箱。登录到 QQ 邮箱,进入“设置”->“账户”,勾选“开启POP3/SMTP服务”,然后保存更改。这样就打开了 QQ 邮箱的 SMTP 功能。

然后下载 post2qzone.php,上传到 Wordpress 插件目录,然后从插件面板启用此插件。在“设置”中有一个“Post2qzone”的页面。在此页面中设置你的 QQ 号、邮箱密码、邮件标题和邮件正文模板。

设置完成以后邮件同步发布应该就可以实现了。记得在 Wordpress 中发布文章的时候,要在页面的“Post to qzone”选项中中勾选“Confirm publish”才会同步。临时不需要同步功能,可以去掉这个选项。

优化与提高

说了半天都是在说 Qzone 的事情,如何同时同步到 Live Space 呢?首先要在 Live Space 中启动邮件发布功能。登录到 Live Space,选择“选项”->“邮件发布”,在第一步中填入qq邮箱的地址;第二步中自己编造一个 secret word ,第四步中选择“立即发布”。然后直接用文本编辑器打开 post2qzone.php 插件文件,在 function Halo() 下面添加一行代码,就可以同时更新到 Live Space 上。

	function Halo($subject,$body){
		// BLOGNAME 替换为你的 Live Space 名称。比如网址 blogtest.spaces.live.com ,那么 BLOGNAME 就是 blogtest
		// SECRET 替换为 Live Space 设置中自己设定的单词,不要公开
		$this->AddAddress("BLOGNAME.SECRET@spaces.live.com","BLOGNAME.SECRET@spaces.live.com");
		$this->AddAddress("{$this->qq}@qzone.qq.com", "{$this->qq}@qzone.qq.com");
		$this->Subject = $subject;
		$this->Body	= $body;
		return $this->Send();
	}

添加好此代码以后,就可以同时通过邮件来更新 Qzone 和 LiveSpace 了。

由于此插件默认输出的是全文,为了增加自己博客的访问量,可以在插件中只输出摘要,同时给出原文链接。示意图如图所示。 

Live Space 输出摘要

Live Space 输出摘要

怎么改我就不详细说了,无非是借用了 Advanced Excerpt 插件的处理思路来输出指定长度的摘要。我的 post2qzone 插件文章内容模板是这么写的,如下列出作为参考,摘要的效果可以在我的Live Space 上看到。

〖原文发表于<a href=\”http://blog.xiaoding.org\” target=\”_blank\”>我的部落格</a> http://blog.xiaoding.org 〗<br /><br />
{post_content}<br /><a href=\”{post_link}\”>阅读原文»</a> 

这儿是修改好的 post2qzone 插件的下载。使用到了 mb_substr() 函数,不支持此函数的同学请自行依靠 Google 解决……

如果同意“自担使用风险”,你可以点击下载Post2qzone修改版 (谢绝迅雷等工具)

新主题 Philna2 折腾完毕

May 7th, 2009 23 comments

五一放假的时候看到 Yinheli 同学放出了 Philna2 主题,比较兴奋,于是连夜下载回来然后装上。读说明的过程中又看到作者需要英文翻译,本着一种谢意,用不甚地道的英语把 readme.html 翻译好发给作者了。

其实这个主题已经相当地完善了。Yinheli 在发布之前已经自己使用了好久,为的就是能够尽量减少 Bug 。为此我还一度以为这个主题是私有主题不会公开呢。我是一个注重细节的人,这也是我喜欢这个主题并为之折腾的原因。

首先搞得我头痛不已的是日期显示。本来我不太喜欢使用中文翻译过的主题。因为大多数主题作者在制作主题的时候都是以英语为默认语言的,最后用 gettext 生成 po 和 mo 格式的语言文件作为翻译之用。上传之后我就把 zh_CN.mo 和 zh_CN.po 改名了。以为这下可以以英文格式显示。没想到日期的显示居然有问题。侧边栏那儿 Archives 中的日期应该是“Apr,2009”,如今却显示成了“四月,2009”这种不中不洋的格式。文章标题下面的日期显示成了“四月 2nd, 2009”,更让人无法忍受。我打开主题源代码,找到 mysql2date() 这个函数,试图更改日期字符串的格式,但是无济于事。又一路追查 mysql2date() 的实现,发现这厮在内部调用了 $wp_locale 将一些日期的字符串本地化了。而我的 Wordpress 后台使用了中文语言包,“Jan”和“January”都翻译成了“一月”,这也无怪乎我怎么改日期字符串它都无法显示英文月份。一怒之下将所有的月份翻译都删除,这下终于正常了。

接下来是右上角那个“随机一句话”的功能(作者称“Philna say”)。我在后台设置了十几条句子,跑回来测试。奇怪的是IE下第一次点击可以正常刷新,后面的就没辙了。不管我点击多少次都依然显示一句话。在 Firefox 中测试发现没有问题。更神的是 Yinheli 的主页上居然可以用 IE 来点击并刷新。奇怪也哉!本来自己打算从 jQuery 冲突、PHP 代码等多个角度修复,但由于 Javascript 和 PHP 上的积累实在可怜,告以失败。最后还是把问题提交给作者才得以修复。(据作者说其实很简单,就是把 AJAX 的 Get 请求换成了 Post 请求 :mrgreen:

接下来又折腾了几个地方。哎,辛酸过程略去不表。只说一说结果。

页面宽度改成 960px:这个效果不错。但我适应了之前的宽度,于是马上又改回来了。

Advanced Excerpt 输出带格式摘要:这个插件的高级摘要功能我一直比较喜欢,而且在本博客与 Live Space 和QZone 的自动同步中有用到(后二者同步时只显示摘要)。只是 Yinheli 同学已经实现了一个自己的摘要函数,虽然没有格式支持,不过还可以接受,于是主页上我就没有启用 the_excerpt() 来输出摘要。

Mail to commenter邮件通知评论:我是在 Tao’s opinion 上接触到这个功能的。每次我在他那儿的评论如果有回复了就会收到邮件通知。感觉这个功能很好,可以增加访客和作者的互动性。我不喜欢嵌套评论,所以没有用 Thread Comment 插件。最初用的是 CommentMailer,缺点是必须以作者身份登录之后才可以在回复的时候发邮件通知。后来在网上看到 Mail to commenter,发现它支持 “@user” 的方式回复通知,设置也非常灵活。这与 Yinheli 在主题中实现的鼠标悬浮显示评论内容简直是绝配。下载回来稍加设置,便可以很好地工作了。(PS: 这个地方 commenter 一词是否有误?我看字典中评论员的单词是 commentator )

胜利搞定博客同步更新

March 26th, 2009 6 comments

经过了晚上一段时间的奋斗,我在 zsc 同学的正确指导下,俺终于成功地搞定了几个空间的同步功能。在此发一篇文章记录一下。

以后俺发表在博客上的文章会自动地通过邮件同步到俺的 Windows Live SpaceQZone 之上,此实属利用 MSN 之小黄花儿和 QZone 之星星来刷人气,吸引眼球之举动。望眼球被吸引进而被拐骗到这儿来的朋友予以最真心的谅解和最衷心的支持。

以下省略对 zsc 同学的感谢和对 PHP 可以不用声明变量的愤慨若干言……