美化百度分享默认图标

  • A+
所属分类:WordPress

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

三、在页脚模板中加载百度分享javascript

将下面代码添加到当前主题footer.php,最后的上面:

  1. <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>';
美化百度分享默认图标

最后效果

weinxin
我的微信
分享和发布网站源码、免费软件下载和网站搭建技术教程,致力创造一个高质量网络资源教程的分享平台。

发表评论

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