纯代码完美实现WordPress点赞、打赏、百度分享三合一样式详细教程

网上有很多实现 WordPress 点赞、打赏和百度分享功能的三合一代码或者单独一个样式的代码,但因为是相互转载或者无脑抄袭,没有实践测试,也没有讲清楚显示这个功能的背后的原理,所以导致各种问题,把不少博主折腾惨了,我就因为这些代码的问题折腾了好几天,最后,终于顿悟,立地成佛了,阿弥陀佛,善哉,善哉……O(∩_∩)O

先上图吧,有图有真相!大家也可以跳到本文底部看实际效果,这种三合一样式看起来还是挺不错的富有美感。

纯代码完美实现wordpress的三合一点样式的赞、打赏及百度分享功能

注:本文主要参考了水冷眸的这篇文章《【原创】移植知更鸟的点赞、分享、打赏的样式教程》,也参考和综合了其它博客的内容。按照水冷眸的方法折腾的很久都无法实现(PS:呜呜呜,请让我躲墙角哭一会儿……),水冷眸也制作了相关插件(如果想偷懒使用插件,请在本页 “百度搜索” 框输入“ WordPress 插件-仿知更鸟点赞打赏分享插件 ”即可直达),因为我的小“洁癖”,也为了本博客运行得更快所以使用了纯代码的方法。

0.核心原理

实现点赞、打赏和分享的基本原理是通过层叠样式表( CSS )定义显示的外观效果,这就达到的基本的“形似”,然后通过Html语句插入页面显示的文字和并在文字的下面“埋藏”链接,最后通过 Javascript 对点击的文字链接的动作进行响应。

1.外观显示样式处理

首先,需要添加本样式的 CSS 到主题中,点击这里下载整合了赞/赏/分享三合一样式、jBox 点击弹框样式和百度分享弹出时样式的 CSS 文件(jBox-3in1-bdshare.css),将其放进你主题的 CSS 目录里面(若无,则主题文件夹根目录),然后在主题页眉文件(header.php)中的<head>之后</head>之前的任意位置插入如下代码:

<!----以下用于请求页面时载入赞/赏/分享三合一样式层叠样式表 CSS 文件----->
 	<link href="<?php bloginfo('template_url'); ?>/jBox-3in1-bdshare.css" rel="stylesheet" type="text/css">

注意:如果你将该”jBox-3in1-bdshare.css”放在了“/css/”目录下面,请讲以上语句中的“/jBox-3in1-bdshare.css”改成“/css/jBox-3in1-bdshare.css”,因为我的是放在主题的根目录。也可以将该css文件的内容全部复制然后粘贴到主题自带的样式表(style.css)中,此时就不需要使用以上代码了。

然后,文章页面( single.php )适当位置加入如下代码,一般放在文章结尾的位置,多试几次找一个满意合适的位置即可:

<!----以下用于页面三合一效果的显示及“埋藏” jBox 动作链接----->
 
<div id="zan_shang_share">
 
<div class="social-main">
        <span class="like"><a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" class="favorite<?php if(isset($_COOKIE['go2do_zan_'.$post->ID])) echo ' done';?>">赞!继续努力!<span class="count"><!--?php if( get_post_meta($post--->ID,'go2do_zan',true) ){ echo get_post_meta($post->ID,'go2do_zan',true); } else { echo '0'; }?>&nbsp;&nbsp;</span></a></span>
        <span class="shang-p"><a href="#pay_shang" id="shang-main-p">赏¥</a></span>
        <span class="share-s"><a id="share-main-s">&nbsp;&nbsp;&nbsp;好!我要分享!</a></span>
 
<div class="clear"></div>
 
</div>
 
</div>

代码中有个<i class=”…”> </i>的代码,这是调用fontawesome图标字体的代码,如果你的主题没有采用fontawesome图标字体的代码,可能需要你另行载入fontawesome字体的文件,或者是替换成你主题所采用的图标字体。

<!----以下用于点击分享按钮后,自动弹框时,百度分享图标的样式----->
 
<div style="display: none" id="baidu">
 
<div class="bdsharebuttonbox"> 
	  <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
	  <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
	  <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
	  <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
	  <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
	  <a href="#" class="bds_more" data-cmd="more" title="更多..."></a>  
</div>
 
</div>

赶紧打开一篇文章看看,是不是已经有模有样了,但是点击后没有任何反应。

2.点赞功能代码

再然后,在主题的模板函数(functions.php)的结尾部分添加“点赞函数”代码如下:
(注:如果模板函数( functions.php )是以 “?>”结尾,则需添加在该PHP语言结束标示前。)

