为你的WordPress添加漂亮的百度分享功能

2018年6月4日20:19:59 发表评论 2,161 人围观

百度分享是目前唯一存活的聚合分享
,本文分享百度分享的美化代码教程,赶紧试试看吧

为你的WordPress添加漂亮的百度分享功能

因代码中使用了Font Awesome字体图标,如果你的主题没有加载字体图标,可以到WP后台--插件--安装插件页面搜索:Font Awesome 4 Menus 安装并启用,才能显示替换后的图标。当然,用阿里图标也是修改代码就行。

下面开始改造:

一、在文章末尾添加分享图标代码

将代码添加到当前主题functions.php的最后:

 

function entry_share($content) {

if (is_single()) {

$content .= '

<div class="entry-share">

<div class="share-box">

<ul class="bdsharebuttonbox">

<li class="share-pu">分享到:</li>

<li><a title="分享到新浪微博" class="fa fa-weibo" data-cmd="tsina" onclick="return false;" href="#"></a></li>

<li><a title="分享到微信" class="fa fa-wechat" data-cmd="weixin" onclick="return false;" href="#"></a></li>

<li><a title="分享到人人网" class="fa fa-renren" data-cmd="renren" onclick="return false;" href="#"></a></li>

<li><a title="分享到QQ空间" class="fa fa-qq" data-cmd="qzone" onclick="return false;" href="#"></a></li>

<li><a title="分享到Facebook" class="fa fa-facebook" data-cmd="fbook" onclick="return false;" href="#"></a></li>

<li><a title="分享到Twitter" class="fa fa-twitter" data-cmd="twi" onclick="return false;" href="#"></a></li>

<li><a title="更多" class="bds_more fa fa-plus-circle" data-cmd="more" onclick="return false;" href="#"></a></li>

</ul>

</div>

</div>';

}

return $content;

}

add_filter('the_content','entry_share');

二、添加配套的样式

添加到当前主题样式文件style.css中即可。




/** 分享样式 **/

.entry-share {

font-size: 14px;

text-align: center;

margin: 10px auto;

}

 

.entry-share .share-pu {

float: left;

color: #4d4d4d;

font-weight: 700;

line-height: 50px;

}

 

.entry-share ul li {

list-style: none;

margin: 0;

}

 

.entry-share li {

float: left;

}

 

.entry-share .share-box {

display: inline-block;

overflow: hidden;

}

 

.entry-share a {

float: left;

color: #666;

font-size: 16px !important;

border-radius: 40px;

margin-right: 10px;

border: 1px solid #666;

}

 

.entry-share .bdsharebuttonbox a:hover {

text-decoration: none;

color: #fff;

}

 

.entry-share .bds_more {

color: #666 !important;

}

 

.entry-share .bds_more:hover {

color: #fff !important;

}

 

/** 图标大小 **/

.entry-share a {

background: transparent !important;

width: 40px !important;

height: 40px !important;

padding: 0 !important;

margin: 5px !important;

float: none !important;

font-size: 20px !important;

display: block !important;

text-align: center !important;

line-height: 40px !important;

}

 

 

/** 不同图标悬停背景颜色 **/

.entry-share a:hover.fa-weibo {

background: #e74c3c !important;

border-color: #e74c3c;

}

 

.entry-share a:hover.fa-wechat {

background: #2ecc71 !important;

border-color: #2ecc71;

}

 

.entry-share a:hover.fa-renren {

background: #4760a5 !important;

border-color: #4760a5;

}

 

.entry-share a:hover.fa-qq {

background: #50abf1 !important;

border-color: #50abf1;

}

 

.entry-share a:hover.fa-facebook {

background: #3777be !important;

border-color: #3777be;

}

 

.entry-share a:hover.fa-twitter {

background: #2174c3 !important;

border-color: #2174c3;

}

 

.bdsharebuttonbox a:hover.fa-plus-circle {

background: #2174c3 !important;

border-color: #2174c3;

}

三、在页脚模板中加载百度分享javascript

将下面代码添加到当前主题footer.php,最后的<?php wp_footer(); ?>上面:

 


<script>window._bd_share_config = {"common": {"bdSnsKey": {},"bdText": "","bdMini": "2","bdMiniList": false,"bdPic": "","bdStyle": "1","bdSize": "16"},"share": {"bdSize": 16}};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>';

好了?,看看效果

为你的WordPress添加漂亮的百度分享功能

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: