WordPress评论回复带气泡效果的实现代码

大部分Wordpress主题都会启用小工具这个功能,话说这是个很傻瓜的功能,但相当实用,只需通过后台拖拽就能实现前台各种显示问题。

现在给大家提供一段制作小工具的代码,并奉上明凯博客自用的侧栏最新评论列表模块,希望对你有用。

下面是后台最新评论小工具的添加方法:

把下面代码放到functions.php中:

 代码如下 复制代码
// 最新评论带头像评论
add_action('widgets_init', create_function('', 'return register_widget("widget_newcomments");'));
class widget_newcomments extends WP_Widget {
 function widget_newcomments() {
  $option = array('classname' => 'widget_newcomments', 'description' => '显示网友最新评论(头像+名称+评论)' );
  $this->WP_Widget(false, '最新评论 ', $option);
 }
 function widget($args, $instance) {
  extract($args, EXTR_SKIP);
  echo $before_widget;
  $title = empty($instance['title']) ? '最新评论' : apply_filters('widget_title', $instance['title']);
  $count = empty($instance['count']) ? '5' : apply_filters('widget_count', $instance['count']);
 
  echo $before_title . $title . $after_title;
  echo '<ul class="newcomments">';
  echo newcomments( $count );
  echo '</ul>';
  echo $after_widget;
 }
 function update($new_instance, $old_instance) {
  $instance = $old_instance;
  $instance['title'] = strip_tags($new_instance['title']);
  $instance['count'] = strip_tags($new_instance['count']);
  return $instance;
 }
 function form($instance) {
  $instance = wp_parse_args( (array) $instance, array( 'title' => '', 'count' => '' ) );
  $title = strip_tags($instance['title']);
  $count = strip_tags($instance['count']);
 
  echo '<p><label>标题:<input id="'.$this-/>get_field_id('title').'" name="'.$this->get_field_name('title').'" type="text" value="'.attribute_escape($title).'" size="24" /></label></p>';
  echo '<p><label>数目:<input id="'.$this-/>get_field_id('count').'" name="'.$this->get_field_name('count').'" type="text" value="'.attribute_escape($count).'" size="3" /></label></p>';
 }
}
 
function newcomments( $limit ){
 global $wpdb;
   $sql = "SELECT ID, post_title, comment_ID, comment_author,comment_author_email,comment_date,comment_content 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 $limit";
 $comments = $wpdb->get_results($sql);
 foreach ( $comments as $comment ) {
  $output .= "<li>" . get_avatar($comment->comment_author_email,32) ."<div class='rcomment'><strong>".$comment->comment_author."</strong>&nbsp;&nbsp;" .human_time_diff(strtotime($comment->comment_date), current_time('timestamp'))."前&nbsp;&nbsp;在&nbsp;&nbsp;<a href='". get_comment_link($comment->comment_ID) . "' title=' " . $comment->post_title .  "'> " . $comment->post_title .  "</a>&nbsp;&nbsp;评论:<div class='box'><span class='jt'>◆<span class='jt2'>◆</span></span>". convert_smilies($comment->comment_content)."</div></div></li>";
 }
 echo $output;
};

下面是最新评论的样式了:

 代码如下 复制代码
