wordpress侧边栏评论代码(含头像)

作者: 鲁智深 分类: wordpress 发布时间: 2013-12-16 01:47

以前一直没有在意此功能,想在博客上搜一下此功能发现没有写过,下面就分享一下如何实现侧边栏评论功能。

Gravatar头像

Gravatar头像

侧边栏评论代码

打开侧边栏模版sidebar.php文件,下面是代码:

1
2
3
4
5
6
7
8
9
10
11
  <?php
         global $wpdb;
         $sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID,comment_post_ID, comment_author,comment_author_email,comment_date_gmt, comment_approved, comment_type,comment_author_url, SUBSTRING(comment_content,1,15) AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND post_password = '' ORDER BY comment_date_gmt DESC LIMIT 5";
         $comments = $wpdb->get_results($sql);
         $output = $pre_HTML;
         foreach ($comments as $comment) {
             $output .= "\n<li>".get_avatar($comment, 32)."" . $comment->comment_author . ": <br /> <a href="" . get_permalink($comment->ID) . "#comment-" . $comment->comment_ID . "" title="". $comment->comment_author. ":" . $comment->post_title . "">" . strip_tags($comment->com_excerpt) ."</a></li>";
        }
         $output .= $post_HTML;
         echo $output;
     ?>

此代码调用的Gravatar的头像(ps:可能会出现头像显示缓慢的情况,有技术的朋友可以调用QQapi实现qq头像显示)

1
ORDER BY comment_date_gmt DESC LIMIT 5

上面代码的中的“5”意思就是显示5条评论代码,可根据需要自己条件。

全部代码显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
          <!-- 侧边栏评论-->
          <div class="con_box hot_box">
        <div class="block comment"><h3>最新评论</h3>
    <ul>
     <?php
         global $wpdb;
         $sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID,comment_post_ID, comment_author,comment_author_email,comment_date_gmt, comment_approved, comment_type,comment_author_url, SUBSTRING(comment_content,1,15) AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID) WHERE comment_approved = '1' AND comment_type = '' AND post_password = '' ORDER BY comment_date_gmt DESC LIMIT 5";
         $comments = $wpdb->get_results($sql);
         $output = $pre_HTML;
         foreach ($comments as $comment) {
             $output .= "\n<li>".get_avatar($comment, 32)."" . $comment->comment_author . ": <br /> <a href="" . get_permalink($comment->ID) . "#comment-" . $comment->comment_ID . "" title="". $comment->comment_author. ":" . $comment->post_title . "">" . strip_tags($comment->com_excerpt) ."</a></li>";
        }
         $output .= $post_HTML;
         echo $output;
     ?>
     </ul>
 </div>
    </div>
          <!-- 侧边栏评论结束-->

css样式

1
2
3
4
/*---侧边栏评论---*/
.con_box .block.comment{}
.con_box .block.comment li{clear:both;color:#649315;margin-top:5px;padding:0 0 3px 0;border-bottom:1px #ddd dashed; height:45px;}
.con_box .block.comment li img{float:left;margin:5px 8px 0 0 ;}

关于评论头像的alt属性已经在《wordpress评论头像上加alt属性》中介绍过。

注意:关于前端css样式网页设计方面的活还是比较简单的,这里不再多做解释。

相关阅读:

多说评论框背景css样式设置

wordpress后台默认头像更换

wordpress评论圆角头像怎么做

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注