本站使用评论效果分享

前端之家收集整理的这篇文章主要介绍了本站使用评论效果分享前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

效果展示

Wordpress高仿36KR登陆界面

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

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

    $commentusers=array();
    foreach ($comments as $comment) {
        if ( !in_array($comment->comment_author_email,$commentusers) ) {
            echo '<li class="uk-text-center uk-text-meta"&gt;';
            echo '<img src="https://secure.gravatar.com/avatar.php?gravatar_id='.md5($comment->comment_author_email).'" alt="'.$comment->comment_author.'"&gt;';
            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;

        }
    }  
}

}

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


  • >

    Meta uk-padding-small uk-padding-remove-bottom uk-padding-remove-horizontal uk-margin-remove-top">

    '回复','depth' => $depth,'max_depth' => $args['max_depth']))),1 ); ?>
    PHP } ///////////////////// Commentlist结束////////////////////////
  • 第三步:在文章中见进行调用

    PHP">   
    
    <ul class="uk-switcher uk-margin-remove"&gt;
        <li>
            <ul class="uk-comment-list"&gt;
               <?php wp_list_comments('type=comment&amp;style=ul&amp;callback=themetuts&amp;max_depth=1000'); ?>
            </ul>
            <div class="uk-padding-small"&gt;
                <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"&gt;
               <?php tuts_comments_user_avatars(get_the_ID()); ?>
           </ul>
        </li>
    </ul></code></pre>

    <h4 class="uk-margin-remove uk-padding-small" uk-scrollspy="cls:uk-animation-slide-bottom-small;repeat: true">涉及文章<div class="uk-padding-small" uk-grid uk-scrollspy="cls:uk-animation-slide-bottom-small;repeat: true">
    <div class="uk-width-1-4"><img src="/res/2019/01-12/16/cb2ea972d29a3bad806d8da7af9ae071.jpg" alt="wordpress获取评论用户的信息" title="wordpress获取评论用户的信息">


    <div class="uk-width-3-4 uk-padding-small uk-padding-remove-vertical">

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

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

    文章

    Tippy.js网页<a href=链接title效果" title="Tippy.js网页链接title效果">

    链接title效果" target="_blank" style="font-size:15px">Tippy.js网页链接title效果

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

    wordpresswordpress

    猜你在找的wordpress相关文章