本站使用评论效果分享

在开始之前，先让我无耻一把，给大家看一个效果，重点看评论效果（我很无耻的找了一个评论最多的文章，也只有45个评论）

效果展示

Wordpress高仿36KR登陆界面189

加入Wordpress家庭，折腾的脚步就不能停歇，今天有时间研究一下Wordpress登陆界面。或许你和我一样，已经厌倦…

WordPress评论区域展示评论用户列表，并且通过自定义函数展示评论用户的一些信息，最后通过Tippy.js展示出来。中间涉及的一些技术信息在之前的文章中已经进行了详细的论述，本文只做综合演练，如果对前面的技术你都不会使用，那么本文可能和您无缘了。

第一步：我们先重新制作一下文章评论头像列表：

/*输出文章评论头像列表*/
function tuts_comments_user_avatars($postid=0) {
	$comments = get_comments('status=approve&type=comment&post_id='.$postid); //获取文章的所有评论
	if ($comments) {
		$commentusers=array();
        
		$commentusers=array();
		foreach ($comments as $comment) {
			if ( !in_array($comment->comment_author_email, $commentusers) ) {
				echo '<li class="uk-text-center uk-text-meta">';
                echo '<img src="https://secure.gravatar.com/avatar.php?gravatar_id='.md5($comment->comment_author_email).'" alt="'.$comment->comment_author.'">';
                echo "<a href='".$comment->comment_author_url."' target='_blank' rel='nofollow' ";
                echo 'title="';
                if(wp_is_mobile()){
                    echo $comment->comment_author.'共'.get_author_comment_count($comment->comment_author_email).'评论';
                }else{
                    echo "<div class='uk-padding-small uk-background-default tuts_avatar_tooltip'>";
                    echo "<img src='https://secure.gravatar.com/avatar.php?gravatar_id=".md5($comment->comment_author_email)."' alt='".$comment->comment_author."'>";
                    echo "<p class='uk-text-meta uk-margin-remove-bottom'>".$comment->comment_author."(共".get_author_comment_count($comment->comment_author_email)."评论)</p>";
                    echo "<p class='uk-margin-remove-bottom'>他最后说：".author_last_comment_content($comment->comment_author_email)."</p>";
                    echo "<p class='uk-text-meta uk-margin-remove-bottom'>这个家伙已经".human_time_diff(mysql2date('U', author_last_comment_time($comment->comment_author_email), 'true'), current_time('timestamp'))."没有留言了</p>";
                    echo "</div>";
                }
                echo '"';
                echo " class='tuts_tooltip uk-text-truncate tuts_avatar_names'>".$comment->comment_author."</a>";
				echo '</li>';
				$commentusers[] = $comment->comment_author_email;
	
			}
		}  
	}
}

第二步：制作自己的评论列表回调函数：

/////////////////////////// Commentlist外观~~ ////////////////////////
function themetuts($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
<li id="comment-<?php comment_ID() ?>" <?php comment_class('comment_list',$comment_id,$comment_post_ID); ?>>
    <article class="uk-comment uk-visible-toggle">
        <header class="uk-comment-header uk-position-relative">
            <div class="uk-grid-medium uk-flex-middle" uk-grid>
                <div class="uk-width-auto">
                    <img class="uk-comment-avatar" src="https://secure.gravatar.com/avatar.php?gravatar_id=<?php echo md5($comment->comment_author_email);?>" width="80" height="80" alt="<?php comment_author(); ?>">
                </div>
                <div class="uk-width-expand">
                    <h4 class="uk-comment-title uk-margin-remove">
                        <a href="<?php comment_author_url(); ?>" title="
                            <?php if(wp_is_mobile()){ ?>
                                <?php comment_author(); ?>
                            <?php }else{ ?> 
                                <div class='uk-padding-small uk-background-default tuts_avatar_tooltip'>
                                <img src='https://secure.gravatar.com/avatar.php?gravatar_id=<?php echo md5($comment->comment_author_email);?>' alt='<?php echo $comment->comment_author;?>'>
                                <p class='uk-text-meta uk-margin-remove-bottom'><?php echo $comment->comment_author;?>(共<?php echo get_author_comment_count($comment->comment_author_email);?>评论)</p>
                                <p class='uk-margin-remove-bottom'>他最后说：<?php echo author_last_comment_content($comment->comment_author_email);?></p>
                                <p class='uk-text-meta uk-margin-remove-bottom'>这个家伙已经<?php echo human_time_diff(mysql2date('U', author_last_comment_time($comment->comment_author_email), 'true'), current_time('timestamp'));?>没有留言了</p>
                                </div>
                            <?php } ?> 
                           " rel="nofollow" target="_blank" class="uk-link-reset tuts_tooltip">
                            <?php comment_author(); ?>
                        </a>
                        <span class="uk-text-muted uk-text-small"><?php echo timeago(get_gmt_from_date(get_comment_date('Y-m-d G:i:s'))); ?></span>
                    </h4>
                    <p class="uk-comment-meta uk-padding-small uk-padding-remove-bottom uk-padding-remove-horizontal uk-margin-remove-top">
                        <?php comment_text() ?>
                    </p>
                </div>
            </div>
            <div class="uk-position-top-right uk-position-small uk-hidden-hover">
                <?php 
                    $comment_reply_class = 'uk-link-muted uk-text-small';
                    echo preg_replace( '/comment-reply-link/', 'comment-reply-link ' . $comment_reply_class, 
                        get_comment_reply_link(array_merge( $args, array(
                            'reply_text' => '回复', 
                            'depth' => $depth, 
                            'max_depth' => $args['max_depth']))), 1 ); 
                ?>
            </div>
        </header>
    </article>
<?php
}
///////////////////// Commentlist结束////////////////////////

