函数说明

使用wp_enqueue_script()函数安全的将JavaScript脚本添加到WordPress生成的页面。wp_enqueue_script()函数会加载未被加载的脚本,并安全的处理依赖关系。

函数用法

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

使用wp_enqueue_scripts动作调用wp_enqueue_script()函数,或者使用admin_enqueue_scripts动作在管理页面调用wp_enqueue_script()函数,或者使login_enqueue_scripts动作在登录页面调用wp_enqueue_script()函数。

参数说明

用法

function my_scripts_method() {
        wp_enqueue_script('scriptaculous');
}

add_action('wp_enqueue_scripts', 'my_scripts_method'); 

上述代码只在前端页面加载Scriptaculous脚本库,如果你需要在管理页面加载,可以使用admin_enqueue_scripts动作钩子调用,但是脚本会在所有管理页面载入,这样往往会导致插件/核心冲突,最终破坏WordPress的管理体验。相反,你应该只在你需要的单独页面加载脚本,参考只在插件的页面部分加载脚本的例子。

示例

add_action( 'admin_init', 'my_plugin_admin_init' );
add_action( 'admin_menu', 'my_plugin_admin_menu' );

function my_plugin_admin_init() {
	/* Register our script. */
	wp_register_script( 'my-plugin-script', plugins_url('/script.js', __FILE__) );
}

function my_plugin_admin_menu() {
	/* Register our plugin page */
	$page = add_submenu_page( 'edit.php', // The parent page of this menu
	__( 'My Plugin', 'myPlugin' ), // The Menu Title
	__( 'My Plugin', 'myPlugin' ), // The Page title
	'manage_options', // The capability required for access to this item
	'my_plugin-options', // the slug to use for the page in the URL
	'my_plugin_manage_menu' // The function to call to render the page
	);

	/* Using registered $page handle to hook script load */
	add_action('admin_print_scripts-' . $page, 'my_plugin_admin_scripts');
}

function my_plugin_admin_scripts() {
	/*
	* It will be called only on your plugin admin page, enqueue our script here
	*/
	wp_enqueue_script( 'my-plugin-script' );
}

function my_plugin_manage_menu() {
	/* Output our admin page */
}

jQuery 无冲突模式封装
请注意:WordPress内置jQuery脚本库加载使用无冲突模式,这是为了防止与其他WordPress可以加载的JavaScript库的兼容性问题。

无冲突模式下,$()函数无效,使用jQuery()函数。例如:

$(document).ready(function(){
	$(#somefunction) ...
});

变成:

jQuery(document).ready(function(){
	jQuery(#somefunction) ...
});

为了使用jQuery默认的shortcut $,你可以使用如下封装代码:

jQuery(document).ready(function($) {
	// $() will work as an alias for jQuery() inside of this function
});

上述封装将导致你的代码在页面加载完成后执行。$会调用jQuery。如果你想让代码立即执行,你可以使用下面的封装方法:

(function($) {
	// $() will work as an alias for jQuery() inside of this function
})(jQuery);

源文件

wp_enqueue_script() 位于 wp-includes/functions.wp-scripts.php