WordPress加载自定义js和css

提醒：本文最后更新于 2531 天前，文中所描述的信息可能已发生改变，请谨慎使用。

wordpress可以使用钩子函数将自定义的js和css加载支页面的头部，下面举一个实际的例子，来基本理解一下这个钩子函数的使用。

注册脚本：

wp_register_script( $handle, $src, $deps, $ver, $in_footer )

$handle：脚本名称（必须！wp_enqueue_script() 会用到）

$src：脚本路径（必须！可用绝对路径）

$deps：脚本依赖包（可选！如array(jquery)，表示依赖jquery，预先会加载jquery）

$ver：脚本版本（可选！）

$in_footer：脚本的位置（false为加载到head，true为加载到footer）

wp_register_style( $handle, $src, $deps, $ver, $media )

$handle：脚本名称（必须！wp_enqueue_script() 会用到）

$src：脚本路径（必须！可用绝对路径）

$deps：脚本依赖包（可选！如array(jquery)，表示依赖jquery，预先会加载jquery）

$ver：脚本版本（可选！）

$media：脚本的位置（可选！参数有: ‘all’, ‘screen’, ‘handheld’, ‘print’）

加载脚本：

wp_enqueue_script($handle)

wp_enqueue_style($handle)

加载脚本就简单多了，前提是注册好了脚本。注意：$handle为上述注册脚本的名称。

具体使用方法如下：

//注册加载脚本文件
function myScripts() {
wp_register_style('_bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css','','1.8','all' );
wp_register_style('_fontawesome', get_template_directory_uri() . '/css/font-awesome.css','','1.8','all' );
wp_register_style('_main', get_template_directory_uri() . '/css/main.css','','1.8','all' );
wp_register_script('_jquery', get_template_directory_uri() . '/js/jquery.min.js','','1.8',false );
wp_register_script('_bootstrap', get_template_directory_uri() . '/js/libs/bootstrap.js','','1.8',true );
wp_register_script('_jloader', get_template_directory_uri() . '/js/loader.js','','1.8',true );
wp_enqueue_style( '_bootstrap' );
wp_enqueue_style( '_fontawesome' );
wp_enqueue_style( '_main' );
wp_enqueue_script( '_jquery' );
wp_enqueue_script( '_bootstrap' );
wp_enqueue_script( '_jloader' );
}
add_action( 'wp_enqueue_scripts', 'myScripts' );