第三步：在文章中见进行调用：

   <ul class="uk-margin-remove" uk-tab>
        <li><a href="#"><?php comments_number('暂无评论','1评论','% 评论'); ?></a></li>
        <li><a href="#"><?php echo tuts_comments_users(get_the_ID()); ?>参与者</a></li>
    </ul>

    <ul class="uk-switcher uk-margin-remove">
        <li>
            <ul class="uk-comment-list">
               <?php wp_list_comments('type=comment&style=ul&callback=themetuts&max_depth=1000'); ?>
            </ul>
            <div class="uk-padding-small">
                <div class="uk-pagination uk-flex-center" uk-margin>
                    <?php paginate_comments_links(array('prev_next'=>true)); ?>
                </div>
            </div>
        </li>
        <li>
           <ul class="uk-list uk-padding-small tuts_comments_user_avatars">
               <?php tuts_comments_user_avatars(get_the_ID()); ?>
           </ul>
        </li>
    </ul>

涉及文章

WordPress获取评论用户的信息

在上一篇文章中，我们输出了评论用户头像列表，那么，我们能不能再输出一些评论者的信息呢？比如：某读者的最后评论时间，总的评…

涉及文章

WordPress获取文章评论人数并输出评论用户列表

通过WordPress我们可以轻松获取文章总的评论数，同时在文章中通过列表展示出来，最近在制作评论模板的时候我就在想，能…

涉及文章

Tippy.js网页链接title效果

Tippy.js可以为a链接设置title鼠标滑过效果，具体效果见本站文章列表的文章标题以及侧边栏随机文章，鼠标滑过的时…

赏

本文链接：本站使用评论效果分享

转载声明：本站文章若无特别说明，皆为原创，转载请注明来源：刘荣焕，谢谢！

发表评论

- 晴和君 4周前 (04-28)
  
  我的页面左下角也有类似的东西。不过实现方式是完全不一样了。哈哈
  
  回复
  - 刘荣焕 4周前 (04-28)
    
    @晴和君原理应该是大同小异
    
    回复
- boke112导航 4周前 (04-28)
  
  其他好像没什么，就是多一个参与者的展示，这个功能不错，有需要的人会喜欢的。
  
  回复
  - 刘荣焕 4周前 (04-28)
    
    @boke112导航其实技术没什么，我就是凑凑文章数量，囧啊
    
    回复
- 夏天烤洋芋 4周前 (04-28)
  
  感觉你那个显示涉及到的文章，占的位置有点太多了。
  
  回复
  - 刘荣焕 4周前 (04-28)
    
    @夏天烤洋芋我感觉也是，我在想办法看看多篇文章怎么设置比较好
    
    回复
- 电炖锅的那些事 4周前 (04-27)
  
  博主，来交流学习了。
  
  回复

本站使用评论效果分享

效果展示

Wordpress高仿36KR登陆界面189

涉及文章

WordPress获取评论用户的信息

涉及文章

WordPress获取文章评论人数并输出评论用户列表

涉及文章

Tippy.js网页链接title效果

相关文章

WordPress获取评论用户的信息

WordPress获取文章评论人数并输出评论用户列表

WordPress comment_reply_link添加自定义Class

宝塔面板修复WordPress404页面

WordPress评论文本移除P标签

调整Woocommerce结算页面字段顺序

移除Woocommerce结算页面字段

阅后即焚的评论管理员通知

针对百度MIP启用专门主题

WordPress+小程序实现两步登录

WordPress整站链接在新窗口打开

WordPress缩略图调用输出alt以及title信息

发表评论

晴和君 4周前 (04-28)

刘荣焕 4周前 (04-28)

boke112导航 4周前 (04-28)

刘荣焕 4周前 (04-28)

夏天烤洋芋 4周前 (04-28)

刘荣焕 4周前 (04-28)

电炖锅的那些事 4周前 (04-27)

随机文章

本站使用评论效果分享

效果展示

Wordpress高仿36KR登陆界面189

涉及文章

WordPress获取评论用户的信息

涉及文章

WordPress获取文章评论人数并输出评论用户列表

涉及文章

Tippy.js网页链接title效果

扫码打赏，您说多少就多少！

相关文章

WordPress获取评论用户的信息

WordPress获取文章评论人数并输出评论用户列表

WordPress comment_reply_link添加自定义Class

宝塔面板修复WordPress404页面

WordPress评论文本移除P标签

调整Woocommerce结算页面字段顺序

移除Woocommerce结算页面字段

阅后即焚的评论管理员通知

针对百度MIP启用专门主题

WordPress+小程序实现两步登录

WordPress整站链接在新窗口打开

WordPress缩略图调用输出alt以及title信息

发表评论

随机文章