接上文:jQuery+Ajax在wordpress中的应用(二)
其实,copy代码并不难,能够理解学习对于业余爱好者已经不错,至于应用和创新那得下很多功夫学习基础。我也是停留在复制/粘贴的水平上,折腾折腾还是要考虑量力而行的。
(四)Ajax站点搜索和Ajax comment paper(这部分尚未搞明白,待补充)
除了使用google的Ajax站点搜索外,也可以在wordpress中实现Ajax实时搜索。
评论分页插件也是有现成的,当然它不依赖任何 JavaScript 框架。但我的既然用了JQuery框架,那也不要浪费了,可以改写用JQuery实现。
一些主题里已经内置了以上功能,如philna2里,这个我暂时没用上(因为小站来的人少,没需求,囧),所以还没来得及折腾,有兴趣去看看源码。
(五)wordpress全站ajax化(JQuery插件)
首先声明这样做完全不会影响SEO 。
当然,也有全站Ajax话的插件,不过我觉得了解一下原理有利于使用。
基本思路:利用jQuery来简单实现WordPress的全Ajax加载。做法是因为每次打开文章只需要SINGLE部分,打开首页面之类只需要INDEX部分,所以 HEADER,SIDEBAR,FOOT就加载一次就行了。ll9给出的方法是这里和这里,另外,作者还解决了Ajax浏览器前进、后退历史的问题。额,还有一个JQuery插件,方便使用,可以去作者博客下载。使用方法:
jQuery("p.date a,li.tag_list a,p#pagination a").ajax_19("div#main_container");
这里的作用是将所有class是date的p元素、class是tag_list的li元素、id是pagination的p元素下的链接点击的时候得到这个链接的内容后显示在ID为main_container的div里,而不会去打开此链接。这样既不影响SEO又实现了AJAX。
(六)Ajax随机一句话功能(demo参加yinheli的主题,右上角)
代码是借鉴的wordpress自带的一个插件Hello Dolly.它能在后台随机显示一句话.但是不支持Ajax.我们要做的是把他弄到前台显示.并实现Ajax刷新的效果。教程《Ajax之jQuery》,我的上一个主题,以及现在这个主题左侧栏部分就是这个。当然,为了SEO,你可以把它改用js输出。
(七)Ajax调用音乐播放器
想来大家也很讨厌在博客里突然响起的音乐,毕竟个人口味不一样嘛。如果站长想要是加入播放器,是可以不让其自动播放,但多载入一个没有用处的flash也会拖慢站点速度。这样的情况可以用Ajax载入,访客点击的时候才载入播放器。一个示例如下:
$(".music_open").click(function() {//点击元素的id或class
jQuery.ajax({
url: "http://pic.winysky.com/content/themes/winy/music.php",//url music.php包含播放器代码,如flash
data:"url=http://pic.winysky.com/content/themes/winy/",
dataType:"html",
type:"post",
success: function(msg){
jQuery("#music").html(msg);//事先在html中准备的空div的id,插入位置
$(".music_open").css('display','none');//按钮样式
$(".music_close").css('display','inline');
jQuery("#music").show();
}
});
return;
});
$(".music_close").click(function() {//关闭播放器
$(".music_close").hide();
$(".music_open").show();
jQuery("#music").empty().hide();
return;
});
}); //end
(八)其它待折腾的。。。
ihiro:Ajax加载历史文章列表:Ajax加载相关最新10条文章记录,分类Ajax 加载相关最新10条文章记录,标签Ajax加载相关最新10条文章记录,效果见其博客。虽然没给出方法,但实现起来并不难,有时间再试试吧。
可以看出,这一大类jQuery+Ajax基本思路都是差不多的,wordpress也提供了一个很好的平台。很多hook函数,虽然降低了效率,但方便调用。
写在最后:如果不愿意自己折腾,看看水煮鱼写的30多个 AJAX 驱动的 WordPress 插件应该足够齐全了。
我是比较喜欢折腾的过程,各位朋友有同好的可以和我交流。
啊,围观,必须围观~
好多ajax的教學唷
感謝大大分享=w=
評論這的頭像顯示也是ajax的特效麻
@小奎 算是吧,实时获取访客头像
@winy 大大,我有個問題=w=
Ajax調用音樂播放器
那個music.php的代碼要有些什麼
music.php包含播放器代码,如flash代码,js啥的,基本就是原来播放器的代码
@winy 大大,可以幫我看看哪裡有問題麻
http://t225657.co.cc/test/test.php
没有载入jQuery库
@winy 加載了一樣杯具><
@小奎 语法错误,最后一行多了});另外,我用的环境还不一样,method:post要改成get
jQuery(document).ready(function($){
$("#music_open").click(function() {//點擊元素的id或class
jQuery.ajax({
url: "http://t225657.co.cc/test/test.php",//url music.php包含播放器代碼,如flash
dataType:"html",
type:"get",
success: function(msg){
jQuery("#music").html(msg);//事先在html中準備的空div的id,插入位置
$(".music_open").css('display','none');//按鈕樣式
$(".music_close").css('display','inline');
jQuery("#music").show();
}
@winy
成功了 , 感謝大大=w=
@小奎 关闭很简单的jQuery("#music").empty().hide();
看起来博主这个主题不错,有下载的么
你这主题太漂亮了...
@Willin Wang
谢谢!~
偶然看到,感觉很好啊~对ajax又重新认识了,也好想玩啊