WP酷 WP酷
  • 主题
  • 教程
  • 插件
  • 官方 QQ 群
  • 建站推荐
  • 联系
  • nicetheme® 奈思主题
  • 注册
    登录
立即登录
  • 请到 [后台->外观->菜单] 中设置菜单
首页 › WordPress 教程 › WordPress添加AJAX文章点赞功能

WordPress添加AJAX文章点赞功能

PCDotFan9年前

WordPress添加AJAX文章点赞功能-WP酷

来自Fatesinger,文章赞功能随处可见,例如无觅的相关文章工具、百度分享等等。如果想要给主题专门集成点赞功能,还是得需要下面的代码实现。用自定义字段保存赞数量,通过Cookies来禁止重复赞。

加入至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;
}

 

相对应的JS代码:

$(document).ready(function() { 
$.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();
});
}); 

 

调用代码:

 <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>

 

参考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。

769
分享

本站下载管理系统「dl.mywpku.com」因年久失修而永久关闭。若需获得往年主题,请至 WP酷的百度网盘(提取码: 5rbm) 自行搜索下载。默认解压密码为「www.mywpku.com」。

对您造成的不便,敬请谅解!

PCDotFan 站长
文章 435评论 859
相关文章
  • [6.0 更新中文汉化]极度流行的SEO插件 – WordPress SEO by Yoast
  • WordPress 新用户注册邮件链接提示「您的密码重设链接无效」
  • AMP – 为 WordPress 移动站点操作全球访问优化
  • 去除谷歌服务 – WordPress 国外主题全方位加速
  • 使用 WP-CLI 简化 WordPress 操作流程
  • WordPress 基础开发 – 一探 WordPress Hook 机制及示例应用
  • 优化静态资源 – WordPress 国外主题全方位加速
  • WordPress 实现微信登录
评论 (40)
再想想
  • howmao

    想问下你这如都官网认证了???

    9年前
    • WP酷

      @howmao 嗯,我记得当时申请后几个星期就显示了

      9年前
    • howmao

      @WP酷 这个不是只有企业才能显示吗,或者是个人经营户,???

      9年前
    • WP酷

      @howmao 我也忘记了……当时申请到一半说是要审核,结果过了一段时间真显示成了

      9年前
  • chasonma

    不错!

    8年前
  • 株洲婚纱摄影

    我不是沙发,但我顶楼主!

    8年前
  • 番茄

    这个效果不错哈。

    8年前
  • 大GMget

    一样

    8年前
  • 雨嘉

    以后真的注意了。。。 博主真好

    7年前
  • asout

    JS代码放在哪里?
    如果新建一个JS文件的话,JS文件的文件名怎么命名?
    请指教,谢谢!

    6年前
    • PCDotFan

      @asout 1. 如果偷懒可以放在 footer.php 文件的 <@/body@> 前,用 <@script@>…<@/script@> 包裹整个代码。(记得去掉@)
      2. 文件名无所谓,建议先去补一下有关 HTML 的知识。

      6年前
  • Duang

    调用函数代码放在index.php下面吗

    5年前
    • PCDotFan

      @Duang 放在需要显示的位置。以我的站为例就是放在 single.php 下面咯

      5年前
PCDotFan
站长
若无特别注明,则默认我发布的所有文章均为内容原创 / 翻译原创,转载时请保留来源。
435文章
859评论
3K获赞
猜你喜欢
WP酷已开放附件上传功能…
7年前
funUIUI – 双栏灰白WordPress博客主题
9年前
Presence – 大气时尚单栏WordPress主题
8年前
  • 杂记
  • WordPress 付费主题推荐
Copyright © 2023 WP酷. Designed by nicetheme. 琼ICP备13002067号-1