如何在WordPress中从本地文件引入Bootstrap 4.6的JS和CSS

核心参数解析 #

先拆解你关心的参数含义，再给出完整代码：

1. JS部分的array( 'jquery' ), '4.6.0', true

• array( 'jquery' )：Bootstrap 4.6的JS必须依赖jQuery才能正常运行，这个数组是告诉WordPress先加载jQuery再加载Bootstrap JS，WordPress自带jQuery，所以这个参数完全不用改。
• '4.6.0'：资源版本号，用来控制浏览器缓存，当你更新本地Bootstrap文件时，修改这个版本号可以强制浏览器加载新文件，避免缓存问题。
• true：指定脚本加载在</body>标签之前，不会阻塞页面渲染，优化加载体验，建议保留。

2. CSS部分的array(), '4.6.0', 'all'

• array()：Bootstrap 4.6的CSS没有依赖WordPress中已注册的其他样式，所以空数组即可，不用添加任何内容。
• '4.6.0'：和JS的版本号作用一致，用于缓存控制，保持和Bootstrap版本匹配就行。
• 'all'：指定CSS适配所有媒体设备（屏幕、打印等），符合Bootstrap的响应式设计需求，无需修改。

完整本地加载代码 #

假设你把Bootstrap文件放在主题目录下的css和js子文件夹中（比如wp-content/themes/你的主题/css/bootstrap.min.css、wp-content/themes/你的主题/js/bootstrap.min.js），替换CDN代码为以下内容：

// 加载本地Bootstrap JS
wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array( 'jquery' ), '4.6.0', true );

// 加载本地Bootstrap CSS
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '4.6.0', 'all' );

补充说明 #

• 如果使用子主题，把get_template_directory_uri()换成get_stylesheet_directory_uri()，指向子主题目录，避免父主题更新覆盖文件。
• 确保本地文件路径和代码里的路径完全匹配，比如文件放在assets/css和assets/js，就把路径改成'/assets/css/bootstrap.min.css'和'/assets/js/bootstrap.min.js'。

内容的提问来源于stack exchange，提问作者inputforcolor