美化百度分享默认图标

WordPress134.4K阅读模式

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

美化百度分享默认图标-图片1

因代码中使用了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,最后的[code]<?php wp_footer(); ?>[/code]上面:

<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>';

 

美化百度分享默认图标-图片2

最后效果

结束语

时过境迁,不合适宜的产品和免费的午餐都不会长久.....

 

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  13  访客  13
    • 小糊涂博客
      小糊涂博客 3

      沙发

      • 雅兮网
        雅兮网 4

        来学习知更鸟大佬的时尚样式

        • 龙笑天
          龙笑天 5

          免费产品确实越来越少了,比如多说、畅言等评论工具~

          • boke112导航
            boke112导航 4

            这个分享样式还是很不错的

            • 佳软盒子
              佳软盒子 1

              分享按钮感觉现在没啥用了,很少人分享吧

              • 广州网站建设
                广州网站建设 4

                这个分享按钮比较好看

                • hahh
                  hahh 0

                  不能获取扣扣图像呀

                  • 主机实验室
                    主机实验室 1

                    确实很好用!

                    • 6666666
                      6666666 1

                      百度都不支持HTTPS协议,百度自带的分享插件没用了,度娘一下对于小白的我来说,分享方法的人估计是采集别人的基本一个样,看都看不懂的分享出来不知道该说些什么

                      • 复仇的撒旦
                        复仇的撒旦 1

                        为什么我安装之后字体变成方块?能告诉我怎么修改吗?

                        • 复仇的撒旦
                          复仇的撒旦 1

                          是图标前面的 分享到 这几个字变成方块,我的wp版本是4.9.8最新的。难道是我字体装的不全么

                          • lmdk5200
                            lmdk5200 1

                            发现一个不错的分享按钮站,样式很好看。侧边栏加了,不知道文章下面百度分享那个怎么替换掉?
                            https://www.addthis.com/

                          匿名

                          发表评论

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

                          拖动滑块以完成验证