为添加个表情我就不用自己写代码了，估计费时又写不好。所以我推荐用国人的评论表情插件－Custom Smilies，大家可以点击链接访问插件主页又或者直接在WordPress后台搜索安装就可以了。我知道应该还有另外几款评论插件的，不过既然这款已经简单够用了，当然还得支持国货。现在这里的评论表情是这样的：

当中有些表情是能活动的，建议直接访问一下我的网站看一下，在阅读器中只能看到截图，它们是不会动的。

同时Custom Smilies这个插件也能够让你在后台编写文章的同时方便调用表情：

所有这些表情都是可以自定义的，只要我们把需要替换的表情图标覆盖默认的则可，替换的路径是/wp-includes/images/smilies/，注意在WordPress中使用的表情图片格式是GIF的。如果你要想得到更多的表情，建议访问一下经@underone同学推荐的这里。那里的表情很多很多，足够大家慢慢选择。不过要注意的是很多表情都是PNG格式的，为了省事大家还是尽量选GIF的。

我一开始是使用Showfom小朋友无私奉献的QQ表情，要下载的请点文章开头的推荐链接就有了。他的表情很生动漂亮的。

这些表情在我这里的白色版主题下效果很好，可是因为我这里还提供了一个黑色版本的主题，表情在其下面的显示效果就未如理想了（此时就埋怨自己了，好好的弄那么多样式干嘛）。结果我在网上找了些GMAIL风格的表情图标，弄了一下以便能在WordPress的评论中使用。自己觉得这些表情虽然样式简单却还能动几下，比较符合这里模板的风格，更重要的是它们能同时适应这里主题中黑白两个样式。

如果你想试一下我这里这一款GMAIL表情样式，请点这里直接下载。

上面的表情我只弄上19个图标，一般在WordPress中我们使用上的是22个图标，还欠3个。如果你不想有3个样式不一致的图标同时显示出来的话，可以在Custom Smilies的后台中设置一下，把表情不一样的定义设置为空则可，如图。

至此完成。我在想究竟这些表情是不是真的能吸引大家留言呢？可能大家都习惯了在IM上添加表情所以也喜欢点这些表情图标也说不准；另外用表情留言最方便的是只要点两下鼠标就行了，连字都不用打一个是很方便的。如果你连这样都懒，那我就无话可说了，小心长个够胖的你，呵呵。

P.S. 我这里是允许纯表情回复的。

© Jinwen for Jinwen Say, 2009. | Permalink | 88 comments | Add to del.icio.us
Post tags: WordPress, 下载, 插件, 留言

• 从评论框编辑器Quicktag说开 (26)
• WordPress插件Js Add Download to Feeds发布 (7)
• WordPress中的Quote插件 (35)
• 黑色WordPress主题Js O4 noire发布 (68)
• 阿里妈妈WordPress插件大赛 (0)
• 说说我在WordPress 2.7中留言嵌套的样式设计 (40)
• 说说WordPress中的重复内容问题 (6)
• 让WordPress原生相册支持lightbox效果 (16)
• 给你们的懒人留言模式 (45)
• 秀秀你的评论数 (12)

1. 本文讨论的前提

对于未被回复的评论，也就是初始评论，我称为主评论；而每个回复主评论的评论，也就是应用了嵌套样式的评论，我称为从属评论。

另外是我使用的嵌套回复仅限一层。如果在第二层的嵌套中再应用@回复样式，那就失去本文的讨论初衷，因为那样的评论样式只会更乱。

最后也就是如文章题目一样，需要利用到JQuery的帮助，也就是说你的主题中必需首先加载了JQuery。

2. 设计的思路

如果要实现上图的样式，归根就是对评论中回复按钮的功能设计。简单来说就是：当点击主评论的回复按钮，会产生嵌套回复，回复的内容紧跟在主评论后；当点击从属评论的回复按钮，则在回复的内容中添加@XXX的字样，回复的内容也是紧跟在主评论之后。

3. 实验的方法

（1）主评论的回复按钮

Jinwen在这里不说了。因为它是WordPress中嵌套回复中默认就存在了。（如果你想知道嵌套回复的实现请看文末的参考）

（2）从属评论回复按钮

