可能大家已经在这里体现过了，效果如本站，样式截图如下：

使用的方法：

1. 首先请下载WordPress主题Js O4w；因为这个功能只能在该主题上使用。

2. 然后下载这个功能加强包：ajax_package_for_theme_js_o4w_ver_a

3. 解压上面文件，把其包含的所有文件上传到主题目录js-o4w，覆盖旧有文件则可。（注，目录名字必须是js-o4w，也就是主题安装后的默认目录名）

4. 在WordPress的后台设置允许嵌套的层数为2层。（注，由于引入@reply的功能，所以嵌套为2层即可）

关于这套嵌套评论的设计，有兴趣的朋友可以重看这篇文章：《利用JQuery为WordPress的嵌套回复添加@reply功能》

另外，在替换文件前，最好还是先备份，如果你已经对上面需要替换的文件修改过的话；因为自己测试有限，使用过并发现问题的朋友跟我说一下，谢谢啦。

© Jinwen for Jinwen Say, 2009. | Permalink | 41 comments | Add to del.icio.us
Post tags: ajax, JQuery, Js-O4-theme, WordPress, 下载, 主题

• 准备发布现用WordPress主题Js O3 (25)
• WordPress theme Js O4w released (118)
• 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主题Js O4 noire发布 (68)
• 自家用皇马粉丝定制版WordPress主题 (33)
• 给你们的懒人留言模式 (45)
• 无折腾不WordPress (38)
• 在WordPress中利用Jquery隐藏较旧留言 (15)

结果昨天还是忍不住，按照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)

文章写得很好，至少我觉得真的很有用了，如果在你的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)

对于即将到来的WordPress 2.7，我们可以通过修改模板实现留言分布，具体教程可以看这篇《WordPress 2.7 的评论分页》。但当我看到Sofish介绍的这篇《写给设计人的10个jQuery特效》后，我决定还是用伟大的JQuery隐藏旧留言吧，需要查看效果的请直接到本站查看留言吧，因为贴个图看不出

实现不难，首先在<header>标签内调用JQuery，我是直接拿来主义的：http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js，你直接链接这个地址就好了，好处不用多说。

然后在<header>标签内再增加一段javascript：

$(document).ready(function(){
//只展开第一条留言，数字0代表。
$(".message_list .message_body:gt(0)").hide();
//隐藏第5条后的所有留言，数字4代表。
$(".message_list li:gt(4)").hide();
//隐藏和展开留言效果
$(".message_head").click(function(){
$(this).next(".message_body").slideToggle(500)
return false;
});
//收起所有留言
$(".collpase_all_message").click(function(){
$(".message_body").slideUp(500)
return false;
});
//显示所有留言
$(".show_all_message").click(function(){
$(this).hide()
$(".show_recent_only").show()
$(".message_list li:gt(4)").slideDown()
return false;
});
//显示最近留言（留言条数可通过上面设置）
$(".show_recent_only").click(function(){
$(this).hide()
$(".show_all_message").show()
$(".message_list li:gt(4)").slideUp()
return false;
});
});

然后就是打开你的comment.php文件，修改一下留言的<ol><li>标签的样式定义，当然你也可以修改上面js语句中的样式定义使其符合你原来的comment样式。这里我以修改comment.php文件中的样式作例：

1. 把模板中的<ol>样式改为message_list，即成为<ol class="message_list">；
2. 在<li>标签内，增加一段用于隐藏留言内容后的显示标题，比如显示留言者的名字，留言时间等：
   <p class="message_head"><cite>留言者名字</cite> <span class="timestamp">留言时间</span></p>
   注意这里的样式是"message_head"。一般添加在留言内容之前则可。
3. 然后把留言的内容（即要可隐藏的内容）用一个<div class="message_body">包括起来，在WordPress中代码可以如下：
   <div class="message_body"><?php echo comment_text();?></div>。
4. 接着在comment.php内查找</ol>这个结束标签，在其后面加上如下代码：
   <p class="collapse_buttons"><a href="#" class="show_all_message">Show all comments (<?php echo $countComments; ?>)</a> <a href="#" class="show_recent_only">Show 5 only</a> <a href="#" class="collpase_all_message">Collapse all</a></p>
   增加这段是为了增加“显示/隐藏”留言的链接按钮。

