本站使用评论效果分享

  Wordpress          256 阅读          2018-04-27

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

效果展示

Wordpress高仿36KR登陆界面

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获取文章评论人数并输出评论用户列表

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

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

涉及文章

Tippy.js网页链接title效果

Tippy.js网页链接title效果

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

支付宝二维码
微信二维码

扫码打赏,您说多少就多少!

感谢您的打赏,我们会更加努力的更新站点!

 

 

发表评论