它的实现，也就是本文介绍的重点。按上面设计的思路，通过它产生的回复评论是需要紧跟在主评论之后的，这不就是和主评论的回复按钮一样吗？那么我们就把主评论的回复按钮分别复制到每一个属于它的从属评论中就行了，在主题的js中（ready function内）添加：

//这里假设你的评论样式是.commentlist
$('.commentlist li').each(function() {
//设置一个变量zzz，用来定义从属评论的按钮将要被复制到何位置，本例它将被得到到ul.children li内
var zzz = $(this).find('ul.children li .message_head');
//查找主评论按钮的设置样式，这个会因主题不同而不同（本例是.re_icon）；
//然后把它复制，去除原有样式re_icon，重新对其定义一个样式atclass（如果你的主-从属两回复按钮样式将不一样，建议这样做）
//最后把复制的内容分别插入到变量“zzz”中
$(this).find(".re_icon:first").clone().removeClass("re_icon").addClass("atclass").appendTo(zzz);
});

这样我们就会在每一个从属评论后得到一个复制而来的按钮。当然这个通过复制得来的按钮其实与主评论的回复按钮是一样的！只是它比主评论的回复还多了一个功能：就是往评论框内发送@XXX的字样。我们接下来把它实现，在主题的js中（ready function内）添加：

//定义从属评论回复按钮被点击后的动作
$('.atclass').click(function() {
//定义一个变量atname
//查找在每条从属评论中留言者名称的样式（本例是cite），然后记录它的文字内容，也就是留言都的名字了
//你可以预先为评论的留言名称用一个包起，而这个“hisname”也就与本例的cite了。
var atname = $(this).parents(".message_head").find("cite").text();
//然后向留言框中输入@XXX的字样。需要指定留言框的ID，这里是#comment
//最后通过.focus()顺便激活留言框的输入状态
$("#comment").append("@" + atname + " ").focus();
});

其实也就是通过上面两段代码就可以了，并不复杂。实现的难点是你必需知道自己主题模板中评论部分的结构关系。如上面代码中的红字部分就是一个难点，因为它分别受插入按钮的位置和这个位置与留言者名称之间的位置关系决定。Jinwen在这里就不能将其总结，必需由大家自己多折腾一下了。

由于往留言框输入的@XXX可能在“取消回复”后依然存在，所以Jinwen建议再加上一段代码，作一点点清洁，保证点击“取消回复”后清除留言框内的文字内容：

$('#cancel-comment-reply-link').click(function() {
$("#comment").empty();
});

要实现本文开始时候介绍的样式，方法当然并不局限上我上面所介绍的。无论如何，Jinwen还是希望上面的思路能让大家对嵌套回复的设计有点启发，那就很荣幸了。

4. 留言的邮件回复通知

这可能又是大家关心的问题了，Jinwen这里推荐通过国人两个精彩插件就可以实现了。

对于嵌套回复的邮件通知，建议通过Comment Reply Notification这个插件实现。在后台激活使用就可以了。

而@reply回复的邮件通知，则建议通过Mail To Commenter这个插件实现。由于这个插件是能自动检测评论中带@的字段而自动发送通知邮件的，所以我们同样只要在后台激活这个插件就可以了。

5. 结语

嵌套回复是会让访客了解到已有留言中的相关，从而更容易加入其讨论；这样，也就大大增加了博客中的讨论热度。另外一个很重要的是，Jinwen想让每一个被回复的主评论都能成为一个小的讨论区。就是说，对一些有价值的评论，大家可以通过嵌套继续延伸对其的讨论；而加入@reply的回复样式会让那些有价值的评论（主评论）下的讨论（从属评论）更加有序和可追索。就目前来说本站所用的评论样式，基本想能达到Jinwen所设想的。不知大家意见如何？

6. 参考

下面的一些文章链接，或者能让你更为了解嵌套和@reply各自精彩的讨论和用法，谢谢下面文章的各位作者。

• WordPress 嵌套回复
• iNove 中鼠标悬浮显示 @ 评论
• WordPress 2.7原生嵌套评论的AJAX实现办法
• WordPress 评论的 @ 回复
• 说说我在WordPress 2.7中留言嵌套的样式设计
• WordPress 2.7 嵌套留言的设计样式补充
• WordPress评论回复插件推荐:@ Reply
• WordPress 2.7原生支持嵌套式评论以及一些个人看法