/*点赞函数*/
add_action('wp_ajax_nopriv_go2do_zan', 'go2do_zan');
add_action('wp_ajax_go2do_zan', 'go2do_zan');
function go2do_zan(){
global $wpdb,$post;
$id = $_POST["um_id"];
$action = $_POST["um_action"];
if ( $action == 'ding'){
$go2do_raters = get_post_meta($id,'go2do_zan',true);
$expire = time() + 99999999;
$domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false;
setcookie('go2do_zan_'.$id,$id,$expire,'/',$domain,false);
if (!$go2do_raters || !is_numeric($go2do_raters)) {
update_post_meta($id, 'go2do_zan', 1);
}
else {
update_post_meta($id, 'go2do_zan', ($go2do_raters + 1));
}
echo get_post_meta($id,'go2do_zan',true);
}
die;
}

3.点赞、打赏和分享功能JS动作响应代码

最后,在页脚或者文章页下部,插入 Javascript 代码,用于响应点赞、打赏和分享功能被点击时的动作响应,代码如下:

  1. <script>
  2. //点赞功能js
  3.  jQuery(document).ready(function($) { 
  4. $.fn.postLike = function() {
  5.  if ($(this).hasClass('done')) {
  6. alert("谢谢支持,您已赞过!");
  7.  return false;
  8.  } else {
  9.  $(this).addClass('done');
  10.  var id = $(this).data("id"),
  11.  action = $(this).data('action'),
  12.  rateHolder = $(this).children('.count');
  13.  var ajax_data = {
  14.  action: "go2do_zan",
  15.  um_id: id,
  16.  um_action: action
  17.  };
  18.  $.post("/wp-admin/admin-ajax.php", ajax_data,
  19.  function(data) {
  20.  $(rateHolder).html(data);
  21.  });
  22.  return false;
  23.  }
  24. };
  25. $(document).on("click", ".favorite",
  26. function() {
  27.  $(this).postLike();
  28.     });
  29. });
  30. //打赏功能 jBox 的 Tooltip 模式
  31. $('#shang-jBox').jBox('Tooltip', {
  32.     trigger: 'click',
  33.     content: '<img src="https://cdn.go2do.net/img/zfb_wx-pay.jpg" />',
  34.     closeOnMouseleave: true
  35. });
  36.  
  37. //百度分享功能 jBox 的 Modal 模式
  38. $('#share-jBox').jBox('Modal', {
  39.     title: '收藏 or 分享一下:',
  40.     content: $('#baidu'),
  41.     closeOnClick: true
  42. });
  43.  
  44. //百度分享原生代码
  45. window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
  46.  </script>

记得替换修改第33行的打赏支付二维码图片地址,否则,打赏的钱我就替你“保管”了。

注意,因为打赏和百度分享使用了 jQuery jBox 特效(jBox是jQuery的扩展插件),故需要加入jQuery的jBox支撑文件,这也是造成很多人不成功的原因,本博主将 jQuery 与 jBox 进行了合并,因为利于网站的优化,点击这里下载整合的 Javascript 文件( jQ-jBox-1.11.1.min.js ),将其放进你主题的js目录里面(若无,则主题文件夹根目录),然后在以上 Javascript 代码 <script> 标记之前的合适位置插入如下代码:

<script src="<?php bloginfo('template_url'); ?>/js/jQ-jBox-1.11.1.min.js" rel="text/javascript"></script>

如果你将该 jQ-jBox-1.11.1.min.js 放在了根目录下面,请讲以上语句中的“/js/jQ-jBox-1.11.1.min.js”改成“/jQ-jBox-1.11.1.min.js”,因为我的是放在主题的“/js/”目录。

注:已上放置 jBox-3in1-bdshare.css 和 jQ-jBox-1.11.1.min.js 的方法除了已上方式,还可以在主题的 functions.php 用 wp_enqueue_style() 和 wp_enqueue_script() 钩子进行注册。

好了,至此,应该大功告成,你也可以立地成佛了,阿弥陀佛,善哉,善哉……O(∩_∩)O

欢迎投稿、分享转载,转载请保留如下信息:格物躬行博客[https://www.go2do.net]

本文由 [go2do] 原创,本文链接: https://www.go2do.net/vps/how-use-zan-shang-baidu-share-wordpress.html



You may also like...

4 Responses

  1. 你好 css文件和js文件下载链接不可用啊

  2. lwq说道:

    你好。想用你的这种方式。但是下载链接进不去啊。感谢博主解答啊

  3. canada cialis说道:

    Hi there! I'm at work browsing your blog from my new iphone 3gs!
    Just wanted to say I love reading through your blog and look forward to all your posts!

    Keep up the great work!

发表评论

电子邮件地址不会被公开。

本页共执行145次数据库查询,耗时0.287秒,使用内存 1.78 MB