• 开启全站HTTPS。2017-04-29
  • 本站为非盈利性站点,所得收入全部用于网站服务器及其他费用。2015-10-15
  •    3年前 (2015-11-27)  WordPress教程 |   1 条评论  326 
    文章评分 1 次,平均分 5.0

    之前小浩博客也曾试用过知更鸟begin主题,觉得相当不错。鸟叔的点赞分享打赏的样式做的很好看,今天偶然看到一篇教程移植此样式,特分享给大家。该特效采用的是Jbox的插件,不确定是否会与你们本身的主题特效有冲突。还有的就是,动手之前,记得备份,养成好习惯!

    效果如图:分享:wordpress知更鸟的点赞、分享、打赏的样式教程

    html代码

    上面这段代码,添加到single.php里面,具体位置自己调整,需要注意的是,代码中有个<i class="..."></i>的代码,这是调用fontawesome图标字体的代码,如果你的主题没有采用fontawesome图标字体的代码,可能需要你另行载入fontawesome字体的文件,或者是替换成你主题所采用的图标字体。

    css代码

    这一段、可以直接添加到主题style.css里面;PS:部分主题可能不是直接主题根目录下style.css里面写css代码,遇到此情况,可以将此css代码添加到任何一个页面有载入的CSS文件即可

    关于点赞的js代码

    这段js,作用于点赞样式,直接将其添加到你主题的任意一个js文件里面。

    到此,如果环节不出错,样式已经可以在你的文章中正常显示的,但是关于打赏、分享这两个样式,尚未处理完成,知更鸟采用的是点击弹出相关的模态窗口的样式。这里将其变成了Tooltip样式效果,在本文,Tooltip的实现水冷眸直接使用Jbox这个插件。

    首先,引入jbox相关的js以及css文件。

    Jbox需要jquery库的支持,大部分主题都已经默认有引入的,如果没有,请自行百度。

    下面的两个引入文件,为官方的cdn地址,速度如何未曾测试,如果嫌速度慢,可以在本文末尾,自行下载文件将其放进主题内引入。

    引入了Jbox相关文件之后,我们开始开始处理打赏、分享这两个Tooltip样式效果。

    打赏js、分享Tooltip样式js、百度分享js:

    上面这段代码,其中第四行,将里面的图片地址替换为你的支付宝付款码地址,然后将整段代码放在footer.php文件,就大功告成了。

    附上Jbox下载地址:https://codeload.github.com/StephanWagner/jBox/zip/v0.3.2

    原文地址:水冷眸

     

    除特别注明外,本站所有文章均为小浩博客原创,转载请注明出处来自https://www.xhsay.com/wordpress-begin-style.html

    关于
    小浩博客(www.xhsay.com)是由Tovey建立的个人站点,主要致力于整合并分享各种互联网及网站建设的资源。

    发表评论

    表情 格式
    1. 先学习一下,厉害厉害

      百芷集 来自天朝的朋友 谷歌浏览器 Windows XP 2年前 (2016-02-21) 回复
    切换注册

    登录

    忘记密码 ?

    您也可以使用第三方帐号快捷登录

    切换登录

    注册