网站建设

仿异次元百度分享工具条张戈修改版

只要不是高度近视,就会发现张戈博客的文章最近加上了这个仿异次元百度分享工具条。增加这个跟随横条的初衷,其实是最近启用百度两侧漂浮广告后,发现博客左侧的分享条以及右侧的卷动按钮在1280*800分辨率下,会被广告遮盖,有点不爽。于是就想起了以前看到过的这个玩意儿。 前天,经过一番折腾后,如愿以偿的加上了这个功能,感觉挺不错的!当我回访重量网络博客时,发现他的工具条有个很棒的功能,那就是字体大小及侧边栏控制,可使用大字体,并开启宽屏浏览!感觉很棒! 于是,就给他留言,想他给下源码。第二天还是没回复我(应该是被多说拉黑了)。。。按耐不住,直接动手扒代码。在取得相应的CSS和图片后,开始了第二轮的折腾!这一轮是痛苦的,也是快乐的。。。。 张戈博客一直以分享为主旨,好东西绝不吝啬!现在把我DIY之后的源码分享出来给有需要的人。 一、模块名称: 仿异次元百度分享工具张戈修改版 二、原版出处: C++爱好者(第①版)、WP大学(第②版) 三、修改内容: ①、加入文章字体大小控制按钮; ②、加入文章宽/窄屏浏览控制按钮及颤抖特效; ③、加入工具条随界面一起拉伸/压缩效果; ④、创意修改支付宝捐赠为弹出二维码模式(原创创意,点击可以看到效果) 四、其他说明: ①、大体以WP大学的为蓝本,参考第①版以及重量网络的工具条制作。 ②、因为支付宝收款主页下线,张戈修改成支付宝新出的扫码支付二维码,算是弥补了这个按钮的空缺,虽说没人给俺付款。。。。 ③、弹出二维码需要主题支持暗箱功能,比如知更鸟。不支持的请自行加入暗箱功能,比如安装暗箱插件。 五、添加步骤: ①、下载share.zip 下载解压后得到share文件夹,上传到WordPress当前主题目录下。 ②、调用代码: Ps:先行调用,是为了后面修改后的即时测试预览。 首先,在主题function.php里面添加获取特色图片函数(添加前请先检查是否已存在此函数): 接着,打开主题的文章模版,一般是single.php,在文章(副)标题下面添加如下代码: 下图为张戈博客所放位置,仅供参考:   然后,在header.php里面添加CSS调用代码: 最后,在footer.php里面添加JS调用代码,完成部署: ②、按照实际情况修改代码: share.php: 第16、70行中的ID请修改成你自己的百度分享ID; 第26、27、28行是字体控制按钮,适合知更鸟主题,其他主题请自行百度修改。 第52行,请改成收款二维码的实际路径(后文将会简单说明如何制作这个二维码) 最麻烦也是最重要的一步来了。。。 share_roll.js 文件的上下部分无需修改,就不贴出来了。以下代码中的第6~13、18~26行内容,请根据实际CSS标签名和对应宽度修改。 6~13表示隐藏侧边栏之后,需要变宽的那些标签元素;18~26则表示恢复侧边栏,需要变窄的那些元素。 Ps:行数不是固定的,具体根据宽度发生改变的标签元素而定。如果宽度一样,理论上可以合并成一行。 但是如何确定这些标签元素名称(id名、class名),及宽度呢? 张戈使用的是 看文章模版single.php源码+谷歌开发模式查看元素 的方法,找到需要变化的元素,并且确定他们前后的宽度的。使用知更鸟主题的博客基本上可以直接使用,不用修改!其他主题博客,请自行修改(估计新手会挺苦逼的,不过也能学到不少东西...),张戈仅提供如下参考图:   ③、制作收款二维码: 支付宝应该是为了强推手机支付宝,下线了收款主页,推出了支付宝条码支付功能。 前往并登陆:https://qr.alipay.com/paipai/personal.htm 就可以按照向导制作你的专属收款二维码了!   下载二维码图片之后,请上传到share.php第52行相应位置(路径和文件名一致即可,没弄好的话,有人给你付款那就到张戈的腰包了哦!)。 如果,以上操作无误的话,恭喜你,仿异次元百度分享工具条张戈修改版就添加成功了!赶紧打开文章试下吧!添加中有任何问题,欢迎在下面留言反馈! 如果添加成功,高兴的话可以给张戈赏点零花钱,AD赞助,或者扫码赏赐张戈一杯咖啡或是一杯香茗亦可,*^_^*
阅读全文