WordPress函数：wp_enqueue_script

最新推荐文章于 2024-06-04 10:16:49 发布

TensorFlow学习

最新推荐文章于 2024-06-04 10:16:49 发布

阅读量2.6k

点赞数

分类专栏： wordpress

wordpress 专栏收录该内容

76 篇文章 4 订阅

订阅专栏

WordPress函数 / Function Reference / wp_enqueue_script

描述

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

用法

 
         1 
       
        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()函数。

参数

$handle
(string) (required) 脚本名称，使用小写字母。
Default: None

$src
(string) (optional) 脚本的链接。例如：”http://example.com/wp-includes/js/scriptaculous/scriptaculous.js”。$src参数仅在WordPress没有内置当前时是必填项，$src参数是必填项。你不需要写死脚本链接，针对插件使用plugins_url()函数，针对主题使用get_template_directory_uri()函数获取正确的链接。
Default: false

$deps
(array) (optional) 当前脚本依赖的脚本数组（必须在当前脚本之前加载）。如果没有依赖关系则$deps参数失效。$deps参数仅在WordPress没有内置当前脚本时是必填项。
Default: array()

$ver
(string) (optional) 指定脚本版本号的字符串，如果设置$ver参数，WordPress会自动把$ver参数作为查询字符串连接到路径末尾。默认为false。如果$ver参数没有设置或者设置为false，WordPress会自动把当前WordPress的版本号连接到路径末尾。如果$ver参数设置为null则不添加版本信息。$ver参数用于确保传递给客户端的正确版本不受缓存影响，因此让脚本附加版本号是有道理的。

$in_footer
(boolean) (optional) 通常脚本位于<head>区域。如果$in_footer参数设置为true，脚本会位于<body>底部。$in_footer参数需要主题在适当的位置有wp_footer()钩子。请注意，您必须在wp_head运行之前加载当前脚本，即使脚本放置在页脚。
Default: false

返回值

(void) wp_enqueue_script()函数无返回值。

举例

请注意：如果使用wp_head或wp_print_scripts动作钩子调用wp_enqueue_script()函数，则wp_enqueue_script()函数不会运行，js脚本需要在这些动作钩子运行前载入。参考上面的用法章节正确使用钩子。

从一个非WordPress默认位置加载默认WordPress脚本

请注意：不推荐主题强制默认使用第三方提供服务的JavaScript或CSS文件，这么做会让用户依赖于一个不受用户控制的外部主机。一个更好的选择是使用/推荐一个插件，例如：Use Google Libraries插件，此插件自动使用Google-CDN提供的和WordPress同一版本的jQuery，最终降低又主题或插件中写死文件造成的破坏风险。

警告：在插件中使用卸载WordPress内置的脚本的方法将被拒绝执行。

假设你要使用CDN的jQuery版本替换 WordPress内置版本，将如下代码添加到functions.php文件。

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
        function 
          
        my_scripts_method 
        ( 
        ) 
          
        { 
       
        wp_deregister_script 
        ( 
          
        'jquery' 
          
        ) 
        ; 
       
        wp_register_script 
        ( 
          
        'jquery' 
        , 
          
        'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' 
        ) 
        ; 
       
        wp_enqueue_script 
        ( 
          
        'jquery' 
          
        ) 
        ; 
       
        } 
       
        add_action 
        ( 
        'wp_enqueue_scripts' 
        , 
          
        'my_scripts_method' 
        ) 
        ;

通过使用wp_enqueue_scripts钩子（替代许多文章引用的init钩子）避免在管理页面注册jQuery脚本，这将导致在经常升级后编辑文章中断。

加载 scriptaculous 脚本

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
        function 
          
        my_scripts_method 
        ( 
        ) 
          
        { 
       
        wp_enqueue_script 
        ( 
        'scriptaculous' 
        ) 
        ; 
       
        } 
       
        add_action 
        ( 
        'wp_enqueue_scripts' 
        , 
          
        'my_scripts_method' 
        ) 
        ; 
          
        // For use on the Front end (ie. Theme)

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

加载依赖于 Scriptaculous 的脚本

加载一个依赖于Scriptaculous的新脚本。这将导致WordPress在加载当前脚本前先将Scriptaculous脚本加载到页面。

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
         9 
       
        function 
          
        my_scripts_method 
        ( 
        ) 
          
        { 
       
        wp_enqueue_script 
        ( 
       
        'newscript' 
        , 
       
        plugins_url 
        ( 
        '/js/newscript.js' 
        , 
          
        __FILE__ 
        ) 
        , 
       
        array 
        ( 
        'scriptaculous' 
        ) 
       
        ) 
        ; 
       
        } 
          
        add_action 
        ( 
        'wp_enqueue_scripts' 
        , 
          
        'my_scripts_method' 
        ) 
        ;

