美化百度分享默认图标

之前写过一篇《替换分享工具自带图标》的文章，不过随着JiaThis公司于2018年4月30日悄无声息地关闭旗下分享、友言等所有业务黯然离去，该文章也失去意义。那就用类似的方法再次美化唯一尚存、苟延残喘的百度分享工具。

因代码中使用了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>\';