描述
如果提供了$src(不覆盖),则注册脚本,并将其排队(引入)。
另见
- WP_Dependencies::add()
- WP_Dependencies::add_data()
- WP_Dependencies::enqueue()
参数
- $handle
-
(string) (必填) 脚本的名称(句柄),应是唯一的。
- $src
-
(string) (可选) 脚本的完整URL,或脚本相对于WordPress根目录的路径。
默认值: ''
- $deps
-
(string[]) (可选) 这个脚本所依赖的已注册脚本句柄的数组。
默认值: array()
- $ver
-
(string|bool|null) (可选) 字符串,用于指定脚本版本号(如果有),该版本号作为查询字符串添加到URL中,用于破坏缓存。如果版本设置为false,则会自动添加与当前安装的WordPress版本相同的版本号。如果设置为null,则不添加任何版本。
默认值: false
- $in_footer
-
(bool) (可选) 是否将脚本排队到
</body>
之前而不是<head>
中。默认值为“false”。默认值: false
说明
用法
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
如果脚本尚未引入并且所有依赖项都已注册,则根据脚本依赖项在正确的时间将脚本文件链接到生成的页面。您也可以使用此前先用wp_register_script()函数注册的句柄来链接脚本,也可以为该函数提供链接脚本所需的所有参数。
这是将JavaScript链接到WordPress生成的页面的推荐方法。
注意
- 如果你想在网站的前端调用该函数,应该使用 wp_enqueue_scripts 动作钩子。要在管理界面上调用它,使用 admin_enqueue_scripts 动作钩子。对于登录界面,使用 login_enqueue_scripts 动作钩子。在动作钩子之外调用它可能会导致问题,详见 ticket #11526
- 如果你尝试用不同的参数来注册或查询一个已经注册的句柄,新的参数将被忽略。请先使用 wp_deregister_script(),然后再使用新的参数重新注册脚本。
- jQuery UI Effects 不包括在 jquery-ui-core 句柄中。
- 这个函数依赖于已启用的主题对 wp_head() 和 wp_footer() 的使用。这意味着它可能无法在一些不调用这些函数的非常老的主题中工作。在调试古老的主题时,这一点是很有用的。
- 使用:WP_Scripts::add(), WP_Scripts::add_data() 和 WP_Scripts::enqueue()
- 使用全局:(unknown type) $wp_scripts
WordPress包含并注册的默认脚本和JS库
默认情况下,除了WordPress本身使用的脚本外,WordPress安装还包含许多流行的javascript库和web开发人员常用的脚本。下表列出了其中一些。
有关可用于代替$handle
参数的名称的详细列表,请参阅wp_register_script()。
Script Name |
Handle |
Needed Dependency * |
Script version |
License |
---|---|---|---|---|
Image Cropper | Image cropper (not used in core, see jcrop) | |||
Jcrop | jcrop | 0.9.12 | MIT | |
SWFObject | swfobject | 2.2-20120417 | MIT | |
SWFUpload | swfupload | 2201-20110113 | MIT | |
SWFUpload Degrade | swfupload-degrade | 2201 | MIT | |
SWFUpload Queue | swfupload-queue | 2201 | MIT | |
SWFUpload Handlers | swfupload-handlers | 2201-20110524 | MIT | |
jQuery | jquery | json2 (for AJAX calls) | 3.6.0 | MIT + (MIT OR BSD) |
jQuery Form | jquery-form | jquery | 4.3.0 | MIT OR LGPLv3 |
jQuery Color | jquery-color | jquery | 2.2.0 | MIT+CC0 + (MIT OR GPLv2) |
jQuery Masonry | jquery-masonry | jquery | 3.1.2b | MIT |
Masonry (native Javascript) | masonry | imagesloaded | 4.2.2 | MIT |
jQuery UI Core | jquery-ui-core | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Widget | Now part of `jquery-ui-core` | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Accordion | jquery-ui-accordion | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Autocomplete | jquery-ui-autocomplete | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Button | jquery-ui-button | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Datepicker | jquery-ui-datepicker | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Dialog | jquery-ui-dialog | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Draggable | jquery-ui-draggable | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Droppable | jquery-ui-droppable | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Menu | jquery-ui-menu | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Mouse | jquery-ui-mouse | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Position | Now part of `jquery-ui-core` | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Progressbar | jquery-ui-progressbar | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Selectable | jquery-ui-selectable | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Resizable | jquery-ui-resizable | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Selectmenu | jquery-ui-selectmenu | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Sortable | jquery-ui-sortable | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Slider | jquery-ui-slider | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Spinner | jquery-ui-spinner | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Tooltips | jquery-ui-tooltip | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Tabs | jquery-ui-tabs | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Effects | jquery-effects-core | jquery | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Effects – Blind | jquery-effects-blind | jquery-effects-core | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Effects – Bounce | jquery-effects-bounce | jquery-effects-core | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Effects – Clip | jquery-effects-clip | jquery-effects-core | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Effects – Drop | jquery-effects-drop | jquery-effects-core | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Effects – Explode | jquery-effects-explode | jquery-effects-core | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Effects – Fade | jquery-effects-fade | jquery-effects-core | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Effects – Fold | jquery-effects-fold | jquery-effects-core | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Effects – Highlight | jquery-effects-highlight | jquery-effects-core | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Effects – Pulsate | jquery-effects-pulsate | jquery-effects-core | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Effects – Scale | jquery-effects-scale | jquery-effects-core | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Effects – Shake | jquery-effects-shake | jquery-effects-core | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Effects – Slide | jquery-effects-slide | jquery-effects-core | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
jQuery UI Effects – Transfer | jquery-effects-transfer | jquery-effects-core | 1.13.1 | MIT + CC0 + (MIT OR GPLv2) |
MediaElement.js (WP 3.6+) | wp-mediaelement | jquery | 4.2.16 | MIT |
jQuery Schedule | schedule | jquery | 20m/1.0.1 | MIT |
jQuery Suggest | suggest | jquery | 1.1-20110113 | Public domain |
ThickBox | thickbox | 3.1-20121105 | MIT OR GPLv3 | |
jQuery HoverIntent | hoverIntent | jquery | 1.10.1 | MIT |
jQuery Hotkeys | jquery-hotkeys | jquery | 0.2.0 | MIT OR GPLv2 |
Simple AJAX Code-Kit | sack | 1.6.1 | X11 License | |
QuickTags | quicktags | 1.3 | LGPL2.1 | |
Iris (Colour picker) | iris | jquery | 1.1.1 | GPLv2 |
Farbtastic (deprecated) | farbtastic | jquery | 1.2 | GPLv3 |
ColorPicker (deprecated) | colorpicker | jquery | v2 | Author’s own copyright |
Tiny MCE | wp-tinymce | 4.9.4 | LGPL2.1 | |
Autosave | autosave | |||
WordPress AJAX Response | wp-ajax-response | |||
List Manipulation | wp-lists | |||
WP Common | common | |||
WP Editor | editorremov | |||
WP Editor Functions | editor-functions | |||
AJAX Cat | ajaxcat | |||
Admin Categories | admin-categories | |||
Admin Tags | admin-tags | |||
Admin custom fields | admin-custom-fields | |||
Password Strength Meter | password-strength-meter | |||
Admin Comments | admin-comments | |||
Admin Users | admin-users | |||
Admin Forms | admin-forms | |||
XFN | xfn | |||
Upload | upload | |||
PostBox | postbox | |||
Slug | slug | |||
Post | post | |||
Page | page | |||
Link | link | |||
Comment | comment | |||
Threaded Comments | comment-reply | |||
Admin Gallery | admin-gallery | |||
Media Upload | media-upload | |||
Admin widgets | admin-widgets | |||
Word Count | word-count | |||
Theme Preview | theme-preview | |||
JSON for JS | json2 | 2015-05-03 | Public domain | |
Plupload Core | plupload | 2.1.9 | GPLv2 | |
Plupload All Runtimes | plupload-all | 2.1.1 | GPLv2 | |
Plupload HTML4 | plupload-html4 | 2.1.1 | GPLv2 | |
Plupload HTML5 | plupload-html5 | 2.1.1 | GPLv2 | |
Plupload Flash | plupload-flash | 2.1.1 | GPLv2 | |
Plupload Silverlight | plupload-silverlight | 2.1.1 | GPLv2 | |
Underscore js | underscore | 1.13.1 | MIT | |
Backbone js | backbone | jquery, underscore | 1.4.0 | MIT |
imagesLoaded | imagesloaded | 4.1.4 | MIT | |
CodeMirror | wp-codemirror | 5.29.1-alpha-ee20357 | MIT | |
imgAreaSelect | imgareaselect | jquery | 0.9.8 | MIT AND GPL |
移除出核心 | |||
---|---|---|---|
Script Name | Handle | Removed Version | Replaced With |
Scriptaculous Root | scriptaculous-root | WP 3.5 | Google Version |
Scriptaculous Builder | scriptaculous-builder | WP 3.5 | Google Version |
Scriptaculous Drag & Drop | scriptaculous-dragdrop | WP 3.5 | Google Version |
Scriptaculous Effects | scriptaculous-effects | WP 3.5 | Google Version |
Scriptaculous Slider | scriptaculous-slider | WP 3.5 | Google Version |
Scriptaculous Sound | scriptaculous-sound | WP 3.5 | Google Version |
Scriptaculous Controls | scriptaculous-controls | WP 3.5 | Google Version |
Scriptaculous | scriptaculous | WP 3.5 | Google Version |
Prototype Framework | prototype | WP 3.5 | Google Version |
这份清单还远远不够完整 要获得注册文件的完整列表,请检查管理UI中的$GLOBALS['wp_scripts']。注册的脚本可能会根据请求的页面进行更改。
*列出的依赖项不完整
源码
更新日志
版本 | 描述 |
---|---|
2.1.0 | 开始引入 |
使用示例
再也不用担心缓存了
这是我一路上学会的一个小技巧
.js和.css文件的版本是从它最后一次更新的时间开始的。/** * Never worry about cache again! */ function my_load_scripts($hook) { // create my own version codes $my_js_ver = date("ymd-Gis", filemtime( plugin_dir_path( __FILE__ ) . 'js/custom.js' )); $my_css_ver = date("ymd-Gis", filemtime( plugin_dir_path( __FILE__ ) . 'style.css' )); // wp_enqueue_script( 'custom_js', plugins_url( 'js/custom.js', __FILE__ ), array(), $my_js_ver ); wp_register_style( 'my_css', plugins_url( 'style.css', __FILE__ ), false, $my_css_ver ); wp_enqueue_style ( 'my_css' ); } add_action('wp_enqueue_scripts', 'my_load_scripts');
这样,您将始终使用缓存的版本,除非同时更改了文件,这是最理想的情况。
当您将依赖于jQuery的脚本排入队列时,请注意WordPress中的jQuery以noConflict模式运行,这意味着您不能使用通用的
$
别名。您必须使用完整的jQuery
。或者,使用$
快捷方式将代码放在noConflict包装器中。jQuery( document ).ready( function( $ ) { // $() will work as an alias for jQuery() inside of this function [ your code goes here ] } );
使用钩子
将脚本和样式从单个动作挂钩排队。
/** * 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' );
链接依赖于jQuery的主题脚本
主题中包含的JavaScript文件通常需要提前加载另一个JavaScript文件才能使用其函数或变量。使用$deps参数,wp_enqueue_script()和wp_register_script()函数允许您在注册新脚本时标记依赖项。这将导致WordPress在链接新脚本之前自动将这些依赖项链接到HTML页面。如果这些依赖项的句柄未注册,WordPress将不会链接新脚本。本例的主题脚本 custom_script.js 需要依赖jQuery库:
/** * Enqueue a script with jQuery as a dependency. */ function wpdocs_scripts_method() { wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom_script.js', array( 'jquery' ) ); } add_action( 'wp_enqueue_scripts', 'wpdocs_scripts_method' );
我想在 bcworkz 的评论中添加一条评论。在使用jquery时,通常情况下,文件中的代码应该这样格式化:
(function( $ ) { "use strict"; // javascript code here. i.e.: $(document).ready( function(){} ); })(jQuery);
确保jQuery在无冲突模式和严格模式下运行是一种常见做法
严格模式在几个方面有所帮助:- 它能捕捉到一些常见的编码错误,抛出异常。
- 当采取相对 "不安全" 的行动(如获得对全局对象的访问)时,它可以防止,或抛出错误。
- 它禁用了那些令人困惑或考虑不周的功能。
链接 script.aculo.us 库
下面是链接脚本的基本用法示例。script.aculo.us库已经包含并由WordPress以scriptaculous手柄注册。
/** * Enqueue script.aculo.us. * * Tha callback is hooked to 'wp_enqueue_script' to ensure the script is only enqueued on the front-end. */ function my_scripts_method() { wp_enqueue_script( 'scriptaculous' ); } add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
上面的示例链接了script.aculo.us库仅在前端。如果在管理屏幕中需要库,您可以使用admin_enqueue_scripts操作钩子,但是,这会将其排入所有管理屏幕,这通常会导致插件/核心冲突,最终破坏WordPress管理屏幕的体验。相反,您应该只在需要的单个屏幕上链接它,请参阅插件管理屏幕上的链接脚本部分以获取示例。
注册和排队脚本时,不需要同时调用
wp_register_script()
和wp_enqueue_script()
。只需调用wp_enqueue_script()
例如:wp_register_script ( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' ); wp_enqueue_script ( 'custom-script' );
应该是:
wp_enqueue_script ( 'custom-script', get_template_directory_uri() . '/js/custom-script.js' );
只有在不知道是否要立即加载时才进行注册。
这没有文档记录,但在
$in_footer
为 `false`的情况下调用此函数实际上通常会将脚本注册为一个依赖项,应该解析并输出该依赖项,而不仅仅是针对页眉。然后,当输出排队等待页脚的脚本时,将只输出尚未包含的脚本。这会导致这样的行为:如果在页眉已被处理之后才排队,则假定在页眉中排队的脚本将出现在页脚中。因此$in_footer
实际上应该被理解为$in_footer_only。
因为此函数和
wp_enqueue_style
都使用WP_Scripts::enqueue()
,它可以将句柄数组作为第一个参数,所以也可以将句柄数组传递到wp_enqueue_script/style
:/** * Enqueue multiple handles */ function enqueue_multiple() { wp_enqueue_script( array( 'backbone', 'jquery', 'iris' ) ); } add_action( 'wp_enqueue_scripts', 'enqueue_multiple' );
未满足的依赖关系将*不会*有警告
如果不满足依赖项(第3个参数),则不会打印脚本标记,并且不会显示警告或错误。
这看起来不像一个bug,只是预期的行为。文件中提及这一点就足以防止误解。
此示例永远不会加载
/js/example.js
/** * ... enqueue plugin scripts. */ function load_plugin_scripts() { wp_enqueue_script( 'script-name', plugin_dir_url( __FILE__ ) . '/js/example.js', array('not-existant'), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'load_plugin_scripts' );
关于如何将包括SRI(子资源完整性)标记的多个样式和脚本排队的示例。这在很大程度上是基于这篇文章的,但我试图在某种程度上简化代码,特别是考虑到我可能想要包括和管理许多脚本/样式。
需要注意的重要一点是,在将样式/脚本排队时指定的句柄需要与
my_add_sri
函数中引用的句柄匹配。还要注意的是,除了明显的SRI标记差异外,my_add_sri
函数中脚本上使用的str_replace
方法与样式上使用的方法不同。/** * Load custom CSS and JavaScript. */ add_action( 'wp_enqueue_scripts', 'wpdocs_my_enqueue_scripts' ); function wpdocs_my_enqueue_scripts() : void { // Enqueue my styles. wp_enqueue_style( 'wpdocs-bootstrap-style', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css' ); wp_enqueue_style( 'wpdocs-datatables-bootstrap-style', 'https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap4.min.css' ); // Enqueue my scripts. wp_enqueue_script( 'wpdocs-bootstrap-bundle-script', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.bundle.min.js', array(), null, true ); wp_enqueue_script( 'wpdocs-datatables-bootstrap-script', 'https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/dataTables.bootstrap4.min.js', array(), null, true ); wp_enqueue_script( 'wpdocs-jquery-datatables-script', 'https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js', array(), null, true ); // Add filters to catch and modify the styles and scripts as they're loaded. add_filter( 'style_loader_tag', __NAMESPACE__ . 'wpdocs_my_add_sri', 10, 2 ); add_filter( 'script_loader_tag', __NAMESPACE__ . 'wpdocs_my_add_sri', 10, 2 ); } /** * Add SRI attributes based on defined script/style handles. */ function wpdocs_my_add_sri( $html, $handle ) : string { switch( $handle ) { case 'wpdocs-bootstrap-style': $html = str_replace( ' />', ' integrity="sha512-MoRNloxbStBcD8z3M/2BmnT+rg4IsMxPkXaGh2zD6LGNNFE80W3onsAhRcMAMrSoyWL9xD7Ert0men7vR8LUZg==" crossorigin="anonymous" />', $html ); break; case 'wpdocs-datatables-bootstrap-style': $html = str_replace( ' />', ' integrity="sha512-PT0RvABaDhDQugEbpNMwgYBCnGCiTZMh9yOzUsJHDgl/dMhD9yjHAwoumnUk3JydV3QTcIkNDuN40CJxik5+WQ==" crossorigin="anonymous" />', $html ); break; case 'wpdocs-bootstrap-bundle-script': $html = str_replace( '></script>', ' integrity="sha512-kBFfSXuTKZcABVouRYGnUo35KKa1FBrYgwG4PAx7Z2Heroknm0ca2Fm2TosdrrI356EDHMW383S3ISrwKcVPUw==" crossorigin="anonymous"></script>', $html ); break; case 'wpdocs-datatables-bootstrap-script': $html = str_replace( '></script>', ' integrity="sha512-OQlawZneA7zzfI6B1n1tjUuo3C5mtYuAWpQdg+iI9mkDoo7iFzTqnQHf+K5ThOWNJ9AbXL4+ZDwH7ykySPQc+A==" crossorigin="anonymous"></script>', $html ); break; case 'wpdocs-jquery-datatables-script': $html = str_replace( '></script>', ' integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg==" crossorigin="anonymous"></script>', $html ); break; } return $html; }
另请参见:
对于那些对@damiankaelgreen有同样问题的人:
在这种情况下,脚本是在一个HTML标记脚本中调用的文件,用于定义客户端脚本(JavaScript)。
对于引入 PHP文件,请使用get_template_part()。
此示例链接自定义样式表和脚本以及文件版本
function custom_enqueue(){ //wp_enqueue_style('string $handle', mixed $src, array $deps, mixed $ver, string $meida ); wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/fatblog.css', array(), '1.0.0', 'all' ); //wp_enqueue_style('string $handle', mixed $src, array $deps, mixed $ver, bol $in_footer ); wp_enqueue_script('customjs', get_template_directory_uri() . '/js/fatblog.js', array(), '1.0.0', 'true' ); } add_action('wp_enqueue_scripts', 'custom_enqueue');
jquery-ui-dialog
所需的CSS不会自动出现!您必须使用注册的句柄“wp-jquery-ui-dialog”单独调用
wp_enqueue_style()
。链接依赖于script.aculo.us的插件脚本
此示例旨在在插件文件中注册和链接依赖于script.aculo.us的新插件脚本。有关依存关系的信息,请参见上面的示例。
/** * Enqueue script with script.aculo.us as a dependency. */ function my_scripts_method() { wp_enqueue_script( 'newscript', plugins_url( '/js/newscript.js' , __FILE__ ), array( 'scriptaculous' ) ); } add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
仅在插件管理屏幕上链接脚本
此示例仅在特定的管理屏幕上链接脚本,与第一个示例代码下面的段落中描述的场景相反。
<?php /** * Register the plugin script. */ function wpdocs_plugin_admin_init() { // Register our script. wp_register_script( 'my-plugin-script', plugins_url( '/script.js', __FILE__ ) ); } add_action( 'admin_init', 'wpdocs_plugin_admin_init' ); /** * Add Administration screen for the plugin. */ function wpdocs_plugin_admin_menu() { /* Add our plugin submenu and administration screen */ $page_hook_suffix = add_submenu_page( 'edit.php', // The parent page of this submenu. __( 'My Plugin', 'my-textdomain' ), // The submenu title. __( 'My Plugin', 'my-textdomain' ), // The screen title. 'manage_options', // The capability required for access to this submenu. 'my_plugin-options', // The slug to use in the URL of the screen. 'wpdocs_plugin_manage_menu' // The function to call to display the screen. ); /* * Use the retrieved $page_hook_suffix to hook the function that links our script. * This hook invokes the function only on our plugin administration screen, * see: https://developer.wordpress.org/reference/hooks/admin_print_scripts-hook_suffix/ */ add_action( "admin_print_scripts-{$page_hook_suffix}", 'wpdocs_plugin_admin_scripts'); } add_action( 'admin_menu', 'wpdocs_plugin_admin_menu' ); /** * Enqueue registered script in the admin. */ function wpdocs_plugin_admin_scripts() { // Link our already registered script to a page. wp_enqueue_script( 'my-plugin-script' ); } /** * Display callback for the plugin Administration screen. */ function wpdocs_plugin_manage_menu() { // Display our administration screen. }
这个文档真的应该更好地定义什么是 "脚本"......因为:这个函数是用来排队.php或html脚本的吗?不!
这对许多开发人员来说似乎很明显,但如果您正在阅读此文档,您应该会对该函数的用途有所了解,所以我写此文是为了帮助您。
显然,在这种情况下,术语“脚本”被用作不是由服务器评估的程序,而是需要传递给客户端(并由浏览器评估)的程序。因此,在这种情况下,预期将由服务器评估的PHP文件将不会被视为脚本(即使许多人可能会将其称为脚本),因此它不应包含在wp_enqueue_script()中,而应使用require_once()或可能的include_once()包含。
不确定这是否是报告它的地方,但我认为“WordPress包含并注册的默认脚本”表中出现的Tiny MCE句柄是不正确的。它说的是
tiny_mce
,但根据注册Tiny MCE脚本的代码应该是wp-tinymce
。用于加载脚本(wp_enqueue_scripts)的动作挂钩在文档的头部部分调用,因此为了将脚本加载到页面上,您必须在页面模板中包括以下内容:
get_header();
当使用wp_add_inline_script()将稍后要添加一些内联JS的自定义脚本文件排队时。通过将函数中的最后一个参数设置为
true
,您最好在页脚中加入自定义脚本wp_enqueue_script( $handle, $src, $deps, $ver,
true
);