现在的位置:首页>wordpress>正文

用代码让你的wordpress网站评论也是评论嵌套

2013年06月28日 ⁄ 共 4478字 评论 5 条

小编的网站刚开始用了个不知名的主题,所以在回复评论时不会以嵌套的方式出现在网页上,看上去相当不爽,如下图:

conments1

后来干脆装了一个插件,效果还是不怎么的,想想插件装多了也不是什么好事情,所以折腾着自已写代码!其实实现起来也比较简单,先来看看我的comments.php文件,代码如下:

<!– comments  –>
<div id=”comments”>
<?php
if (‘comments.php’ == basename($_SERVER['SCRIPT_FILENAME']))
die (‘Please do not load this page directly. Thanks!’);
if (!empty($post->post_password)) {
if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) {
?>
<p><?php _e(“This post is password protected. Enter the password to view comments.”); ?><p>
<?php
return;
}
}
$commentalt = ”;
$commentcount = 1;
?>

<h2><?php comments_number(‘暂无留言’, ’1条留言’, ‘% 条留言’ ); if($post->comment_status == “open”) { ?><a href=”#commentform”>我要留言 &raquo;</a><?php } ?></h2>

<?php if ($comments) : ?>

<ol>
<?php wp_list_comments();?>
</ol>

<?php if ($trackback == true) { ?>
<h2>Trackbacks</h2>
<ol>
<?php foreach ($comments as $comment) : ?>
<?php $comment_type = get_comment_type(); ?>
<?php if($comment_type != ‘comment’) { ?>
<li><?php comment_author_link() ?></li>
<?php } ?>
<?php endforeach; ?>
</ol>
<?php } ?>
<?php endif; ?>

<div id=”respond”>
<?php if ($post->comment_status == “open”) : ?>
<?php if (get_option(‘comment_registration’) && !$user_ID) : ?>
<p>请 <a href=”<?php echo get_option(‘siteurl’); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>”>登陆</a> 评论</p>
<?php else : ?>
<form action=”<?php echo get_option(‘siteurl’); ?>/wp-comments-post.php” method=”post” id=”commentform”>
<fieldset>
<?php if ($user_ID) : ?>
<p><a href=”<?php echo get_option(‘siteurl’); ?>/wp-admin/profile.php”>你好,<?php echo $user_identity; ?></a> | <a href=”<?php echo get_option(‘siteurl’); ?>/wp-login.php?action=logout” title=”<?php _e(‘Log out of this account’) ?>”>注销</a></p>

<?php else : ?>
<p><label for=”author”>姓名</label> <input type=”text” name=”author” id=”author” value=”<?php echo $comment_author; ?>” tabindex=”1″ /> <?php if ($req) echo “<em>必填</em>”; ?></p>
<p><label for=”email”>Email</label> <input type=”text” name=”email” id=”email” value=”<?php echo $comment_author_email; ?>” tabindex=”2″ /> <em><?php if ($req) echo “必填,绝不公开”; ?></em></p>
<p><label for=”url”>网站</label> <input type=”text” name=”url” id=”url” value=”<?php echo $comment_author_url; ?>” tabindex=”3″ /></p>
<?php endif; ?>
<p  id=”respond”><label for=”comment”>留言</label>
<textarea name=”comment” cols=”45″ rows=”10″ tabindex=”4″></textarea></p>
<p><?php comment_id_fields(); ?>
<input type=”submit” name=”submit” value=”提交留言” tabindex=”5″ /></p>
<div id=”cancel-comment-reply”>
<small><?php cancel_comment_reply_link() ?></small>
</div>
</fieldset>
<?php do_action(‘comment_form’, $post->ID); ?>
</form>
</div>
<?php endif; ?>
<?php endif;  ?>
</div>
<!– /comments –>

 
通过以上代码,我们评论就是嵌套的了,你也可以直接将此代码复制到你的comments.php模板内,接下来还要对css做一下处理,这样你的嵌套评论才会看上去像那么回事!以下为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 12px 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:1px 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:10px; }
ol.commentlist li div.comment-meta a { color:#ccc; }
ol.commentlist li p { font-size:13px; 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:12px; }
ol.commentlist li div.reply a { font-weight:bold;}
ol.commentlist li #cancel-comment-reply {font-size:15px;}
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 {}

 
最后的效果如图:

conments2

评论 5 条 评论内容很精采,有内幕,而且绝对有干货

  1. Depayvierie 2013年07月14日 11:43  @回复  Δ-49楼 回复

    你这个评论框就不是很漂亮,建议您修改一下.楼层保留,css效果改一下.

  2. Optoftacout 2013年07月15日 14:26  @回复  Δ-48楼 回复

    请问评论框要实现回复跳到评论内容下面,用代码能实现吗?

  3. Toner chip 2014年09月14日 09:48  @回复  Δ-47楼 回复

    1楼说得不错,博主可是试试再修改一下效果。

  4. 车用尿素设备 2015年05月18日 23:58  @回复  Δ-46楼 回复

    车用尿素设备

给我留言