!
也想出现在这里? 联系我们
广告位
当前位置:首页>技术分享>网站运维>DUX主题添加点赞打赏功能

DUX主题添加点赞打赏功能

前两天有个网友留言问我 DUX 主题添加点赞打赏功能的问题,其实,DUX 主题4.0版本已经有了打赏的功能,只不过主题自带的打赏功能样式并不怎么好看,而且并没有点赞功能。很多时候当我们浏览网站看到一些不错的文章,可能很少会去留言,但是如果文章下方能有个点赞之类的交互按钮,我想还是会有很多人愿意去点击一下的。虽然只是一个小小的功能,但是对于增加网站粘性,促进网站与访客之间的交流还是很有作用的。这两天刚好腾出时间来,美化主题自带的打赏功能的同时也顺便给主题添加上了这么一个点赞功能。下面是修改完成后的截图,如果你喜欢的话可以直接拿去使用。

DUX主题添加点赞打赏功能

DUX主题添加点赞打赏功能

虽然主题已经自带有打赏功能并且后台提供了设置选项,为了能够让 DUX 4.0 之前版本的网友同样能够使用这一功能,我特地将原有打赏功能摘了出来并与点赞功能合为一个功能。(个人觉得如果文章页下仅有一个点赞按钮或仅有一个打赏按钮并不美观,当然这里我也会提供单独开启某一功能的选项。)不扯太多废话了,这次主题修改主要修改了 functions.php 、single.php 、footer.php、options.php 以及 main.css 五个文件,大家在修改主题之前先备份一下。

点赞效果功能函数

将下面这段代码添加到主题 functios.php 文件中去:

代码主要用于通过cookie 判断用户是否已经点赞,并将点赞数累加写入数据库。

添加JS脚本及打赏弹出内容

将以下代码添加至主题的 footer.php 文件中去:

前一半代码是用于控制打赏弹出框输出内容的,后面的两段JS代码分别用于控制打赏弹出框效果及点赞效果的,当然对于JS代码你也可以放在主题后台自定义代码位置或者主题JS文件中去。

前端显示控制代码

将下面代码放入主题 single.php 文件中去,具体位置大家按照自己喜好放置即可。

代码主要用于前端显示,这里为了后期设置方便我将很多参数设置成了变量。

CSS样式美化

将下面代码添加到主题的 main.css 文件中去:

由于主题、插件等因素的影响,样式代码放在你的主题上显示效果可能并不会太好,具体样式大家可根据自己喜好进行微调。

添加后台设置选项

将以下代码添加到主题的 options.php 文件中去:

添加完上述设置按钮,刷新 WordPress 后台主题设置选项会多出如下内容:

DUX主题添加点赞打赏功能

按钮的添加是为了大家后期设置调整方便,当然如果你希望自己将文件写死,或者说你是用的主题后台设置选项不是使用的 Options Framework框架,那么你将上述变量部分全部替换成相应的文字、图片等对代码稍作调整也可以在其他主题实现点赞打赏的功能。

给TA打赏
共{{data.count}}人
人已打赏
网站运维

WordPress如何更改程序安装路径 如非必要,切勿修改

2022-9-13 12:32:30

网站运维

解决博客 Uncaught ReferenceError QTags is not defined 问题

2022-9-13 12:33:17

声明 本站上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。无意侵害您的权益,请发送邮件至 2651636361@qq.com 或点击右侧 私信:少羽 反馈,我们将尽快处理。
0 条回复A文章作者M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索