让您的主题支持WP2.7以上新留言评论功能

04.27-2010 | 三石 | 15 Comments | 4,034 views

　　大多使用wordpress搭建过站点的人都会使用评论插件，这是由于wp2.7以前的版本缺省的评论留言设置功能性很差，但使用过多的插件会严重带慢wp系统的运行效率.wordpress2.7发布后终于解决了这个问题，经过这次升级后wordpress的评论留言功能大大的加强了，开始自带了“嵌套回复”也就是引用回复和评论留言分页功能，但是一个问题随之出现，那就是几乎所有用户现行使用的主题模板中都没有写入能够正常使用wp2.7这个新功能的代码。而且目前能够支持这一功能的新主题模板又少之又少！这个贴子将step by step的告诉大家如何快速的让你的模板支持这一功能！
关键点：

用新留言调用函数:

1	<?php wp_list_comments();?>

关于 wp_list_comments函数更多请参阅wp_list_comments官方文档

替换旧函数:

1	<?php comment_text() ?>

第一步

到后台停用那些臃肿庞大的评论优化插件。并到后台设置（wp2.7）→进入讨论项，勾选里面的“允许嵌套X层评论”选项。

第二步

选择主题（以WPclassic主题为例），打开header.php。

在:

1	wp_head();

这个函数之前添上:

1	<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

说明：该代码的作用是在文章和页面调用新的留言评论Javascript文件！

第三步

在模板的编辑板块里打开comments.php评论模板，通常的模板的留言列表部分的代码如下：

<?php if ( $comments ) : ?>
	<ol id="commentlist">
<?php foreach ($comments as $comment) : ?>
	<li>
	...
	<?php comment_text() ?>
	...
	</li>
<?php endforeach; ?>
	</ol>
<?php else : // If there are no comments yet ?>
	<p><?php _e('No comments yet.'); ?></p>
<?php endif; ?>

整体替换成：

<?php if ( $comments ) : ?>
   <ol class="commentlist">
<?php wp_list_comments();?>
   </ol>
<?php else : // If there are no comments yet ?>
   <p><?php _e('No comments yet.'); ?></p>
<?php endif; ?>

说明：在wp2.7版里是用一个wp_list_comments();完全取代原来模板里经常会用到的comment_text、comment_date、comment_time、comment_author_link、echo get_avatar这几个函数。需要注意的是如果你原来的ol、ul等用的是

id=”commentlist”应改为class=”commentlist”，如果不改可能会跟我们之后新定义的CSS样式产生冲突。

Tip：当然每个模板的代码情况可能不尽相同，但是大同小异，只需要记住这一步是要用新函数“wp_list_comments();”替换旧函数“comment_text()”这个关键点就可以了，比如你以前手动添加过avatar头像等函数也不要紧下面

举个例子来说明：

比如你以前的留言评论列表部分的代码如下，这是段典型的自定义过comment_text、comment_date、comment_time、comment_author_link、echo get_avatar这些函数的代码：

<?php if ($comments) : ?>
<ul class="commentlist">
	<?php foreach ($comments as $comment) : ?>
	<?php
$isByAuthor = false;
if($comment->comment_author_email == get_the_author_email()) {
$isByAuthor = true;
}?>
<div class="commentlist">
		<li id="comment-<?php comment_ID() ?>" <?php if($isByAuthor ) { echo 'class="my_comment"';} ?>>
	<div class="commentlistleft">
		<?php echo get_avatar( $comment, $size = '45' ); ?>
		<cite><strong><?php comment_author_link() ?> <?php if($isByAuthor ) { echo '';} ?> </strong></cite>
	</div>
	<div class="commenttext">
	<div class="commentmetadata"><?php comment_date('Y-j-n') ?> <?php comment_time('H:i:s') ?></div>
		<?php if ($comment->comment_approved == '0') : ?>
		<p><em>您的留言正在等待审核.....</em></p>
		<?php endif; ?>
		<?php comment_text() ?>
	</div>
</div>
		</li>
		<?php endforeach; /* end for each comment */ ?>
</ul>
		<?php else : // this is displayed if there are no comments so far ?>

		<?php if ('open' == $post->comment_status) : ?>
		<!-- If comments are open, but there are no comments. -->

		<?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		<p class="nocomments">Comments are closed.</p>

		<?php endif; ?>
<?php endif; ?>

很乱吧，没关系你需要做的只是把其中的

1	<ul class="commentlist">.......</ul>

这个闭合中的所有元素整体替换成：

1
2
3

   <ol class="commentlist">
<?php wp_list_comments();?>
   </ol>

替换后代码就变成这样了

<?php if ($comments) : ?>
<ol class="commentlist">
<?php wp_list_comments();?>
</ol>
<?php else : // this is displayed if there are no comments so far ?>

	<?php if ('open' == $post->comment_status) : ?>
		<!-- If comments are open, but there are no comments. -->

	 <?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		<p class="nocomments">留言功能已关闭，如果您有话要说请访问留言板！</p>

	<?php endif; ?>
