WordPress添加漂亮的百度分享自定义样式

PetitQ WordPress教程 2019-3-20 1.54K 0 1

通常好的 wordpress 博客通常都具有分享功能，可以让访客分享你的博文，增加博客流量。国内网站大部分使用的是百度分享，网站的浏览者可以方便的分享内容到人人网、开心网、QQ 空间、新浪微博等一系列 SNS 站点。为您的网站带回更多的流量。通过百度分享按钮，您网站上的网页将更容易被百度搜索引擎所发现，从而有机会从百度搜索带回更多的流量。百度分享是目前唯一存活的聚合分享，由此可见添加百度分享还是很有必要的，可以把自己网站上的内容分享到扣扣空间啊，微信啊，微信朋友圈啊等等一些社交平台上。

我们制作主题时，很多使用 Font Awesome 字体图标，好处不言而喻这里不累述，如果你的主题没有加载 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');

二、添加 CSS 样式

添加到当前主题样式文件 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>