如何在 WordPress 中使用 jQuery

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

什么是 jQuery?

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

如何在 WordPress 中使用 jQuery?

1.首先要加载 jQuery 库

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


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

2.在主题中调用 .js 文件

新建立一个 .js 文件,在文件中加入如下代码:

jQuery(document).ready(function($){
// 这里就是你需要添加的教程中提到的一些 jQuery 代码
});

如林木木同学的返回顶部标签里面的JS文件是这样写的:

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 区域添加如下样式代码即可:


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

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

如何在 WordPress 中使用 jQuery》上有38条评论

  1. 紫陌寒

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

发表评论