使用 jQuery 可以通过很简单的代码实现一些非常实用的效果,如:网页中双击滚屏、评论双击可编辑、一些好看的弹出层等等.例如我wordpress文章右中侧的这个向上向下就是利用jQuery实现的,很酷是吧?
什么是 jQuery?
简单的说 jQuery 就是 Javascript 框架,使用 jQuery 的宗旨就是写更少的代码,做更多的事情。在 WordPress 中合理的运用 jQuery,可以实现很多实用的效果。
如何在 WordPress 中使用 jQuery?
1.首先要加载 jQuery 库
这步很简单,你只需要在你使用的 WordPress 主题的 header.php 文件的 head 标签中加入如下代码即可:
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> |
你也可以把 google 上的 jQuery 库下载到本地再加载点击这里下载最新版
下载过来后你可以放到你的WWW目录下,然后在你使用的 WordPress 主题的 header.php 文件的 head 标签中加入如下代码即可
1 | <script type="text/javascript" src="http://yourURL/jquery.min.js"></script> |
2.在主题中调用 .js 文件
新建立一个 .js 文件,在文件中加入如下代码:
1 2 3 | jQuery(document).ready(function($){ // 这里就是你需要添加的教程中提到的一些 jQuery 代码 }); |
如林木木返回顶部标签里面的JS文件是这样写的:
1 2 3 4 | jQuery(document).ready(function($){ $('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); $('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);}); }); |
最后在主题中调用这个 .js 文件,假设你建立的文件名为 all.js,那么直接在主题文件 header.php 中的 head 区域添加如下样式代码即可:
1 | <script type="text/javascript" src="http://www.yourdomain/all.js"></script> |
通过以上的操作你已经可以在 WordPress 中使用 jQuery 了
本方法来自园子博客:http://www.yzznl.cn/archives/jquery-in-wordpress.html
楼主我是wp新手,照你说的搞,在本地搞不出来 上天、入地、评论 的效果啊。谢谢在指出
推荐插件jQuery Image Lazy Load WP
可惜俺的是 z-blog.
@于泽鹏 谢谢你的来访,我也去你哪里看看去
Pingback: wordpress中利用jQuery实现向上向下滑动 — YESURE技术博客
这个省得我去看技术类书了 嘿嘿。。。
过来学习一下!
百度和GG的广告同时放效果好吗?
很基础的知识
是这样的,我对这个不懂,慢慢学习,做个笔记,以后找找也方便
不错都开始折腾jQuery了!
慢慢学习哦,呵呵
这篇写的很详细,mark一下随时过来取用……
用得上随时来拿啊,呵
很华丽的功能~
这个jQuery 加载不是难事..难的是怎么搞出自己想要的效果。呵呵
@软件盒子 盒子哪么多软件是不是谷歌和百度来的IP超多啊
可以代替简单的flash效果