.newcomments div.rcomment{margin-left:50px;}
.newcomments div.box{background-color:#EEEEEE;position:relative;border:1px solid #CCCCCC;padding: 5px;border-radius: 5px;}
.newcomments div.box .jt{position:absolute;color:#CCCCCC;left:50px;top:-12px;font-size:22px;line-height: 24px;font-family:arial,verdana,sans-serif;}
.newcomments div.box .jt2{position:absolute;color:#EEEEEE;top:1px;left:0;}

大家可以来看看效果:

 

是不是有一种很很美丽的感觉

时间: 2024-07-28 14:16:45

WordPress评论回复带气泡效果的实现代码的相关文章

jquery带动画效果幻灯片特效代码_jquery

本文实例讲述了jquery带动画效果幻灯片插件devrama.slider.分享给大家供大家参考.具体如下: jquery带动画效果幻灯片插件devrama.slider是一款可以在焦点图中嵌入html内容和文字动画效果,运行时可出现图文层叠显示效果,且图片下方伴有进度条效果. 运行效果图:                                 -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换

怎样用ASP.NET做出QQ控件类似的评论回复

问题描述 如何在展示的每条评论下再展示出每个评论的回复,并且每条评论下还有可以回复的按钮,每条回复还可以再回复,就类似QQ空间的评论回复功能.希望可以有代码的参考.邮箱:2270967944@qq.com.谢谢大家! 解决方案 解决方案二:设计评论表就行了吧解决方案三:我有,用mvc做的一个例子..解决方案四:已经发到你的邮箱,希望对你有所帮助..解决方案五:引用2楼u013907025的回复: 我有,用mvc做的一个例子.. 谢谢,这几天忘记了,还没来得及看,多谢分享啊~~~解决方案六:766

wordpress中实现嵌套评论回复添加@功能

构成原理 开 wp-includes/comment-template.php, 查找 Walker_Comment 类. 以下展开介绍这 4 个方法. start_lvl 子菜单列表的开始标签, 默认是 <ul>, 在第一个子条目之前生成. end_lvl 对应 start_lvl 的子菜单列表的结束标签, 默认是 </ul>, 在最后一个子条目之后生成. start_el 条目的前半部分, 包括开始符号和评论内容. 开始符号是 <div> 或者 <li>

完美实现仿QQ空间评论回复特效

  这篇文章主要介绍了完美实现仿QQ空间评论回复特效,非常的实用,附上实例代码给大家,有需要的小伙伴参考下吧. 评论回复是个很常见的东西,但是各大网站实现的方式却不尽相同.大体上有两种方式 1. 像优酷这种最常见,在输入框中@要回复的人,这种方式下,用户可以修改@. 新浪微博则是在这个基础上,弹出好友菜单.这种方式的好处是不需要任何js,css处理兼容. 2. 像qq空间这种,对回复的人整个删除.本屌感觉这种方式比较好,但这种方式有些兼容性上的细节,这个后面会详细说明. 事实上,qq空间的这种实

纯CSS3实现带动画效果导航菜单无需js

随着互联网的发展,网页能表现的东西越来越多.由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了 html+css3.网页能表达的东西越来越多,css3兴起已经很多年了,不多由于国内网站要求对IE的兼容,html5+css3的发展很缓慢. html5+css3的出现给前端开发者提供了更多的可能性,以前很多只能通过JS实现的效果用纯粹的css3就能实现了. 下面介绍一个博主在css3学习过程中写的一个纯css3实现的带动画效果的导航菜单. 下面是效果图:  

评论回复布局-类似微信朋友圈的评论布局问题

问题描述 类似微信朋友圈的评论布局问题 要实现类似微信朋友圈的评论回复功能,目前通过嵌套listview已经基本实现了布局的显示功能,现在要实现点击某条评论,弹出输入框和输入法,且输入框的位置正好在点击的评论的正下方,毛事要动态的移动listview里面item的位置.看了下微信朋友圈和手机QQ的空间都是如此实现的,想问问,有没有有具体点的思路. 目前想到的难点如下: 1.listview里面的刚好占满一个屏幕,点击最后的一个item,如何将该item提升到输入法和输入框的上面,listview

WordPress 评论中的链接自动去除方法

修改wp-includes下的某文件,注释掉:  代码如下 复制代码 add_filter( 'comment_text', 'make_clickable',9 ); 这方法有效,但每次wp升级后都要重新修改:今天无意看到含有此功能的一个小插件,顿悟,原来可以如此:在模板的functions.php里(加在最后吧)加上这句代码就行了.  代码如下 复制代码 <?php remove_filter('comment_text', 'make_clickable', 9); ?> 一个add f

Wordpress评论头像设置方法

Wordpress 从 2.6 版开始集成 Grhttp://www.aliyun.com/zixun/aggregation/16376.html">avatar 头像插件.昨天给博客换了模板,新模板可以显示头像,有些朋友看到部分回复有自定义的头像,邮件问如何设置,樂思蜀下面给出详细的设置方法: 第一步.注册 1.访问这里,点击"Sign Up",输入常用邮箱后确认. 2.检查邮件,会收到一封 support@gravatar.com 发来的邮件,点击其中的链接确认你

纯JS代码实现气泡效果_javascript技巧

就不给大家多文字说明了.给大家梳理下关键步骤. 关键步骤: 1.引入js文件 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src='js/jquery.thoughtBubble.js'></script> 2.在需要使用气泡效果的地方 <div i