－新框架

相信大家都看到这个主题是从WordPress新的默认主题改过来的，以新的TwentyTen作为新的框架做主题的开发是非常好的，能省去很多诸如细节样式和代码的设置，再说它的功能本身就非常的强大。我建议大家新的主题都以它来做框架，毕竟WordPress这年头都到了3.0版本了，很多代码应该要更新了。

题外话，上次第二次提交Js O4w的更新又被官方打回，原因是没有body_class()这类新代码，气！真是迫人升级啊。

－导航自由

新的主题导航就是自定义的Menus功能，而且还支持着二级和三级目录的弹出显示，这点很省很方便。现在能在后台就轻松处理排列导航的显示，而且还带保存功能，不担心设置丢失。

而且这种导航还可以应用到小工具当中，也就是说能把自己喜欢的菜单项目放到侧栏或者脚 部位置上，方便得很。

－背景，图片自由换

其实我最喜欢的就是能在后台方便设置头部图片和背景图片。我觉得主题再漂亮，始终都会出现审美疲劳的，换一下这两样东西肯定有更多新鲜感。再说，如果主题发布，使用的人多了，他们也想自己的主题跟别人至少有那样这样的不吧，这种功能更添个性化。可能，带有这样功能的主题会更受欢迎点。

有着这两个功能，感觉主题就象是能百搭的衣服，能变出很多样式，每个人都用得不一样。

P.S. 昨天的背景图不能适应高分吧，所以今天就换了，不过好象没昨天的好看呢。

－强大的小工具

TwentyTen默认就支持6个小工具，2个侧栏，4个底部。我觉得这样也很足够了，但我自己再添加了2个小工具用于文章页面内的，与之区别于首页显示。现在一共是8个小工具，很符合我目前的想法：基本上都通过小工具更改页面的布置，而不需要再用记事本打开编辑主题文件。这也有考虑到以后其它使用这个主题的朋友的方便。

－首页布局

首页文章的布局非常灵活，TwentyTen默认已经为我们设定好两种特别的样式。

一种是用来显示相册的，只要文章的目录分类是按预设的Gallery，首页就会显示一张缩略图加上文章摘要。当然这张缩略图的设定也是内置的功能，很赞。这样对于图片集的处理很醒目的，让访客在浏览首页就知道这是相册类的文章，而且还标示了有多少张图片在。

另外一种是按目录是预设的Asides显示样式。它只会在首页显示正文，而不会显示标题。感觉就象是你随便说的一句两句一样，把它们贴到首页就能让大家看到了，也很方便。

我自己再按目录添加了一种样式给付费评论。由于付费评论一般要求在首页显示链接，但我的习惯是首页文章摘要都不带链接的。现在这个主题的功能能让我轻松的区别显示它们又不用太多更改模板，非常好使。

－其它

对于TwentyTen最大更改的部分是留言用上Ajax功能。但这次相对于上一个主题Js O4系列的功能来说真的不算什么了。因为我想主题简单点，功能不用太多。记得上个主题是有Ajax的联系表单功能的，这次我把它先去掉，因为觉得它的使用频率真不高，一个月才被使用上一次，两次，证明作用不大，去掉。

说到简单主题，我这次还特意把搜索栏做小一点，没有上个主题那么大而且放在显眼位置，原因是同样觉得它是必需的，但不至于被人天天使用。还有目前侧栏我只放上购买链接广告，其它都不放上去了，看看这样布局，网站是不是会简单醒目一点。

现在网站上图片的搭配不是固定的，毕竟我随时都可以更换了，只要在后台就能弄好，哈哈。

然后就没有然后了，说完。

© Jinwen for Jinwen Say, 2010. | Permalink | 84 comments | Add to del.icio.us
Post tags: WordPress, 主题, 模板, 自定义

• 我的WordPress主题这样做(6)-留言楼层样式技巧 (36)
• 我的WordPress主题这样做(4)-专属分类页面制作 (24)
• 我的WordPress主题这样做(3)-文章质疑应用 (20)
• WordPress自定义字段添加日志图片(4)－提高 (20)
• WordPress自定义字段添加日志图片(3)－完善 (14)
• WordPress自定义字段添加日志图片(2)－开始 (39)
• WordPress自定义字段添加日志图片(1)－引言 (32)
• WordPress theme Js Paper 2.5 发布 (26)
• WordPress 2.6中has_tag用法举例 (11)
• Js O3主题增加存档及链接页面模板 (15)

