代码实现类似大前端DUX WordPress主题评论列表显示楼层

文章目录[隐藏]

逛其他童鞋的WordPress网站的时候,发现很多童鞋的评论列表后面的楼层显示第几层。这个功能是怎么实现的了?

比如大前端DUX主题的评论列表就有楼层计数功能。可以到大前端主题文件中看一下人家的写法,毕竟是国内的大佬,值得学习。

代码实现类似大前端DUX WordPress主题评论列表显示楼层技术教程主机格调

该文件位于大前端DUX主题目录下的modules文件夹中,名字叫做mo_comments_list.php:。

/**
 * [mo_comments_list description]
 * @param  [type] $comment [description]
 * @param  [type] $args    [description]
 * @param  [type] $depth   [description]
 * @return [type]          [description]
 */
function mo_comments_list($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment;

    global $commentcount, $wpdb, $post;
    if(!$commentcount) { //初始化楼层计数器

        $page     = get_query_var('cpage');//获取当前评论列表页码
        $cpp      = get_option('comments_per_page');//获取每页评论显示数量
        $pcs      = get_option('page_comments');//分页开关
        
        $comments = $wpdb->get_results("SELECT * FROM $wpdb->comments WHERE comment_post_ID = $post->ID AND comment_type = '' AND comment_approved = '1' AND !comment_parent");
        $cnt      = count($comments);//获取主评论总数量

        if ( get_option('comment_order') === 'desc' ) { //倒序
            if (!$pcs || ceil($cnt / $cpp) == 1 || ($page > 1 && $page  == ceil($cnt / $cpp))) {
                $commentcount = $cnt + 1;//如果评论只有1页或者是最后一页,初始值为主评论总数
            } else {
                $commentcount = $cpp * $page + 1;
            }
        }else{ //顺序
            if( !$pcs ){
                $commentcount = 0;
            }else{
                $page = $page-1;
                $commentcount = $cpp * $page;
            }
        }
    }
    
    echo '<li '; comment_class(); echo ' id="comment-'.get_comment_ID().'">';
 if(!$parent_id = $comment->comment_parent ) {
        echo '<span class="comt-f">#'. (get_option('comment_order') === 'desc'?--$commentcount:++$commentcount) .'</span>';
    }
 echo '<div class="comt-avatar">';
        echo _get_the_avatar($user_id=$comment->user_id, $user_email=$comment->comment_author_email);
    echo '</div>';
echo '<div class="comt-main" id="div-comment-'.get_comment_ID().'">';
comment_text();
if ($comment->comment_approved == '0'){
            echo '<span class="comt-approved">待审核</span>';
        }
 echo '<div class="comt-meta"><span class="comt-author">'.get_comment_author_link().'</span>';
            echo _get_time_ago($comment->comment_date); 
            if ($comment->comment_approved !== '0'){
$replyText = get_comment_reply_link( array_merge( $args, array('add_below' => 'div-comment', 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) );
                // echo str_replace(' href', ' href="javascript:;" data-href', $replyText ); 
                if( strstr($replyText, 'reply-login') ){
 echo preg_replace('# class="[\s\S]*?" href="[\s\S]*?"#', ' class="signin-loader" href="javascript:;"', $replyText );
                }else{
                  echo preg_replace('# href=[\s\S]*? onclick=#', ' href="javascript:;" onclick=', $replyText );
                }
            }
echo '</div>';
echo '</div>';
}

方法一

像大前端DUX主题一样,在主题目录下建立modules文件夹,然后将上面的代码保存在该文件夹中,再利用如下代码加载到WordPress中。

function _moloader($name = '', $apply = true) {
	if (!function_exists($name)) {
		include get_stylesheet_directory() . '/modules/' . $name . '.php';
	}

	if ($apply && function_exists($name)) {
		$name();
	}
}

加载方式多种多样,直接使用include引用也是可以的。

然后通过_moloader(‘mo_comments_list’, false);来加载上面的代码,最后就是使用了。WordPress提供了评论列表加载方法wp_list_comments函数,该函数可以携带回调函数callback。

wp_list_comments('type=comment&callback=mo_comments_list');

上述代码的意思是取出评论数据,并交给回调函数mo_comments_list来处理,mo_comments_list就是上面我们的楼层计数方法,其中包含了输出评论的内容。

方法二

直接将上面的代码写在functions.php文件中,返回在文章页适当位置使用下面代码来调用。

wp_list_comments('type=comment&callback=mo_comments_list');

第二个方法无疑是最为简单。但是如果在functions.php中,加入太多的东西难免会显得臃肿。。

未经允许不得转载:主机格调 » 代码实现类似大前端DUX WordPress主题评论列表显示楼层

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