最近,一直都有博主問到如何將文章頁面中的“朕要賞賜”和“真要分享”更改為類似知更鳥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文件,在最后面添加以下代碼:
- // 點贊
-
$.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、打開Uniteinc 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主題已經(jīng)完美移植了知更鳥主題中的點贊和分享按鈕。如果沒有安裝Font Awesome 4 Menus插件,那么贊和分享前面的個性化圖標將無法顯示。如果安裝有,那么整個點贊分享出來的效果就會跟本站的一模一樣的,不需要設(shè)置任何東西,如下圖所示:
PS:為什么只分享Unite主題的移植而不分享Three主題?那是因為近期有計劃更新Three主題,到時候?qū)苯影阉兂蛇@個樣式,所以就懶得再分享了。而且這兩個主題比較相近,看得懂本文的,一定也可以折騰出Three主題的點贊和分享樣式的,我相信你們的能力。
版權(quán)聲明:本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容, 請發(fā)送郵件至2705686032@qq.com 舉報,一經(jīng)查實,本站將立刻刪除。原文轉(zhuǎn)載: 原文出處: