如何将MDBootstrap 5 PRO上传到WordPress站点并正确加载使用

存在的问题 #

• 混用了MDB 4版本的语法调用MDB 5组件，两个大版本的API、组件属性差异极大，旧版写法无法被MDB 5识别
• 使用了jQuery的初始化方法，但页面没有引入jQuery库，且MDB 5原生不依赖jQuery，不需要使用jQuery调用组件
• Select组件的类名、自定义属性都是MDB 4的旧规范，MDB 5无法正常解析渲染
• 如果资源路径配置错误也会导致加载失败，需要先验证资源可访问性

修复方案 #

1. 先直接访问你填写的css、js资源URL，确认可以正常打开、没有返回404错误，如果无法访问就调整为你上传到WordPress站点的实际资源路径。如果是WordPress站点建议通过官方提供的wp_enqueue_style和wp_enqueue_script方法加载资源，避免和主题、插件的其他资源产生冲突。
2. 将HTML部分的Select代码替换为MDB 5支持的写法：

<select class="select" data-mdb-select-init data-mdb-filter="true" data-mdb-filter-placeholder="Search here..">
  <option value="" disabled selected>Choose your car</option>
  <option value="2" data-mdb-secondary-text="Production year: 2012">Volkswagen Passat</option>
  <option value="3" data-mdb-secondary-text="Production year: 2017">Subaru Legacy</option>
  <option value="3" data-mdb-secondary-text="Production year: 2015">Hyundai Elantra</option>
  <option value="3" data-mdb-secondary-text="Production year: 2019">Honda Civic</option>
  <option value="3" data-mdb-secondary-text="Production year: 2016">Audi A6</option>
</select>

3. 删除原来的jQuery初始化代码，MDB 5只要给组件添加了data-mdb-select-init属性就会自动初始化，不需要额外编写JS代码。如果有手动初始化的需求，使用原生JS写法即可：

document.addEventListener('DOMContentLoaded', function() {
  const selectEl = document.querySelector('.select');
  const selectInstance = new mdb.Select(selectEl, {
    filter: true,
    filterPlaceholder: 'Search here..'
  });
});

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