Jiathis分享走了,来两个最漂亮的“baidu分享”加点赞

作者:david    发布于4周前 (2018-10-25)    阅读:  69  次

本来用的好好的“jiathis分享代码”突然对我没了反应!

因公司业务调整,非常遗憾的向大家宣布JiaThis公司决定自2018年4月30日起关闭旗下“分享”业务。因为关停“分享”业务给您造成的不便,我们深表歉意。

那只好再去找个代替品,就像找女朋友一样着急,而且不将就。

筛选出两款最漂亮的,要上就这两个,其它都漠视。

一、为WordPress添加侧边跟随百度分享按钮(由三好公民提供方法)

侧边跟随百度分享按钮指的就是上图中的 ①,这个百度分享按钮能够固定悬浮在页面左侧,跟随页面滚动一直显示;② 就是划词分享效果;③ 就是图片分享效果。

Jiathis分享走了,来两个最漂亮的“baidu分享”加点赞-投稿百科

1.新建一个文件 share.php,然后把如下代码粘贴到其中:

<div id="share">
    <div class="share_top">
        <i class="lt"></i>
    </div>
    <div class="share">
        <div class="bdsharebuttonbox">
            <a href="#" class="bds_more" data-cmd="more"></a>
            <a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a>
            <a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a>
            <a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq"></a>
            <a title="分享到人人网" href="#" class="bds_renren" data-cmd="renren"></a>
            <a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a>
        </div>
        <div class="clear"></div>
    </div>
    <div class="share_bottom">
        <i class="lb"></i>
    </div>
</div>
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdPic":"","bdStyle":"0","bdSize":"16"},"share":{},"image":{"viewList":["qzone","tsina","tqq","renren","weixin"],"viewText":"分享到:","viewSize":"16"},"selectShare":{"bdContainerClass":null,"bdSelectMiniList":["qzone","tsina","tqq","renren","weixin"]}};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>

2.在主题的style.css中添加如下样式代码:

#share {
	display:block;
	width:35px;
	margin-left:-517px;
	position:fixed;
	left:50%;
	top:420px;
	_margin-left:-515px;
	_position:absolute;
	_margin-top:420px;
	_top:expression(eval(document.documentElement.scrollTop));
	}
.share {
	background:#fff;
	width:24px;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	}
.share_top {
    position:relative;
    background:#fff;
    width:24px;
    height:8px;
    border-top:1px solid #ccc;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    }
.share_bottom {
    position:relative;
    background:#fff;
    width:24px;
    height:8px;
    margin:0 0 10px 0;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom:1px solid #ccc;
    }
.bdsharebuttonbox {
    padding:0 0 0 4px !important;
    }
.bdsharebuttonbox a {
    width:16px !important;
    padding:0 !important;
    margin:3px 0 !important;
    }

3 在主题的 footer.php 中 </body> 的前面添加调用 share.php 文件的代码即可:

<?php get_template_part( 'share' ) ?>

二、给主题添加知更鸟的点赞、分享、打赏的样式

Jiathis分享走了,来两个最漂亮的“baidu分享”加点赞-投稿百科

1、下载懒人包:将压缩包解压,可以看到里面有两个文件,分别是share.css跟jBox.js
将share.css放进你主题的css目录里面,将jBox.js放进你主题的js目录里面
PS:点赞的样式跟jbox插件所需的css样式合并了,文件叫做share.css。点赞的js,百度分享的js,以及jbox的核心js也合并了,文件叫做jBox.js。

2、代码部署:

①、编辑WordPress主题目录下的functions.php文件,在最后一个?>标签之前,添加如下代码并保存:

/*点赞函数*/
function solome_like(){
    global $wpdb,$post;
    $id = $_POST["um_id"];
    $action = $_POST["um_action"];
    if ( $action == 'ding'){
    $bigfa_raters = get_post_meta($id,'solome_ding',true);
    $expire = time() + 99999999;
    $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; 
    setcookie('solome_ding_'.$id,$id,$expire,'/',$domain,false);
    if (!$bigfa_raters || !is_numeric($bigfa_raters)) {
        update_post_meta($id, 'solome_ding', 1);
    } 
    else {
            update_post_meta($id, 'solome_ding', ($bigfa_raters + 1));
        }
    echo get_post_meta($id,'solome_ding',true);
    } 
    die;
}
/*注册相关静态文件*/
function solo_share_scripts(){
	/*判断是否为文章页或者页面*/	
	if ( is_single() || is_page()) {
		wp_enqueue_style( 'slmwp', get_template_directory_uri() . '/css/share.css');
		wp_enqueue_script( 'slmwp', get_template_directory_uri() . '/js/jBox.js' );
	}
}
function solo_footer(){
	/*判断是否为文章页或者页面*/
	if ( is_single() || is_page()) {?>
<div style="display: none" id="baidu"><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></div>
<script>
$('#shang').jBox('Tooltip', {
    content: '<img src="http://simtape.com/wp-content/uploads/2018/10/zs8.png" />',
    closeOnMouseleave: true
});
$('#share').jBox('Modal', {
    title: '分享:',
    content: $('#baidu')
});
</script>
<?php }
}
add_action('wp_ajax_nopriv_solome_like', 'solome_like');
add_action('wp_ajax_solome_like', 'solome_like');
add_action('wp_enqueue_scripts', 'solo_share_scripts');
add_action( 'wp_footer', 'solo_footer' );

3 前台引用:将以下代码,复制在你想要展示的地方,比如说正文的结尾<?php the_content();?>的后面。诸如此类,自行斟酌。

<section 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>赞  <span class="count"><?php if( get_post_meta($post->ID,'solome_ding',true) ){ echo get_post_meta($post->ID,'solome_ding',true);} else {echo '0';}?></span></a> </span>
          <span class="shang-p"><a href="javascript:;" id="shang">赏</a></span>
		  <span class="share-s"><a href="javascript:;" id="share"><i class="fa fa-share-alt"></i> 分享</a></span>
          <div class="clear"></div>
      </div>
   </section>

1、如果你的路径不是主题目录/css、主题目录/js,那么对应第二步里面25-26行也需要相应的修改路径,或者你直接在主题根目录里面分别创建一个css与js目录,将文件放置进去;

2、代码中有个<i class=”…”></i>的代码,这是调用fontawesome图标字体的代码,如果你的主题没有采用fontawesome图标字体的代码,可能需要你另行载入fontawesome字体的文件,或者是替换成你主题所采用的图标字体;

3、不要忘了将第二步的35行的二维码图片地址改成你自己的,要不打赏的就不客气了。

4、如果想减少文件调用,可以将css以及js都复制进你主题的文件里面,然后删除第二部分相关的代码即可。

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

另外一种最省事的方法是下载插件:wp-solo-share:,插多了比较慢,但确实省时省事!

 

添加新评论