Unite3.0主题完美移植知更鸟点赞打赏分享样式教程

投稿  懿古今 2016-03-26 07:32 阅读 673 次 评论 24 条

最近,一直都有博主问到如何将文章页面中的“朕要赏赐”和“真要分享”更改为类似知更鸟Begin主题的点赞分享样式。其实,对于这种需求动手能力强的博主自己就可以解决了,不过为了让不太会动手折腾的博主也能多一个选择,所以今天特意将Unite3.0主题移植知更鸟点赞打赏分享样式的详细过程分享给大家。

Unite3.0主题完美移植知更鸟点赞分享样式教程

一、懒人移植方法(适合未修改过Unite主题的方法)

只需下载【Unite3.0主题移植知更鸟点赞分享样式文件】,解压后按以下要求覆盖更新即可。

1、script.js文件直接拷贝到Unite\js\覆盖更新。

2、social.php文件直接拷贝到Unite\inc\覆盖更新。

3、functions.php、header.php和style.css文件直接拷贝到Unite\覆盖更新。

二、自己动手折腾代码(适合修改过Unite主题的方法)

1、打开Unite\js\ script文件,在最后面添加以下代码:

  1. // 点赞
  2. $.fn.postLike = function() {
  3.     if (jQuery(this).hasClass('done')) {
  4.         return false;
  5.     } else {
  6.         $(this).addClass('done');
  7.         var id = $(this).data("id"),
  8.         action = $(this).data('action'),
  9.         rateHolder = jQuery(this).children('.count');
  10.         var ajax_data = {
  11.             action: "ality_ding",
  12.             um_id: id,
  13.             um_action: action
  14.         };
  15.         $.post(wpl_ajax_url, ajax_data,
  16.         function(data) {
  17.             jQuery(rateHolder).html(data);
  18.         });
  19.         return false;
  20.     }
  21. };
  22. $(document).on("click"".favorite",
  23. function() {
  24.     $(this).postLike();
  25. });

2、打开主题中的functions.php文件,并在最后一个?>前面添加以下代码:

  1. // 点赞
  2. add_action('wp_ajax_nopriv_ality_ding', 'ality_ding');
  3. add_action('wp_ajax_ality_ding', 'ality_ding');
  4. function ality_ding(){
  5.     global $wpdb,$post;
  6.     $id = $_POST["um_id"];
  7.     $action = $_POST["um_action"];
  8.     if ( $action == 'ding'){
  9.         $bigfa_raters = get_post_meta($id,'ality_like',true);
  10.         $expire = time() + 99999999;
  11.         $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false;
  12.         setcookie('ality_like_'.$id,$id,$expire,'/',$domain,false);
  13.         if (!$bigfa_raters || !is_numeric($bigfa_raters)) {
  14.             update_post_meta($id, 'ality_like', 1);
  15.         }
  16.         else {
  17.             update_post_meta($id, 'ality_like', ($bigfa_raters + 1));
  18.         }
  19.         echo get_post_meta($id,'ality_like',true);
  20.     }
  21.     die;
  22. }