© Jinwen for Jinwen Say, 2009. | Permalink | 126 comments | Add to del.icio.us
Post tags: JQuery, WordPress, 主题, 留言, 设计

• 给你们的懒人留言模式 (45)
• 说说我在WordPress 2.7中留言嵌套的样式设计 (40)
• DIY WordPress contact form with JQuery (4) (9)
• DIY WordPress contact form with JQuery (3) (6)
• DIY WordPress contact form with JQuery (2) (12)
• 草稿纸风格的WordPress主题构想 (50)
• 网页设计中的双色分隔线 (29)
• 现用主题通过CSS3和XHTML1.1.的认证 (9)
• 无折腾不WordPress (38)
• 我的WordPress主题这样做(4)-专属分类页面制作 (24)

结果昨天还是忍不住，按照ZWWoOoOo同学的伟大折腾 -- “WordPress 2.7原生嵌套评论的AJAX实现办法”，更改了自己的评论部分，现在是嵌套还是Ajax的效果了。ZWWoOoOo同学的介绍方法很详细的了，真应该多谢他， 这么的耐心写教程

关于嵌套还是一层一层的评论样式，孰好孰不好我就不说了。其实我自己是喜欢整齐的，所以现在在我主题中的嵌套是不会缩进，嵌套回复的作者没有头像，而且我暂时只允许一层的嵌套；这个做法一来是保证嵌套下的评论还是整齐的，另一个原因则是觉得目前的嵌套回复主要使用的还是博客作者 -- 也就是我自己，一层够了。或者这个做法能让不喜欢嵌套样式的朋友也有点启发，是不是呢。

最近关于WordPress的新闻还有的是WordPress 2.8.1 RC1的发布；Blackberry手机上的WordPress应用程序WordPress for  BlackBerry，只是目前来说还不支持中文，不过能看到在手机上审核留言和撰写文章的功能了，应该说已经很不错。

正如本文题目上说的，无折腾不WordPress；如果你最近也不知道折腾什么的话，那不如也折腾一下嵌套评论的Ajax应用吧，还是很能消磨时间的呢。

© Jinwen for Jinwen Say, 2009. | Permalink | 38 comments | Add to del.icio.us
Post tags: ajax, WordPress, 主题, 留言

• DIY WordPress contact form with JQuery (4) (9)
• DIY WordPress contact form with JQuery (3) (6)
• DIY WordPress contact form with JQuery (2) (12)
• 说说我在WordPress 2.7中留言嵌套的样式设计 (40)
• 给你们的懒人留言模式 (45)
• 发布Js O4w主题配套使用的Ajax嵌套评论功能 (41)
• 利用JQuery为WordPress的嵌套回复添加@reply功能 (126)
• WordPress中Ajax评论的完善参考 (105)
• WordPress Theme Greyville (15)
• DIY WordPress contact form with JQuery (1) (25)

做法首先是你的网站加载了JQuery，然后在你需要放置沙发头像的地方添加一个<div>，内容为空即可：

<div id="shafa"></div>

然后要做的就是利用js复制沙发的头像，并把复制的内容填入上面设定的<div>内：

$(document).ready(function() {
$(".commentlist .avatar:last img").clone().appendTo("#shafa");
});

这样就可以啦，注意上面的avatar假设是你主题模板中包含头像图片的样式名称；然后:last这一处是对于象我一样的倒序留言板设定的，因为沙发的同学是在留言列表的最后；而对于顺序留言板，则改为:first。

还有就是不要忘记进行CSS的样式定义。再有的是利用相同的方法你可以复制指定的内容，如沙发的留言内容，名字等，只要对应一下它们的样式名称则可。

© Jinwen for Jinwen Say, 2009. | Permalink | 25 comments | Add to del.icio.us
Post tags: JQuery, 主题, 留言

• 给你们的懒人留言模式 (45)
• 利用JQuery为WordPress的嵌套回复添加@reply功能 (126)
• DIY WordPress contact form with JQuery (4) (9)
• DIY WordPress contact form with JQuery (3) (6)
• DIY WordPress contact form with JQuery (2) (12)
• 说说我在WordPress 2.7中留言嵌套的样式设计 (40)
• 本站JQuery隐藏留言的代码修正 (12)
• 无折腾不WordPress (38)
• 发布Js O4w主题配套使用的Ajax嵌套评论功能 (41)
• 利用JQuery前台切换网站的样式实现 (22)