熟悉一点WordPress的朋友自然会想到利用分类或者标签功能，比如为每一篇发布主题的文章定义一个指定的分类或者标签，然后访问这个分类或标签的页面链接，它自然就是一个汇总页面了。当然我也是基于这个方向来考虑，但我还想在汇总页面上为各个主题添加一个缩略图，这样就更为直观，不是吗？还有就是只显示简略介绍就够了，不用什么日期啊评论啊的信息。所有这些就必须要自己制作一个页面模板了。OK，那就做一个页面模板，然后在后台新建一个页面，选取该模板方法。

如何在WordPress做一个页面模板？熟悉的朋友跳过，不太熟悉的朋友可以参照这篇文章建立一个。因为要筛选显示那些只是发布主题用的日志，所以在模板内的主循环代码部分：

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

的前面添加筛选用的代码：

<?php
$limit = get_option('posts_per_page');
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts('tag=idesign&showposts=' . $limit=15 . '&paged=' . $paged);
$wp_query->is_archive = true; $wp_query->is_home = false;
?>

红字部分是指定筛选标签为“idesign”的所有文章，如果你是通过分类来区别的话，把“tag=”换成“cat=分类ID号”则可。“15”就是指定读取的文章数。

到此是一个筛选功能的完成，至于需要在汇总页面中添加各个主题的图片，我希望它能自动读取该篇日志中的图片。因为发布主题的日志一定（一般情况下）带有主题的预览图，所以直接读取它并显示出来就行了。

在模板的主循环里，在你需要显示图片的位置中添加如下代码：

<img src="<?php echo catch_that_image() ?>" alt="" />

建议为该代码前后添加一个<div>的以方便控制它的样式，比如大小，是否浮动显示等。不要忘记的是，你必须在主题模板的function.php文件内同时添加上下面的功能代码，否则图片不会自动读取：

function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = "在这里指定如果没有图片则显示的默认图片路径";
}
return $first_img;
}

这样，系统就能自动读取在该篇文章中的第一个图片，注意是第一个；所以请把需要作为缩略图显示的图片放在日志中的首位。

所有上面操作都完成后，在后台新建页面，选取刚建立的页面模板，也不用写什么内容的了，存档后访问该页面，就会显示那些需要显示的文章，还有文章内的第一个图片。

因为我这里是利用JQuery直接读取这个模板，如果你也需要这样，你需要把上述的模板文件更改一下。在其开头位置添加：

<?php
if ($_SERVER["REQUEST_METHOD"] != "POST") {
header('Allow: POST');
header("HTTP/1.1 405 Method Not Allowed");
header("Content-type: text/plain");
exit;
}
$db_check = true;
function kill_data() {
return '';
}
function check_db() {
global $wpdb, $db_check;
if($db_check) {
// Check DB
if(!$wpdb->dbh) {
echo('Our database has issues. Try again later.');
} else {
echo('We\'re currently having site problems. Try again later.');
}
die();
}
}
ob_start('kill_data');
register_shutdown_function('check_db');
require_once(dirname(__FILE__)."/../../../wp-config.php");
$db_check = false;
ob_end_clean();
nocache_headers();
function fail($s) {
header('HTTP/1.0 500 Internal Server Error');
echo $s;
exit;
}
?>

然后指定一个激活的js效果，比如通过点击动作后读取这个页面；在你的模板js文件中添加：

$('激活链接的样式名字').click(function(){
$.ajax({
url : "/wp-content/themes/主题文件夹名字/上面制作的模板文件.php",
type: 'POST',
beforeSend: function() {
/*
这里是读取数据前的一系列动作，比如要隐藏什么，显示什么的，根据主题不同不同
*/
},
success : function (data) {
/*下面一行是读取成功后数据显示方式。比如我是把数据附加到一个名称为"#qs-area"区块内并通过"slideDown"的方式显示出来。*/
$("#qs-area").html(data).slideDown('slow');
}
});
return false;
});

在这里关于AJax的方法我写得较为简单，因为并不是本文的重点；或者大家需要折腾的话，有问题也可以在这里说下，看我能否帮上忙好了。通过上面的方法后，日后当我有新主题发布，我就只需要在撰写该篇文章的同时为它添加一个指定的标签后，它就会自动被添加到我的主题汇总页面中去，当然还带了张缩略图。一个很适合我的懒方法，呵呵。当然，如果你也需要汇总一些带图片的文章，此方法也适用，按需灵活处理一下则可。

© Jinwen for Jinwen Say, 2009. | Permalink | 24 comments | Add to del.icio.us
Post tags: JQuery, theme, WordPress, 模板

• 让回复留言的按钮动态点JQuery版 (31)
• 在WordPress中利用Jquery隐藏较旧留言 (15)
• WordPress中Ajax留言的简单实现 (42)
• DIY WordPress contact form with JQuery (1) (25)
• 让回复留言的按钮动态点 (40)
• 网站RSS订阅的JQuery弹出效果实现 (49)
• 给你们的懒人留言模式 (45)
• 清新绿色WordPress主题“Le Mag”发布下载 (36)
• 浅说WordPress自带分页的CSS样式设计 (15)
• 新主题与TwentyTen (84)

