美化百度分享默认图标

释放双眼,带上耳机,听听看~!

之前写过一篇《替换分享工具自带图标》的文章,不过随着JiaThis公司于2018年4月30日悄无声息地关闭旗下分享、友言等所有业务黯然离去,该文章也失去意义。那就用类似的方法再次美化唯一尚存、苟延残喘的百度分享工具。
因代码中使用了Font Awesome字体图标,如果你的主题没有加载字体图标,可以到WP后台–插件–安装插件页面搜索:Font Awesome 4 Menus 安装并启用,才能显示替换后的图标。

美化百度分享默认图标

下面开始改造:

一、在文章末尾添加分享图标代码
将代码添加到当前主题functions.php的最后:

  1. function entry_share($content) {  
  2.     if (is_single()) {  
  3.         $content .= '  
  4.         <div class="entry-share">  
  5.             <div class="share-box">  
  6.                 <ul class="bdsharebuttonbox">  
  7.                     <li class="share-pu">分享到:</li>  
  8.                     <li><a title="分享到新浪微博" class="fa fa-weibo" data-cmd="tsina" onclick="return false;" href="#"></a></li>  
  9.                     <li><a title="分享到微信" class="fa fa-wechat" data-cmd="weixin" onclick="return false;" href="#"></a></li>  
  10.                     <li><a title="分享到人人网" class="fa fa-renren" data-cmd="renren" onclick="return false;" href="#"></a></li>  
  11.                     <li><a title="分享到QQ空间" class="fa fa-qq" data-cmd="qzone" onclick="return false;" href="#"></a></li>  
  12.                     <li><a title="分享到Facebook" class="fa fa-facebook" data-cmd="fbook" onclick="return false;" href="#"></a></li>  
  13.                     <li><a title="分享到Twitter" class="fa fa-twitter" data-cmd="twi" onclick="return false;" href="#"></a></li>  
  14.                     <li><a title="更多" class="bds_more fa fa-plus-circle" data-cmd="more" onclick="return false;" href="#"></a></li>  
  15.                 </ul>  
  16.             </div>  
  17.        </div>';  
  18.     }  
  19.     return $content;  
  20. }  
  21. add_filter('the_content','entry_share');  

二、添加配套的样式
添加到当前主题样式文件style.css中即可。

  1. /** 分享样式 **/  
  2. .entry-share {  
  3.     font-size14px;  
  4.     text-aligncenter;  
  5.     margin10px auto;  
  6. }  
  7.    
  8. .entry-share .share-pu {  
  9.     floatleft;  
  10.     color#4d4d4d;  
  11.     font-weight: 700;  
  12.     line-height50px;  
  13. }  
  14.    
  15. .entry-share ul li {  
  16.     list-stylenone;  
  17.     margin: 0;  
  18. }  
  19.    
  20. .entry-share li {  
  21.     floatleft;  
  22. }  
  23.    
  24. .entry-share .share-box {  
  25.     displayinline-block;  
  26.     overflowhidden;  
  27. }  
  28.    
  29. .entry-share a {  
  30.     floatleft;  
  31.     color#666;  
  32.     font-size16px !important;  
  33.     border-radius: 40px;  
  34.     margin-right10px;  
  35.     border1px solid #666;  
  36. }  
  37.    
  38. .entry-share .bdsharebuttonbox a:hover {  
  39.     text-decorationnone;  
  40.     color#fff;  
  41. }  
  42.    
  43. .entry-share .bds_more {  
  44.     color#666 !important;  
  45. }  
  46.    
  47. .entry-share .bds_more:hover {  
  48.     color#fff !important;  
  49. }  
  50.    
  51. /** 图标大小 **/  
  52. .entry-share a {  
  53.     backgroundtransparent !important;  
  54.     width40px !important;  
  55.     height40px !important;  
  56.     padding: 0 !important;  
  57.     margin5px !important;  
  58.     floatnone !important;  
  59.     font-size20px !important;  
  60.     displayblock !important;  
  61.     text-aligncenter !important;  
  62.     line-height40px !important;  
  63. }  
  64.    
  65.    
  66. /** 不同图标悬停背景颜色 **/  
  67. .entry-share a:hover.fa-weibo {  
  68.     background#e74c3c !important;  
  69.     border-color#e74c3c;  
  70. }  
  71.    
  72. .entry-share a:hover.fa-wechat {  
  73.     background#2ecc71 !important;  
  74.     border-color#2ecc71;  
  75. }  
  76.    
  77. .entry-share a:hover.fa-renren {  
  78.     background#4760a5 !important;  
  79.     border-color#4760a5;  
  80. }  
  81.    
  82. .entry-share a:hover.fa-qq {  
  83.     background#50abf1 !important;  
  84.     border-color#50abf1;  
  85. }  
  86.    
  87. .entry-share a:hover.fa-facebook {  
  88.     background#3777be !important;  
  89.     border-color#3777be;  
  90. }  
  91.    
  92. .entry-share a:hover.fa-twitter {  
  93.     background#2174c3 !important;  
  94.     border-color#2174c3;  
  95. }  
  96.    
  97. .bdsharebuttonbox a:hover.fa-plus-circle {  
  98.     background#2174c3 !important;  
  99.     border-color#2174c3;  
  100. }  

三、在页脚模板中加载百度分享javascript
将下面代码添加到当前主题footer.php,最后的

  1. <?php wp_footer(); ?>  

上面:

隐藏内容,您需要满足以下条件方可查看
End

人已赞赏
wordpress

WordPress 5.3 发布计划公布

2019-8-24 14:14:19

wordpress

测试一篇文章

2019-9-18 20:49:47

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索