WordPress添加漂亮的百度分享自定义样式
以下代码由PHP站长网 52php.cn收集自互联网现在PHP站长网小编把它分享给大家,仅供参考 通常好的 wordpress 博客通常都具有分享功能,可以让访客分享你的博文,增加博客流量。国内网站大部分使用的是百度分享,网站的浏览者可以方便的分享内容到人人网、开心网、QQ 空间、新浪微博等一系列 SNS 站点。为您的网站带回更多的流量。通过百度分享按钮,您网站上的网页将更容易被百度搜索引擎所发现,从而有机会从百度搜索带回更多的流量。百度分享是目前唯一存活的聚合分享,由此可见添加百度分享还是很有必要的,可以把自己网站上的内容分享到扣扣空间啊 ,微信啊 ,微信朋友圈啊等等一些社交平台上。 我们制作主题时,很多使用 Font Awesome 字体图标,好处不言而喻这里不累述,如果你的主题没有加载 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'); 二、添加 CSS 样式添加到当前主题样式文件 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,最后的<?php wp_footer(); ?>上面: <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> 处理完以上的步骤,更新一下网站,我们就可以看到 分享的标签已经显示到网站上了,想要分享什么自己动手试试吧。 以上内容由PHP站长网【52php.cn】收集整理供大家参考研究如果以上内容对您有帮助,欢迎收藏、点赞、推荐、分享。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |