首页 WordPress教程 WordPress文章点赞功能纯代码实现方法
正文 评论

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

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

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

今天主题君分享一种纯代码实现WordPress文章点赞功能功能。

第一步:添加功能代码

// 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 localhostsetcookie(\'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代码

//点赞$.prototype.postLike = function () {if ($(this).hasClass(\'done\')) {UIkit.notification({message: \'<i ></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文件中

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

<div ><a href=\"javascript:;\" rel=\"external nofollow\"  data-action=\"topTop\" data-id=\"<?php the_ID(); ?>\" ><?php echo ($dot_good=get_post_meta($post->ID, \'dotGood\', true)) ? $dot_good : \'0\'; ?>人点赞</a></div>

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

第四部:点赞按钮美化

最后是给文章点赞按钮css样式美化,这个看个人需要了,主题君提供一个案例:

.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

-=||=-收藏赞 (0)
更多主题
单栏极简文艺WordPress博客主题:Diaspora主题
¥ 0 关注:20,837
详情
简约黑白WordPress个人博客主题:Personal主题
¥ 0 关注:20,642
详情
v1.0.0
小程序收录免费WordPress主题:XCX主题
¥ 0 关注:20,566
详情
v1.0.0
一款简约单栏的免费WordPress博客主题:itheme主题
¥ 0 关注:18,499
详情
功能丰富切轻量的WordPress虚拟资源主题:Rizhuti主题
¥ 599 关注:18,414
详情
大气优雅免费WordPress博客主题:HONEY主题
¥ 0 关注:15,293
详情
回复
暂无评论

不要再留垃圾评论了,主题君整理资源不容易,留几句鼓励的话吧。