如何禁用WordPress的Starbella-Electronics主题预加载器

之前自定义CSS失效的原因 #

你之前写的CSS没起作用，基本踩了两个常见坑：

• 选择器和实际DOM对不上：这个主题的预加载器根本不用通用的.preloader/#preloader命名，多数版本实际用的是#preloader-wrapper、.starbella-site-loader这类自定义标识，选择器写错了样式自然不会生效
• 自定义CSS加载顺序靠后：如果把自定义CSS加在页脚位置，等你写的display:none规则加载完成时，预加载器已经渲染到页面上了；再加上市面很多主题给预加载器写了自带!important的样式规则，低优先级的自定义CSS根本压不住

第一步：先找对选择器修正CSS规则 #

1. 开网站无痕窗口，按F12调出开发者工具，用元素选择器点中加载时的全屏转场遮罩，抄下它真实的class、id属性
2. 把对应选择器替换掉之前的通用写法，加到WordPress后台「外观-自定义-额外CSS」板块——这个板块输出的CSS是随头部资源同步加载的，优先级比页脚加载的自定义CSS高得多
   参考修正后的代码模板：

   /* 把下面的选择器替换成你从开发者工具里查到的真实标识 */
   #preloader-wrapper,
   .starbella-site-loader {
       display: none !important;
   }
   

第二步：CSS无效时直接卸载预加载器脚本 #

这个主题的预加载效果是独立JS脚本控制的，光靠CSS遮不住逻辑层的加载拦截，需要直接卸载对应的脚本资源：

• 通过FTP或主机文件管理器打开主题目录，在functions.php里搜preloader关键词，找到预加载器对应脚本的注册句柄（就是wp_enqueue_script()方法里的第一个字符串参数）
• 别直接改父主题的文件，不然主题更新就会失效，通过子主题的functions.php或者安全代码片段插件加下面的卸载逻辑：

  add_action('wp_enqueue_scripts', function() {
      // 替换成你查到的真实预加载器脚本句柄
      wp_dequeue_script('starbella-preloader');
      wp_deregister_script('starbella-preloader');
      // 同时卸载预加载器自带的样式表
      wp_dequeue_style('starbella-preloader-style');
      wp_deregister_style('starbella-preloader-style');
  }, 100);
  

兜底方案 #

翻遍主题文件找不到脚本句柄的话，直接在网站头部加一段内联JS，DOM节点刚加载完成就把预加载器元素删掉，彻底跳过加载等待：

document.addEventListener('DOMContentLoaded', () => {
    // 匹配所有和预加载相关的遮罩元素
    const loaderNodes = document.querySelectorAll('[id*="preloader"], [class*="preloader"], [class*="loader-wrap"]');
    loaderNodes.forEach(node => node.remove());
});

提醒：所有操作前务必备份网站文件和数据库，避免操作失误导致站点访问异常。

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