WordPress评论滑动/拉链解锁myQaptcha代码版及部署方法
虽然博客取消了文章页面评论,仅剩下留言板的评论,但张戈还是要尽力做到尽善尽美,将用户体验做到极致!在防止垃圾评论的同时,尽量让评论变得更加简单快捷。
于是就想到了很早之前就很眼馋的滑动解锁功能,可惜那时候太菜 B,安装后发现拖不动,也就没继续折腾了。现在把多说去掉了,是时候研究下这个清爽又华丽的“拉链”解锁了!
当我搜索安装 myQaptcha 插件并启用之后,发现居然可以用了!原来之前拖不动是因为 JQ 太旧了,最近为了解决代码高亮问题,把 JQ 升级到了 1.8.2 版本,从而解决了这个问题。
看了下插件加载后的代码,觉得自己应该有能力换成代码实现,折腾了半天,终于搞定了,虽然我并不排斥用插件,不过能不用就不用吧。
废话不多说,下面说下免插件集成 Qaptcha 滑动解锁的具体方法:
一、下载代码
张戈已将修改好的代码打包上传,有需要的朋友可以下载:
二、部署代码
将我提供的压缩包解压,得到一个 myQaptcha 的文件夹,然后上传到主题目录,比如知更鸟的传完后的路径应该是..../HotNewspro/myQaptcha
然后编辑主题目录下的函数文件 functions.php,添加如下代码即可:
include("myqaptcha/myQaptcha.php");
Ps:如果不知道添加到哪,就加到最后一行的 ?>之前即可。
保存后,你可以去能够留言的页面查看是否加载成功了!
三、修改代码
做完第二步之后,若刷新页面发现没有加载滑动解锁,说明你主题的评论框用的元素 ID 不是 comment,解决办法有 2 个,要不就修改 myQaptcha.php,要不就新增一个符合要求的标签。
修改 myQaptcha.php 需要对照主题的元素 ID,这个很多朋友犯迷糊,不懂怎么弄,这里就不说了。
增加符合要求的标签,方法很简单:
我们只需要编辑主题评论模板 comments.php,在合适的位置添加如下代码即可:
<div id="comment"></div>
这个标签是滑动解锁加载的标记位置,没有这个标签,就不会出现滑动模块了。
Ps:第三步的修改仅用于没有出现滑动模块的情况,重复添加会出现多个模块!!
四、加载调整
代码默认是在文章和单页面加载,如果你的博客和张戈的一样,只是留言板可以留言,那文章页面完全不需要去加载相关的 js 和 css,影响加载速度。
修改方法:
编辑 myQaptcha 文件夹下的 myQaptcha.php,找到如下代码(第 11 行):
if ( is_singular() && !is_user_logged_in()) {
按照你的需求修改即可,比如张戈博客只需要在留言板页面加载这个功能,那么我需要如下修改:
if (is_page('liuyan') && !is_user_logged_in()) {
即只在页面名称为 liuyan,且用户未登录的情况加载,若是其他需求,依葫芦画瓢修改即可,相信难不倒你!
另外,如果发现出现拖不动的情况,请检查 JQuery 加载是否出现异常,或者将 JQuery 版本升级,比如张戈博客现在用的 JQ 版本是 1.8.2。
好了,这篇教程就介绍到这里,不喜欢折腾的朋友可以通过安装插件实现,有洁癖、有强迫症的朋友可以参考本文给自己的评论加一个拉链,还是不错的!最后,按惯例申明下,此代码纯属个人学习折腾之作,版权依然归原作者[三十岁]所有!
Ps:张戈博客已经发文分享了目前在用的滑动自动提交的部署方法,感兴趣的朋友请点此前往!
- 算法模板——线段树5(区间开根+区间求和)
- Spring基础篇——通过Java注解和XML配置装配bean
- Java多线程高并发学习笔记(二)——深入理解ReentrantLock与Condition
- 算法模板——线段树1(区间加法+区间求和)
- 【LeetCode 205】关关的刷题日记38 Isomorphic Strings
- JavaScript基础2---控制权DOM操作
- 算法模板——线段树3(区间覆盖值+区间求和)
- 算法模板——线段树4(区间加+区间乘+区间覆盖值+区间求和)
- 【LeetCode 204】关关的刷题日记39 Count Primes
- 算法模板——并查集 1
- Java 持久化操作之 --io流与序列化
- 算法模板——LCA(最近公共祖先)
- 算法模板——AC自动机
- UOJ #117. 欧拉回路
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python如何写try语句
- python怎么判断素数
- php数组遍历类与用法示例
- PHP格式化显示时间date()函数代码
- python操作微信自动发消息的实现(微信聊天机器人)
- 使用ITK-SNAP进行抠图操作并保存mask的实例
- Yii2框架加载css和js文件的方法分析
- php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
- python如何求圆的面积
- php实现微信公众号企业转账功能
- PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
- Python之Matplotlib文字与注释的使用方法
- Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
- python中return如何写
- PHP钩子实现方法解析