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

功能丰富的WordPress点赞插件不少,但对于要在主题中集成简单文章点赞功能的需求,插件就显得不合适,于是乎非插件实现文章点赞功能的方法就诞生,实现思路是:可以通过ajax实时显示点赞数量,自定义字段保存赞数量,Cookies禁止重新点赞。

具体操作步骤。

1、在当前主题functions.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;
}
2、在主题的header.php文件的</head>前添加以下代码:
<script type="text/javascript">
$(document).ready(function() { 
$.fn.postLike = function() {
if ($(this).hasClass('done')) {
alert('您已赞过本博客');
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("<?php bloginfo('url');?>/wp-admin/admin-ajax.php", ajax_data, function(data) {
$(rateHolder).html(data);
});
return false;
}
};
$(document).on("click", ".favorite", function() {
$(this).postLike();
});
}); 
</script>
3、在当前主题的single.php文件的<?php the_content();?>代码下面添加点赞按钮调用代码:
<div class="post-like">
<a href="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>
4、在当前主题的style.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}
注:需要引用版本为1.10或以上的jquery。
这篇文章如果帮到了你 打赏
分享到: 更多 (0)
12
如果文章内容或图片资源失效或者您对文章有异议,请留言反馈或点击右下角邮件图标发送邮件说明情况,我们会及时处理,谢谢!
  • WordPress在文章列表插入一篇广告跳转文章或在任意位置插入广告代码
    这个Wordpress技巧可以让你在文章列表中的任意位置插入一篇或多篇广告跳转文章,完美的与主题结构融合,与主题列表的展现形式一模一样,不用去额外的改变任何结构!而且可以一键无痕的将发布的任何文章变成广告跳转文章! 实现过程非常简单,利用了...
  • wordpress给你的网页添加一个加载动画
    网页加载需要一个过程,现在这个过程可以极短了,不过有些朋友还是希望能用一个动画来代替这个过程,让加载不再那么枯燥。搜索了一下,很多这类文章,方法很多,利用CSS实现应该是最好的办法了。过程很简单,只需两步。 添加方法 第一步 创建一个css...
  • WordPress插件-Post Expirator 给文章或页面设置一个到期时间
    有些时候,一些文章或页面没必要始终展示,比如公告,活动,广告等,但是对于像我一样的懒人们又不想拐回去关闭文章,或者忘记关闭文章。这是你就需要这样一个插件。 Post Expirator 这个插件使用起来比较简单,功能也够强大,可以为文章或者...
  • 代码实现网站外链自动转换为内链
    实现步骤: 首先复制以下代码,添加到主题目录下的function.php文件中 /*  *自动给文章的外部链接添加nofollow属性  */    add_filter('the_content','web589_the_content_...
  • official多用途企业门户官网类WordPress主题自适应wordpress企业主题
    official多用途企业门户官网类WordPress主题WordPress企业主题是由歪主题出品的一款比较简洁实用非常简单的一款wordpress企业类型主题,主题虽然包含多项设置选项,但真正需要设置的很少很少,所以无论你有无经验都可以轻...
  • 五个步骤提升你的WordPress安全等级
    我敢肯定你周围肯定有关于WordPress安全的小故事,或者是数据库被入侵,或者是网站被挂马,甚至整个网站都没了。因此,是非常有必要地针对WordPress执行一些安全措施,尽可能降低WordPress因漏洞而被黑客做手脚。 如何提高你的W...
  • 七大免费WordPress画廊相册插件
    如果你正在准备建立一个以图片为主的WordPress博客,你可能需要考虑图片展示的问题。如果直接平铺一张张展示,貌似显得有点乏味,且会将页面拉得很长。WordPress自带的相册功能,有比较单一。 So,今天的主题是图片和图片相册。事不宜迟...
  • 怎样在wordpress使用Font Awesome字体图标
    Font Awesome是一款矢量的图标或可以称为字体图标,他的所有属性都可以通过CSS进行设定,包括:大小、颜色、阴影或者其它任何支持的效果。不旦有效解决了图像加载慢的问题,而且好提供了超过5000+的图标方案。 在wordpress使用...
  • WordPress 批量删除所有文章的特色图像
    说到 WordPress 的特色图像功能,相信大家都比较熟悉了,今天分享 批量删除所有文章的特色图像 的方法,或许有些朋友会用得上。将下面的代码添加到当前主题的 functions.php : /** * WordPress 批量删除所有文...
  • WordPress 5.0 换回原有”Classic Editor”经典编辑器的三种方法
    WordPress 5.0 正式采用了全新的“Block Editor”编辑器,从而替换了原有“Classic Editor”编辑器,相信有很多人都不习惯或者不喜欢新编辑器,那么新版 WordPress 该如何换回原来的 WordPress...
  • WordPress 如何实现纯代码添加禁止某些用户登录的方法
    在某些特殊情况下某些用户损害了网站的利益,你可能就需要禁止他们登录网站,WordPress博客如何实现免插件纯代码添加禁止某些用户登录的方法,也就是WordPress博客用户怎么实现封号,近日以来网站垃圾信息,垃圾回复泛滥,由于之前不怎么关...
  • WordPress自定义登录页面LOGO、链接、文本、样式等
    自定义 WordPress 登录界面 Logo 在主题目录 functions.php 中加入以下代码: //自定义WordPress登录界面Logo function fanly_custom_login_logo() { echo '&...

评论 抢沙发



觉得文章有用就赞赏支持一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