最近,一直都有博主问到如何将文章页面中的“朕要赏赐”和“真要分享”更改为类似知更鸟Begin主题的点赞分享样式。其实,对于这种需求动手能力强的博主自己就可以解决了,不过为了让不太会动手折腾的博主也能多一个选择,所以今天特意将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文件,在最后面添加以下代码:
- // 点赞
- $.fn.postLike = function() {
- if (jQuery(this).hasClass('done')) {
- return false;
- } else {
- $(this).addClass('done');
- var id = $(this).data("id"),
- action = $(this).data('action'),
- rateHolder = jQuery(this).children('.count');
- var ajax_data = {
- action: "ality_ding",
- um_id: id,
- um_action: action
- };
- $.post(wpl_ajax_url, ajax_data,
- function(data) {
- jQuery(rateHolder).html(data);
- });
- return false;
- }
- };
- $(document).on("click", ".favorite",
- function() {
- $(this).postLike();
- });
2、打开主题中的functions.php文件,并在最后一个?>前面添加以下代码:
- // 点赞
- add_action('wp_ajax_nopriv_ality_ding', 'ality_ding');
- add_action('wp_ajax_ality_ding', 'ality_ding');
- function ality_ding(){
- global $wpdb,$post;
- $id = $_POST["um_id"];
- $action = $_POST["um_action"];
- if ( $action == 'ding'){
- $bigfa_raters = get_post_meta($id,'ality_like',true);
- $expire = time() + 99999999;
- $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false;
- setcookie('ality_like_'.$id,$id,$expire,'/',$domain,false);
- if (!$bigfa_raters || !is_numeric($bigfa_raters)) {
- update_post_meta($id, 'ality_like', 1);
- }
- else {
- update_post_meta($id, 'ality_like', ($bigfa_raters + 1));
- }
- echo get_post_meta($id,'ality_like',true);
- }
- die;
- }
3、打开主题中的header.php文件,找到以下代码
- <?php if (is_single() || is_page() ) { ?>
然后在它下面添加以下代码
- <script type="text/javascript">
- /* <![CDATA[ */
- var wpl_ajax_url = "http:\/\/你的域名\/wp-admin\/admin-ajax.php";
- /* ]]> */
- </script>
PS:一定要记得更换以上代码中的“你的域名”为真正的域名哦。
4、打开Unite\inc\ social.php文件,把所有代码替换为以下代码:
- <div id="social">
- <div class="social-main">
- <span class="like">
- <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">
- <?php if( get_post_meta($post->ID,'ality_like',true) ){
- echo get_post_meta($post->ID,'ality_like',true);
- } else {
- echo '0';
- }?></i>
- </a>
- </span>
- <span class="shang-p"><a href="#shang" id="shang-main-p" title="好文!一定要打赏!">赏</a></span>
- <span class="share-s"><a href="#share" id="share-main-s" title="好文!一定要分享!"><i class="fa fa-share-alt"></i>分享</a></span>
- <div class="clear"></div>
- </div>
- </div>
5、打开主题文件中的style.css文件,找到以下代码:
- .shang-p {
- position: absolute;
- left: 102px;
- top:-3px;
- background: #7ab951;
- width: 40px;
- height: 40px;
- font-size: 16px;
- line-height: 30px;
- border: 4px solid #fff;
- border-radius: 40px;
- text-align:center;
- }
直接替换为以下代码:
- .shang-p a {
- position: absolute;
- left: 102px;
- top:-3px;
- color: #111;
- font-weight:blod;
- background: #7ab951;
- width: 40px;
- height: 40px;
- font-size: 16px;
- line-height: 30px;
- border: 4px solid #fff;
- border-radius: 40px;
- text-align:center;
- }
- .shang-p a:hover {
- color: #111;
- }
即可。
到了这里,Unite 3.0主题已经完美移植了知更鸟主题中的点赞和分享按钮。如果没有安装Font Awesome 4 Menus插件,那么赞和分享前面的个性化图标将无法显示。如果安装有,那么整个点赞分享出来的效果就会跟本站的一模一样的,不需要设置任何东西,如下图所示:
PS:为什么只分享Unite主题的移植而不分享Three主题?那是因为近期有计划更新Three主题,到时候将会直接把它变成这个样式,所以就懒得再分享了。而且这两个主题比较相近,看得懂本文的,一定也可以折腾出Three主题的点赞和分享样式的,我相信你们的能力。
发表于2016-03-23 23:08 沙发
用户的要求还真不少
@路易大叔是的,这个也是为什么很多人不愿意折腾免费主题的缘故了,有时候感觉比收费主题还累
发表于2016-03-23 23:56 板凳
真不错 有空 我也操刀试试
@米粒博客[呲牙] 有空可以试试,这个样式还是挺好看的
发表于2016-03-24 01:27 地板
已经是实验成功,博主真的是太有心了,真心感谢,我是你的忠诚粉丝!
@艾特SEO谢谢支持
发表于2016-03-24 09:43 4楼
主题够用就好了,不敢再多折腾了。
@Koolight[呲牙] 是的,够用就行,我也就是偶尔折腾一下,保持激情而已
发表于2016-03-24 10:58 5楼
您好,为何我更新后,“赏”字显示错位了。如何解决呢?
@Luckylee可能是你的缓存的css是旧的
发表于2016-03-27 09:46 6楼
我还是喜欢点赞分心情的那种,坐等更新的时候再来
@滕绍武博客这个一般都是安装插件解决的
发表于2016-04-08 15:28 7楼
太棒了,修改前跟改后有什么区别呢? 我就不修改了。
@无忧修改后多一个点赞功能,其实意义不大
发表于2016-06-29 17:21 8楼
为什么修改过后点击‘赞’字无反应 始终显示的是‘0’
@老K这个方法只适合Unite3.0主题,其他主题未必适合。如果点击没反应一般都是JS冲突之类的,请自行排查。
@懿古今我安装的主题就是Unite3.0主题,而且全新安装,不过也没关系了 [呲牙]
感谢博主的回答,谢谢! [强] [强]
发表于2016-10-20 05:15 9楼
刚开始点了赞没反应,后台折腾了好几次才改好。
@黑蚁博客[呲牙] 我刚开始折腾这个点赞也是没反应,后来折腾很久才成功