I'm qiqiboy !

博客的一点小修改

QiQiBoY — Thu, 11 Mar 2010 19:07:03 +0800

一直很懒，今天挤点时间，对博客做了些小调整。

1.之前从万戈兄的博客看到过将时间显示为“XXX之前”的方法，我年前有试着自己去写，但是我觉得自己写的太冗长了，是通过一个一个条件判断做的。自从在万戈那里看到他的方法，我不由惊呼此种书写方法的简洁——用一个二维数组去存取时间。所以我稍作修改用在了我这里，主要是将英文化一下，加上显示XX秒（有必要吗？），让其显示为“XXX，XXX ago”或者在有预发布文章时显示“after XXX，XXX”。

2.我博客上面有广告，虽然我已经设置了可以手动关闭广告、留言不显示广告等，但是还是会影响一部分人。所以我又想了个办法，那就是最近三天之内的文章不加广告。具体是在function.php写入一个判断文章是否是三天之内发布的函数：

function is_old_post() {
        global $post;
        $days = 3; 
        $post_date=$post->post_date;
        $current_date = time();
        $diff=$current_date-strtotime($post_date);
        if($diff>60*60*24*$days)
        return true;
}

$days = 3;此变量即是天数。如果是距离当前时间三天以上时间发布的文章，则函数返回true。然后即可在要显示广告的地方，

<?php if(is_old_post()) : ?>
//广告代码
<?php endif; ?>

3.在文章最后添加最后修订时间显示，但不是所有文章都会加入。只有那些最近一个月之内修改过，并且修订时间离文章发布时间大于一个小时的文章会在文章结尾处显示

Last modified XXX, XXX ago.

之所以加入这个，主要是因为可能有些类似于教程之类的文章可能会随着时间的推移发现有错误进而进行修改后可以给后来的读者一个提示。我用的方法如下：

<?php $the_time = get_the_time('U');
      $the_modified_time = get_the_modified_time('U');
      if (($the_modified_time != $the_time) && (time()-$the_modified_time<30*24*60*60) && ($the_modified_time-$the_time>60*60)) {
          echo "<div class='modifid'>Last modified <span class='time'>".time_since($the_modified_time, time())."</span></div>";
      }
?>

主要解释一下if语句中的三个条件语句，分别是修订时间与发布时间不一致、当前时间与最后修订时间差在30天之内、修订时间与发布时间差在一个小时以上（刚发布的文章可能会频繁修改一些小问题，所以不纳入修订）。

注意，此处也调用了time_since()函数，这个函数即是让时间显示为XXX,XXX ago的函数。不需要如此显示，则直接将最后一句改为

the_modified_time('F jS, Y');