从取决于一个WordPress脚本的主题加载脚本

主题中的JavaScript脚本在加载前通常需要加载其他JavaScript脚本。WordPress提供了一个在注册脚本时标记依赖关系的API。例如，下面的主题中的custom_script JavaScript脚本需要先加载jQuery脚本：

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
        function 
          
        my_scripts_method 
        ( 
        ) 
          
        { 
       
        wp_enqueue_script 
        ( 
       
        'custom-script' 
        , 
       
        get_template_directory_uri 
        ( 
        ) 
          
        . 
          
        '/js/custom_script.js' 
        , 
       
        array 
        ( 
        'jquery' 
        ) 
       
        ) 
        ; 
       
        } 
       
        add_action 
        ( 
        'wp_enqueue_scripts' 
        , 
          
        'my_scripts_method' 
        ) 
        ;

仅在插件页面加载脚本

 
         1 
       
         2 
       
         3 
       
         4 
       
         5 
       
         6 
       
         7 
       
         8 
       
         9 
       
         10 
       
         11 
       
         12 
       
         13 
       
         14 
       
         15 
       
         16 
       
         17 
       
         18 
       
         19 
       
         20 
       
         21 
       
         22 
       
         23 
       
         24 
       
         25 
       
         26 
       
         27 
       
         28 
       
         29 
       
         30 
       
         31 
       
         32 
       
        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()函数。例如：

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

变成:

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

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

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

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

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

WordPress内置脚本

Script Name	Handle	所需依赖 *
Image Cropper	Image cropper (not used in core, see jcrop)
Jcrop	Image copper
SWFObject	swfobject
SWFUpload	swfupload
SWFUpload Degrade	swfupload-degrade
SWFUpload Queue	swfupload-queue
SWFUpload Handlers	swfupload-handlers
jQuery	jquery	json2 (for AJAX calls)
jQuery Form	jquery-form	jquery
jQuery Color	jquery-color	jquery
jQuery UI Core	jquery-ui-core (Just the base core.)	jquery
jQuery UI Widget	jquery-ui-widget	jquery
jQuery UI Mouse	jquery-ui-mouse	jquery
jQuery UI Accordion	jquery-ui-accordion	jquery
jQuery UI Autocomplete	jquery-ui-autocomplete	jquery
jQuery UI Slider	jquery-ui-slider	jquery
jQuery UI Tabs	jquery-ui-tabs	jquery
jQuery UI Sortable	jquery-ui-sortable	jquery
jQuery UI Draggable	jquery-ui-draggable	jquery
jQuery UI Droppable	jquery-ui-droppable	jquery
jQuery UI Selectable	jquery-ui-selectable	jquery
jQuery UI Datepicker	jquery-ui-datepicker	jquery
jQuery UI Resizable	jquery-ui-resizable	jquery
jQuery UI Dialog	jquery-ui-dialog	jquery
jQuery UI Button	jquery-ui-button	jquery
jQuery Schedule	schedule	jquery
jQuery Suggest	suggest	jquery
ThickBox	thickbox
jQuery Hotkeys	jquery-hotkeys	jquery
Simple AJAX Code-Kit	sack
QuickTags	quicktags
Farbtastic (color picker)	farbtastic	jquery
ColorPicker (deprecated)	colorpicker	jquery
Tiny MCE	tiny_mce
Autosave	autosave
WordPress AJAX Response	wp-ajax-response
List Manipulation	wp-lists
WP Common	common
WP Editor	editor
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-repy
Admin Gallery	admin-gallery
Media Upload	media-upload
Admin widgets	admin-widgets
Word Count	word-count
Theme Preview	theme-preview
JSON for JS	json2
Plupload	plupload

备注

参考 WP_Scripts::add_data(), WP_Scripts::enqueue()
使用全局变量：(unknown type) $wp_scripts
jQuery UI Effects 不包括在 jquery-ui-core
从 WordPress 3.3 起，wp_enqueue_script()函数可以在页面中被调用（在HTML body内）。这样会在页面底部加载脚本。

更改日志

Since: 2.6 (BackPress version: r16)

源文件

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

TensorFlow学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WordPress函数：wp_enqueue_script

WordPress函数 / Function Reference / wp_enqueue_script描述使用wp_enqueue_script()函数安全的将JavaScript脚本添加到WordPress生成的页面。wp_enqueue_script()函数会加载未被加载的脚本，并安全的处理依赖关系。用法1wp_enqueue_script( $h
复制链接

扫一扫

专栏目录