RiPro仿知更鸟文章底部添加点赞分享组件代码

知更鸟(begin)主题可能是WordPress主题姐的扛把子,也是不错的主题,今天分享下RiPro仿知更鸟点赞分享

图片[1]-RiPro仿知更鸟文章底部添加点赞分享组件代码-99源码屋

教程开始:

1. ripro – > prts – > author-box.php 文件,从“<div class=”article-footer”>”开始往下替换为如下代码

<div class="article-footer">
  <div id="social">
		<div class="social-main">
			<span class="like">
				<a href="javascript:;" title="收藏文章" etap="star" data-postid="<?php the_ID(); ?>" class="dingzan<?php echo $is_post_favcss;?>"><i class="fa fa-heart"></i> 收藏 </a>
			</span>
			<div class="share-sd">
				<span class="share-s"><a href="javascript:void(0)" id="share-s" title="分享"><i class="fa fa-share-alt"></i> 分享</a></span>
				<div id="share" class="bgt" style="display: none;">
					<div class="augshare share-component social-share">
						<a title="分享到QQ" class="iconfont icon-icon" etap="share" data-share="qq" href=""></a>
						<a title="分享到QQ空间" class="iconfont icon-kongjian" etap="share" data-share="qzone" href=""></a>
						<a title="分享到豆瓣" class="iconfont icon-douban1" etap="share" data-share="douban" href=""></a>
						<a title="分享到腾讯微博" class="iconfont icon-weibo" etap="share" data-share="weibo" href=""></a>
					<a title="分享到微信" class="iconfont icon-weixin" etap="share" data-share="weixin" href=""></a>
					</div>
				</div>
			</div>
			<div class="clear"></div>
			<div class="shang-p">
				<div class="shang-empty"><span></span></div>
					<span class="shang-s"><a href="javascript:;" title="生成封面" class="btn-bigger-cover share-weixin" data-nonce="<?php echo wp_create_nonce('mi-create-bigger-image-'.$post->ID );?>" data-id="<?php echo $post->ID; ?>" data-action="create-bigger-image" id="bigger-cover"><i class="fa fa-paper-plane"></i></a></span></span>
			</div>
		</div>
	</div>
</div>

2. ripro – > assets -> js -> app.js 文件,搜索“ function share_pop() ”在其上方添加如下样式

$(".share-sd").mouseover(function() {
	$(this).children("#share").show();
});
$(".share-sd").mouseout(function() {
	$(this).children("#share").hide();
});

3. ripro – > assets -> js -> app.js 文件,搜索“ switch(to) ”并替换其内所有代码为

switch(to){
	case 'qq':
		url = 'http://connect.qq.com/widget/shareqq/index.html?url='+share.url+'&desc='+share.desc+'&summary='+share.title+'&site='+augtheme.site_name+'&pics='+share.pic
		break;
	case 'qzone':
		url = 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+share.url+'&desc='+share.desc+'&summary='+share.title+'&site='+augtheme.site_name+'&pics='+share.pic
		break;
	case 'douban':
		url = 'http://www.douban.com/recommend/?url='+share.url+'&desc='+share.desc+'&summary='+share.title+'&site='+augtheme.site_name+'&pics='+share.pic
		break;
	case 'weibo':
		url = 'http://service.weibo.com/share/share.php?title='+share.title+'&url='+share.url+'&source=bookmark&pic='+share.pic
		break;
	case 'weixin':
		url = 'http://qr.liantu.com/api.php?text='+share.title+'&url='+share.url+'&source=bookmark&pic='+share.pic
		break;
}

4. ripro -> assets -> css-> diy.css 添加如下样式

------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
评论 抢沙发

请登录后发表评论

服务支持

用心做更好的精品源码站,服务各个行业,让大家快速创建属于自己的网站 。

2000+
优质源码
8年+
开发经验
1200
注册用户
7*24
随时响应