您的位置:鄭州SEO網站優化 > WordPress > 內容詳情

wordpress教材:WordPress 纯代码实现 AJAX点赞功能

发布时间:2016-04-17 00:00 來源:互聯網 編輯:本站編輯 浏覽次數:66人

wordpress網站裏增加訪客互動、展示文章熱度的時候,除了閱讀數、評論數外,還有個有趣的元素,那就是贊,如QQ空間裏的說說一樣,贊!

以前也发过类似的插件给大家,喜欢用插件的可以进《wordpress 点赞 插件版》,而今天介绍的就是纯代码的形式,不喜欢用插件的朋友会喜欢的方式来实现 wordpress點贊功能

下面就直接給教程吧,教程資源來自WPku

facebook-like-blueprint

將下面的代碼加入到你的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代碼

$.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使用自媒體平台做SEO優化成未來趨勢
  • 2直播都那麽火爲什麽還一直堅持做
  • 3百度將近一個月的瘋狂更新,今天終
  • 4洛陽優化公司教你關于搜索引擎優化
  • 5SEO從業者學習免費自助建站的三個思
  • 6洛陽seo教你怎樣才能做好SEO管理者?
  • 7图片外链有什么用 可以提高网站的排
  • 8驚爆!有關SEO文章收錄的問題,詳情
  • 9數據庫遷移造成網站兩三天內打不開
  • 10新鄉SEO感想篇:SEO基礎五要素回顧
  • 11教你通過逆向思維實施SEO達成目的
  • 12新鄉網站優化網站一直不收錄怎麽辦
  • 13新鄉SEO告訴你網站如何進行圖片搜索
  • 14新鄉SEO告訴你新站怎樣快速獲得百度
  • 15開封裝修公司案例-開封漢東裝飾設計
  • 16開封SEO案例-開封婚紗攝影工作室
  • 17開封SEO案例-蔬菜大棚,大棚骨架
  • 18開封SEO優化案例-開封大衆婚慶公司
  • 19開封優化案例-開封大衆搬家公司
  • 20開封SEO案例-開封美的空調維修