当前浏览:首页 / WordPress函数 / wp_enqueue_script()

wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

引入脚本

enqueue 引入js/css

scriptmore...


描述

如果提供了$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开始引入

用户贡献的笔记

  • 贡献者:Andrija Naglic

    再也不用担心缓存了

    这是我一路上学会的一个小技巧
    .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');
    

    这样,您将始终使用缓存的版本,除非同时更改了文件,这是最理想的情况。

  • 贡献者:bcworkz

    当您将依赖于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 ]
    } );
  • 贡献者:Barbara Ford

    使用钩子

    将脚本和样式从单个动作挂钩排队。

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

    链接依赖于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' );
    
  • 贡献者:Andrei Surdu

    我想在 bcworkz 的评论中添加一条评论。在使用jquery时,通常情况下,文件中的代码应该这样格式化:

    (function( $ ) {
    
    	"use strict";
    	
    	// javascript code here. i.e.: $(document).ready( function(){} ); 
    
    })(jQuery);
    

    确保jQuery在无冲突模式和严格模式下运行是一种常见做法

    严格模式在几个方面有所帮助:

    • 它能捕捉到一些常见的编码错误,抛出异常。
    • 当采取相对 "不安全" 的行动(如获得对全局对象的访问)时,它可以防止,或抛出错误。
    • 它禁用了那些令人困惑或考虑不周的功能。
  • 贡献者:Barbara Ford

    链接 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管理屏幕的体验。相反,您应该只在需要的单个屏幕上链接它,请参阅插件管理屏幕上的链接脚本部分以获取示例。

  • 贡献者:Pratik Shrestha

    注册和排队脚本时,不需要同时调用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' );
    

    只有在不知道是否要立即加载时才进行注册。

  • 贡献者:Xedin Unknown

    这没有文档记录,但在 $in_footer 为 `false`的情况下调用此函数实际上通常会将脚本注册为一个依赖项,应该解析并输出该依赖项,而不仅仅是针对页眉。然后,当输出排队等待页脚的脚本时,将只输出尚未包含的脚本。这会导致这样的行为:如果在页眉已被处理之后才排队,则假定在页眉中排队的脚本将出现在页脚中。因此 $in_footer 实际上应该被理解为 $in_footer_only。

  • 贡献者:Manny Fleurmond

    因为此函数和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' );
    
  • 贡献者:cgastrell

    未满足的依赖关系将*不会*有警告

    如果不满足依赖项(第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' );
    
  • 贡献者:BinkGwyneth Llewelyn

    关于如何将包括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;
    }
  • 贡献者:Anthony Hortin

    另请参见:

    wp_enqueue_style

  • 贡献者:Mário Valney

    对于那些对@damiankaelgreen有同样问题的人:

    在这种情况下,脚本是在一个HTML标记脚本中调用的文件,用于定义客户端脚本(JavaScript)。

    对于引入 PHP文件,请使用get_template_part()

  • 贡献者:Rabby

    此示例链接自定义样式表和脚本以及文件版本

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

    jquery-ui-dialog所需的CSS不会自动出现!

    您必须使用注册的句柄“wp-jquery-ui-dialog”单独调用wp_enqueue_style()

  • 贡献者:Barbara Ford

    链接依赖于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' );
    
  • 贡献者:Barbara Ford

    仅在插件管理屏幕上链接脚本

    此示例仅在特定的管理屏幕上链接脚本,与第一个示例代码下面的段落中描述的场景相反。

    <?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.
    }
    
  • 贡献者:damiankaelgreen

    这个文档真的应该更好地定义什么是 "脚本"......因为:这个函数是用来排队.php或html脚本的吗?不!

    这对许多开发人员来说似乎很明显,但如果您正在阅读此文档,您应该会对该函数的用途有所了解,所以我写此文是为了帮助您。

    显然,在这种情况下,术语“脚本”被用作不是由服务器评估的程序,而是需要传递给客户端(并由浏览器评估)的程序。因此,在这种情况下,预期将由服务器评估的PHP文件将不会被视为脚本(即使许多人可能会将其称为脚本),因此它不应包含在wp_enqueue_script()中,而应使用require_once()或可能的include_once()包含。

  • 贡献者:Miguel TorresJb Audras

    不确定这是否是报告它的地方,但我认为“WordPress包含并注册的默认脚本”表中出现的Tiny MCE句柄是不正确的。它说的是tiny_mce,但根据注册Tiny MCE脚本的代码应该是wp-tinymce

  • 贡献者:ilovecats7devdavi

    用于加载脚本(wp_enqueue_scripts)的动作挂钩在文档的头部部分调用,因此为了将脚本加载到页面上,您必须在页面模板中包括以下内容:

    get_header();
  • 贡献者:Uriahs Victor

    当使用wp_add_inline_script()将稍后要添加一些内联JS的自定义脚本文件排队时。通过将函数中的最后一个参数设置为true,您最好在页脚中加入自定义脚本

    wp_enqueue_script( $handle, $src, $deps, $ver, true );