如何在 WordPress 中给页面添加Css/Js引用

随着网站功能的不断拓展，必然会增加相应的 Css 和 JavaScript 代码。一般的方法是在 wordpress 主题文件 header.php 中添加引用代码的定义，但这个方法的缺点是随着引用的增加、引用之间的相互关联，维护起来会很不方便。所以本篇教程提供另一种方法，就是使用 wordpress 内置的 action 功能来实现这样的需求。

由于 wordpress 对在登录页面和浏览页面添加 Css/JavaScript 代码引用定义是分开的，所以在实现方法上也是针对这两种情况分别处理。代码如下：

//在登录页面添加 Css 引用
function myLoginScript() {
	wp_enqueue_style('mycss', plugins_url( 'mycss.css' , '/mycss/css/.' ));
}
add_action( 'login_enqueue_scripts', 'myLoginScript' );

//在其它页面添加 Css/JavaScript 引用
function myHeader() {
	wp_enqueue_style('mycss', plugins_url( 'mycss.css' , '/mycss/css/.' ));
	wp_enqueue_script('myscript', plugins_url( 'myscript.js' , '/myscript/js/.' ));
//下面的 javascript 脚本需要 jquery 并在其后执行
	wp_enqueue_script('myscript.jQuery', plugins_url( 'myscript.jQuery.js' , '/myscript/js/.'), array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'myHeader' );

上面的函数第一个参数是引用定义的名称（唯一），第二个参数是引用文件所在位置，第三个参数是引用之间的关联关系，如果 javascript 脚本有多个前置引用，就在数组里面添加相应的引用名称（第一个参数定义的名称）。如果还有其它的脚本引用，就用这个函数继续增加引用定义即可。把上面的代码添加到 functions.php 中。