WordPress主循环控制——精确控制文章列表 (41)
将more截断输出内容包含在if语句中，所以只有前三篇会显示more截断内容，后面的都不会显示了，只剩下标题和发表时间。如果你有其他需要，例如让前三篇的标题和后五篇不一样，那...
一个首页不应该缺少的两项功能：置顶+日志预告 (35)
例子中对于置顶文章添加了一个class属性 stickytitle ，同时标题前面加上了“[置顶]”表示文字。你不需要关注如何使置顶文章显示在其它文章前面，因为你使用WP默认的主循环它就会自...
WordPress自动获取+调用页面主循环日志中的图片 (22)
这里我定义了一个get_post_excerpt_img()函数，然后定义全局变量$post，这个其实是WP内置的一个对象了。通过匹配正则表达式来匹配所需图片。这里注意，我用$post->post_excerpt是匹配摘要...
给搜索引擎来源访客的订阅提示 (8)
1: <?php 2: function sech(){ 3: $ref = $_SERVER['HTTP_REFERER']; //取得来源网址 4: $so = array(’.google.’, ‘.bing.’, ‘.yahoo.’, ‘.baidu.’, ‘.soso.’); 5: foreach ($s...
WordPress修改语言配置文件 (2)
之前《about qiqiboy。。。》中讲过我故意将模板的各处都改成了英文，但是还有一点，就是日期和登录管理接口处是中文。有人会说，要英文你直接将wp-config.php里语言配置一项由ZH_CN改...

声明: 本站遵循署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址:http://www.qiqiboy.com/2010/03/11/minor-changes-to-the-point-blog.html

There is no comments still.

Related comments

一点小更新——qiqiboy.com

QiQiBoY — Mon, 01 Mar 2010 20:26:43 +0800

突然发现，过了一个假期，突然很没有年前那种折腾博客的心思了。看了一下，存档里显示整个二月份我就只更新了一篇。假期里真的很懒呀。

博客后台的草稿里倒还有几篇放假前赶出的，略带技术性的文章，本来是要在假期里慢慢更新出来的，结果我懒到连点一下发布都没做。过几天慢慢放出来吧。

假期里刚过完年邮箱里就一直收到万网的域名续费通知，我的这个域名是去年3月七号注册的吧，再有一周就要到期了。面对国内目前急转直下的互联网环境，我有时在想干脆等它掉下来，我再到name.com去注册吧。可是又觉得这个等它掉下来都要等差不多两个月，时间有些长。所以就在今天又给它续了费，虽然万网臭名昭著，但是我还是忍忍吧。

哎，实在不知道该说些什么，就此打住吧，与其瞎说，不如留口嘴水。

其实我现在是很沮丧的。

我现在很强烈的想结婚。但是法律是不允许的。

假期里的最后一博 (31)
前两天还去了我们那里的一个景区玩，具体叫“河南济源市五龙口风景区”，国家级4A景区。里面最有名的当属猕猴了，有几千只猕猴在山上。景区还有温泉，爬山，缆车，观光电梯等...
假期里的小无聊 (32)
十天前回来时我草拟了个计划表，不过现在看来，我不能很好的执行这个计划了。虽然天气好，有太阳，不过我都是钻在屋子里，所以也是感觉很冷的。一回到家我就完全找不到心静...
假期安排 (35)
我已经准备了一整块移动硬盘的游戏准备回家大干一场。我最期待玩生化危机5和GTA4，这几天没事我已经将PPS上的GTA4讲解看了一遍，大概了解了任务过程。生化回家慢慢走剧情。鬼泣...
QQ空间的承载 (3)
何时起，QQ就开始一天天的被挂在屏幕右上角，也没弄清楚为什么要挂在那里。一整天的，也没人Q，也不会去主动给Q，反正还是天天的挂在那里，直到现在，漠然到从来不隐身了，仿...
about qiqiboy 关于这个WordPress博客 (7)
从博客大巴到WordPress已经第三天了，各种问题啥的都解决了，尤其是昨天发现的评论这一块的问题，折磨了一整天终于也顺利解决了。为什么从博客大巴搬到WordPress呢，是...

声明: 本站遵循署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址:http://www.qiqiboy.com/2010/03/01/a-update-about-qiqiboy-com.html

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

2010年03月1日, QiQBoYsay: 自己霸占沙发。。。 :cool:
2010年03月1日, winysay: 域名还是早转出比较好原来主题已经发布了，下载学习下
2010年03月1日, 万戈say: 期待你的那些技术文章啊，等了好久了
2010年03月1日, QiQiBoYsay: @ winy : 哈，悄悄放出好久了，有些问题没解决还没被官方收录。。。。
2010年03月1日, QiQiBoYsay: @ 万戈 : 哈哈，你最近的一系列有关jQuery的更新真看得人眼花缭乱。。。。。另外很期待你自己的主题早日现身。。
2010年03月2日, 柳城say: 那为什么不直接转到name.com 呢~
2010年03月2日, 江流say: 不够年龄？
2010年03月2日, QiQiBoYsay: 因为万网规定域名转出应在域名到期前一个月以上时间内提出申请，而我的域名再有一周就要到期了。。。先续费，过段时间再说吧。。

假期里的最后一博

QiQiBoY — Sun, 21 Feb 2010 22:27:14 +0800

这一假期我没有一天离开过网络，但是博客确实是落下了。

博客评论没有回复，博友的更新也很少去看，即使看了也很少留言。

三十余天来就只更新过一篇文章——《假期里的小无聊》。

今天再来总结一下这个假期，下周就要回到学校了。

假期总是和我想的有所区别，天气太冷，窝在电脑前实在是不想动手去操作键盘鼠标。所以之前说要搞好这个主题（bluePaled），结果回家前提交到官方，被打回来，原因是汉化不全、有的模板不支持评论。虽然是小问题，但是我实在懒得去修改，那段时间真的是天太冷了。所以打算开学了再说吧。

假期里参加了几次同学聚会，较大规模的是初中同学的聚会。那天恰好开始下起了雪，给我们的聚会带来了无限的乐趣。从早上10点一直玩到晚上才离去，期间大家一起吃吃饭，在母校转转，拍照留念，KTV唱唱歌。很愉快的一次记忆。

大年三十前几天下了次不大不小的雪，出去外面转了转，真的是感觉好久没在雪地里玩过了，滑雪、打雪仗，真的是乐趣无穷。从小，就很期待下雪的春节。

前两天还去了我们那里的一个景区玩，具体叫“河南济源市五龙口风景区”，国家级4A景区。里面最有名的当属猕猴了，有几千只猕猴在山上。景区还有温泉，爬山，缆车，观光电梯等，欢迎大家有空来玩。我们那天去爬了景区里的一座山，金鸡岭，海拔二千五百多米。虽说下雪是年前的事了，但是过去了十几天山上的雪都还没化。半山腰以上的雪都还是很厚，一点都没化，而且因为刚过完年，游人少，所以雪都几乎没有被踩踏过。山上景色非常漂亮。爬山很累，但是下山时就比较好玩了，因为有滑道可以坐，非常好玩。如果你幼儿园时喜欢玩滑梯，长大了一定要再感受一下从山上玩滑梯的感觉，周围是巍峨大山，滑道弯曲盘旋直至山底。

在金鸡岭给我最大的印象是天非常蓝，没有一丝云，阳光也很好，在爬山时时而沐浴阳光下，时而进入白雪皑皑的阳光死角处，抬头望天，一丝不染的蓝天。真的是太美了。

不知道今后还有没有这样的机会看到这样的风景。

左边的这张图片是我那天最满意的一张拍摄，毫无PS。

还有什么？这个不温不火的寒假！！

假期里的小无聊 (32)
十天前回来时我草拟了个计划表，不过现在看来，我不能很好的执行这个计划了。虽然天气好，有太阳，不过我都是钻在屋子里，所以也是感觉很冷的。一回到家我就完全找不到心静...
博客的一点小修改 (0)
主要解释一下if语句中的三个条件语句，分别是修订时间与发布时间不一致、当前时间与最后修订时间差在30天之内、修订时间与发布时间差在一个小时以上（刚发布的文章可能会频繁...
一点小更新——qiqiboy.com (29)
假期里刚过完年邮箱里就一直收到万网的域名续费通知，我的这个域名是去年3月七号注册的吧，再有一周就要到期了。面对国内目前急转直下的互联网环境，我有时在想干脆等它掉下...
假期安排 (35)
我已经准备了一整块移动硬盘的游戏准备回家大干一场。我最期待玩生化危机5和GTA4，这几天没事我已经将PPS上的GTA4讲解看了一遍，大概了解了任务过程。生化回家慢慢走剧情。鬼泣...
一个jQuery轮换滚动效果 (32)
这个有什么用？我说几点可以用到的地方，比如你可以调用评论列表，循环展示最新评论；调用最近或随机日志列表，循环展示最新日志；传统的有的人喜欢将列表做成tag切换式，为...

声明: 本站遵循署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址:http://www.qiqiboy.com/2010/02/21/the-last-one-holiday-blog.html

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

2010年02月22日, 万戈say: 这个寒假我都没怎么玩，没劲
2010年02月22日, 陌小晓say: 山上的滑梯看起来真刺激、、
2010年02月22日, 夏影残雪say: 大图大图！！！我要看大图~~~！！！！！额，在我这里看你的post好像有些错位了。雪啊，真羡慕~
2010年02月22日, QiQiBoYsay: @ 万戈 : 唉，其实我寒假玩的也没几天，其余大部份时间也是在无聊中度过。。。
2010年02月22日, QiQiBoYsay: @ 陌小晓 : 玩起来也真的很爽。。。。。 :razz:
2010年02月22日, QiQiBoYsay: @ 夏影残雪 : 唉，身在国内，flickr最近又出问题，也没处放大图。。。居然有错位？算啦，等开学再说吧。。。 :grin:
2010年02月22日, 夏影残雪say: @ QiQiBoY : 怎么都说flickr出问题了？我这里什么问题都没有啊，广东电信。什么时候开学回学校？
2010年02月22日, QiQiBoYsay: @ 夏影残雪 :貌似是flickr的farm3和farm5号服务器上的图片都不能访问了。。。我现在用网通，在学校时用教育网。。。。过完正月十五再回去。。 :grin:

假期里的小无聊

QiQiBoY — Sun, 31 Jan 2010 22:56:11 +0800

放假回来已经十余天，明天就是二月了。正如其名，这是一个很二的月份。农历年要在这个月里过，二！！

今年的天气灰常好，天天都有太阳。不过，我最讨厌年关时天气好了，这真二！

十天前回来时我草拟了个计划表，不过现在看来，我不能很好的执行这个计划了。虽然天气好，有太阳，不过我都是钻在屋子里，所以也是感觉很冷的。一回到家我就完全找不到心静的时刻。我有计划看一点PHP、SQL方面的书，但是可能我没那么好的自觉性了。另外天气对于我来说实在太冷，我在电脑前完全不想伸出手去握鼠标，自然也不想去伸手敲代码。所以，这几天我一直很安静，在看各种电视剧和电影。

提一下我的习惯。每周，我会在周一的时候看《下一站，幸福》和《海派甜心》的最新更新，周四晚上或者周五一早看《火影忍者--疾风传》的动画和漫画的更新，在周六看《终极三国》的最新更新，还有在周二至周六的每天追看《康熙来了》。

现在回到家了，我依然会这个样。只不过，除此之外，我现在还热衷于高清，所以每天12个小时是开着电驴在下高清电影。高清看着爽，但是体积也太大。看完之后立马丢掉舍不得，留着又太占硬盘。往往我会左右为难。

PS：这几天偶尔再看安徽卫视的《幸福一定强》。

——————————————————————————————————————————

这个几天总的来说没有什么事。下周应该会有一个初中同学的聚会。这是我们在04年那个夏天各奔东西五年半之后再次相聚，虽然有些人因为某些原因不能赶回来，但是这此聚会依然令我期待。这些同学在这些年里几乎都没联系过，不知道大家都长成啥样了。我翻出初中毕业照，看着一个个熟悉的脸庞，立马回忆起那些时刻的点滴，不知道五年的时间大家会变化多大。听说，我的一个同桌女生已经结婚了，我记得冬天时和她一起在课桌里点过蜡烛暖手；曾被我踢过一脚的一个男生也在我放假回来的前一周也结婚了，我收到他的邀请了，可惜身在学校没能去成。不知道那天看到他们会是什么样的情景。

我会激动吗？

——By QiQiBoY

假期里的最后一博 (31)
前两天还去了我们那里的一个景区玩，具体叫“河南济源市五龙口风景区”，国家级4A景区。里面最有名的当属猕猴了，有几千只猕猴在山上。景区还有温泉，爬山，缆车，观光电梯等...
假期安排 (35)
我已经准备了一整块移动硬盘的游戏准备回家大干一场。我最期待玩生化危机5和GTA4，这几天没事我已经将PPS上的GTA4讲解看了一遍，大概了解了任务过程。生化回家慢慢走剧情。鬼泣...
一点小更新——qiqiboy.com (29)
假期里刚过完年邮箱里就一直收到万网的域名续费通知，我的这个域名是去年3月七号注册的吧，再有一周就要到期了。面对国内目前急转直下的互联网环境，我有时在想干脆等它掉下...

声明: 本站遵循署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址:http://www.qiqiboy.com/2010/01/31/small-holiday-boredom.html

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

2010年02月1日, Noxsay: 把沙发坐了，才是王道。
2010年02月1日, edikudsay: :grin: 天现在不是很冷了，我来这占一位。
2010年02月1日, 先看看say: 天气好真好呢，我这里也一样
2010年02月1日, Zenoven自由人say: 我也是在家很懒的。。。。 :cool:
2010年02月1日, zwwooooosay: 最近我这暖和的很，2x度，嘿嘿
2010年02月1日, Firmsay: 俺也在看这部也。
2010年02月1日, 江流say: 同样周二到周六看康熙
2010年02月1日, evlossay: 呵呵，十月围城和刺陵都看了吗？

假期安排

QiQiBoY — Wed, 20 Jan 2010 19:02:43 +0800

明天就要回家，为了玩的充分，玩的尽兴，玩的不遗憾，有必要稍微安排一下。

1月21号	打道回府；
1月22号~28号	机动时间，忙各种屁事、。。。
1月29号~30号	初中同学相聚
1月31号~2月3号	。。。
2月4号~2月7号	。。。
2月8号~2月12号	。。。
2月13号~2月16号	。。。
2月13号	除夕
2月14号	正月初一
2月17号到2月26号	。。。）
2月27号	踏上回校旅途

当然，游戏之余的空闲时间还是要献给吃饭、睡觉、WordPress、PHP、JavaScript、博客以及各种腐败聚会。

——————————————————————————————————————

PS：刚才发现一篇上周写的的一篇预发布文章到点发布了，我又给打回了，临时写了这篇给换上。应该不会有人看到吧。。。，google过来索引了发现没了它会不会发毛。。。呵呵。。

——By QiQiBoY

假期里的小无聊 (32)
十天前回来时我草拟了个计划表，不过现在看来，我不能很好的执行这个计划了。虽然天气好，有太阳，不过我都是钻在屋子里，所以也是感觉很冷的。一回到家我就完全找不到心静...
一点小更新——qiqiboy.com (29)
假期里刚过完年邮箱里就一直收到万网的域名续费通知，我的这个域名是去年3月七号注册的吧，再有一周就要到期了。面对国内目前急转直下的互联网环境，我有时在想干脆等它掉下...
假期里的最后一博 (31)
前两天还去了我们那里的一个景区玩，具体叫“河南济源市五龙口风景区”，国家级4A景区。里面最有名的当属猕猴了，有几千只猕猴在山上。景区还有温泉，爬山，缆车，观光电梯等...

声明: 本站遵循署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址:http://www.qiqiboy.com/2010/01/20/holiday-arrangements-2010.html

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

2010年01月20日, Auston Jarysay: 真够详细的啊我就几乎没做过计划. 有计划也没什么作用...
2010年01月20日, 万戈say: 居然打游戏也这么有安排！！！
2010年01月20日, 阿吴say: 呵呵，假期安排都已经出炉了
2010年01月20日, QiQiBoYsay: @ Auston Jary : 要是我家人看到了我这计划一定会说，你这计划，还不如没有。。
2010年01月20日, QiQiBoYsay: @ 万戈 : 因为这些游戏都是憋了大半年没玩的，都很想玩，所以要安排一下，假期里都把他们搞一遍。。
2010年01月20日, QiQiBoYsay: @ 阿吴 : 哈哈，因为明天就要回家了。。。 :???:
2010年01月21日, evlossay: 汗，盆友你博客没事儿吧？怎么一来是裸奔的样子？？！！
2010年01月21日, QiQiBoYsay: @ evlos : 邮件截图看到了。。缺少css。。。。 :lol:

WordPress主循环控制——精确控制文章列表

QiQiBoY — Wed, 13 Jan 2010 19:50:00 +0800

写在开头：

这几天真是风波不断，先是昨天百度被黑，今天谷歌又宣布可能永久退出中国。但是我没闲着，昨天把主题代码整理了一下，又制作了中文语言包，接下来可能会考虑往官方提交。今天又给前几日建的一个bbpress制作了一个简单的主题，主要是和我的博客相配。然后对这个bbpress和我的WordPress博客进行了数据库整合、cookie共享。

+++++++++++++++++++++++++++++++++++++++++++++++

因为时常有人在加我QQ说有问题问我，久而久之我的QQ上就有了一大批陌生人，因为问过问题之后我们就几乎不会再联系。所以我就想建个bbpress，如果你有一些小问题什么的，尽量不要加我QQ了，可以直接在我博客提问，或者也可以到这个小型的讨论区来发帖询问。

+++++++++++++++++++++++++++++++++++++++++++++++

博客评论字数什么的有限制，bbpress则比博客的评论宽松许多。不过，在bbpress提问，需要先注册一下。注册了之后这个账号就可以横行这个bbpress和我的博客，在www.qiqiboy.com和bb.qiqiboy.com都可以登录。在bbpress登陆后再访问我的博客就依然是登陆状态。登陆之后你就不必再输入姓名，邮件之类，直接就可以发表评论，而且没有一丝广告，和我登陆后看到的情形一样的。

传送：QiQiBoY’S BB

有相当一部分人还不了解bbpress吧，可以看维基百科的解释。bbPress

就像你们看到的http://www.qiqiboy.com/blog，这个页面第二篇和第三篇日志下方有广告，而其他日志都没有。还有情况下，我们想要单独设置每一篇文章的展示形式，这种情况下如何实现？

一种方法是单独请求每篇文章数据，另一种就是用一个循环标识数字来控制。第一种方法麻烦，不是特殊情况下用不到，第二种方法则可能会经常用到。比如，添加广告，控制第X篇文章的标题、tag、category，甚至前半部分与后半部分文章输出内容格式的不同（摘要与截断）等。

   1: <?php $count = 1; ?>
   2: <?php if(have_posts()) : ?><?php while (have_posts()) : the_post(); ?>

使用方法就是在主循环开始前加上一个$count = 1; 变量。然后在循环主体中，想要改变第n篇文章的不同则在循环部分前面加上

<?php if ($count == n) : ?>
//你的代码
<?php endif;$count++; ?>

所谓循环部分就是常规文章的格式定义。代码中$count=1是第一篇文章，其它文章更改相应编号即可。后面的$count++是让每次循环变量$count的值自加1.

我说的可能不够明白，那么举一个例子，如页面八篇文章，要让前三篇显示more截断，后面五篇只显示标题。可以这么做：

<?php if (have_posts()) : $count=1;while (have_posts()) : the_post(); ?>
  
    <div <?php post_class(); ?> id="post-<?php the_ID(); ?>">
        <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
        <small><?php the_time(__('F jS, Y')) ?></small>
        <?php if($count == ( 1 || 2 || 3 ) : ?>
        <div class="entry">
            <?php the_content(__('Read more &raquo;')); ?>
        </div>
        <?php endif;$count++; ?>
    </div>
  
<?php endwhile;endif; ?>

将more截断输出内容包含在if语句中，所以只有前三篇会显示more截断内容，后面的都不会显示了，只剩下标题和发表时间。如果你有其他需要，例如让前三篇的标题和后五篇不一样，那你可以在标题循环前，即<h2>标签前面加上if判断定义前三篇的标题。注意不要加到<h2>标签后，因为网页解析是从上自下，加载后面会不起效。

实际应用例子可看本站blog页面的广告位。还有许多CMS模板，文章模块一般都是只显示首篇文章摘要，也应该是这么做的的。mg12的现在的模板首页，之前是完全动态加载，现在为了seo也改成了前三篇直接输出内容，后面的才动态加载。没问过他，但是我想他也大概是这么做的。

我觉得这个还是很有用的一个小技巧，很简单，很实用。

——By QiQiBoY

一个首页不应该缺少的两项功能：置顶+日志预告 (35)
例子中对于置顶文章添加了一个class属性 stickytitle ，同时标题前面加上了“[置顶]”表示文字。你不需要关注如何使置顶文章显示在其它文章前面，因为你使用WP默认的主循环它就会自...
博客的一点小修改 (0)
主要解释一下if语句中的三个条件语句，分别是修订时间与发布时间不一致、当前时间与最后修订时间差在30天之内、修订时间与发布时间差在一个小时以上（刚发布的文章可能会频繁...
WordPress自动获取+调用页面主循环日志中的图片 (22)
这里我定义了一个get_post_excerpt_img()函数，然后定义全局变量$post，这个其实是WP内置的一个对象了。通过匹配正则表达式来匹配所需图片。这里注意，我用$post->post_excerpt是匹配摘要...
新版CMS简式首页上线测试ing…… (37)
但最让我苦恼的是，做CMS我不能本地测试，因为需要很多文章，很多分类，标签，等等。CMS首页许多小块分布用来放文章，但是我本地搭建的那个WP根本没那么多文章让我用来测试，如...
Introduce My Blog Theme For You (28)
以前我博客设在博客大巴时，每次做完Theme，我都会很有兴趣的发篇文介绍一下新Theme的特点。现在用WordPress也已经两个月了，刚好现在用的这个theme基本上做完了。又没啥可写的，就...

声明: 本站遵循署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址:http://www.qiqiboy.com/2010/01/13/wordpress-main-loop-control-precise-control-list-of-articles.html

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

2010年01月13日, 北街say: 传说中的沙发么？一定好好学习！ :cool:
2010年01月13日, 江流say: 暂时没广告没人要广告位
2010年01月13日, 万戈say: 你折腾的层次果然要比我高好多呀，佩服
2010年01月13日, QiQiBoYsay: @ 北街 : 呵呵，是沙发，坐着晒太阳吧。。
2010年01月13日, QiQiBoYsay: @ 江流 : 没广告好啊。。清爽。。
2010年01月13日, QiQiBoYsay: @ 万戈 : 呵呵，过奖。。一般般啦。。 :razz:
2010年01月13日, Raysay: 向qiqiboy学习，不断的折腾
2010年01月13日, Zenoven自由人say: 弄的不错。。。不过感觉这主题速度好像有点慢，是不是效果太多了？

一个首页不应该缺少的两项功能：置顶+日志预告

QiQiBoY — Fri, 08 Jan 2010 17:30:00 +0800

或者说，我是如何展示我的博客首页的。

首页是很重要的，它担负着向访客展示网站重要内容，页面导航的作用。对于WP来说，非cms首页一般都是在首页展示最新日志，以列表形式呈现。我们还要考虑seo，像http://www.qiqiboy.com/blog这样的列表形式就会很不利于seo，因为搜索引擎只能抓取文本文字，这样动态加载的列表形式是不能为爬虫正常访问的，所以只能抓取到文章标题。这还不是我要说的，我想说的是，对于WordPress来说，一个首页应该包括的基本内容，不知道其它作主题的人有没考虑到。

第一是文章置顶功能，早期的WP需要插件来实现，但是现在WP在2.7以后都已经内置支持了。所以首页应该有支持置顶文章。如何支持呢？如果是在页面主循环中，要保持置顶文章与其它文章的样式不同，则只需用is_sticky()函数判断，即在主循环

   1: <?php while (have_posts()) : the_post(); ?>

后添加

<?php if(is_sticky()) { ?>
//你的样式
<?php } ?>

在{}中单独定义对置顶文章的样式设定，如标题颜色，如何显示内容（摘要，more截断，全文）等。

一个简单列子

<?php if(have_posts()) : ?><?php while (have_posts()) : the_post(); ?> 
        <div class="post" id="post-<?php the_ID(); ?>">
        <?php if(is_sticky()) : ?>
        <h2><?php _e('[置顶]'); ?><a class="title stickytitle" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
        <?php else : ?>
        <h2><a class="title" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></h2>
        <?php endif; ?>//结束置顶判断
        <?php the_content('Read more...'); ?>
        </div>
<?php endwhile; ?><?php endif; ?> 

例子中对于置顶文章添加了一个class属性 stickytitle ，同时标题前面加上了“[置顶]”表示文字。你不需要关注如何使置顶文章显示在其它文章前面，因为你使用WP默认的主循环它就会自动将置顶文章显示在其它文章前面。

但是，对于有些时候，我们需要将置顶文章显示在页面主循环之外其它位置，不在主循环中展示，这是怎么办？即如何将置顶文章在他处调用？可以用query_posts函数，这个会改写并取代页面的主查询。get_option(’sticky_posts’)参数返回所有置顶文章的数组形式。

   1: <?php query_posts(array('post__in'=>get_option('sticky_posts'))); ?>

在置顶文章的循环前加上这个，就会只返回置顶文章了。然后剩下的文章，如果要排除指定的文章，则可以在这些文章的循环前加上

   1: <?php query_posts('caller_get_posts=1'); ?>

排除置顶文章。即页面上两处循环，置顶文章循环前加置顶调用参数，其他文章循环前加上面的代码。

说完置顶，还有一个功能我觉得也是不可少的，那就是文章预告功能。即你在后台设定了一篇文章在某个时间自动发布，在首页显示这篇文章的发布信息。如何使用呢，只需新建WP_Query对象查询即可。

<?php $my_query = new WP_Query('post_status=future&amp;order=ASC'); ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; ?>
//你的循环
<?php endwhile; ?>

这样就可以将预定时间发布的文章的信息调用了。你可以参考主循环，对标题日期等进行样式设定，还可以设置是否显示内容摘要等。

————————————————分割线————————————————————

我是如何处理置顶、文章预告与自然文章的？

在传统的列表形式首页(http://www.qiqiboy.com/blog)，我是将文章预告与站内公告，搜索引擎访客提示等结合在一起的，文章预告会以标题列表形式在站内公告栏处显示。置顶文章则会在标题前加上 [置顶] 标识.对于我刚做的CMS式首页，则将置顶文章、预告文章与主循环与次级循环结合起来，没有置顶和预告文章时，slideshow右边显示最新发布的一篇文章的标题、日期、评论数即截断一定字数的摘要或日志内容，下方的五篇文章则是排除了这篇文章的最近五篇文章。如果有置顶或预告文章，则会在这儿显示置顶或预告的文章。同时，下方的五篇最近日志则只会排除置顶文章（预告文章无需排除）显示最新的文章。

——By QiQiBoY

WordPress主循环控制——精确控制文章列表 (41)
将more截断输出内容包含在if语句中，所以只有前三篇会显示more截断内容，后面的都不会显示了，只剩下标题和发表时间。如果你有其他需要，例如让前三篇的标题和后五篇不一样，那...
Introduce My Blog Theme For You (28)
以前我博客设在博客大巴时，每次做完Theme，我都会很有兴趣的发篇文介绍一下新Theme的特点。现在用WordPress也已经两个月了，刚好现在用的这个theme基本上做完了。又没啥可写的，就...
就用这个主题了，不换回老主题了。( ⊙o⊙?) (39)
当我看关了这款色彩鲜艳的主题，再切换回老版本主题时，视觉上的落差让我实在无法接受那灰蒙蒙的界面。虽说可以给它换副搭色，但是我其实是想试试嵌套...
博客的一点小修改 (0)
主要解释一下if语句中的三个条件语句，分别是修订时间与发布时间不一致、当前时间与最后修订时间差在30天之内、修订时间与发布时间差在一个小时以上（刚发布的文章可能会频繁...
WordPress自动获取+调用页面主循环日志中的图片 (22)
这里我定义了一个get_post_excerpt_img()函数，然后定义全局变量$post，这个其实是WP内置的一个对象了。通过匹配正则表达式来匹配所需图片。这里注意，我用$post->post_excerpt是匹配摘要...

声明: 本站遵循署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址:http://www.qiqiboy.com/2010/01/08/a-home-page-need-the-things.html

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

2010年01月8日, Zenoven自由人say: 嗯，很不错~~ 我都没咋细想这些东西
2010年01月8日, 北街say: 分析的不错，貌似现在很流行文章中的广告方式哦！
2010年01月8日, 江流say: 我也觉得wp默认的封顶不够好，这个实用。
2010年01月9日, A.shunsay: 置顶我偶尔会用至于预告嘛，很多时候我不知道下一篇文章是什么
2010年01月9日, smigoosay: 置顶会让我觉得没更新...........
2010年01月9日, QiQiBoYsay: @ Zenoven自由人 : 用不到置顶功能的话一般是不会想这些东西 :lol: 的。。。
2010年01月9日, QiQiBoYsay: @ 北街 : 是的，我是跟风才在文章中加入的。。。
2010年01月9日, QiQiBoYsay: @ 江流 : 是置顶吧。。一说到封顶。。我就想起促销广告了。。。放血大甩卖。。。XXX元封顶。。。 :shock:

WordPress自动获取+调用页面主循环日志中的图片

QiQiBoY — Mon, 04 Jan 2010 12:54:00 +0800

在做新主页时由于在首页放了一个slideshow循环展示最新日志中的图片。如何让它自动添加图片成了一个问题。要添加图片首先就要从日志中获取图片，这一点上网搜了一下，发现还真不少，不过介绍的都是如何获取图片作为缩略图之类。不过我们可以将代码稍微改造一下。

不得不说，网上资源很丰富，但是很多人都是抄来抄去。我找的这段代码是从一个我之前以为应该说技术很硬的人那里淘来的，但是我发现此人也只是照抄这段代码，根本就没试验，因为这段代码根本就是错误的。正则表达式的书写就不正确，而且好多无关变量。可能我太相信这人了，我一直以为是我自己的错误，后来仔细看了代码，才发现原来正则表达式错误了。这个先放下，我们看代码。

首先是获取日志循环中的图片，我习惯写函数，然后再调用，当然，也可以直接调用这段代码，看自己喜好。

function get_post_excerpt_img() {
        global $post;
        $the_img = '';
        preg_match_all('/<img.+src=/<img.+src=[^>]+>/i', $post->post_excerpt, $matches);
        $the_img = $matches [0] [0];
        if(empty($the_img)){
        return    $the_img=1;    
        }else{
        return '<a href="'.get_permalink().'" title="'.$post->post_title.'">'.$the_img.'</a>';
        }
}

这里我定义了一个get_post_excerpt_img()函数，然后定义全局变量$post，这个其实是WP内置的一个对象了。通过匹配正则表达式来匹配所需图片。这里注意，我用$post->post_excerpt是匹配摘要，因为我摘要里一般都有图片，文章内容却不一定会有。你不习惯写摘要，可以用$post->post_content。匹配结果是存入数组的，所以我们只需取第一张图片即可。然后是条件判断，如果没有获取到图片，变量$the_img=1。这里$the_img只需随便赋个值即可，是为了方便后面调用时判断，当然，不赋值也是可以的。如果成功取得图片，返回结果，包括这篇日志的url，title，你可以根据自己情况自定义格式，比如只输出图片。

既然已经取得了图片，然后就是输出了，在模板的循环部分，找到这段代码

   1: <?php if(have_posts()) : ?><?php while (have_posts()) : the_post(); ?>

在它上方添加：

   1: <?php $num=1; ?>

在它下方添加：

   1: <?php $img[$num++]=get_post_excerpt_img(); ?>

即我们是将循环获取的图片存入一组数组$img中。

然后就是调用了，只需用

   1: <?php echo $img[1]; ?>

即可调用第一张图片。同理 <?php echo $img[2]; ?>即调用第二张图片。

当然，以上情况限于你的日志中一定有图片，一定可以获取到图片。如果你某一篇日志中没有配图，就会无法输出。这时，我们就可以用条件判断，因为在函数中我们定义了没有获取到图片时，就传递给返回变量一个值$the_img=1；所以我们可以用

   1: <?php $num=1;if ($img[$num] !== 1) {echo $img[$num];$num++;}else{$num++;if()...}?>

将这个条件判断循环使用就OK了。如果你真的图片是隔三差五的日志中才有一篇，还是用while条件判断吧。这个意思就是如果函数返回值为不为1，即取得了图片，就输出，然后将$num变量加1；如果函数返回值是1，则先加1，再次判断。依次。。。

注意，因为调用函数是写在页面循环中的，所以数组中存入的图片数量跟你设置的页面显示文章数量有关。如果你设置首页显示10篇文章，就会从10篇文章中获取图片，并存入一个长度为10的数组中。设置显示五篇就是得到长度为5的数组。

OK了，有问题可留言讨论。

——By QiQiBoY

博客的一点小修改 (0)
主要解释一下if语句中的三个条件语句，分别是修订时间与发布时间不一致、当前时间与最后修订时间差在30天之内、修订时间与发布时间差在一个小时以上（刚发布的文章可能会频繁...
WordPress主循环控制——精确控制文章列表 (41)
将more截断输出内容包含在if语句中，所以只有前三篇会显示more截断内容，后面的都不会显示了，只剩下标题和发表时间。如果你有其他需要，例如让前三篇的标题和后五篇不一样，那...
一个首页不应该缺少的两项功能：置顶+日志预告 (35)
例子中对于置顶文章添加了一个class属性 stickytitle ，同时标题前面加上了“[置顶]”表示文字。你不需要关注如何使置顶文章显示在其它文章前面，因为你使用WP默认的主循环它就会自...
给搜索引擎来源访客的订阅提示 (8)
1: <?php 2: function sech(){ 3: $ref = $_SERVER['HTTP_REFERER']; //取得来源网址 4: $so = array(’.google.’, ‘.bing.’, ‘.yahoo.’, ‘.baidu.’, ‘.soso.’); 5: foreach ($s...
WordPress评论列表链接新窗口打开 (1)
发现有的板子在评论列表这一块，点击评论人的名字，会直接在本窗口中跳转到目标链接，而此时浏览者却不一定是真正要终止此处访问，所以有必要让这个链接在新窗口中打开。其...

声明: 本站遵循署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址:http://www.qiqiboy.com/2010/01/04/wordpress-get-the-new-post-pictures.html

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

2010年01月4日, 阿吴say: 效果不错
2010年01月4日, 秦大少say: 赞一个，最不喜欢的就是那些自己没用过就照搬的人，往往误导一大片！
2010年01月4日, 娱乐博客say: 这费了不少心思吧。
2010年01月4日, hfantasysay: 还好我不上你首页，不然指不定死机。记得来我哪里玩玩~
2010年01月4日, Zenoven自由人say: :smile: 不错。。。不过我看不懂。。。过寒假了好好看看PHP JS
2010年01月4日, QiQiBoYsay: @ hfantasy : 哈，要是我的首页这么厉害，那可比病毒啥玩意儿强多了。。。
2010年01月4日, evlossay: 灰常好的思路，嘿嘿嘿嘿，小邪也最喜欢写函数了 ~ 话说，在函数里mysql_query是不是要把$db = mysql_connect('','','')这个变量 ~ 给 global $db ~ 有没有这个需要？小邪最近有点糊涂 ~
2010年01月4日, A.shunsay: 强悍的效果不过你这应该要考虑下速度了圣诞老人原来不是回到主页，而是随机文章- -

新版CMS简式首页上线测试ing……

QiQiBoY — Sat, 02 Jan 2010 12:37:28 +0800

在网上有人问我，你怎么不也写写年终总结，新年展望之类的东西？因为我觉得这些都是虚的，总结的再好，计划的再棒，对我来说都是没啥用的。

新年第一天，我没出去，中午起床后，琢磨了一阵，开始想做一个完全不同的首页。画了半天，完全弄不出一个成型的东西出来。只好网上乱逛找灵感，不是没有我满意的就是美工要求太高的。最后决定还是就这现在这个模板改吧。晚上时终于做好了。一个小CMS布局的首页终于出炉啦。

以前没做过CMS式的主题，之前以为就是页面上多几个循环而已。做了以后才知道，循环好搞，保持取得的文章样式的统一可不是简单的事。因为不同文章的标题长度不一，标签，分类，摘要长度（因为我喜欢用摘要，都是自定义摘要，所以长度什么的都不一样）。获取文章列表后还要对标题，摘要进行一番截断，以保持样式。

但最让我苦恼的是，做CMS我不能本地测试，因为需要很多文章，很多分类，标签，等等。CMS首页许多小块分布用来放文章，但是我本地搭建的那个WP根本没那么多文章让我用来测试，如果要一篇一篇的写，会更费事，因为要照顾到不同的情况：标题长度要有长有短；标签要有的有，有的无；文章内容有带图片，有不带图片的；有写了摘要的，有没写摘要的；摘要里有图片的，有没带图片的。。。等等情况。而且因为我要动态获取文章摘要中的图片，以sildeshow形式在首页巡回滚动，所以必须要摘要里带图片的几篇日志。如果要一下子写这么多文章满足测试需要，那我一天就在那里写文章得了。所以，我改一点代码，就要上传服务器上测试一下，非常麻烦。昨天下午有访问我博客的，可能会发现有些地方出现很多错误，就是因为我在后台改动所致。

现在这个首页主要分为四大块：导航菜单下方的slideshow区域和它右边的最新一篇日志展示模块；slideshow下方的五篇最近日志；再往下的分类日志模块；最后是右边的一个小边栏。

其实我有心将CMS做到底，就像个门户网站之类，但是我发现我完全做不来，不是因为技术上，是因为我没有那么多日志文章可显示（也就二三十篇吧，不包括之前博客大巴写的）。现在下面的四个分类日志已经是极限了。因为我用WP没多久，没累积多少值得别人一读的文章，如果按分类展示一部分，按标签再展示一部分文章的，结果，发现。。。。文章不够，不然就重复太多了。于是放弃了。所以就有了现在这个简化版的CMS了。

当然，之前的那个Ajax动态加载式首页还可以通过http://www.qiqiboy.com/blog访问。今天我查了一下百度首页快照，发现是2010.1.1，哎，百度又正常收录我首页了，我又在这节骨眼上换首页了！！

说到搜索引擎，我不得不抱怨一下google了，年末了绝大部分人的都升PR了，我的依然没变，还是PR=2，真成了千年老二了。我不记得这个2已经跟了我多久了，最少也八九个月了。。。。。年末许多人的都升到4了，我估计这段时间应该是pr>3的站最多的时候。谁知道年后google下一次更新会不会再把pr给要回来。。。。

还有，我发现WP不知道怎么回事，我通过is_front_page()这个函数判断首页，结果发现只在head.php中有效，而且只可以用两次。我测试了一下，用这个函数，在其他页面任何位置（footer或首页模板中）都只会返回FALSE。只有加在header中有效。诡异的是我将这个判断函数重复了三遍写在header中，结果只有前两次返回true！！！绝对没写错，我复制的。WP对这个函数的定义是

function is_front_page () {
if ( 'posts' == get_option('show_on_front') && is_home() )
return true;
elseif ( 'page' == get_option('show_on_front') && get_option('page_on_front') && is_page(get_option('page_on_front')) )
return true;
else
return false;
}

关于is_front_page()和is_home()的区别，请自行查看官方文档。

‘posts’ == get_option(’show_on_front’) 是后台设置最新日志为首页。’page’ == get_option(’show_on_front’) 是后台设置某个页面为首页。我就是后台将应用这个cms模板的页面设为了首页，按说应该都返回true的。但是这个函数貌似出来问题。用起来有点乱。而且我的后台设置判断函数也都失效了。很奇怪的问题。

这个不管了，影响不大。

最后还请大家对这个首页给点意见，当然，我知道页面很丑，很简陋，我美工很差的，所以看起来有些乱。

补充：这个首页以模板形式发布，即将来我这个主题发布后可选择应用Ajax动态加载式首页，或用此CMS首页。使用cms首页只需编辑这个模板去掉 Template Name: CMSHome这一行注释，然后将它命名为index.php，替换原来的即可。

——By QiQiBoY

WordPress主循环控制——精确控制文章列表 (41)
将more截断输出内容包含在if语句中，所以只有前三篇会显示more截断内容，后面的都不会显示了，只剩下标题和发表时间。如果你有其他需要，例如让前三篇的标题和后五篇不一样，那...
一个首页不应该缺少的两项功能：置顶+日志预告 (35)
例子中对于置顶文章添加了一个class属性 stickytitle ，同时标题前面加上了“[置顶]”表示文字。你不需要关注如何使置顶文章显示在其它文章前面，因为你使用WP默认的主循环它就会自...
就用这个主题了，不换回老主题了。( ⊙o⊙?) (39)
当我看关了这款色彩鲜艳的主题，再切换回老版本主题时，视觉上的落差让我实在无法接受那灰蒙蒙的界面。虽说可以给它换副搭色，但是我其实是想试试嵌套...
博客的一点小修改 (0)
主要解释一下if语句中的三个条件语句，分别是修订时间与发布时间不一致、当前时间与最后修订时间差在30天之内、修订时间与发布时间差在一个小时以上（刚发布的文章可能会频繁...
WordPress自动获取+调用页面主循环日志中的图片 (22)
这里我定义了一个get_post_excerpt_img()函数，然后定义全局变量$post，这个其实是WP内置的一个对象了。通过匹配正则表达式来匹配所需图片。这里注意，我用$post->post_excerpt是匹配摘要...

声明: 本站遵循署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址:http://www.qiqiboy.com/2010/01/02/the-new-home-page-cms-go.html

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

2010年01月2日, Noxsay: 传说中的沙发么，不错不错，现在这个首页看起来很赞，Nox也很想弄个这样的主题，但是水平实在是有限啊。。 :cool:
2010年01月2日, Noxsay: 强烈建议把CMS页文章下面的相关文章去掉，看着有点乱，另外，还有最新评论，一行一行的显示，更好，把字数缩短点。
2010年01月2日, hfantasysay: 你不说，我还真不记得你的首页长什么样~
2010年01月2日, QiQiBoYsay: 首页没有相关文章呀，日志内页才有啊。。
2010年01月2日, 阿吴say: 你把自己博客的数据下载下来，导入到本地的WP，就可以测试了。
2010年01月2日, Noxsay: @ QiQiBoY : 幻觉，纯属幻觉，刚刚看错了，嘿嘿。
2010年01月2日, 吓我一跳say: 很好很强大
2010年01月2日, A.shunsay: 每次，计划重要，执行力度更重要。我的pr也没变，别太在意

Email输入框处实时显示gravatar头像+email验证+动态信息提醒

QiQiBoY — Wed, 30 Dec 2009 17:30:00 +0800

不知道有没有人发现，我的评论输入框处最近几天和一周前有了些许改变。之前只有老访客（发表过评论，浏览器中保存有cookie）来时资料输入框会显示头像，并会折叠起来。但是现在即使新访客第一次来，也会看到一个显示gravatar头像的小区域，当然，默认它显示的是“神秘人头像”。这是干什么的？

答案：这是一个实时预览自己Gravatar头像的，当你输入自己email后就会在这里实时显示你的头像！当然，这个想法冒出时我网上搜索了一下，还真有人搞过，你可以百度搜索“实时显示gravatar”，别人介绍有很简单的实现方法。本文最下面也有我写的jQuery代码，一行搞定！！但我下面的js代码结合了其它功能，不光显示email头像，还结合了实时显示输入名字，提示文字，email验证检测等小功能。

我这里代码比较啰嗦，因为我要照顾两种情况，一种是老访客，即访问时折叠显示资料框，还有隐藏/显示按钮，另一种新访客正常显示资料输入框。这两种的提示文字也不一样，比如老访客显示welcome back，新访客你就不能这样问候他们了。另外资料输入框中还有提示文字“your email””your name”等文字，是受到搜索框中添加提示文字启发，给资料输入框也加入了提示文字。因为我不想动以前的代码，所以为了不破坏这种效果，也要考虑到这一点。

我的comments.php中资料输入处代码：

<div id="real-avatar" class="comment-avatar">//定义头像显示位置
<?php echo get_avatar($useremail,'32'); ?>//用WP内置函数取得头像，，如果你用常规的avatar头像获取url样式，并定义其一个ID，下面的js代码会简单很多，不过我更喜欢WP默认函数调用。
</div>
<div id="welcome"> //这个是显示问候语的
/*老访客显示welcome back 用户名*/
<?php if(isset($_COOKIE['comment_author_email_'.COOKIEHASH]) && isset($_COOKIE['comment_author_'.COOKIEHASH])) { ?>
<?php printf(__('<span id="commentwelcome">Welcome back </span><strong><span id="author-name">%s</span></strong>. '), $comment_author) ?>
<?php } else { ?>
/*新访客则显示一段我自定义的文字*/
<?php printf(__('<span id="commentwelcome1">Hi, I know you have something to tell me. Please leave me a reply</span><strong><span id="author-name">%s</span></strong>. '), $comment_author) ?></div><?php endif; ?>
<?php } ?></div>
/*请注意这两种不同定义中的commentwelcome和commentwelcome1，我的js代码中靠判断这两值的有无来区别老访客和新访客的*/

当然，我这里贴的是大概结构，有一些我省去了，这里只是为了让你更能理解下面我的js代码为何要写那么麻烦。

下面是我写的JavaScript代码（为什么不用jQuery呢，嗯，我也写了jQuery代码，但是发现只是取得对象时简单了，但是下面这段代码麻烦在情况判断上，并不能减少多少工作量，而且我好久没写过原生JavaScript，怕再不用就忘光了），比较繁琐，如果你只是想要实现实时显示头像，则不必看了，只需网上搜一下别人写的即可，但是他们的都是转载一个叫冰古的人的，他的代码调用gravatar头像那里有些问题；如果也想要兼容你的原来的折叠资料输入框，我的代码你可以参考一下。写的很繁琐，因为照顾到两种不同样式，以及不破坏之前的输入框提示文字，还要动态改变头像右边的文字，真的很麻烦。

这段代码包括了email验证，url自动加上http://，动态判断不同情况显示不同问候语等。注意其中的MD5()函数是调用我网上找的一个给字符串MD5加密函数，你需要网上找一下，因为这个网上也很多，我就不贴了。

JavaScript代码：

<script type="text/javascript">
//声明所需变量
var real_avatar = document.getElementById("real-avatar");
/*因为用WP的默认函数get_avatar()获取的avatar头像，所以这里只能这样取得头像，先获取ID，再取得此容器下img数组的第一个，即取得了avatar头像*/
var chang_avatar = real_avatar.getElementsByTagName("img")[0];
var an = document.getElementById("author-name");
var welcome = document.getElementById("commentwelcome");
var welcome1 = document.getElementById("commentwelcome1");
var email = document.getElementById("email");//取得Email输入框
var author = document.getElementById("author");//作者输入框
var httpurl = document.getElementById("url");//网址输入框
//定义触发动作，当失去焦点时触发函数
author.onblur = changAuthor;
email.onblur = changeAvatar;
httpurl.onblur = setHttp;
  
function changeAvatar() {//定义改变头像函数
    email_value = email.value.toLowerCase();//取得email值并转为小写（大小写md5值不一样，gravatar是用小写email MD5值验证头像的，如果输入大写，则不会正确匹配头像）
    email_md5 = MD5(email_value);//这里是将email值转为MD5，这里还需要一个转MD5函数，这里就不贴了，网上有。
    reMail = /^(?:[a-zA-Z0-9]+[_\-\+\.]?)*[a-zA-Z0-9]+@(?:([a-zA-Z0-9]+[_\-]?)*[a-zA-Z0-9]+\.)+([a-zA-Z]{2,})+$/; //email验证正则表达式
    test_email_value = reMail.test(email_value);//验证email值，返回值为true或false
    //定义获取gravatar头像的url，这里包括了大小和等级，还有默认图片
    new_ga = "http://www.gravatar.com/avatar.php?gravatar_id=" + email_md5 + "&size=32&d=identicon&r=G&default=http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=32";
    if (email_value != "") {//如果email输入框不为空
        email.className = email.className.replace(" searchtip", "");//这里是去除email输入框的seachtip属性
        if (test_email_value) {//email验证通过，输入的是一个正确的email
            chang_avatar.setAttribute('src', new_ga);//将头像地址重设为匹配此email的avatar头像地址
            document.getElementById("submit").disabled=false;//将提交按钮禁用属性去除
            //接下来是判断作者输入框值，显示提示文字
            if (author.value == "Your Name"){//如果输入框为提示文字 Your Name
                if (welcome) {//如果是老用户，即浏览器中有cookie，有折叠隐藏资料输入框按钮的
                    welcome.innerHTML = "Please input your name"//将提示文字设置为“Please input your name”
                } else {//第一次访问用户
                    welcome1.innerHTML = "Please input your name"
                }
            } else {//作者输入框值如果不为“Your Name”，即输入了用户名
                if (welcome) {//老访客显示 welcome
                    welcome.innerHTML = "Welcome back ";
                    an.innerHTML = author_name;//访客名字处显示作者输入框处值
                } else {
                    welcome1.innerHTML = "Thank you, ";//新访客显示“thank you”
                    an.innerHTML = author_name;
                }
            }
        } else {//如果email验证失败
        document.getElementById("submit").disabled=true;//将提交按钮禁用
            if (welcome) {//这里还是区分老访客和新访客
                if (author.value == "Your Name") {//再次判断作者输入框值
                    welcome.innerHTML = "Please input your name and a right email";//提醒输入名字和一个正确的email
                } else {//作者输入框有内容且不为Your Name，则只提醒输入正确email
                    welcome.innerHTML = "Please input a right email ";
                }
            } else {//这里是新访客显示内容
                if (author.value == "Your Name") {
                    welcome1.innerHTML = "Please input your name and a right email";
                } else {
                    welcome1.innerHTML = "Please input a right email, ";
                }
            }
        }
    } else {//如果email输入框为空
        email.className += " searchtip";//添加searchtip属性，方便css定义提示文字颜色
        email.value = "Your Email"//将email值设置为提示文字 Your Email
    }
}
  
function changAuthor() {//更改作者名字函数
    author_name = author.value;//定义作者输入框的值
    if (author_name != "") {//如果输入框不为空
        author.className = author.className.replace(" searchtip", "");//同上面那个改变avatar函数，这里去除输入框的searchtip属性
        if (welcome && test_email_value) {//若果验证通过email
            welcome.innerHTML = "Welcome back "
        } else if (welcome1 && test_email_value) {
            welcome1.innerHTML = "Thank you, "
        } else {//如果没通过email验证，输入了错误email或者还没有输入（值为Your Email）
            if (welcome) {
                if (email.value == "Your Email"){//如果还未输入
                    welcome.innerHTML = "Welcome back ";
                } else {//输入了错误email
                    welcome.innerHTML = "Please input a right email ";
                }
            } else {//新访客
                if (email.value == "Your Email"){
                    welcome1.innerHTML = "Thank you, ";
                } else {
                    welcome1.innerHTML = "Please input a right email, ";
                }
            }
        }
        an.innerHTML = author_name;
    } else {//如果作者输入框为空
        if (welcome) {
            welcome.innerHTML = "Please input your name";//则提示输入名字
            author.className += " searchtip";//加上search属性，并将值设为 Your Name
            author.value = "Your Name"
        } else {//新访客则将提示文字初始化为原始值，当然，你也可以换个提示文字
            welcome1.innerHTML = "Hi, I know you have something to tell me. Please leave me a reply";
            author.className += " searchtip";
            author.value = "Your Name"
        }
        an.innerHTML = ""//清除作者名字显示区域
    }
}
  
function setHttp() {//设置http://函数
    var tips = httpurl.value.substr(0, 7).toLowerCase();//取得输入值的前七位，并转为小写
    if (tips == "http://") {}//如果匹配“http://”，无动作
    else if (httpurl.value != "") {//如果不匹配 “http://”，输入值也不为空
        httpurl.value = "http://" + httpurl.value//则将输入值前加入"http://"一同返回
    } else {//如果输入框为空
        httpurl.className += " searchtip";//加上提示文字
        httpurl.value = "http://"
    }
}
</script>

其实上面的代码有些是为了兼容以前的js代码，因为要对同一个对象再次操作，所以难免会破坏之前的一些定义。只是要实现头像实时显示，则只需十来行代码即可实现。用jQuery则一行即可：

   1: $('#email').blur(function(){$('#real-avatar .avatar').attr('src','http://www.gravatar.com/avatar.php?gravatar_id=' + MD5($('#email').val())) + '&size=32&d=identicon&r=G&default=http://www.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=32';})

这一行jQuery代码就足够了。用jQuery是不是很简单，呵呵。

我写的代码中用到了email验证，但是并不是防止Spam用的，只是善意的提醒email有没书写正确，因为我有时就写错了email格式，结果提交后又给返回，内容还得重新输入。这里给用户一个小提示，可以告诉他email有没写对，配合gravatar实时显示，也可以验证email有没写错，是不是自己的email。第三个函数setHttp()是给输入的地址加上http://，虽然即使没有http://，WP也可正确识别。这里只是提高访客体验。

我上次说过上一篇日志是本年度最后一篇，但是由于过两天有些事情要忙，正好又有人邮件问我有关这方面代码（没想到才几天居然就有人能发现我博客这一点改变。。），我就在这里贴出来吧，希望能帮到一些需要这个功能的朋友。

当然，以上这些有些人可能会觉得很无聊，这个也确实是很无聊的功能，但是我坚信细节处的改变对于访客体验的提高是不容置疑的。

最后提示：很重要的一个给字符串md5加密函数我没有写出，请自行网上搜索，并添加到你的js代码前边。如果函数名不是MD5()，请更改相应处的函数名。

还有一点我也要提一下，最近两周来不知是因为了到年关了还是怎么了，几乎每天都会收到一两封向我索要主题的邮件，尤其是最近几天。有人喜欢这款主题我很高兴，因为这款的配色并不是大众能接受的，因为之前批评过我主题配色的人不在少数。之前我有过准备发布，但是后来我因为要加入后台管理，所以索性又重新写了模板代码，并且加入了好些其他东西，如广告管理，文章动态加载等，即使现在也一直在抽时间改进。所以模板代码很乱，因为时不时就要改动，后台设置也要相应跟上，一直没有整理。所以可以说，这款主题还未完成，有些功能要正常使用还需配合我的修改。但是我会努力使它尽早完成，现在主要就是后台管理功能还未完成。之前邮件索要主题的我都给予了回复，这里再说一下，因为每天收到的邮件很多，怕有漏掉未回复的。所以，请不要再给我发邮件索要主题，如果真的喜欢，请继续关注我的博客。我会尽量快点提供下载的。

——By QiQiBoY

一个jQuery轮换滚动效果 (32)
这个有什么用？我说几点可以用到的地方，比如你可以调用评论列表，循环展示最新评论；调用最近或随机日志列表，循环展示最新日志；传统的有的人喜欢将列表做成tag切换式，为...
新主题测试进行时。。。 (32)
之前来过的同学这次再来肯定会眼前一亮，以前那个灰蒙蒙，有点乱的页面换成了现在蓝色主题（bluePaled）。我又要纠结了，刚发现百度快照更新到当日了。之前都是一周更新一次，...
纠结的这几天。。。。。。 (10)
这个主题暂定名bluePaled，也许会公开发布，也许我会送给别人私用。但是，这一切都要先等到解决了邮件回复问题后。希望有JavaScript，php方面的高手能与我指导一二。即如何自动给回...
增强用户体验，进一步美化友链页面，添加loading图片 (11)
<img onerror="javascript:this.src='/files/links.gif'" onload="javascript:this.style.backgroundImage='none'" src="http://bbs.pcbeta.com/favicon.ico" style="background: url(l...
一句代码美化你的链接页面模板（links.php）-自动显示favicon图标，非js方法 (28)
很多时候，很长时间以后，我们找了很多友链。但是这些友链并不是要全部放到首页侧边栏友链处，或者有些人根本就将所有链接都放到内页。于是，为了简便，做一个链接页面模板...

声明: 本站遵循署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 I'm qiqiboy !

本文地址:http://www.qiqiboy.com/2009/12/30/email-input-box-office-real-time-display-gravatar-picture.html

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

2009年12月30日, hfantasysay: 看上的确不错，不过也只是不错而已~你不用照顾我的~
2009年12月30日, 万戈say: 这叫一个专业啊！元旦回来研究！恩，必须的
2009年12月30日, A.shunsay: 不得不说你这个主题真是丰富
2009年12月30日, A.shunsay: 你文章在 Rss中后面跟着两个Related posts:
2009年12月30日, QiQiBoYsay: @ hfantasy : 我照顾你什么了？ :?:
2009年12月30日, QiQiBoYsay: @ A.shun : 我知道，一个是@feed插件添加的，一个是相关日志插件添加的，过两天准备移除@feed插件
2009年12月31日, HACKCRAFTsay: 不错不错，之前见到过这个功能的，只是一直没时间深入研究
2009年12月31日, evlossay: 汗，昨天看的太认真了，看完就关了，差点忘了留言呢 ~ 嘿嘿 ~

I'm qiqiboy !

博客的一点小修改

Related Posts

There is no comments still.

Related comments

一点小更新——qiqiboy.com

Related Posts

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

假期里的最后一博

Related Posts

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

假期里的小无聊

Related Posts

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

假期安排

Related Posts

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

WordPress主循环控制——精确控制文章列表

Related Posts

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

一个首页不应该缺少的两项功能：置顶+日志预告

Related Posts

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

WordPress自动获取+调用页面主循环日志中的图片

Related Posts

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

新版CMS简式首页上线测试ing……

Related Posts

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments

Email输入框处实时显示gravatar头像+email验证+动态信息提醒

Related Posts

Look, this post is replyed so hot, let's go O(∩_∩)O~.

Related comments