网络上有很多提供twitter背景图片制作的服务，喜欢省事的你可以google一下就可以找到。不过我觉得最简单的方法还是自己利用photoshop做个专属的背景吧，一点也不复杂，然后把它上传就可以了。比如我之前弄了一个是这个样子的：

我弄的是把自己的blog信息添加到twitter的页面中去，让它更为显眼；不过也是上传了好几次才把信息的位置拿准的。不知道大家是否也有兴趣弄一个个性一点的背景图，我把我使用的PSD文件放上来，至少方便大家，因为不太用调整位置了。

下载我的背景模板：jinwen-twitter-background-template

© Jinwen for Jinwen Say, 2009. | Permalink | 21 comments | Add to del.icio.us
Post tags: twitter, 模板

• WordPress中Ajax评论的完善参考 (105)
• 超过300位网页设计者的Twitter推荐 (15)
• 让回复留言的按钮动态点JQuery版 (31)
• 让回复留言的按钮动态点 (40)
• 蓝色风格DABR－Blue dabr 0.4 更新 (25)
• 自用twitter风格版dabr (20)
• 胖胖的twitter图标下载 (9)
• 简单说一下我的主题展示页面实现方法 (24)
• 漂亮标准的CSS模板代码 (5)
• 浅说WordPress自带分页的CSS样式设计 (15)

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

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)

如上截图，我在传统的“上一页”和“下一页”之间还加上了“返回主页”（home）及“跳至页首”(top)的两个按钮。因为我相信读者阅读至此，这两个按钮还是很方便他们的。

现在先说在index.php内插入的php代码：

<div id="nav-below" class="navigation">
<div class="nav-home"><a class="home" href="<?php echo get_settings('home') ?>/">HOME</a> | <a class="top" href="#content">Top</a></div>
<div class="nav-previous"><?php next_posts_link(__('Older posts')) ?></div>
<div class="nav-next"><?php previous_posts_link(__('Newer posts')) ?></div>
</div>

上面代码能用，直接复制插入你的index.php文件内则可，一般位置是页面的底部，也就是footer的对上。

然后其CSS样式代码如下：

.nav-previous a {
float: left;
background: transparent url(imgs/allbgs.png) no-repeat 0px -167px;
padding-left: 14px;
}

.nav-previous a:hover {
float: left;
background: transparent url(imgs/allbgs.png) no-repeat -79px -166px;
padding-left: 14px;
}

.nav-next a{
float: right;
background: transparent url(imgs/allbgs.png) no-repeat 74px -146px;
padding-right: 14px;
}

.nav-next a:hover{
float: right;
background: transparent url(imgs/allbgs.png) no-repeat 74px -184px;
padding-right: 14px;
}

.nav-home {
left: 194px;
position: relative;
top: 18px;
width: 120px;
}

a.top {
background: transparent url(imgs/allbgs.png) no-repeat -138px -197px;
padding-right: 14px;
}

a.top:hover {
background: transparent url(imgs/allbgs.png) no-repeat -56px -196px;
padding-right: 14px;
}

其中红字部分就是用来控制居中显示“home”和“top”的代码，建议增加width的属性，否则最右侧（上一页）的按钮会被遮挡，能显示而不能点击；另外在上面的代码中，我是为各个链接及其激活状态下都设置了背景图片，在你的模板中需要根据实际情况改一下各图片的路径；最后要说的是上述代码还可以整合一下；不过我这样写会比较清楚，刚开始学习CSS的朋友能更好理解。

© Jinwen for Jinwen Say, 2009. | Permalink | 15 comments | Add to del.icio.us
Post tags: CSS, WordPress, 模板, 设计

• 让回复留言的按钮动态点 (40)
• 现用主题通过CSS3和XHTML1.1.的认证 (9)
• 漂亮标准的CSS模板代码 (5)
• 我的WordPress主题这样做(4)-专属分类页面制作 (24)
• 带气泡样式留言数的日期标签制作 (12)
• 如何让IE6-IE7-FF的CSS样式一致 (5)
• 在WordPress中使用Dock样式导航栏 (4)
• 利用JQuery自动为文章内图片添加背景效果 (26)
• WordPress中你的style样式文件有多大 (12)
• WordPress 2.7 嵌套留言的设计样式补充 (20)

