Wordpress 加载 js 文件到底部

简介: wp_enqueue_scriptwp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )很明显最后一个参数 $in_footer 设置为 True 时,js 文件会被加载到文档底部。

wp_enqueue_script

wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )
很明显最后一个参数 $in_footer 设置为 True 时,js 文件会被加载到文档底部。

核心 Jquery 文件

wordpress 内置了 jquery 类库。但默认是加载在页面头部的。
有两种方式, 一种先是删除核心的 jquery 包,再引自定义的 jquery 包到底部:

 function my_scripts_method() {
    
        wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js', true );
        wp_enqueue_script( 'jquery' );
 }
add_action('wp_enqueue_scripts', 'my_scripts_method');

另一种方式是有人读了wp_enqueque_script 的代码实现,如下:

function wp_register_script( $handle, $src, $deps = array(), $ver = false, $in_footer = false ) {
    
        $wp_scripts = wp_scripts();
        _wp_scripts_maybe_doing_it_wrong( __FUNCTION__ );

        $registered = $wp_scripts->add( $handle, $src, $deps, $ver );
        if ( $in_footer ) {
    
                $wp_scripts->add_data( $handle, 'group', 1 );
        }

        return $registered;
}

所以正确的解决方案为:

add_action( 'wp_default_scripts', 'move_jquery_into_footer' );

function move_jquery_into_footer( $wp_scripts ) {
    

    if( is_admin() ) {
    
        return;
    }

    $wp_scripts->add_data( 'jquery', 'group', 1 );
    $wp_scripts->add_data( 'jquery-core', 'group', 1 );
    $wp_scripts->add_data( 'jquery-migrate', 'group', 1 );
}

REFs

https://developer.wordpress.org/reference/functions/wp_enqueue_script/

相关文章
|
JavaScript API
深入探索fs.WriteStream:Node.js文件写入流的全面解析
深入探索fs.WriteStream:Node.js文件写入流的全面解析
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
1873 58
|
缓存 JavaScript 前端开发
高效打造跨平台桌面应用:Electron加载服务器端JS
【9月更文挑战第17天】Electron 是一个基于 Chromium 和 Node.js 的开源框架,允许使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用。加载服务器端 JS 可增强应用灵活性,实现代码复用、动态更新及实时通信。通过 HTTP 请求、WebSocket 或文件系统可实现加载,但需注意安全性、性能和兼容性问题。开发者应根据需求选择合适方法并谨慎实施。
856 3
|
11月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
3204 0
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
275 0
|
JavaScript 前端开发 API
Next.js 实战 (六):如何实现文件本地上传
这篇文章介绍了在Next.js中如何实现文件上传到本地的方法。文章首先提到Next.js官方文档中没有提供文件上传的实例代码,因此开发者需要自行实现,通常有两种思路:使用Node.js原生上传或使用第三方插件如multer。接着,文章选择了使用Node.js原生上传的方式来讲解实现过程,包括如何通过哈希值命名文件、上传到指定目录以及如何分类文件夹。然后,文章展示了具体的实现步骤,包括编写代码来处理文件上传,并给出了代码示例。最后,文章通过一个效果演示说明了如何通过postman模拟上传文件,并展示了上传后的文件夹结构。
526 0
Next.js 实战 (六):如何实现文件本地上传
|
前端开发 JavaScript API
前端JS读取文件内容并展示到页面上
前端JavaScript使用FileReader API读取文件内容,支持文本类型文件。在文件读取成功后,可以通过onload事件处理函数获取文件内容,然后展示到页面上。
698 2
前端JS读取文件内容并展示到页面上
|
缓存 前端开发 JavaScript
JavaScript加载优化
JavaScript加载优化
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
362 1
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。

热门文章

最新文章