当前位置:园子博客 » Wordpress » 如何在 WordPress 中使用 jQuery

如何在 WordPress 中使用 jQuery

7月 30th, 2010 | Filed under Wordpress | 共有15,674次浏览

使用 jQuery 可以通过很简单的代码实现一些非常实用的效果,如:网页中双击滚屏、评论双击可编辑、一些好看的弹出层等等。本文园子就从最基础的说起,说下如何在 wordpress 中使用 jQuery

什么是 jQuery?

简单的说 jQuery 就是 Javascript 框架,使用 jQuery 的宗旨就是写更少的代码,做更多的事情。在 WordPress 中合理的运用 jQuery,可以实现很多实用的效果。

如何在 WordPress 中使用 jQuery?

1.首先要加载 jQuery 库

这步很简单,你只需要在你使用的 WordPress 主题的 header.php 文件的 head 标签中加入如下代码即可:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

你也可以把 google 上的 jQuery 库下载到本地再加载,不过园子并不推荐你这么做,用 google 的就可以的。

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>

3.你在期待第三步吗?没了哈,通过两步操作已经完成了,哈哈。

通过以上的操作你已经可以在 WordPress 中使用 jQuery 了,以后再看到类似的教程,都按这个操作来就行了,通过自己的操作你就会发现,原来,传说中的改代码也不是那么的难。

  1. 柚果
    9月 28th, 201101:16

    mark收藏了~~备用~哈哈

  2. Way-2011渐行渐远
    6月 22nd, 201120:05

    比较好理解,写的简介,明了!

  3. SErHo
    3月 22nd, 201121:55

    以前一直不知道怎么加入代码,原来是这么回事,谢谢啦。

  4. Jessy
    12月 27th, 201016:48

    哥们,我试了下,我的无法上下滑动哦,只能显示在那个位置啊

  5. Jessy
    12月 27th, 201015:17

    ajax可以用吗?

  6. ithinkin
    11月 27th, 201013:10

    博主,你左边的回到底部,顶部是怎么做的

    • 园子
      11月 27th, 201018:01

      @ithinkin
      这里有详细的教程
      你可以看看:
      网站左侧添加导航功能
      http://www.yzznl.cn/archives/add-site-navigation.html

  7. Erciole
    11月 14th, 201021:19

    学习了,终于知道怎么弄了T T

  8. yesureadmin
    10月 19th, 201015:45

    不折腾了

  9. 紫陌寒
    10月 12th, 201011:37

    为什么我的只能用一次。
    比如,点击“顶部”,可以回到顶部,但是那个导航不会跟着回到顶部,还有,在点那三个中的任何一个都没反应了。求解?

  10. John
    9月 3rd, 201019:45

    写得很简洁、明了。

  11. 煎豆
    8月 28th, 201023:48

    不过我的还是加载不起,晓得是不是wp自带的jQuery导致出的错

  12. 娱乐频道
    8月 26th, 201017:15

    学习了! 😉

  13. 浩子
    8月 19th, 201018:26

    这个不错……

  14. 记忆盒子
    8月 3rd, 201004:08

    我打算实现用jQuery提交表单,目前还没学会。我对jQuery没有实际应用经验。

  15. 观尔腾
    8月 2nd, 201008:56

    学习了~ 😈

  16. Pavel
    8月 1st, 201015:44

    我也在用jq加载图片呀

  17. 左心房的洞
    7月 31st, 201016:23

    暂时还不大明白,有空研究研究这东西

  18. 大智若鲁
    7月 31st, 201011:41

    恩 挺好看的

  19. 飞晏
    7月 31st, 201011:08

    jQuery太犀利了

  20. 丕子
    7月 31st, 201001:01

    嗯 我记得wp和jquery的正规语法冲突 做了自己得出里 前面加了JQuery

  21. su
    7月 30th, 201022:54

    这个我不会啊 😀

  22. WordPress啦
    7月 30th, 201022:35

    不会 囧了

  23. 软件盒子
    7月 30th, 201021:41

    这个我还不入流,呵呵

  24. 灰太狼
    7月 30th, 201019:17

    熟悉月光博客。。。
    我也喜欢用原生的jquery,WP自带的那个JQ是被阉割过的

  25. hooler
    7月 30th, 201019:02

    估计就是加载了这个功能@天天天蓝

  26. hooler
    7月 30th, 201018:59

    你的网站装了么? 用起来效果怎么样?

  27. Ebo
    7月 30th, 201018:59

    貌似不难丫。。。

  28. 天天天蓝
    7月 30th, 201018:48

    我刚才提交评论是发现:
    Comment count:6

    Output comment count:1

    Last comment only:TRUE
    怎么回事啊?是bug吗

  29. BoKeam
    7月 30th, 201018:48

    以前我还真不知道怎么用

  30. 天天天蓝
    7月 30th, 201018:47

    以前在博客加载时用JQuery,发现还挺好看的,后来觉得速度慢就撤了

  31. 万戈
    7月 30th, 201018:04

    我也喜欢用原生的jquery,WP自带的那个JQ是被阉割过的

  32. tal-rasha
    7月 30th, 201017:35

    左边那个翻页的东东还挺好用的

  33. 老张博客
    7月 30th, 201016:53

    常常见人说jQuery,今天才知道是怎么回事。

  34. 右脑开发
    7月 30th, 201015:44

    java之谈呀!

您必须在 登录 后才能发布评论.