文章写得很好，至少我觉得真的很有用了，如果在你的Ajax评论中存在如下的问题：

1. 部分模版中每篇文章的第一条评论刷新才可以显示
2. 新发的评论楼层数总是 #1，刷新后正常
3. 文章留言数统计没有即时更新
4. 留言用 alt 控制隔层显示不同样式时，ajax 时无效果，同样刷新后正常

那你应该去看一下上述问题的解决办法，它能让你的Ajax留言系统更为完善。

现在我自己的留言系统也改善好多了，能做到连续留言中的序号正常，还有页面标签中的留言总数也自动刷新。这样才是Ajax应用应该要做到的，试想尽管是Ajax提交了留言，但留言序号和留言总数却要重新刷新页面才能更新，这样总显不足。另外我在修改的时候发现一个问题，不知道是否只针对我自己的模板，我顺便在这里也写出：

后记：

Xiaorsz同学的这篇文章让我省了不少时间在留言模板上的修改；多出的时间我做了一个类twitter首页中的more刷新功能，大家可以在我首页中看到；试试效果吧，再有什么意见也说一下，看这个more东西有没有存在的必要 *_*!

原版more截图：

山寨版截图：

© Jinwen for Jinwen Say, 2009. | Permalink | 105 comments | Add to del.icio.us
Post tags: ajax, twitter, WordPress, 模板, 照片, 留言

• DIY WordPress contact form with JQuery (1) (25)
• 无折腾不WordPress (38)
• 在WordPress中利用Jquery隐藏较旧留言 (15)
• WordPress中Ajax留言的简单实现 (42)
• DIY WordPress contact form with JQuery (4) (9)
• DIY WordPress contact form with JQuery (3) (6)
• DIY WordPress contact form with JQuery (2) (12)
• 说说我在WordPress 2.7中留言嵌套的样式设计 (40)
• 试用上WordPress的评论表情插件 (88)
• 让回复留言的按钮动态点JQuery版 (31)

例子如下图，在我网站上的contact form，我设置了一个subject让朋友们选择：

在你已经看过本教程的前三篇（一、二、三）后，首先我们需要在<ol></ol>标签中添加该下拉表单，插入代码：

<li><label>Subject</label>
<select tabindex="'.$choix.'" style="cursor:pointer;" name="choix" id="choix" class="requiredField choix">
<option value="">请选择一个联系的主题</option>
<option value="1. 关于与本站交换链接">1. 关于与本站交换链接</option>
<option value="2. 关于本站主题Js O3问题">2. 关于本站主题Js O3问题</option>
<option value="3. 嗯，其它问题，下详">3. 嗯，其它问题，下详</option>
</select>
</li>

上面代码中的<option>标签就是你需要预先设置好的选项，请各位根据自己的要求更改。在这里我们新增加一下变量：$choix，并把其的样式设为必填：class="requiredField choix"。

然后我们需要在之前提及到的检测代码中，增加对$choix的非空检测：

//Check to make sure that the about field is not empty
if(trim($_POST['choix']) === '') {
$nameError = 'You forgot to choose a subject.';
$hasError = true;
} else {
$choix = trim($_POST['choix']);
}

既然有了联系的内容，我们也可以将它安排出现在发送邮件的标题部分，这样我们在看到邮件头时候就知道信件中大概内容了。修改之前提及的$subject定义代码，把它改为：

$subject = "Contact Form from $name [ $choix ]";

当然上面是一个简单的样式，大家可以自行更改。上面的代码会对应显示象下图的邮件标题：

至此，我的这个contact form就说到这里了。大家如果有什么问题再提出，我看是否需要补充，thanks。

© Jinwen for Jinwen Say, 2009. | Permalink | 9 comments | Add to del.icio.us
Post tags: ajax, JQuery, WordPress, 主题, 留言

• DIY WordPress contact form with JQuery (3) (6)
• DIY WordPress contact form with JQuery (2) (12)
• 给你们的懒人留言模式 (45)
• 无折腾不WordPress (38)
• 发布Js O4w主题配套使用的Ajax嵌套评论功能 (41)
• 利用JQuery为WordPress的嵌套回复添加@reply功能 (126)
• DIY WordPress contact form with JQuery (1) (25)
• 说说我在WordPress 2.7中留言嵌套的样式设计 (40)
• 在WordPress中利用Jquery隐藏较旧留言 (15)
• 利用JQuery前台切换网站的样式实现 (22)