实现就是上述的几步。可能我说得简单点，但实现的方法不难， 效果也不错，试试不妨。

© Jinwen for Jinwen Say, 2008. | Permalink | 15 comments | Add to del.icio.us
Post tags: ajax, JQuery, WordPress, 模板

• WordPress中Ajax留言的简单实现 (42)
• DIY WordPress contact form with JQuery (1) (25)
• 让回复留言的按钮动态点JQuery版 (31)
• 简单说一下我的主题展示页面实现方法 (24)
• 发布Js O4w主题配套使用的Ajax嵌套评论功能 (41)
• WordPress中Ajax评论的完善参考 (105)
• DIY WordPress contact form with JQuery (4) (9)
• DIY WordPress contact form with JQuery (3) (6)
• DIY WordPress contact form with JQuery (2) (12)
• 让回复留言的按钮动态点 (40)

主题主要特点：

• 全CSS设计，没有任何图像及背景图片需要加载。
• 淡雅的灰色调，舒服养眼。
• Ajax打造sidebar，并且易于修改。
• 在后台主题选项中能方便通过widget修改sidebar的左右选择。
• 主题已经对SEO进行优化。
• 适合WordPress 2.6。

所以，推荐大家看看，觉得这个主题做得简约不简单，细节地方也做得不错，还有那个Ajax的侧栏，其实大家可以借鉴。

© Jinwen for Jinwen Say, 2008. | Permalink | 15 comments | Add to del.icio.us
Post tags: ajax, SEO, WordPress, 主题

• 无折腾不WordPress (38)
• 发布Js O4w主题配套使用的Ajax嵌套评论功能 (41)
• 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主题Js O4 noire发布 (68)
• 雪白无暇的WordPress主题：DXX 2.0 (4)
• 适合图片展示的WordPress主题Professor Theme (6)
• 说说我在WordPress 2.7中留言嵌套的样式设计 (40)
• 说说WordPress中的重复内容问题 (6)

如果你喜欢改造现用模板实现Ajax留言效果，推荐看Sofish的如何为你的主题添加Ajax评论功能教程，中文说明很是详细。但直接说，我认为最简单的方法并不是按照别人教程如何如何改造comment.php，因为每个模板的内容很不一样，看得眼花。最简单的方法是直接copy！所以我建议到这里下载一套已经改好的适用于default模板文件：WordPress Default Theme (Kubrick) with AJAX commenting revision 2.4，直接放在自己的主题中并替换掉comment.php则可。

当然你会说那设计好的样式不是都没有了吗？其实对比新旧文件，把新的comment.php改成与旧有的一样并不难，你只要把一些div，class之类的复制过去就行了。个人认为样式的更改会比在php文件内查找来查找去容易得多。

要注意的是上述办法中提供的文件已经是2006年的！所以我在测试中发现其中的文件comments-ajax.php并不太适应现有的WordPress 2.6，在留言提交中会出现报错。解决的办法很简单，因为上面的方法是借用强大的K2模板，所以我们直接下载K2的最新版，找出里面的comments-ajax.php进行替换则可。

再说的是如果你想使用JQuery实现，中文教程可以参照北极冰仔的教程：使用 jQuery 实现 Ajax 留言。

上面的只是我随便说说，没多少技术含量的，看来还得要学习一下JQuery，觉得挺有趣。

© Jinwen for Jinwen Say, 2008. | Permalink | 42 comments | Add to del.icio.us
Post tags: ajax, JQuery, WordPress, 模板

• 在WordPress中利用Jquery隐藏较旧留言 (15)
• DIY WordPress contact form with JQuery (1) (25)
• 让回复留言的按钮动态点JQuery版 (31)
• 简单说一下我的主题展示页面实现方法 (24)
• 发布Js O4w主题配套使用的Ajax嵌套评论功能 (41)
• WordPress中Ajax评论的完善参考 (105)
• DIY WordPress contact form with JQuery (4) (9)
• DIY WordPress contact form with JQuery (3) (6)
• DIY WordPress contact form with JQuery (2) (12)
• 让回复留言的按钮动态点 (40)