当前浏览:首页 / WordPress钩子 / wp_enqueue_scripts

do_action( 'wp_enqueue_scripts' )

当排队引入脚本和样式时触发

enqueue 引入js/css

scriptmore...


更多信息

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开始引入

用户贡献的笔记

  • 贡献者:Drew Jaynes

    基本示例

    /**
     * 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' );
  • 贡献者:jonburnaby

    代替此动作,使用‘admin_enqueue_scripts’用于管理页面,使用‘login_enqueue_scripts’用于登录页面。

  • 贡献者:thejaydip

    如果要添加动态内联样式。

    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' );
  • 贡献者:Chigozie Orunta

    选择性地将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' );
  • 贡献者:abdessamad idrissithelevicoleBeda

    此动作传递一个参数$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' );