（下面的样式名称定义均按前两篇代码中的名称来定的）

.screenReader{
left: -9999px;
position: absolute;
top: -9999px;

}

.thanks{
background: #ffffcc;
border: 1px solid #ff9900;
color: #555;
padding: 10px;
}

ol.forms{
float: left;
list-style: none;
margin: 0;
padding: 0;
width: 100%;
}

ol.forms li{
margin: 0 0 18px;
}

ol.forms label{
cursor: pointer;
display: block;
float: left;
font-weight: 400;
padding-right: 20px;
text-align: right;
width: 100px;
}

ol.forms textarea{
height: 200px;
padding: 5px;
width: 335px;
}

.error{
background-color: #fff;
color: #f00;
}

ol.forms li .error{
font-size: 12px;
margin-left: 10px;
}

ol.forms li.textarea .error{
display: block;
left: 500px;
position: absolute;
top: 500px;
width: 120px;
}

ol.forms li.screenReader{
margin-bottom: 0;
}

ol.forms li.buttons button{
background-color: #FFB340;
border: none;
color: #555;
cursor: pointer;
font-size: 16px;
margin-left: 4px;
padding: 5px;
}

ol.forms li.buttons button:hover{
background-color: #FF9900;
color: #222;
}

ol.forms li.buttons,ol.forms li.inline{
margin-left: 116px;
}

ol.forms li.inline input{
width: auto;
}

ol.forms li.inline label{
display: inline;
float: none;
width: auto;
}

#sendCopy{
border: none;
}

补充完上面的代码后，我还想补充一下：因为前面我们在设计联系表单的时候，只提供了姓名，邮址和内容三个项目，而且这些项目都是必需填写的。如果你想再增加一些项目，比如基本的网站地址，那应该怎样添加呢？

因为网址并不是必需填写的，所以添加会比较简单。现在以添加网址为例：

首先在首篇的php代码中的<ol></ol>标签内，添加一个<li></li>的标签，具体位置看你把网址的输入框放在哪里为定：

<li><label>your Site</label>
<input type="text" name="siteurl" id="siteurl" value="<?php if(isset($_POST['siteurl'])) echo $_POST['siteurl'];?>" class="siteurl" />
</li>

因为网址是可以留空的，所以你会发现上面<li>标签内的class相对于之前需要确认的代码少了一个“requiredField”的样式。

而在邮件的正文部分我们还必需把上述增加的内容加入。修改代码（第二篇提及）：

$body = "Name: $name \n\nEmail: $email \n\nSite: $siteurl \n\nComments: $comments";

把它改为（红字部分为增加内容）：

$body = "Name: $name \n\nEmail: $email \n\nSite: $siteurl \n\nComments:

按照上述更改的方法，你可以为这个contact form添加一些个性的内容了。

或者你会再问，如果我要添加一个联系的基本内容，而且要提供设定好了的下拉菜单让访客选择的，应该怎样做？那我把这个说明再放到下一篇吧 ^_^

© Jinwen for Jinwen Say, 2009. | Permalink | 6 comments | Add to del.icio.us
Post tags: ajax, JQuery, WordPress, 主题, 留言

• DIY WordPress contact form with JQuery (4) (9)
• DIY WordPress contact form with JQuery (2) (12)
• 给你们的懒人留言模式 (45)
• 无折腾不WordPress (38)
• 发布Js O4w主题配套使用的Ajax嵌套评论功能 (41)
• 利用JQuery为WordPress的嵌套回复添加@reply功能 (126)
• DIY WordPress contact form with JQuery (1) (25)
• 说说我在WordPress 2.7中留言嵌套的样式设计 (40)
• 在WordPress中利用Jquery隐藏较旧留言 (15)
• 利用JQuery前台切换网站的样式实现 (22)

调用的PHP代码也是基本通用，如下：

