记录一些常用的函数和瞎折腾的过程……

WordPress加载自定义js和css

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

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' );