专栏首页DeveWorkWordPress Ajax 异步加载 自定义评论表情

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 异步加载 自定义评论表情效果

直接在点击下面的评论框效果就出来了,有兴趣的可以用开发者工具看看是不是异步加载。

效果图示:

注意:

  1. 在开始本教程前请确保你已经看过《WordPress中添加自定义评论表情包的方法(附三套表情包下载)》原文并在你的主题上实现该功能,要求下载的smilies[devework.com].zip文件在这里有用,下面的是在这个基础上展开的。
  2. 你可以下载相关文件(里面有若干php、js文件)来直接修改使用,当然,你也可以直接按照教程来自行建立相关php、js文件,下文中不再细说。【下载地址:直接下载 百度网盘
  3. 本文的教程是以本站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 下点击评论框,然后刷新会出现以下提示:

暂时解决不了,期待高手!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 制作WordPress侧边栏“博客统计”小工具并集成在主题中的方法

    一些WordPress 博客会在右侧集成个“博客统计”,内容大概是文章数啊、评论数、建站日期等之类的统计数据。网络上的方法都是直接将php代码写在sidebar...

    Jeff
  • 360安全扫描之WordPress 页面异常导致本地路径泄漏 的漏洞修补

    今天头脑一热到360安全检测那里去为自己的网站进行安全扫描了一番。上次扫描还是一年前,当初扫描一个网站是 94 分,那时候还不懂代码,就这么挂着,被360 公开...

    Jeff
  • 在WordPress 的文章或页面中运行PHP 代码

    如果你在编辑器中输入PHP 代码,默认的话WordPress 不会为你执行这段代码的——只会文本方式输出。Tutsplus 上有一篇文章以插件的方式告知我们实现...

    Jeff
  • 多微信公共账号同时接入微信公共平台API(PHP)

    子勰
  • 通达OA getshell | Nmap 脚本

    http://www.tongda2000.com/download/2019.php?F=baidu_natural&K=

    意大利的猫
  • 使用storm trident消费kafka消息

    storm通过保证数据至少被处理一次来保证数据的完整性,由于元祖可以重发,对于一些需要数据精确的场景,可以考虑用storm trident实现。 传统的事物型...

    Albert陈凯
  • 自己写一个svg转化为安卓xml的工具类

    张风捷特烈
  • java基础学习_基础语法(上)03_day04总结

    ============================================================================= ==...

    黑泽君
  • 【极简解读】深度残差收缩网络 Deep Residual Shrinkage Network

    深度残差收缩网络(Deep Residual Shrinkage Network),是深度残差学习(ResNet)或者说Squeeze-and-Excitati...

    用户6831054
  • Python 黑魔法之属性拦截

    我们在昨天的文章(Python 黑魔法之内存优化)讲了一种黑魔法,今天我们来讲另一种:「属性拦截」。当我们访问某个类或者是实例属性的时候,如果它不存在的话,就会...

    Rocky0429

扫码关注云+社区

领取腾讯云代金券