分享:wordpress知更鸟的点赞、分享、打赏的样式教程

之前小浩博客也曾试用过知更鸟begin主题,觉得相当不错。鸟叔的点赞分享打赏的样式做的很好看,今天偶然看到一篇教程移植此样式,特分享给大家。该特效采用的是Jbox的插件,不确定是否会与你们本身的主题特效有冲突。还有的就是,动手之前,记得备份,养成好习惯!

效果如图:分享:wordpress知更鸟的点赞、分享、打赏的样式教程

html代码

上面这段代码,添加到single.php里面,具体位置自己调整,需要注意的是,代码中有个<i class=”…”></i>的代码,这是调用fontawesome图标字体的代码,如果你的主题没有采用fontawesome图标字体的代码,可能需要你另行载入fontawesome字体的文件,或者是替换成你主题所采用的图标字体。

<div id="z_s_s">
<div class="social-main">
<span class="like"><a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" class="favorite<?php if(isset($_COOKIE['solome_ding_'.$post->ID])) echo ' done';?>"><i class="fa fa-thumbs-up"></i>赞 <?php if( get_post_meta($post->ID,'solome_ding',true) ){ echo get_post_meta($post->ID,'solome_ding',true); } else { echo '0'; }?></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"><i class="fa fa-share-alt"></i> 分享</a></span>
<div class="clear"></div>
</div>

css代码

这一段、可以直接添加到主题style.css里面;PS:部分主题可能不是直接主题根目录下style.css里面写css代码,遇到此情况,可以将此css代码添加到任何一个页面有载入的CSS文件即可

#z_s_s{border-bottom:none;padding: 20px 0;}
.social-main{position: relative; margin: 0 auto; width: 283px;}
.social-main a{float: left; color: #fff; line-height: 35px; text-align: center; border-radius: 2px;}
.social-main a:hover{background: #878787; transition: all .2s ease-in 0s;}
.like a{background: #fe594e; width: 140px; display: block;}
.share-s a{background: #fd8764; width: 140px; display: block;}
.social-main i{color: #fff; font-style: normal; margin: 0 5px 0 0;}
.shang-p a{position: absolute; left: 115px; top: -7px; background: #7ab951; width: 50px; height: 50px; font-size: 18px; font-weight: 600; line-height: 40px; border: 4px solid #fff; border-radius: 40px;}
#share{display: none; width: 280px; padding: 15px 13px 15px 30px; background: #fff; border-radius: 5px;}
#share a{font-size: 60px; text-align: center; height: 80px; line-height: 80px; padding: 2px 5px 5px;}

关于点赞的js代码

这段js,作用于点赞样式,直接将其添加到你主题的任意一个js文件里面。

到此,如果环节不出错,样式已经可以在你的文章中正常显示的,但是关于打赏、分享这两个样式,尚未处理完成,知更鸟采用的是点击弹出相关的模态窗口的样式。这里将其变成了Tooltip样式效果,在本文,Tooltip的实现水冷眸直接使用Jbox这个插件。

$(document).ready(function() {
$.fn.postLike = function() {
if ($(this).hasClass('done')) {
return false;
} else {
$(this).addClass('done');
var id = $(this).data("id"),
action = $(this).data('action'),
rateHolder = $(this).children('.count');
var ajax_data = {
action: "solome_like",
um_id: id,
um_action: action
};
$.post("/wp-admin/admin-ajax.php", ajax_data, function(data) {
$(rateHolder).html(data);
});
return false;
}
};
$(document).on("click", ".favorite", function() {
$(this).postLike();
});
});

首先,引入jbox相关的js以及css文件。

Jbox需要jquery库的支持,大部分主题都已经默认有引入的,如果没有,请自行百度。

下面的两个引入文件,为官方的cdn地址,速度如何未曾测试,如果嫌速度慢,可以在本文末尾,自行下载文件将其放进主题内引入。

引入了Jbox相关文件之后,我们开始开始处理打赏、分享这两个Tooltip样式效果。

<script src="http://code.jboxcdn.com/0.3.2/jBox.min.js"></script>
<link href="http://code.jboxcdn.com/0.3.2/jBox.css" rel="stylesheet">

打赏js、分享Tooltip样式js、百度分享js:

<script>
//打赏效果
$('#shang-main-p').jBox('Tooltip', {
content: '<img src="http://cdn.slmwp.com/slmwp/alipay-qrcode-250.png" />',
closeOnMouseleave: true
});
//分享效果
$('#share-main-s').jBox('Tooltip', {
content: '<div class="bdsharebuttonbox"><a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a><a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a><a href="#" class="bds_weixin" data-cmd="weixin" 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_bdhome" data-cmd="bdhome" title="分享到百度新首页"></a><a href="#" class="bds_mail" data-cmd="mail" title="分享到邮件分享"></a><a href="#" class="bds_copy" data-cmd="copy" title="分享到复制网址"></a></div>',
closeOnMouseleave: true
});
//百度分享原生js
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdPic":"","bdStyle":"0","bdSize":"16"},"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)];
</script>

上面这段代码,其中第四行,将里面的图片地址替换为你的支付宝付款码地址,然后将整段代码放在footer.php文件,就大功告成了。

附上Jbox下载地址:https://codeload.github.com/StephanWagner/jBox/zip/v0.3.2

原文地址:水冷眸

人已赞赏
WordPress建站

WordPress教程:Tinection知言主题使用说明(03-28更新)

2021-3-10 7:08:04

WordPress建站

WordPress分类目录中显示空分类

2021-3-10 7:08:17

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索