WordPress美化百度分享默认图标

Posted xiaobingch

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了WordPress美化百度分享默认图标相关的知识,希望对你有一定的参考价值。

因代码中使用了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-size: 14px;
  4. text-align: center;
  5. margin: 10px auto;
  6. }
  7.  
  8. .entry-share .share-pu {
  9. float: left;
  10. color: #4d4d4d;
  11. font-weight: 700;
  12. line-height: 50px;
  13. }
  14.  
  15. .entry-share ul li {
  16. list-style: none;
  17. margin: 0;
  18. }
  19.  
  20. .entry-share li {
  21. float: left;
  22. }
  23.  
  24. .entry-share .share-box {
  25. display: inline-block;
  26. overflow: hidden;
  27. }
  28.  
  29. .entry-share a {
  30. float: left;
  31. color: #666;
  32. font-size: 16px !important;
  33. border-radius: 40px;
  34. margin-right: 10px;
  35. border: 1px solid #666;
  36. }
  37.  
  38. .entry-share .bdsharebuttonbox a:hover {
  39. text-decoration: none;
  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. .entry-share a {
  52. background: transparent !important;
  53. width: 40px !important;
  54. height: 40px !important;
  55. padding: 0 !important;
  56. margin: 5px !important;
  57. float: none !important;
  58. font-size: 20px !important;
  59. display: block !important;
  60. text-align: center !important;
  61. line-height: 40px !important;
  62. }
  63. /** 不同图标悬停背景颜色 **/
  64. .entry-share a:hover.fa-weibo {
  65. background: #e74c3c !important;
  66. border-color: #e74c3c;
  67. }
  68.  
  69. .entry-share a:hover.fa-wechat {
  70. background: #2ecc71 !important;
  71. border-color: #2ecc71;
  72. }
  73.  
  74. .entry-share a:hover.fa-renren {
  75. background: #4760a5 !important;
  76. border-color: #4760a5;
  77. }
  78.  
  79. .entry-share a:hover.fa-qq {
  80. background: #50abf1 !important;
  81. border-color: #50abf1;
  82. }
  83.  
  84. .entry-share a:hover.fa-facebook {
  85. background: #3777be !important;
  86. border-color: #3777be;
  87. }
  88.  
  89. .entry-share a:hover.fa-twitter {
  90. background: #2174c3 !important;
  91. border-color: #2174c3;
  92. }
  93.  
  94. .bdsharebuttonbox a:hover.fa-plus-circle {
  95. background: #2174c3 !important;
  96. border-color: #2174c3;
  97. }

 

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

将下面代码添加到当前主题footer.php,最后的<?php wp_footer(); ?>上面:

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

以上是关于WordPress美化百度分享默认图标的主要内容,如果未能解决你的问题,请参考以下文章

如何给wordpress网站添加百度分享按钮或悬浮窗

如何给wordpress网站添加百度分享按钮或悬浮窗

博客美化04.自定义地址栏logo

零代码完成RDS RDWeb门户和应用图标的美化和个性化

wordpress和普通网页如何使用百度分享组件

百度分享怎么 自定义图片分享 原创