在开始之前,先让我无耻一把,给大家看一个效果,重点看评论效果(我很无耻的找了一个评论最多的文章,也只有45个评论)
加入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我们可以轻松获取文章总的评论数,同时在文章中通过列表展示出来,最近在制作评论模板的时候我就在想,能…
Tippy.js可以为a链接设置title鼠标滑过效果,具体效果见本站文章列表的文章标题以及侧边栏随机文章,鼠标滑过的时…
感谢您的打赏,我们会更加努力的更新站点!
本文链接:本站使用评论效果分享
转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:刘荣焕,谢谢!
风君子 3年前 (2019-01-16)
为啥我安装播放插件后,不显示播放按钮啊,测试版本4.9.8和5.0,系统自带的模板也一样,只显示时间和进度条 https://www.fengjunzi.com/blog-711.html,请问如何修复啊
晴和君 4年前 (2018-04-28)
我的页面左下角也有类似的东西。不过实现方式是完全不一样了。哈哈
刘荣焕 4年前 (2018-04-28)
@晴和君 原理应该是大同小异
boke112导航 4年前 (2018-04-28)
其他好像没什么,就是多一个参与者的展示,这个功能不错,有需要的人会喜欢的。
刘荣焕 4年前 (2018-04-28)
@boke112导航 其实技术没什么,我就是凑凑文章数量,囧啊
夏天烤洋芋 4年前 (2018-04-28)
感觉你那个显示涉及到的文章,占的位置有点太多了。
刘荣焕 4年前 (2018-04-28)
@夏天烤洋芋 我感觉也是,我在想办法看看多篇文章怎么设置比较好
王小蒙 4年前 (2018-11-30)
@刘荣焕 12
电炖锅的那些事 4年前 (2018-04-27)
博主,来交流学习了。