关于小悟志网站地图归档友情链接联系Feed

云上小悟 + 

首页 » 网站建设 »

自定义WordPress原生态评论展现样式

网站建设
2015年11月30日 / 116次阅读
标签:WordPress

拍拍贷

文章《自定义WordPress原生态评论展现样式》的特色图片

我想可能有很多站长跟我一样,不太喜欢在自己的网站上使用第三方的评论插件。不是因为它们不好,而是不够放心。我希望自己的网站能够永远运行下去,而我无法相信第三方品论插件的服务器会一直保持开机状态。WordPress原生态评论可以不好看,但是它非常可靠。

使用WordPress原生态的评论功能的另外一个好处,是可以自己随意的定义评论部分的展现样式。通过一个回掉函数,自己就可以完全自定义评论部分如何显示,它也可以变得很好看。

显示评论,一般都是在comments.php文件中调用wp_list_comments函数,如下:

<ul class="comment-list">
<?php wp_list_comments('callback=mt_comment'); ?>
</ul>

 

以上调用中,有一个callback参数,参数的值为mt_comment,就是在这个函数中自己定义评论显示样式。

下面这段代码是WordPress默认的评论显示样式代码,我们要自己定义评论显示效果,就在这段代码基础上修改(如果不修改这段代码,回调之后评论的显示与默认情况一样):

function mytheme_comment($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment;
    extract($args, EXTR_SKIP);

    if ( 'div' == $args['style'] ) {
        $tag = 'div';
        $add_below = 'comment';
    } else {
        $tag = 'li';
        $add_below = 'div-comment';
    }
?>
<<?php echo $tag ?> <?php comment_class( empty( $args['has_children'] ) ? '' : 'parent' ) ?> id="comment-<?php comment_ID() ?>">
<?php if ( 'div' != $args['style'] ) : ?>

<div id="div-comment-<?php comment_ID() ?>" class="comment-body">
<?php endif; ?>

<div class="comment-author vcard">
<?php if ( $args['avatar_size'] != 0 ) echo get_avatar( $comment, $args['avatar_size'] ); ?>
<?php printf( __( '<cite class="fn">%s</cite> <span class="says">says:</span>' ), get_comment_author_link() ); ?>
</div>

<?php if ( $comment->comment_approved == '0' ) : ?>
<em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.' ); ?></em>

<?php endif; ?>

<div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ); ?>">
<?php /* translators: 1: date, 2: time */ printf( __('%1$s at %2$s'), get_comment_date(), get_comment_time() ); ?></a><?php edit_comment_link( __( '(Edit)' ), ' ', '' ); ?>
</div>

<?php comment_text(); ?>

<div class="reply">
<?php comment_reply_link( array_merge( $args, array( 'add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
</div>

<?php if ( 'div' != $args['style'] ) : ?>
</div>

<?php endif; ?>
<?php
}

 

可以注意到代码中缺少了一个结尾的</li>,WordPress会在列出所有子级分类后自动添加结尾</li>。

本站的评论就是用的这个方法,下面这段代码是本站使用的回调函数,对上面这段代码有轻微的修改,供参考:

function mt_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment;
extract($args, EXTR_SKIP);

if ( 'div' == $args['style'] ) {
$tag = 'div';
$add_below = 'comment';
} else {
$tag = 'li';
$add_below = 'div-comment';
}
?>
<<?php echo $tag ?> <?php comment_class(empty( $args['has_children'] ) ? '' : 'parent') ?> id="comment-<?php comment_ID() ?>">
<?php if ( 'div' != $args['style'] ) : ?>
<div id="div-comment-<?php comment_ID() ?>" class="comment-body">
<?php endif; ?>
<div class="comment-author vcard">
<?php if ($args['avatar_size'] != 0) echo get_avatar( $comment, $args['avatar_size'] ); ?>
<?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
</div>
<?php if ($comment->comment_approved == '0') : ?>
<em class="comment-awaiting-moderation"><?php _e('Your comment is awaiting moderation.') ?></em>
<br />
<?php endif; ?>

<div class="comment-meta commentmetadata">
<span style="font-size:12px;color:#aaaaaa;"><?php
/* translators: 1: date, 2: time */
printf( __('%1$s at %2$s'), get_comment_date(), get_comment_time());
?></span><?php edit_comment_link(__('(Edit)'),' ','' ); ?>
</div>

<p><?php echo get_comment_text(); ?>

<span class="reply">&nbsp;&nbsp;[
<?php comment_reply_link(array_merge( $args, array('add_below' => $add_below, 'depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
]</span>
</p>
<?php if ( 'div' != $args['style'] ) : ?>
</div>
<?php endif; ?>
<?php
}

 

用这个方法自定义WordPress的评论显示效果,简单有效可控。下图就是本站的ugly的评论效果,相信大家自定义出来的效果,都比我的好看:

云上小悟独立博客自定义的评论展示效果

云上小悟独立博客自定义的评论展示效果

本文链接:http://www.maixj.net/wz/wordpress-pinglun-9067
云上小悟 麦新杰(QQ:1093023102)

相关文章

评论是美德

无力满足评论实名制,评论对非实名注册用户关闭,有事QQ:1093023102.


前一篇:
后一篇:

栏目精选


©Copyright 麦新杰 Since 2014 云上小悟独立博客版权所有 备案号:苏ICP备14045477号-1

网站二维码
拍拍贷
go to top