跳到内容
[广告]欧美亚马逊SSN账号、炮灰号开售 ×

知更鸟主题精美绝伦,如何应用到我的网站中?


推荐帖

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

知更鸟主题精美绝伦,如何应用到我的网站中?

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

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

下载地址

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

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

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

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

1、打开Unitejs 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. /* */</p> </li> <li>var wpl_ajax_url = “http://你的域名/wp-admin/admin-ajax.php”;</li> <li contentScore="0"> <p>/* */

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

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

  1. ” title=”好文!一定要点赞!” class=”favorite<?php if(isset($_COOKIE[‘ality_like_’.$post->ID])) echo ‘ done’;?>”>
  2. <?php if( get_post_meta($post->ID,’ality_like’,true) ){

  3. echo get_post_meta($post->ID,’ality_like’,true);

  4. } else {

  5. echo ‘0’;

  6. }?>

  7. 分享

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插件,那么赞和分享前面的个性化图标将无法显示。如果安装有,那么整个点赞分享出来的效果就会跟本站的一模一样的,不需要设置任何东西,如下图所示:

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

评论链接
在其他网站上分享

创建账户或登录以发表评论

您需要成为会员才能发表评论

创建一个帐户

在我们的社区注册一个新账户。很简单!

注册新账户

登入

已有账户?在此登录

立即登录
  • 告诉你朋友

    喜欢 西塞网络科技?告诉朋友!
×
×
  • 创建新的...

重要信息

我们在您的设备上放置了 cookies,以帮助改善本网站。您可以调整您的 cookie 设置,否则我们会假定您可以继续

版权所有 © 2018-2025 西塞网络科技
粤公网安备44200002444913号