但其实在上篇文章中我是没有提及的，那个通过CSS实现的方法在IE6下是没效果的。看来如果大家喜欢那就还得照顾IE6了，所以就改为使用JQuery实现吧。想通过JQuery实现这个玩意功能的朋友，请增加如下js于你的header.php模板内或者整合到你原有的js文件中：

<script type="text/javascript">
$(document).ready(function(){
$(".re_icon").hide();
$(".commentlist li").hover(function() {
$(this).find(".re_icon").show();
}, function() {
$(this).find(".re_icon").hide();
});
});
</script>

这样就OK了，无需再在style.css文件中增加什么。如果你不用JQuery，那你也可以转回到这个CSS的方法。

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

• 简单说一下我的主题展示页面实现方法 (24)
• 在WordPress中利用Jquery隐藏较旧留言 (15)
• WordPress中Ajax留言的简单实现 (42)
• DIY WordPress contact form with JQuery (1) (25)
• 让回复留言的按钮动态点 (40)
• 网站RSS订阅的JQuery弹出效果实现 (49)
• 给你们的懒人留言模式 (45)
• 浅说WordPress自带分页的CSS样式设计 (15)
• 新主题与TwentyTen (84)
• 我的WordPress主题这样做(6)-留言楼层样式技巧 (36)

处理的方法很简单，就是使用几句CSS的语句，让回复图标只在鼠标停留在所在留言楼层才会出现，否则它就隐藏起来。这样会出现和消失的图标一定会吸引访客的，效果应该比默认显示的好。

其实效果就是象twitter的回复图标的出现方法一样了。在Sofish最近的文章《10个改善UI设计的技术》中（建议阅读！）也提供了这个效果的制作方法。在我的模板中，我增加的代码如下：

.re_icon img {margin-left:5px;border:none;}
.commentlist li .re_icon img { display: none; }
.commentlist li:hover .re_icon img { display: inline;}

其中：

第一句：.re_icon img用来决定回复图标的基本样式位置等；
第二句：指定图标默认隐藏；
第三句：指定当鼠标停留在.commentlist li这一层时候，回复图标出现。一般属性可以写display: block;，如果你发现位置有点异样，可以象我一样写成display: inline;。

是不是很简单，但效果绝对不错。如果你是用RSS阅读我的文章的话，也建议到我网站上去看看玩玩，不错不错的。

P.S. 再把这个小功能加上去后，突然发现自己把blog当作玩具了，尤其那些Ajax的效果，点来点去真的挺好玩的，呵。

© Jinwen for Jinwen Say, 2008. | Permalink | 40 comments | Add to del.icio.us
Post tags: WordPress, 模板, 设计

• 浅说WordPress自带分页的CSS样式设计 (15)
• 我的WordPress主题这样做(4)-专属分类页面制作 (24)
• 带气泡样式留言数的日期标签制作 (12)
• 难道这真的是WordPress做的 (23)
• 说说我在WordPress 2.7中留言嵌套的样式设计 (40)
• 让回复留言的按钮动态点JQuery版 (31)
• 草稿纸风格的WordPress主题构想 (50)
• 网页设计中的双色分隔线 (29)
• 给你们的懒人留言模式 (45)
• 简单说一下我的主题展示页面实现方法 (24)

本次的更新就是增加用于显示日志存档及友情链接的页面模板。

对于日志存档页，我目前只让其按分类及按月分来显示。至于按标签显示这个效果，我还没想到怎样才做得简洁些，所以就略去了。截图如下：（本站效果）

对于链接页的效果基本同上，只是小图标改变。截图如下：（本站效果）

如何使用这两个模板？首先请下载增加的文件压缩包：

js_o3_archive_link_page_file

解压上述压缩包，把文件放到主题目录内，其中style.css文件需要覆盖原来的。然后就在WordPress的后台新建页面，内容为空，只需要设定一下页面的名称则可，接着在页面模板栏内选择“Archives page”或“Link page”，完成。

如要下载更新后的完整主题，请移步这里下载。

© Jinwen for Jinwen Say, 2008. | Permalink | 15 comments | Add to del.icio.us
Post tags: Js-O3-theme, WordPress, 下载, 主题, 模板

• WordPress主题Js-O3-1.5版本更新下载 (58)
• WordPress theme Js O3 released (173)
• WordPress theme Js O3 1.5.5 更新 (85)
• 黑色WordPress主题Js O4 noire发布 (68)
• 新主题与TwentyTen (84)
• 我的WordPress主题这样做(6)-留言楼层样式技巧 (36)
• 我的WordPress主题这样做(4)-专属分类页面制作 (24)
• 我的WordPress主题这样做(3)-文章质疑应用 (20)
• 发布Js O4w主题配套使用的Ajax嵌套评论功能 (41)
• 准备发布现用WordPress主题Js O3 (25)

对于即将到来的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)