您当前的位置:主页 > 教程合集 > WordPress网站利发国际WordPress

WordPress文章页实现点赞功能(非插件)

发布时间:2016-02-21编辑:余斗阅读:(0)字号:
    在访问其他WordPress博客的时候,余斗发现不少文章页下面都带有点赞的功能或类似这样的功能: WordPress文章页实现点赞功能(非插件) WordPress文章页实现点赞功能(非插件) 这个功能虽然对优化意义不大,但是会使博客看起来功能更齐全,以前一直没时间来搞定这个功能,虽然百度一下也能找到不少WordPress的点赞插件,但是余斗最不喜欢加载插件,能自己搞定的都自己搞定,恰好最近一段时间不是很忙,余斗抽空研究了一下这个功能,终于搞定,今天就把教程写出来,希望能帮到有这个需求的用户。 实现点赞功能的原理很简单,就是通过自定义字段来实现保存和调用点赞数量,然后用cookies来禁止重复点赞,具体实现方法为: 一、将以下php代码加入博客当前使用主题的function.php文件中:

    add_action('wp_ajax_nopriv_bigfa_like', 'bigfa_like');
    add_action('wp_ajax_bigfa_like', 'bigfa_like');
    function bigfa_like(){
            global $wpdb,$post;
            $id = $_POST["um_id"];
            $action = $_POST["um_action"];
            if ( $action == 'ding'){
            $bigfa_raters = get_post_meta($id,'bigfa_ding',true);
            $expire = time() + 99999999;
            $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost
            setcookie('bigfa_ding_'.$id,$id,$expire,'/',$domain,false);
            if (!$bigfa_raters || !is_numeric($bigfa_raters)) {
                    update_post_meta($id, 'bigfa_ding', 1);
            }
            else {
                            update_post_meta($id, 'bigfa_ding', ($bigfa_raters + 1));
                    }
         
            echo get_post_meta($id,'bigfa_ding',true);
           
            }
           
            die;
    }
     
    二、将以下js代码放入文章页(single.php),余斗建议放在底部:

    <script type="text/javascript">
    $.fn.postLike = function() {
        if ($(this).hasClass('done')) {
            return false;
        } else {
            $(this).addClass('done');
            var id = $(this).data("id"),
            action = $(this).data('action'),
            rateHolder = $(this).children('.count');
            var ajax_data = {
                action: "bigfa_like",
                um_id: id,
                um_action: action
            };
            $.post("/wp-admin/admin-ajax.php", ajax_data,
            function(data) {
                $(rateHolder).html(data);
            });
            return false;
        }
    };
    $(document).on("click", ".favorite",
    function() {
        $(this).postLike();
    });
    </script>
     
    三、在文章页中(single.php )需要显示点赞的地方(一般都是文章正文下面即<?php the_content(); ?>代码下面)加入以下代码:

    <div class="post-like">
                      <a href="http://exproevent.com/spa" style="color:#91268F">"javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" class="favorite<?php if(isset($_COOKIE['bigfa_ding_'.$post->ID])) echo ' done';?>">喜欢 <span class="count">
                            <?php if( get_post_meta($post->ID,'bigfa_ding',true) ){
                                            echo get_post_meta($post->ID,'bigfa_ding',true);
                                      } else {
                                            echo '0';
                                      }?></span>
                    </a>
      </div>
     
    做到这一步其实就实现了WordPress的点赞功能,但是因为没有加样式,是一片空白,余斗稍微做了修饰,把以下代码加入文章页使用的css文件中:

    .post-like{text-align:center;padding:10px}
    .post-like a{ background-color:#21759B;border-radius: 3px;color: #FFFFFF;font-size: 12px;padding: 5px 10px;text-decoration: none;outline:none}
    .post-like a.done, .post-like a:hover{background-color:#eee;color:#21759B;}   
    .post-like a.done{cursor:not-allowed}

     

    WordPress文章页实现点赞功能(非插件)
    点赞前 WordPress文章页实现点赞功能(非插件) 点赞后 WordPress文章页实现点赞功能(非插件) 动态预览整个过程 虽然看起来比较粗糙,但是完美实现了我们需要的点赞功能,如果要像文章开头举的两个例子那么美观,修改css样式即可,余斗这里不做过多介绍。
关键字词WordPress 文章页 点赞功能
余斗余斗
  1. 转载请注明: WordPress文章页实现点赞功能(非插件)_余斗余斗_利发国际
  2. 版权声明: 本站原创文章,由 发表在 WordPress 分类下,于2016-02-21最后更新
WordPress文章页原创Meta声明标注
为WordPress博客文章页添加OG协议标签
手机扫一扫 随身带着看

利发国际

百度360搜索搜狗搜索