WordPress Ajax 异步加载 自定义评论表情
最近为了考试都复习成狗熊样啦~~我要缓缓折腾折腾WordPress 先。今天带来本人最新的折腾成果: Ajax异步加载自定义评论表情。由于评论表情那22个gif图片加载的话实在是增加了不少的请求数,虽然本站DeveWork.com 的图片都用七牛加速了,但对于Jeff 这种有洁癖的人来说,实在是不舒服。想到可以使用 Ajax异步加载,经过不懈努力,Jeff 终于实现了这个效果,下面分享教程给大家!
这篇教程是建立在 DH博客 的一篇文章思路上面的,但是本文与之非常不同(DH 那篇文章甚至有错误),整个教程经过本人提炼创造,因此转载本文请注明来源,不注明者Jeff 与你死磕到底(原谅我无礼,被某个采集者受够了)!
关于 Ajax异步加载 不准确简介
Ajax 是从Jquery 上面衍生而来的,异步加载也称“同步加载”“延迟加载”,Ajax异步加载最好的例子就是谷歌搜索键入相关关键词但是没有按搜索按钮时候,会自动给出关键词提示那个效果(国内某度也有这个功能,但我只喜欢正宗的)。Ajax 异步加载可以减轻服务器压力,毕竟局部刷新而不是整体刷新。具体原理请自行搜索。
熟悉的知道,WordPress的评论表情如果在评论框那里Show出来的话,每次都要加载这20+个评论表情图片,对于主机不给力的朋友来说简直是灾难。再者,如果浏览者不打算评论,简直是浪费了;所以,本文教程实现的是:当点击评论的时候才加载评论表情,这样,评论表情才能更好发挥其用处。
缺点:本文实现的 Ajax 异步加载自定义评论表情不支持 IE 浏览器,为什么的话去问微软吧~(珍爱生命,远离IE!)
WordPress Ajax 异步加载 自定义评论表情效果
直接在点击下面的评论框效果就出来了,有兴趣的可以用开发者工具看看是不是异步加载。
效果图示:
注意:
- 在开始本教程前请确保你已经看过《WordPress中添加自定义评论表情包的方法(附三套表情包下载)》原文并在你的主题上实现该功能,要求下载的smilies[devework.com].zip文件在这里有用,下面的是在这个基础上展开的。
- 你可以下载相关文件(里面有若干php、js文件)来直接修改使用,当然,你也可以直接按照教程来自行建立相关php、js文件,下文中不再细说。【下载地址:直接下载 百度网盘 】
- 本文的教程是以本站DeveWork.com 的主题来做例子,相关路径可能因主题不同而不同,请留意。
WordPress Ajax 异步加载 自定义评论表情教程:
一、删除你主题上来自于《WordPress中添加自定义评论表情包的方法(附三套表情包下载)》一文的所有代码(重要!);
二、确保你的主题已经加载了jquery.js文件(具体都应该懂的吧,不懂留言~)。
三、将下面的代码保存为 smiley_ajax.js文件,放到主题的/lib/js/文件里面:
var sresponse='.smiley_ajax'; jQuery(document).ready(function smiley_ajax(){ jQuery('textarea').focus(function() { jQuery.ajax({ url: "", type:"POST", data:"action=smiley_ajax_action", beforeSend:function() { }, error:function (xhr, textStatus, thrownError){ alert("readyState: " + xhr.readyState + " status:" + xhr.status + " statusText:" + xhr.statusText +" responseText:" +xhr.responseText + " responseXML:" + xhr.responseXML + " onreadystatechange" +xhr.onreadystatechange); alert(thrownError); }, success: function (data) { jQuery(sresponse).html(data); } }); return false; }); }) |
---|
在主题的footer.php的前加入以下代码,使主题在单页时候加载:
<?php if ( is_singular() ){ ?> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/lib/js/smiley_ajax.js"></script> <?php } ?> |
---|
四、将下面的代码保存为 smiley_ajax.php ,放到主题的includes 文件夹:
<?php /***************************************************** 函数名称:smiley_ajax_action_do 函数作用:动态加载表情符号 函数作者:DH at http://dhblog.org 修改者 Jeff Ma at http://devework.com ******************************************************/ function smiley_ajax_action_do(){ if( isset($_POST['action'])&& $_POST['action'] == 'smiley_ajax_action'){ include_once TEMPLATEPATH.'/includes/smiley.php'; die(); }else{ return; } } add_action('template_redirect', 'smiley_ajax_action_do'); //自定义表情路径 function custom_smilies_src($src, $img){return get_bloginfo('template_directory').'/images/smilies/' . $img;} add_filter('smilies_src', 'custom_smilies_src', 10, 2); ?> |
---|
在主题的 functions.php文件中包括进去该文件:
include(TEMPLATEPATH .'/includes/smiley_ajax.php'); //评论表情异步加载 |
---|
五、打开你目前使用主题的comments.php文件,在相应的位置加入以下代码:
<div class="smiley_ajax"></div> |
---|
刷新缓存,搞定!
Jeff 已经尽量详细了,如果有不懂的,请留言。
Ajax真是个好东西,可惜我暂时还不会,熬完这苦逼的考试,我就可以放开手折腾啦~
6.27日更新:目前发现实现后在Chrome 下点击评论框,然后刷新会出现以下提示:
暂时解决不了,期待高手!
- 局部打印插件 jquery.PrintArea.js
- FluorineFx应用中“页面长时间不动”导致无法连接的解决办法
- Mysql主从同步(1)-主从/主主环境部署梳理
- mysql主从同步(3)-percona-toolkit工具(数据一致性监测、延迟监控)使用梳理
- 网站压力测试软件WebBench以及压测Jexus
- Gershon Dublon & Nan Zhao:用传感器网络感知世界
- 即日起珠海可用微信乘公交,腾讯乘车码助力智慧城市建设
- 利用mk-table-checksum监测Mysql主从数据一致性操作记录
- mysql主从同步(4)-Slave延迟状态监控
- 浏览器窗口尺寸改变时的图片自动重新定位
- Mongodb主从复制/ 副本集/分片集群介绍
- Paul-Adrien Menez:互联网与抵制食物浪费的故事
- DRBD详细解说及配置过程记录
- Servant:基于Web的IIS管理工具
- 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 数组属性和方法
- Codeforces Round #615 (Div. 3)D. MEX maximizing
- PAT (Advanced Level) Practice 1039 Course List for Student (25分)
- Codeforces Round #615 (Div. 3) E. Obtain a Permutation
- 数据结构实验完结撒花之内部排序比较
- Codeforces Round #615 (Div. 3) F. Three Paths on a Tree
- Matlab 内联函数及匿名函数
- 渗透测试 | 内网信息收集
- 浅谈 CSS 的用法
- PAT (Advanced Level) Practice 1049 Counting Ones (30分)
- 用递归的思想实现二叉树前、中、后序迭代遍历
- 利用WAF进行拒绝服务攻击
- leetcode树之从根到叶的二进制数之和
- Vue3 模板编译原理
- leetcode树之从上到下打印二叉树
- leetcode树之二叉搜索树的最近公共祖先