<?php
//当表单提交时检测
if(isset($_POST['submitted'])) {

//检测是否人类填写的表单，防垃圾，具体介绍请看（1）篇
if(trim($_POST['checking']) !== '') {
$captchaError = true;
} else {

//检测姓名处是否留空
if(trim($_POST['contactName']) === '') {
$nameError = 'You forgot to enter your name.';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}

//检测邮件地址正确与否
if(trim($_POST['email']) === '') {
$emailError = 'You forgot to enter your E-mail.';
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$('form#contactForm').submit(function() {
$('form#contactForm .error').remove();
var hasError = false;
$('.requiredField').each(function() {
if(jQuery.trim($(this).val()) == '') {
var labelText = $(this).prev('label').text();
$(this).parent().append('<span class="error">You forgot to enter '+labelText+'.</span>');
hasError = true;
} else if($(this).hasClass('email')) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(jQuery.trim($(this).val()))) {
var labelText = $(this).prev('label').text();
$(this).parent().append('<span class="error">You entered an invalid '+labelText+'.</span>');
hasError = true;
}
}
});
if(!hasError) {
$('form#contactForm li.buttons button').fadeOut('normal', function() {
$(this).parent().append('<img src="/wp-content/themes/js-o3-16/imgs/ajax-loader.gif" alt="Loading&hellip;" height="32" width="32" />');
});
var formInput = $(this).serialize();
$.post($(this).attr('action'),formInput, function(data){
$('#wrapper').ScrollTo(1000);
$('form#contactForm').slideUp("normal", function() {
$(this).before('<p class="thanks"><strong>Thanks!</strong><br/>你的邮件已成功发送！我经常会看邮件的，所以我应该很快就收到你的留言。Have a nice day ^_^ </p>');
});
});
}
return false;
});quot;, trim($_POST['email']))) {
$emailError = 'You entered an invalid email address.';
$hasError = true;
} else {
$email = trim($_POST['email']);
}

//检测留言部分是否为空
if(trim($_POST['comments']) === '') {
$commentError = 'You forgot to enter your comments.';
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}

//如果上述检测无误，则发送邮件，其中$emailTo为你的邮件地址，必需修改为你自己的。
if(!isset($hasError)) {
$emailTo = 'yourname@domain.com';
$siteurl = trim($_POST['siteurl']);

//下面的subject值为发送邮件的标题部分
$subject = "Contact Form from $name";
$sendCopy = trim($_POST['sendCopy']);

//下面的body值为发送邮件的正文样式
$body = "Name: $name \n\nEmail: $email \n\nComments: $comments";
$headers = 'From: [Jinwen Say] <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;
mail($emailTo, $subject, $body, $headers);

//下面的设置为选择发送副本时候的邮件标题和内容
if($sendCopy == true) {
$subject = 'Copy of the mail you send at Jinwen Say.';
$headers = 'From: Jinwen Say <noreply@somedomain.com>';
mail($email, $subject, $body, $headers);
}
$emailSent = true;
}
}
} ?>

按上述的检测设置，还有对发送邮件的样式设定，我们将收到类似下图的邮件样式：

上图中标记的部分分别都为本篇代码中的设置部分，大家可以通过对照一下内容和上述代码中的简单说明，创建一个适合自己的个性表单。

总结前两篇的代码，我把它整合一起，由于较长，所以不想复制粘贴的同学就下载下面的php代码部分好了：

wordpress-ajax-contact-form-php-code

有了上述的代码后，表单还不能正常工作，因为需要利用到JQuery，所以我们还需要调用如下的js代码。在确认你的网站已经调用了JQery库代码后，请在你的站内js文件中加入如下代码：

$(document).ready(function() {
$('form#contactForm').submit(function() {
$('form#contactForm .error').remove();
var hasError = false;
$('.requiredField').each(function() {
if(jQuery.trim($(this).val()) == '') {
var labelText = $(this).prev('label').text();
$(this).parent().append('<span class="error">You forgot to enter '+labelText+'.</span>');
hasError = true;
} else if($(this).hasClass('email')) {
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
if(!emailReg.test(jQuery.trim($(this).val()))) {
var labelText = $(this).prev('label').text();
$(this).parent().append('<span class="error">You entered an invalid '+labelText+'.</span>');
hasError = true;
}
}
});
if(!hasError) {
$('form#contactForm li.buttons button').fadeOut('normal', function() {
//下面路径是当表单提交时候loding图标的位置，请根据自己的主题图片位置修改
$(this).parent().append('<img src="/wp-content/themes/js-o3-16/imgs/ajax-loader.gif" alt="Loading&hellip;" height="32" width="32" />');
});
var formInput = $(this).serialize();
$.post($(this).attr('action'),formInput, function(data){
$('#wrapper').ScrollTo(1000);
$('form#contactForm').slideUp("normal", function() {
$(this).before('<p class="thanks"><strong>Thanks!</strong><br/>你的邮件已成功发送！我经常会看邮件的，所以我应该很快就收到你的留言。Have a nice day ^_^ </p>');
});
});
}
return false;
});
});