3、打开主题中的header.php文件,找到以下代码

  1. <?php if (is_single() || is_page() ) { ?>

然后在它下面添加以下代码

  1. <script type="text/javascript">
  2. /* <![CDATA[ */
  3. var wpl_ajax_url = "http:\/\/你的域名\/wp-admin\/admin-ajax.php";
  4. /* ]]> */
  5. </script>

PS:一定要记得更换以上代码中的“你的域名”为真正的域名哦。

4、打开Unite\inc\ social.php文件,把所有代码替换为以下代码:

  1. <div id="social">
  2.     <div class="social-main">
  3.         <span class="like">
  4.             <a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" title="好文!一定要点赞!" class="favorite<?php if(isset($_COOKIE['ality_like_'.$post->ID])) echo ' done';?>"><i class="fa fa-thumbs-up"></i><i class="count">
  5.                 <?php if( get_post_meta($post->ID,'ality_like',true) ){
  6.                     echo get_post_meta($post->ID,'ality_like',true);
  7.                 } else {
  8.                     echo '0';
  9.                 }?></i>
  10.             </a>
  11.         </span>
  12.         <span class="shang-p"><a href="#shang" id="shang-main-p" title="好文!一定要打赏!"></a></span>
  13.         <span class="share-s"><a href="#share" id="share-main-s" title="好文!一定要分享!"><i class="fa fa-share-alt"></i>分享</a></span>
  14.         <div class="clear"></div>
  15.     </div>
  16. </div>

5、打开主题文件中的style.css文件,找到以下代码:

  1. .shang-p {
  2.     position: absolute;
  3.     left: 102px;
  4.     top:-3px;
  5.     background: #7ab951;
  6.     width: 40px;
  7.     height: 40px;
  8.     font-size: 16px;
  9.     line-height: 30px;
  10.     border: 4px solid #fff;
  11.     border-radius: 40px;
  12.     text-align:center;
  13. }

直接替换为以下代码:

  1. .shang-p a {
  2.     position: absolute;
  3.     left: 102px;
  4.     top:-3px;
  5.     color: #111;
  6.     font-weight:blod;
  7.     background: #7ab951;
  8.     width: 40px;
  9.     height: 40px;
  10.     font-size: 16px;
  11.     line-height: 30px;
  12.     border: 4px solid #fff;
  13.     border-radius: 40px;
  14.     text-align:center;
  15. }
  16. .shang-p a:hover {
  17. color: #111;
  18. }

即可。

到了这里,Unite 3.0主题已经完美移植了知更鸟主题中的点赞和分享按钮。如果没有安装Font Awesome 4 Menus插件,那么赞和分享前面的个性化图标将无法显示。如果安装有,那么整个点赞分享出来的效果就会跟本站的一模一样的,不需要设置任何东西,如下图所示:

Unite3.0主题完美移植知更鸟点赞分享样式教程

PS:为什么只分享Unite主题的移植而不分享Three主题?那是因为近期有计划更新Three主题到2.0版本,到时候将会直接把它变成这个样式,所以就懒得再分享了。而且这两个主题比较相近,看得懂本文的,一定也可以折腾出Three主题的点赞和分享样式的,我相信你们的能力。

赞赏作者

如果文章对你有帮助,请赞赏支持作者继续创作!

文章标签: ,   ,  
原文地址:http://yigujin.wang/677.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为投稿文章,感谢 懿古今 的投稿,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress免费响应式主题:Nana

发表评论


表情

  1. 搬瓦工
    搬瓦工 【队长】 @回复

    好好打赏楼主! [偷笑]

  2. 明月登楼
    明月登楼 【总理】 @回复

    如果可以加入“百度喜欢”那个就更完美了!

  3. 小C博客
    小C博客 【县长】 @回复

    好东西!!顶下!!

  4. 百度云资源电影-videoclub
    百度云资源电影-videoclub 【省长】 @回复

    呵呵 不错很不错的功能

  5. Koolight
    Koolight 【省长】 @回复

    看来皇上想退位了~

    • boke112导航
      boke112导航【站长】2016-03-26 18:06  回复

      @Koolight[呲牙] 很多人都想要点赞功能,其实我刚开始不想要点赞这个功能,是因为我们大部分人的博文很少有人去点赞的,不过为了顺应民意,只能退位了

  6. 玉满斋
    玉满斋 【市长】 @回复

    好,好分享一定要顶的~!

  7. 明月登楼
    明月登楼 【总理】 @回复

    不错,过来纯支持一下!

  8. 咸丰百姓网
    咸丰百姓网 【农民】 @回复

    这个功能用到的很少,大部分都用不到。

  9. 留芳网
    留芳网 【镇长】 @回复

    这个不错诶。

  10. 大城小我
    大城小我 【市长】 @回复

    功能太多也不是很好

  11. 阅读一站
    阅读一站 【市长】 @回复

    早已移植

  12. 钓鱼小站
    钓鱼小站 【县长】 @回复

    表示升级就好了

  13. 楚书业
    楚书业 【市长】 @回复

    哈哈,移植这个其实还是有点麻烦的

    • boke112导航
      boke112导航【站长】2016-03-26 18:20  回复

      @楚书业[呲牙] 想免费又想用只能自己动手了,有钱的话直接购买知更鸟主题就OK了

      • 楚书业
        楚书业 【市长】2016-03-26 21:56  回复

        @boke112导航哈哈,确实是这样。有钱直接买,没钱自己学着折腾修改。
        以前移植过知更鸟的点赞到你的three主题,可惜当时技术太差,代码看不懂,只移植成半残品(点赞点了不会马上生效需要刷新一下页面才会生效。太囧了!)

      • 楚书业
        楚书业 【市长】2016-03-26 21:58  回复

        @boke112导航今天再仔细看了下你的教程,果然是当时对js不懂,没移植进去。

  14. 网际电脑
    网际电脑 【农民】 @回复

    我也点赞