使用wp_enqueue_script()
在你的主题中,基本答案是wp_enqueue_script()
在一个wp_enqueue_scripts
前端挂钩admin_enqueue_scripts
对于管理员。它可能看起来像这样(假设您是从主题的functions.php
文件注意我是如何引用样式表目录的):
<?php
add_action( \'wp_enqueue_scripts\', \'mysite_enqueue\' );
function mysite_enqueue() {
$ss_url = get_stylesheet_directory_uri();
wp_enqueue_script( \'mysite-scripts\', "{$ss_url}/js/mysite-scripts.js" );
}
这是最基本的。
<?php
add_action( \'wp_enqueue_scripts\', \'mysite_enqueue\' );
function mysite_enqueue() {
$ss_url = get_stylesheet_directory_uri();
wp_enqueue_script( \'mysite-scripts\', "{$ss_url}/js/mysite-scripts.js", array( \'jquery\', \'jquery-ui-sortable\' ) );
}
如果您想在插件中执行脚本,该怎么办?使用
plugins_url()
函数指定Javascript文件的URL:
<?php
define( \'MY_PLUGIN_VERSION\', \'2.0.1\' );
add_action( \'wp_enqueue_scripts\', \'my_plugin_enqueue\' );
function my_plugin_enqueue() {
wp_enqueue_script( \'my-script\', plugins_url(\'/js/my-script.js\',__FILE__), array(\'jquery\',\'jquery-ui-sortable\'), MY_PLUGIN_VERSION );
}
对脚本进行版本控制还要注意
above 我们给插件一个版本号,并将其作为第四个参数传递给
wp_enqueue_script()
. 版本号在源代码中作为URL中的查询参数输出到脚本,并用于在版本更改时强制浏览器重新下载可能缓存的文件。
<?php
define( \'MY_PLUGIN_VERSION\', \'2.0.1\' );
add_action( \'admin_enqueue_scripts\', \'my_plugin_admin_enqueue\' );
function my_plugin_admin_enqueue() {
wp_enqueue_script( \'my-script\', plugins_url( \'/js/my-script.js\', __FILE__ ), array( \'jquery\', \'jquery-ui-sortable\' ), MY_PLUGIN_VERSION );
}
在页脚中加载脚本如果脚本是需要加载到页脚中的脚本之一,则第5个参数为
wp_enqueue_script()
这会告诉WordPress延迟它并将其放在页脚中(假设您的主题没有错误,并且确实
calls the wp_footer hook like all good WordPress themes should):
<?php
define( \'MY_PLUGIN_VERSION\', \'2.0.1\' );
add_action( \'admin_enqueue_scripts\', \'my_plugin_admin_enqueue\' );
function my_plugin_admin_enqueue() {
wp_enqueue_script( \'my-script\', plugins_url( \'/js/my-script.js\', __FILE__ ), array( \'jquery\', \'jquery-ui-sortable\' ), MY_PLUGIN_VERSION, true );
}
如果需要更细粒度的控制
Ozh 有一篇题为
How To: Load Javascript With Your WordPress Plugin 这更详细。
禁用脚本以获得控制
Justin Tadlock 有一篇题为
How to disable scripts and styles 如果您想:
将多个文件合并到单个文件中(里程可能因JavaScript而异)仅在使用脚本或样式的页面上加载文件停止使用!在我们的风格中很重要。css文件进行简单的css调整
使用将值从PHP传递到JSwp_localize_script()
Best practice for adding JavaScript code to WordPress plugins 他讨论使用wp_localize_script()
允许您在服务器端PHP中设置变量的值,以便稍后在客户端Javascript中使用。
真正细粒度的控制wp_print_scripts()
最后,如果您需要真正细粒度的控制,您可以查看
wp_print_scripts()
如上所述
Beer Planet 在一篇题为
How To Include CSS and JavaScript Conditionally And Only When Needed By The Posts.
Epiloque介绍了在WordPress中包含Javascript文件的最佳实践。如果我错过了什么(我可能错过了),请务必在评论中告诉我,以便我可以为未来的旅行者添加更新。