更多信息
wp_enqueue_scripts是在将脚本和样式排队出现（引入）在前端时使用的合适挂钩。尽管名字是这样的，但它同时用于排队的脚本和样式。
用法
function themeslug_enqueue_style() {
wp_enqueue_style( 'my-theme', 'style.css', false );
}
function themeslug_enqueue_script() {
wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_style' );
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );
源码
更新日志
| 版本 | 描述 |
|---|---|
| 2.8.0 | 开始引入 |
使用示例
基本示例
/** * Proper way to enqueue scripts and styles. */ function wpdocs_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', 'wpdocs_theme_name_scripts' );代替此动作，使用‘admin_enqueue_scripts’用于管理页面，使用‘login_enqueue_scripts’用于登录页面。
如果要添加动态内联样式。
function wpdocs_enqueue_custom_style() { $theme = wp_get_theme(); wp_register_style( 'wpdocs-style', get_theme_file_uri( 'css/style.css' ), array(), $theme->get( 'Version' ), ); wp_enqueue_style( 'wpdocs-style' ); $custom_css = ".navbar-nav ul li { list-style: none; }"; wp_add_inline_style( 'wpdocs-style', $custom_css ); } add_action( 'wp_enqueue_scripts', 'wpdocs_enqueue_custom_style' );选择性地将JS文件加载到特定页面中，如下所示：
function wpdocs_selective_js_loading() { if ( is_page( ['home', 'about', 'contact'] ) ) { wp_enqueue_script( 'your-script', get_template_directory_uri() . '/js/your-script.js', array(), '1.0.0', true ); } } add_action( 'wp_enqueue_scripts', 'wpdocs_selective_js_loading' );此动作传递一个参数
$hook，例如，当阻止脚本加载到某些页面时，该参数很方便；function wpdocs_enqueue_scripts( $hook ) { // Load only in add new post page if ( is_admin() && 'post-new.php' !== $hook ) { return; } // rest of your code here.. } add_action( 'wp_enqueue_scripts', 'wpdocs_enqueue_scripts' );