WordPress添加漂亮的百度分享自定义样式

通常好的wordpress博客通常都具有分享功效,可以让访客分享你的博文,增添博客流量。海内网站大部门使用的是百度分享,网站的浏览者可以利便的分享内容到人人网、开心网、QQ空间、新浪微博等一系列SNS站点。为您的网站带回更多的流量。通过百度分享按钮,您网站上的网页将更容易被百度搜索引擎所发现,从而有时机从百度搜索带回更多的流量。百度分享是现在唯一存活的聚合分享,由此可见添加百度分享照样很有需要的,可以把自己网站上的内容分享到扣扣空间啊 ,微信啊 ,微信同伙圈啊等等一些社交平台上。
WordPress添加漂亮的百度分享自定义样式
我们制作主题时,许多使用Font Awesome字体图标,利益不言而喻这里不累述,若是你的主题没有加载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="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></a></li>
  9.     <li><a title="分享到微信" class="fa fa-wechat" data-cmd="weixin" onclick="return false;" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></a></li>
  10.     <li><a title="分享到人人网" class="fa fa-renren" data-cmd="renren" onclick="return false;" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></a></li>
  11.     <li><a title="分享到QQ空间" class="fa fa-qq" data-cmd="qzone" onclick="return false;" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></a></li>
  12.     <li><a title="分享到Facebook" class="fa fa-facebook" data-cmd="fbook" onclick="return false;" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></a></li>
  13.     <li><a title="分享到Twitter" class="fa fa-twitter" data-cmd="twi" onclick="return false;" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></a></li>
  14.     <li><a title="更多" class="bds_more fa fa-plus-circle" data-cmd="more" onclick="return false;" href="#" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></a></li>
  15.     </ul>
  16.     </div>
  17.     </div>';
  18.     }
  19.     return $content;
  20.     }
  21.     add_filter('the_content','entry_share');

二、添加CSS样式

添加到当前主题样式文件style.css中即可:

  1. /** 分享样式 **/
  2. .entry-share {
  3. 	font-size: 14px;
  4. 	text-align: center;
  5. 	margin: 10px auto;
  6. }
  7. .entry-share .share-pu {
  8. 	float: left;
  9. 	color: #4d4d4d;
  10. 	font-weight: 700;
  11. 	line-height: 50px;
  12. }
  13. .entry-share ul li {
  14. 	list-style: none;
  15. 	margin: 0;
  16. }
  17. .entry-share li {
  18. 	float: left;
  19. }
  20. .entry-share .share-box {
  21. 	display: inline-block;
  22. 	overflow: hidden;
  23. }
  24. .entry-share a {
  25. 	float: left;
  26. 	color: #666;
  27. 	font-size: 16px !important;
  28. 	border-radius: 40px;
  29. 	margin-right: 10px;
  30. 	border: 1px solid #666;
  31. }
  32. .entry-share .bdsharebuttonbox a:hover {
  33. 	text-decoration: none;
  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. 	background: transparent !important;
  45. 	width: 40px !important;
  46. 	height: 40px !important;
  47. 	padding: 0 !important;
  48. 	margin: 5px !important;
  49. 	float: none !important;
  50. 	font-size: 20px !important;
  51. 	display: block !important;
  52. 	text-align: center !important;
  53. 	line-height: 40px !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,最后的<?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添加漂亮的百度分享自定义样式
处置完以上的步骤,更新一下网站,我们就可以看到 分享的标签已经显示到网站上了,想要分享什么自己着手试试吧。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 WordPress添加漂亮的百度分享自定义样式 https://zhutizhen.com/14548.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章