WordPress文章点赞功能纯代码实现方法

WordPress文章点赞功能现在几乎是每个WordPress博客必不可少的功能之一了。

很多人都不懂这个文章点赞该怎么实现，为了实现功能而去找WordPress文章点赞插件，功能丰富的WordPress点赞插件不少，但是因为这么个小功能使用一个插件，有点不太好，也说不上哪里不好，反正悟空搜觉得不好。

今天悟空搜分享一种纯代码实现WordPress文章点赞功能功能。

第一步：添加功能代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// AJAX点赞

function dotGood()

{

    global $wpdb, $post;

    $id = $_POST["um_id"];

    if ($_POST["um_action"] == 'topTop') {

        $specs_raters = get_post_meta($id, 'dotGood', true);

        $expire = time() + 99999999;

        $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost

        setcookie('dotGood_' . $id, $id, $expire, '/', $domain, false);

        if (!$specs_raters || !is_numeric($specs_raters)) update_post_meta($id, 'dotGood', 1);

        else update_post_meta($id, 'dotGood', ($specs_raters + 1));

        echo get_post_meta($id, 'dotGood', true);

    }

    die;

}



add_action('wp_ajax_nopriv_dotGood', 'dotGood');

add_action('wp_ajax_dotGood', 'dotGood');





首先把上面代码复制到主题的 functions.pnp 文件内。



第二部：添加JS代码




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//点赞

$.prototype.postLike = function () {

    if ($(this).hasClass('done')) {

        UIkit.notification({

            message: '<i class="iconfont icon-icon-test30"></i> 您已经点过赞了！！！',

            status: 'warning',

        });

        return false;

    } else {

        $(this).addClass('done');

        var id = $(this).data("id"),

            action = $(this).data('action'),

            rateHolder = $(this).children('.count');

        var ajax_data = {

            action: "dotGood",

            um_id: id,

            um_action: action

        };

        $.post("/wp-admin/admin-ajax.php", ajax_data,

               function (data) {

            $(rateHolder).html(data);

        });

        return false;

    }

};

$(".dotGood").click(function () {

    $(this).postLike();

});





然后把上面JS脚本代码复制到主题已经引用的JS文件中



第三部：添加文章点赞按钮




1
2
3
4
5
<div class="zan ">

<a href="javascript:;" rel="external nofollow"  data-action="topTop" data-id="<?php the_ID(); ?>" class="dotGood <?php echo isset($_COOKIE['dotGood_' . $post->ID]) ? 'done' : ''; ?>">

<?php echo ($dot_good=get_post_meta($post->ID, 'dotGood', true)) ? $dot_good : '0'; ?>人点赞

</a>

</div>





 接下来是添加点赞按钮，把上面代码写进需要添加ajax点赞的文章页面里即可。



第四部：点赞按钮美化



最后是给文章点赞按钮css样式美化，这个看个人需要了，悟空搜提供一个案例：




1
2
3
4
5
6
7
.zan {}

.zan a {padding:8px 16px 9px 13px;font-size: 14px;color: #fff;background-color: #fe7f6f;}

.zan a:hover {background-color: #ed1c24}

.zan a:hover {color: #fff}

.zan .count {font-size: 13px;}

.reward {background-color: #f5a754!important}

.zan .done {background-color: #ed1c24!important}





刷新文章页面，看看是不是多了一个点赞的按钮呢？ 如果想获取到点赞最多的文章该怎么实现呢？



也不难，下面这篇文章为你详细解答：



[xx_insert_post station_article="1330"]




扫码关注wp悟空搜



精选优质免费WordPress主题模板，分享最新WordPress实用建站教程！



记住我们的网址：ztJun.com

		    					    			
			    					    					    				    					    			
 原文链接：https://xiaohost.com/1329.html，转载请注明出处。