<?php endif; ?>

怎么样简洁多了吧！当然这时你也许会有疑惑；comment_text、comment_date、comment_time、comment_author_link、echo get_avatar这些函数就这样被替换掉了他们的div也被删掉，那之前给他们定义css样式也就是失效了，我

去哪里重新定义呢！别着急面包会有的！继续往下看就知道了！

第四步

还是在comments.php这个文件里输入”textarea“查找到textarea/textarea这个闭合，其实就是找到输入留言的那个field区域！看看这个textarea中是否有id=”comment”这个属性，如果有就把id=”comment”去掉（不是去掉

div里的，而是去掉textarea中的ID定义）。

第五步

继续在comments.php这个文件找到下面这段代码：

1	<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />

用下面这段代码替换：

1	<?php comment_id_fields(); ?>

说明：这也是很关键的一步，comment_id_fields函数的作用是对回复框进行定义，以便支持新的嵌套回复功能。

第六步

新建一个id为”respond”的div包裹（div id=”respond”…………/div）把从（还是以WPclassic主题为例）

1	<h2 id="postcomment"><?php _e('Leave a comment'); ?></h2>

到

1	<?php endif; // If registration required and not logged in ?>

闭合起来！

说明：这样做是为了在点击留言者旁边的“回复”时，即可把留言框整体移至想要回复的留言下面！但是这个效果我也没有修改成功，现在的效果是点击回复时页面会自动移至底下的留言框位置，也能方便留言回复。

第七步

在上一步id为”respond”的div包裹内的头部或者底部增加下面这一段：

1
2
3

<div id="cancel-comment-reply">
    <small><?php cancel_comment_reply_link() ?></small>
</div>

这是一个取消引用回复的链接选项，比如你点击了谁的留言回复，突然又不想回复了，就点击它取消刚才的评论状态，其实作用很鸡肋。

第八步

最后就是对以上修改的这些函数进行新的CSS的定义，下面给出的是一个国外网友Chris Harrison提供了CSS部分一套配色方案，基础已经打得很好了，把它拷贝到你的style.css文件中就可以了，如果需要修改，你只需要在里面找

到相对应的项可以了！

ol.commentlist { list-style:none; margin:0 0 1em; padding:0; text-indent:0; }
ol.commentlist li { }
ol.commentlist li.alt { }
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment { border-bottom:1px dotted #666; padding:1em; }
ol.commentlist li div.comment-author {}
ol.commentlist li div.vcard { font:normal 16px georgia,times,serif; }
ol.commentlist li div.vcard cite.fn { font-style:normal; }
ol.commentlist li div.vcard cite.fn a.url {}
ol.commentlist li div.vcard img.avatar { border:5px solid #ccc; float:right; margin:0 0 1em 1em; }
ol.commentlist li div.vcard img.avatar-32 {}
ol.commentlist li div.vcard img.photo {}
ol.commentlist li div.vcard span.says {}
ol.commentlist li div.commentmetadata {}
ol.commentlist li div.comment-meta { font-size:9px; }
ol.commentlist li div.comment-meta a { color:#ccc; }
ol.commentlist li p { font-size:11px; margin:0 0 1em; }
ol.commentlist li ul { font-size:11px; list-style:square; margin:0 0 1em 2em; }
ol.commentlist li div.reply { font-size:11px; }
ol.commentlist li div.reply a { font-weight:bold; }
ol.commentlist li ul.children { list-style:none; margin:1em 0 0; text-indent:0; }
ol.commentlist li ul.children li {}
ol.commentlist li ul.children li.alt {}
ol.commentlist li ul.children li.bypostauthor {}
ol.commentlist li ul.children li.byuser {}
ol.commentlist li ul.children li.comment {}
ol.commentlist li ul.children li.comment-author-admin {}
ol.commentlist li ul.children li.depth-2 { border-left:5px solid #555; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-3 { border-left:5px solid #999; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-4 { border-left:5px solid #bbb; margin:0 0 .25em .25em; }
ol.commentlist li ul.children li.depth-5 {}
ol.commentlist li ul.children li.odd {}
ol.commentlist li.even { background:#fff; }
ol.commentlist li.odd { background:#f6f6f6; }
ol.commentlist li.parent { border-left:5px solid #111; }
ol.commentlist li.pingback { border-bottom:1px dotted #666; padding:1em; }
ol.commentlist li.thread-alt { }
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

还可以参看国外网友Chris Harrison提供的几种配色方案。

注明：这篇文章是参考了零号相册提供的修改方法，加上我自己修改时的体验写成的！

标签：wordpress, 代码, 使用技巧

转载注明来源：三石映像 - « 让您的主题支持WP2.7以上新留言评论功能 »
本文链接地址：http://www.3anshi.com/let-you-them-wp2-7-xinliuyan-pinglun.html

一	二	三	四	五	六	日
« 十
		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

三石映像

home / web建站