【2022】WordPress 添加好看的百度分享代码

最近,一直想给我的 WordPress 网站更换一个好看的百度分享代码,结果一直没找到心仪的,今天好不容易找到了一个,看着还不错的,但是在为 WordPress 添加该百度分享代码的时候,却遇到了各种问题,好在小编动手能力强,都给客服了,下面小编就把这套好看的百度分享代码分享给大家吧。

【2022】WordPress 添加好看的百度分享代码

WordPress 添加好看的百度分享代码

首先,跟大家说明一下,想要使用这套好看的百度分享代码,大家需要先在我们的 WordPress 引入一下 Font Awesome 字体图标的CSS框架,相关代码稍后小编会一并分享给大家,另外大家还需要下载一下百度分享代码的本地化文件,同样稍后一并分享给大家。

首先先给大家看看我添加好的百度分享代码

【2022】WordPress 添加好看的百度分享代码

怎么样,是不是很好看?现在大家是不是已经非常期待这个好看的百度分享代码了?那好吧,下面小编就把代码分享给大家吧。

Font Awesome 字体图标的CSS框架

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

大家将上方的Font Awesome 字体图标的CSS框架添加到我们的 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;
}

第三步,将下面的代码,添加到主题的 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网站Git主题不显示百度分享代码

当设置好百度分享代码的本地化文件后,大家记得将上面代码的 http://bdimg.share.baidu.com/修改为你的网站地址,例如https://www.wpfls.com/。

结语

好了,至此,为 WordPress 添加好看的百度分享代码就结束了,大家赶紧去操作起来,让你的 WordPress 更加强大吧。哦对了,这是2022年到目前为止能用的百度分享代码哦。

微信关注

WP福利社是一个专注分享WordPress主题模板与WordPress插件的网站
WPFLS » 【2022】WordPress 添加好看的百度分享代码

发表回复

WP福利社专注分享WordPress主题、插件、教程

关于我们 联系我们