最后，当综合本篇和上篇的代码后，你的contact form是应该能工作的了，当出现错误信息时候，会出现如下图的提示信息：

其中红字部分就是提示错误信息，不过本篇写得有点长了。我把样式部分的设计和一些补充放到下一篇继续说，希望能继续关注啦。

© Jinwen for Jinwen Say, 2009. | Permalink | 12 comments | Add to del.icio.us
Post tags: ajax, JQuery, WordPress, 主题, 留言

• DIY WordPress contact form with JQuery (4) (9)
• DIY WordPress contact form with JQuery (3) (6)
• 给你们的懒人留言模式 (45)
• 无折腾不WordPress (38)
• 发布Js O4w主题配套使用的Ajax嵌套评论功能 (41)
• 利用JQuery为WordPress的嵌套回复添加@reply功能 (126)
• DIY WordPress contact form with JQuery (1) (25)
• 说说我在WordPress 2.7中留言嵌套的样式设计 (40)
• 在WordPress中利用Jquery隐藏较旧留言 (15)
• 利用JQuery前台切换网站的样式实现 (22)

表单的功能有几个（实例看本站的contact页面）：

1. Ajax提交（JQuery实现）；
2. 自动检测填写内容是否留空或错误邮址（JQuery实现）；
3. 提供可选联系内容（下拉表单）；
4. 可插入到模板的任意位置，不局限于新建页面使用。

如果你对上面的内容有兴趣，就继续看吧。

首先是表单的构成，代码如下：

<ol class="forms">

<li><label for="contactName">your name</label>
<input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="requiredField" />
<?php if($nameError != '') { ?>
<span class="error"><?=$nameError;?></span>
<?php } ?>
</li>

<li><label for="email">your E-mail</label>
<input type="text" name="email" id="email" value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="requiredField email" />
<?php if($emailError != '') { ?>
<span class="error"><?=$emailError;?></span>
<?php } ?>
</li>

<li class="textarea"><label for="commentsText">your words</label>
<textarea name="comments" id="commentsText" rows="20" cols="30" class="requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
<?php if($commentError != '') { ?>
<span class="error"><?=$commentError;?></span>
<?php } ?>
</li>

<li class="inline"><input type="checkbox" name="sendCopy" id="sendCopy" value="true"<?php if(isset($_POST['sendCopy']) && $_POST['sendCopy'] == true) echo ' checked="checked"'; ?> /><label for="sendCopy">Send a copy of this email to yourself</label></li>

<li class="screenReader"><label for="checking" class="screenReader">If you want to submit this form, do not enter anything in this field</label><input type="text" name="checking" id="checking" class="screenReader" value="<?php if(isset($_POST['checking'])) echo $_POST['checking'];?>" /></li>

<li class="buttons"><input type="hidden" name="submitted" id="submitted" value="true" /><button type="submit">Send to Jinwen &raquo;</button></li>

</ol>

基本上表单这样构成，能看到的是常见的name，mail，comment三个部分，这些都是通用的，大家无需更改。至于倒数第二个list中的screenReader是用来防止垃圾留言的，有兴趣的朋友可以看这篇介绍文章。还有就是上面代码中的一些变量部分（带$部分），看不看得懂也无所谓的，这些是用来检测填写内容的正确与否。

有了上面的代码部分，接着我们需要一个无错提交表单后的欢迎信息，代码如下：

<?php if(isset($emailSent) && $emailSent == true) { ?>

<div class="thanks">
<h1>Thanks, <?=$name;?></h1>
<p>你的邮件已成功发送！我会尽快与你联系。Have a nice day ^_^ </p>
</div>

<?php } else { ?>

<?php if(isset($hasError) || isset($captchaError)) { ?>
<p class="error">There was an error submitting the
<?php } ?>

<form action="http://www.saywp.com" id="contactForm" method="post">

*****在这里插入上面一段代码<ol>...</ol>*****

</form>

<?php } ?>

