WordPress中怎样加载Javascript和CSS

63 阅读 0 评论 42 点赞

我是靠谱客的博主狂野麦片，最近开发中收集的这篇文章主要介绍WordPress中怎样加载Javascript和CSS，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在Wordpress中, 我们需要使用合适的方法来加载我们自己的javascript和css文件, 并不是简单的把所有的javascript和css文件放到header里面加载就可以了, 那样有可能你的javascript/css与其他插件的javascript/css会造成冲突.你如果研究过别的主题, 也许会发现加载的方法其实有很多很多, 但是最好的方法还是使用Wordpress官方推荐的方法.使用这个函数wp_enqueue_script(), 可以让我们的javascript/css文件来按时按需加载, 当我只在Dashborad需要时, 就只让它在Dashboard加载, 当我只在post发布页面需要时, 就只让它在post发布页面加载.

把你自己的javascript文件告诉Wordpress
你需要注册你的javascript文件, 这样Wordpress就知道你有哪些文件需要使用.我们使用下面的函数
```
wp_register_script( $handle, $src, $deps, $ver, $in_footer );
```
函数的具体用法见WordPress Codex
注意一个参数 $ver, 为什么要使用这个参数?
我们都知道浏览器有缓存机制, 会缓存从一个网站下载到的javascript和css文件, 但是当浏览器检测到javascript或者css文件的url发生变化, 就会去重新下载.

加载你的javascript

注册完之后, 我们就需要加载我们的javascript, 下面的例子只是简单展示了加载方法

function custom_scripts_basic()  
{  
    // 为你的主题注册javascript:  
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );  
 
    // 加载你的javascript:  
    wp_enqueue_script( 'custom-script' );  
}  
add_action( 'wp_enqueue_scripts', 'custom_scripts_basic' );

如果你的代码依赖于某个库, 例如jQuery, 那就需要先加载jQuery, 再加载你的javascript, WordPress自带了最新版本的jQuery, 所以不需要我们另外注册, 我们修改一下代码:

function custom_scripts_basic()  
{  
    // 为你的主题注册javascript:  
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js', array( 'jquery' ) );  
 
    // 加载你的javascript:  
    wp_enqueue_script( 'custom-script' );  
}  
add_action( 'wp_enqueue_scripts', 'custom_scripts_basic' );

我们只需要很简单的一个数组, 来告诉Wordpress在加载自定义javascript之前, 先加载哪些javascript, 假如还需要提前加载jQueryUI, 可以使用这样的数组array( 'jquery', 'jquery-ui-core' )
现在我们去看header里面输出的javascript:

<script type='text/javascript' src='http://yourdomain.com/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>  
<script type='text/javascript' src='http://yourdomain.com/wp-content/plugins/yourplugin/js/custom-script.js?ver=3.3.1'></script>

在后台加载javascript
上面的例子说只是在前台加载, 并不是在Wordpress的后台加载, 后台加载也很简单, 方法基本相同, 只是使用了不同的action, 你可能会需要用add_action( 'admin_enqueue_scripts', 'custom_scripts_basic' ). 我们确实需要区分前台跟后台加载, 因为有时候你的javascript只需要在指定的某个页面上加载而已.
加载自定义的CSS
上面说的都是加载javascript, 我们还需要加载自定义的css. 方法很类似, 也是使用一个函数
```
wp_register_style( $handle, $src, $deps, $ver, $media );
```
具体例子可以去Wordpress官方查看, 或者参考上面javascript的例子.
必须使用这种方法来加载吗
答案当然是: 不是.
这只是众多Wordpress开发人员所共同使用和推荐的方法, 可以尽量减少所有主题跟插件文件直接的冲突.
你完全可以在header或者footer里面用来加载, 但是看看你会造成多少冲突吧, 最常见的就是jQuery库的重复加载.

WordPress是一个成熟的系统, 至少比Drupal成熟许多. WordPress既然提供了这样一种开发方式, 肯定是经过了深思熟虑和长期验证的.