分享各种网络资源
是我乃至整个互联网的精髓所在
最新公告:
  • 开启被动注册模式,详情点击这里,同时接小单,QQ:330733312
  • 目前站点正在不断折腾和调试中,如有问题请见谅
     您目前所在位置: 站点首页 » WordPress » WordPress 代码 » WordPress右下角添加个人最近评论
  • WordPress右下角添加个人最近评论

  • 添加jQuery 库
  • 添加HTML代码
  • 添加获取评论的函数
  • 添加JS代码
  • 添加相关CSS代码
  • 总结
  • WordPress右下角添加个人最近评论-BanYuner

    前段时间直接在页面右下角添加了一个显示个人用户最近评论了哪些文章的功能,有群友看到之后问我怎么实现的,其实我也是照搬别人的代码来的,所以这里我还是说一下怎么使用吧:

    添加jQuery 库

    如果你的主题已经自动加载了,那么就可以忽略这一步了。

    ////////Get jQuery
    if (!is_admin()) {
    function my_scripts_method() {
    wp_enqueue_script('jquery');
    }
    add_action('wp_enqueue_scripts', 'my_scripts_method');
    }
    

    添加HTML代码

    <div class="guest_comments">
    <div class="guest_info">
    <?php
    $user = wp_get_current_user();
    if ($user->exists()) { //这是博主登陆情况
    echo '您好, <strong>'. $user->user_login .'</strong>, <a id="guest_comments" href="#" class="'. $user->user_email .'" rel="nofollow">点击这里</a>可以查看您最近的评论。';
    } else { //访客有评论过
    if($_COOKIE["comment_author_" . COOKIEHASH]!=""){
    echo '您好, <strong>' , $_COOKIE["comment_author_" . COOKIEHASH] , '</strong>, <a id="guest_comments" href="#" class="'. $_COOKIE["comment_author_email_" . COOKIEHASH] .'" rel="nofollow">点击这里</a>可以查看您最近的评论。';
    } else {
    echo 'Welcome! o(∩_∩)o';
    }
    } ?>
    </div>
    <div id="guest_comments_list"></div>
    <a href="#" id="gc_close" rel="nofollow">X</a>
    </div>
    

    这个代码的功能就是跟你的Cookie来判断你之前的评论。代码添加到footer.php中之前即可。

    添加获取评论的函数

    //////// Ajax: ajax_guest_comments by zwwooooo | zww.me
    function ajax_guest_comments(){
    if( isset($_GET['action'])&& $_GET['action'] == 'ajax_guest_comments'  ){
    nocache_headers();
    $gc_userEmail = isset($_GET['gc_userEmail']) ? $_GET['gc_userEmail'] : null;
    ?>
    <ul>
    <?php
    $announcement = '';
    $arg = array(
    'status' => 'approve',
    'number' => 12, //获取的评论数
    'post_tyle' => 'post',
    'author_email' => $gc_userEmail
    );
    $comments = get_comments($arg);
    $home_url=home_url();
    if ( !empty($comments) ) {
    foreach ($comments as $comment) {
    $comment_link=get_comment_link( $comment->comment_ID, array('type' => 'all'));
    $announcement .= '<li><span>' . get_comment_date('Y/m/d H:i',$comment->comment_ID) . '</span> <a rel="nofollow" href="'. $comment_link .'" title="on《'. get_the_title($comment->comment_post_ID) .'》">'. convert_smilies(strip_tags($comment->comment_content)) . '</a></li>';
    }
    }
    if ( empty($announcement) ) $announcement = '<li class="reply">我发现您还没评论过 ^_^</li>';
    echo $announcement;
    ?>
    </ul>
    <?php
    die();
    }
    }
    add_action('init', 'ajax_guest_comments');
    

    此段代码添加到functions.php中即可。

    添加JS代码

    <script type="text/javascript">
    jQuery(document).ready(function($){
    var $guest_comments_list=$('#guest_comments_list'),
    $gc_close=$('#gc_close');
    $('#guest_comments').click(function(){
    zloading=0;
    var $this=$(this),
    userEmail=$this.attr('class');
    if (userEmail=='click') {
    $guest_comments_list.show();
    $gc_close.show();
    return false;
    }
    $gc_close.show();
    $guest_comments_list.show();
    $.get('./?action=ajax_guest_comments&gc_userEmail='+userEmail,
    function (data) {
    $this.attr('class','click');
    $guest_comments_list.html(data);
    }
    );
    return false;
    });
    $gc_close.click(function(){
    $guest_comments_list.hide();
    $(this).hide();
    return false;
    });
    });
    </script>
    

    上面一段代码我个人是添加到了footer.php之中的。

    添加相关CSS代码

    /* ajax guest comments */
    .guest_comments{position:relative;z-index:9999;position:fixed;bottom:0;right:30px;min-width:300px;max-width:450px;line-height:20px;background:#fff;border-radius:4px 4px 0 0;box-shadow:1px -2px 7px #777;}
    .guest_info{padding:5px;}
    .guest_info a{color:#f20;}
    .guest_info a:hover{color:#3f6c18;}
    #guest_comments_list{overflow-y:auto;display:none;max-height:450px;border-top:3px solid #999;}
    #guest_comments_list li{overflow:hidden;list-style:none;line-height:20px;padding:0 5px;color:#777;background:#f2f2f2;border-top:1px solid #999;}
    #guest_comments_list li span{margin-right:10px;font-weight:bold;color:#555;}
    #guest_comments_list li:hover > span{color:#000;}
    #guest_comments_list li a{color:#333;font-size:12px;}
    #gc_close{display:none;position:absolute;top:3px;right:3px;width:24px;height:24px;line-height:24px;text-align:center;color:#a80000;font-weight:bold;background:#fff;}
    

    上面的CSS代码添加之后可能不会很适合你的站点,大家可以自行修改,显示结果就是文章开头的那样了。

    总结

    这个功能其实还可以做出很多延伸功能,如果你愿意去折腾的话,还是有开发的余地的。比如你可以设置如果你发现用户没有登录,那么可以添加一个登录页面,或者添加一个随机文章什么的,都是可以的,就看个人的想法了。

    测试一下
    

    关注我们 打赏 分享此文

    微信扫码,关注我们

    扫码,支持我

    WordPress右下角添加个人最近评论

    支付宝(点击图片切换)

    扫码,支持我

    WordPress右下角添加个人最近评论

    微信(点击图片切换)

    扫码,手机看

    WordPress右下角添加个人最近评论
    匿名

    个人评价:┃草根博主┃站点无技术含量┃文章内容不够吸引人┃转载内容随处可见┃资源均来自网络┃分享是我的宗旨,也是这个站点存在意义,分享的东西你现在可能不需要,但是我相信只要在某个时间你需要的时候能在这里找到,那么我就是成功的

    WordPress右下角添加个人最近评论
    3 + 9 =
    1. 4楼
      陌小雨博客
      最后评论时间:2017/10/19 23:07
      来自天朝的朋友 火狐浏览器 Windows 10 湖北省仙桃市 电信
      很棒的功能!赞一个! :twisted:
      • 帅气小琦琦
        最后评论时间:2017/10/20 15:02
        来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 联通
        @陌小雨博客 你这个表情和评论不服 差评
        帅气小琦琦    22小时前回复
        • 陌小雨博客
          最后评论时间:2017/10/19 23:07
          来自天朝的朋友 火狐浏览器 Windows 10 湖北省仙桃市 电信
          @帅气小琦琦 晕,没仔细看,你应该给每个表情图片添加一个alt和title属性呀,我以为是一个大拇指的赞呢!
          • 帅气小琦琦
            最后评论时间:2017/10/20 15:02
            来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 联通
            @陌小雨博客 一个表情而已 加什么title和alt啦 本来就是很逗比的表情 就是应该逗逼的使用啊
            帅气小琦琦    22小时前回复
    2. 3楼
      熊哥club
      最后评论时间:2017/05/24 10:57
      来自天朝的朋友 谷歌浏览器 Windows 7 浙江省绍兴市 电信
      mark一下 有空折腾下
      熊哥club 5个月前 (05-24)回复
    3. 2楼
      楚书业
      最后评论时间:2016/10/01 10:16
      来自天朝的朋友 QQ浏览器 Windows 10 福建省 移动
      你这文章内文字禁止复制设置得不理想。毕竟代码教程,肯定是希望别人来取经,而不是来围观!
      楚书业 1年前 (2016-10-01)回复
      • 帅气小琦琦
        最后评论时间:2017/10/20 15:02
        来自天朝的朋友 Safari浏览器 iPhone iPhone OS 9_3_1 like Mac OS X) AppleWebKit 湖北省武汉市 电信
        @楚书业 不是啊 代码是可以复制的啊
        帅气小琦琦    22小时前回复
        • 楚书业
          最后评论时间:2016/10/01 10:16
          来自天朝的朋友 QQ浏览器 Windows 10 福建省 移动
          @帅气小琦琦 其他的帖子的代码可以复制,就这个帖子我复制不了。
          楚书业 1年前 (2016-10-01)回复
          • 帅气小琦琦
            最后评论时间:2017/10/20 15:02
            来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 联通
            @楚书业 你不说 我还没有发现 我看看什么情况 貌似是插件的问题吧
            帅气小琦琦    22小时前回复
            • 楚书业
              最后评论时间:2016/10/01 10:16
              来自天朝的朋友 QQ浏览器 Windows 10 福建省 移动
              @帅气小琦琦 :???: 我是刚好看了两篇想用的文章,一篇是归档页美化(本来想集合到island主题,发现还要再改改css样式,便没去整了),另外是这一篇!
              楚书业 1年前 (2016-10-01)回复
              • 帅气小琦琦
                最后评论时间:2017/10/20 15:02
                来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 联通
                @楚书业 额 不管是什么插件或者代码 CSS方面总是要做修改的
                帅气小琦琦    22小时前回复
      • 帅气小琦琦
        最后评论时间:2017/10/20 15:02
        来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 联通
        @楚书业 重新保存了一次就好了- -
        帅气小琦琦    22小时前回复
        • 楚书业
          最后评论时间:2016/10/01 10:16
          来自天朝的朋友 QQ浏览器 Windows 10 福建省 移动
          @帅气小琦琦 :???: :grin: 貌似还是不行!
          楚书业 1年前 (2016-10-01)回复
          • 帅气小琦琦
            最后评论时间:2017/10/20 15:02
            来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信
            @楚书业 我已经修改文章了 实际上是短代码的函数功能没有添加造成的
            帅气小琦琦    22小时前回复
    4. 1楼
      楚书业
      最后评论时间:2016/10/01 10:16
      来自天朝的朋友 QQ浏览器 Windows 10 福建省 移动
      原来教程在这里!类似张戈的访客互动。
      楚书业 1年前 (2016-10-01)回复
      • 帅气小琦琦
        最后评论时间:2017/10/20 15:02
        来自天朝的朋友 Safari浏览器 iPhone iPhone OS 9_3_1 like Mac OS X) AppleWebKit 湖北省武汉市 电信
        @楚书业 嗯嗯 后来特意去找了的 弄过来了
        帅气小琦琦    22小时前回复