当前位置:空木白博客 > WordPress > 正文

作者:空木白

手机扫码查看

如何给WordPress添加漂亮的百度分享功能

显示效果:

如何给WordPress添加漂亮的百度分享功能

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

将代码添加到当前主题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添加漂亮的百度分享功能》 发布于2019-01-03

分享到:
赞(0) 打赏

评论 抢沙发

评论前必须登录!

  注册



觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

隐藏
变装
EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00
      切换注册

      登录

      忘记密码 ?

      您也可以使用第三方帐号快捷登录

      Q Q 登 录
      微 博 登 录
      切换登录

      注册