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下 ...
随机推荐
- Jenkins 构建 Jmeter 项目
1.启动 Jenkins(windows 版本) 2.新建自由风格的项目 定时任务 构建操作 安装 HTML Publisher 插件 构建后操作 最后保存构建,查看报告
- Jenkins+Ansible+Gitlab自动发布/回滚Spring项目
一.实现方法流程图 流程图如下:代码托管在本地GitLab上(为了复现整套流水线,我直接使用了GitHub,懒得再搭建GitLab),开发完成后提交代码到代码仓库,[自动]触发Jenkins进行持续集 ...
- JavaScript 循环判断练习题
JavaScript 循环判断练习题 小明有一组水果("苹果","梨子","香蕉","葡萄","西瓜" ...
- MongoDB JAVA开发
简介 MongoDB是一个基于内存的NoSql(非关系型数据库).具有NoSql的特点,读写快(key-value),不适合持久化但都提供此功能. 用途 我用来存放页面模板 用法 依赖 <dep ...
- saltstack升级
1.背景 saltstack出现安全漏洞,5.1前后爆出很多设备已经变成矿机. 2.处理方法 升级到最新版本salt 3.官方升级方法 yum install https://repo.saltsta ...
- Vuel路由跳转动画
1.App.vue中添加 <transition :name="animate"> <router-view/> </transition> e ...
- CC2530ADC应用
ADC单通道外部电压采集 需要设置一个上机位命令控制字符. 系统时钟初始化——32MHZ晶振 串口0函数初始化——设置串口对应引脚,波特率,清楚中断标志 串口0接收中断响应函数——U0DBUF将控制命 ...
- 201771030129-张琳 实验一软件工程准备—<阅读书之后的三个疑问>
项目 内容 课程班级博客链接 https://edu.cnblogs.com/campus/xbsf/nwnu2020SE/ 本次作业要求链接 https://www.cnblogs.com/nwnu ...
- 【Hadoop离线基础总结】Hadoop的架构模型
Hadoop的架构模型 1.x的版本架构模型介绍 架构图 HDFS分布式文件存储系统(典型的主从架构) NameNode:集群当中的主节点,主要用于维护集群当中的元数据信息,以及接受用户的请求,处理用 ...
- Istio的流量管理(实操一)(istio 系列三)
Istio的流量管理(实操一)(istio 系列三) 使用官方的Bookinfo应用进行测试.涵盖官方文档Traffic Management章节中的请求路由,故障注入,流量迁移,TCP流量迁移,请求 ...