WordPress 加载 CSS/Javascript 文件

记录如何正确地加载 CSS 或者 Javascript 文件。

加载 CSS 的语法

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

$handle – CSS 名称
$src – 文件位置。默认:false
$deps – 是否依靠其他的 CSS 文件。默认:array()
$ver – 版本号。默认:false
$media – 媒体,’all’, ‘screen’, ‘handheld’, ‘print’。默认:all

加载 Javascript 的语法

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

$handle – CSS 名称
$src – 文件位置。默认:false
$deps – 是否依靠其他的 CSS 文件。默认:array()
$ver – 版本号。默认:false
$in_footer – 是否在网页的脚部加载此文件。默认:false

CSS 例子

// 加载主题的 style.css
wp_enqueue_style( 'style-name', get_stylesheet_uri() );


// 加载 WordPress 的主题 genericons.css
wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.0.2' );


// 或者先注册个 handle,然后在加载
wp_register_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.0.2' );
wp_enqueue_style( 'genericons' );

JAVASCRIPT 例子

// 在 jQuery 后面加载个别的 JS 文件
wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom_script.js', array( 'jquery' ) );


// 或者取消 WordPress 预先注册的 handle,
// 再注册一个新的位置,再加载这个 javascript
wp_deregister_script( 'jquery-masonry' );
wp_register_script( 'jquery-masonry', get_stylesheet_directory_uri() . 'js/jquery.masonry.min.js', array('jquery'), null, true );
wp_enqueue_script( 'jquery-masonry' );

WordPress 例子

把刚才的 wp_deregister_script, wp_register_script, wp_enqueue_script 统统的东西放到一个 function 里,在加到 ‘wp_enqueue_scripts’ 这个 hook

/**
 * Proper way to enqueue scripts and styles
 */
function theme_name_scripts() {
	wp_enqueue_style( 'style-name', get_stylesheet_uri() );
	wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
 
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

参考 WordPress Codex:
wp_enqueue_script
wp_register_script
WordPress 注册过的 scripts