到这里要说明的是基本上上面的代码都可以全用，需要注意的是你必需修改如下一句中的网址为你表单所在页面的位置，否则提交不会成功的。

<form action="http://www.saywp.com" id="contactForm" method="post">

至此，我们完成了contact form中的基本部分，我先写到这里，在下一篇我继续写表单内容的判断部分代码，感兴趣的朋友下篇见。

© Jinwen for Jinwen Say, 2009. | Permalink | 25 comments | Add to del.icio.us
Post tags: ajax, JQuery, WordPress, 模板, 留言

• 在WordPress中利用Jquery隐藏较旧留言 (15)
• WordPress中Ajax评论的完善参考 (105)
• WordPress中Ajax留言的简单实现 (42)
• DIY WordPress contact form with JQuery (4) (9)
• DIY WordPress contact form with JQuery (3) (6)
• DIY WordPress contact form with JQuery (2) (12)
• 让回复留言的按钮动态点JQuery版 (31)
• 给你们的懒人留言模式 (45)
• 简单说一下我的主题展示页面实现方法 (24)
• 无折腾不WordPress (38)

但我还是坚持原有的标签设计，因为我觉得这样是一种试验：文章的页面相对来比较整齐，不用被留言版块拖得太长。当然我只是用JQuery把留言部分隐藏，其实它们还是已经加载的，你也可以说这算是一种“掩耳盗铃”的方法，but，why not？对于回访的朋友这个标签很方便他们，假设他们还记得文章的内容。所以，对于新访客，我在文章尾部利用JQuery再增加两个跳转的按钮链接如下截图：

第一个按钮执行的操作如下几步：

1. 跳转到网站顶部；
2. 隐藏正文内容；
3. 读入留言内容；
4. 光标定位到留言框。

note 1：因为我的留言是倒序留言板的，最新留言在最上部，留言框也在页面的最上位置，所以我必需把页面先移到上面去。否则切换正文及留言内容后会可能看不到留言框；

note 2：光标定位到留言框算是对你们上回懒惰却又坚持留言的报答了，这样你们留言前就不用再点击一次留言框了，满意了吧，呵呵（个人觉得这个抢沙发可方便）。使用只是一句简单的js：

$("#comment").focus();

其实你可能觉得有了上一个按钮就足够了，但我想一下，为再方便大家（的懒？），我再加上第二个，执行的操作有点不一样：

1. 隐藏正文内容；
2. 读入留言内容；
3. 展开所有留言；
4. 跳转到网站底部。

note 1：我假设需要上述操作的朋友是希望把该篇文章的所有留言都看一次。而我站内的留言默认是展开最新5条，其余较旧留言是折叠的，只留下留言者的名字（设计的方法可以回看这篇文章）。所以我必需不懒惰地先把折叠了的留言都展开，服务到家啊。

note 2：也是因为留言倒序，所以最旧的留言在页面的最底位置，所以也就需要把访客带到页面最底位置，让他们从第一条留言开始慢慢看。

P.S. -2：我想按上面的做法，大家应该不会太觉麻烦了吧。其实其实不放弃标签的设计也是因为我还花了不少时间在它的W3C认证上，可不能随便放弃哦。

P.S. -1：如果这个设计不错的话，我会把它也放到主题的最新版本1.6中更新。或者也把实验的方法写出。

p.s. 0：好，继续玩我的BB 8900，哈哈。

© Jinwen for Jinwen Say, 2009. | Permalink | 45 comments | Add to del.icio.us
Post tags: JQuery, WordPress, 主题, 留言, 设计

• 利用JQuery为WordPress的嵌套回复添加@reply功能 (126)
• 说说我在WordPress 2.7中留言嵌套的样式设计 (40)
• DIY WordPress contact form with JQuery (4) (9)
• DIY WordPress contact form with JQuery (3) (6)
• DIY WordPress contact form with JQuery (2) (12)
• 草稿纸风格的WordPress主题构想 (50)
• 网页设计中的双色分隔线 (29)
• 现用主题通过CSS3和XHTML1.1.的认证 (9)
• 无折腾不WordPress (38)
• 我的WordPress主题这样做(4)-专属分类页面制作 (24)