WordPress美化百度分享默认图标
因代码中使用了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');
二、添加配套的样式
添加到当前主题样式文件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>';
WordPress美化百度分享默认图标的更多相关文章
- 解决WordPress百度分享图标不显示问题
最近在帮朋友维护博客时,发现他的百度分享居然不能使用了,首先很多人会认为,百度分享挂在那里就是一种摆设,又没有几个人去分享,有什么含义呢?其实挂百度分享的含义是非常重要的,网站增加一个百度分享是可以增 ...
- 在phpwind内容页使用百度分享进行图片分享
在phpwind内容页使用百度分享进行图片分享时,百度分享默认提取到的图片不一定是主题正文内容中的图片,需要使用百度提供的配置机制自行调整. 整个代码添加的位置在此不论,主要原理是在主题正文区域提取图 ...
- 百度分享如何自定义分享url和内容?
百度分享默认分享的是当前页的url,但也可以在同一个页面中分享多个不同的url,仅需进行如下简单的配置. 默认的代码如下: <div id="bdshare" class=& ...
- wordpress和普通网页如何使用百度分享组件
百度分享组件是什么?摘自百度百科: 百度分享是一个提供网页地址收藏.分享及发送的WEB2.0按钮工具,网站的浏览者可以方便的分享到人人网.分享到开心网.分享到QQ空间.分享到新浪微博等一系列SNS站点 ...
- 百度地图点击地图显示地址详情的默认方法怎么关闭,去掉百度地图api图标信息
去掉百度地图api图标信息 调用百度地图API时,如果想去掉百度的logo,只需要在css里设置: <style> .anchorBL{display:none} </style&g ...
- 百度分享vue版-vshare
vshare 基于百度分享开发的支持VUE2.X的分享插件,为您带来更多的流量!提供多种风格按钮,代码加载更快,引入社会化流量,提升网页抓取速度等优点.github地址:https://github. ...
- 在网站中添加 https 百度分享
博客地址:http://www.moonxy.com 一.前言 百度分享是一个提供网页地址收藏.分享及发送的 WEB2.0 按钮工具,借助百度分享按钮,网站的浏览者可以方便的分享内容到人人网.开心网. ...
- 如何给WordPress安装百度统计代码
1.注册并登录百度统计,点击页面顶部的“网站中心”,然后点击右上角“+ 新增网站”,填写网站域名确定后,点击“复制代码”:2.登录 WordPress 后台,点击左侧导航栏“外观”里的“编辑”,然后点 ...
- 百度分享不支持https的解决方案
站点自从开启 https 之后 ,百度分享就不能用了!但是又寻找不到类似百度分享的替代品.. 怎么办呢?要如何解决 百度分享不支持https的问题呢, 跟着博主动动手,让你百度分享仍然能在https下 ...
随机推荐
- Java ArrayList工作原理及实现
http://yikun.github.io/2015/04/04/Java-ArrayList%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86%E5%8F%8A%E5%AE% ...
- 跟风微信小程序,生鲜水果店如何借力小程序每天多赚2万块?
公司旁边的水果店,虽然是一家实体店,但老板有一颗爱玩互联网的心. 老板非常重视线上的营销推广,什么新的线上推广方式都爱尝试一下.公众号大热时做了自己的微信公众号,并且有自己的微信商城,不过线上的销售一 ...
- struts2验证码
验证码大多是jsp,servlet写的. 我拿来主义了, 再自己完善了一下(我一直努力想要站在巨人的肩膀) 首先是页面 test.jsp <%@ page contentType=" ...
- echarts自定义tooltip显示
使用echarts展示图形的时候,鼠标滑倒图像上,想展示除了系列名,数据名,数据值以外的数据,这时需要使用tooltip的fommater方式进行配置,另外对数据格式也有一定的要求. 如图所示:如果想 ...
- INTERVIEW #1
一.数据对齐存储 在32位系统中:int占4Bytes,short占2Bytes,char占1Byte,加起来应该是7Bytes,但是下面这段代码输出却是8. #define _CRT_SECURE_ ...
- POJ 1176 Party Lamps&& USACO 2.2 派对灯(搜索)
题目地址 http://poj.org/problem?id=1176 题目描述 在IOI98的节日宴会上,我们有N(10<=N<=100)盏彩色灯,他们分别从1到N被标上号码. 这些灯都 ...
- nginx判定国家ip访问网站
我们可以通过GeoIP模块和MaxMind免费数据库来实现.MaxMind具有新版本的数据库GeoLite2,它仅支持CSV和mmdb格式.可以支持mngx_http_geoip2_modulemdb ...
- Java 经典面试题:聊一聊 JUC 下的 LinkedBlockingQueue
本文聊一下 JUC 下的 LinkedBlockingQueue 队列,先说说 LinkedBlockingQueue 队列的特点,然后再从源码的角度聊一聊 LinkedBlockingQueue 的 ...
- MinorGC前检查
- Spring 中基于 AOP 的 @AspectJ注解实例
@AspectJ 作为通过 Java 5 注释注释的普通的 Java 类,它指的是声明 aspects 的一种风格.通过在你的基于架构的 XML 配置文件中包含以下元素,@AspectJ 支持是可用的 ...