自定义WordPress主题preloader拆分代码后失效，求解决方法？

拆分后Preloader失效，核心原因是原代码通过init钩子直接在页面顶部输出内联资源，拆分后资源加载时机、变量传递逻辑被打破，按以下步骤修复：

1. 正确添加Preloader HTML到footer.php #

在主题footer.php的</body>标签前插入以下代码，保留后台与登录页的排除逻辑：

<?php if (!is_admin() && $GLOBALS["pagenow"] !== "wp-login.php") : ?>
<div class="Preloader">
  <img src="<?php echo esc_url('http://devnuru.local/wp-content/uploads/2024/09/devnuru-spinner.svg'); ?>" alt="" style="height: 150px;">
</div>
<?php endif; ?>

2. 迁移CSS到主题主样式文件 #

把原内联CSS复制到主题style.css（或自定义CSS文件）中，确保样式优先级足够：

.Preloader {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0;
  padding: 0;
}

3. 独立JS文件配置与加载 #

编写独立JS文件 #

在主题目录新建js/preloader.js，写入以下代码（可通过PHP传递动态变量，也可直接写死参数）：

// 初始锁定页面滚动
document.body.style.overflow = "hidden";

// 等待DOM完全加载后执行移除逻辑
document.addEventListener("DOMContentLoaded", () => {
  const delay = 1000; // 对应原代码的1秒延迟
  setTimeout(() => {
    const preloader = document.querySelector(".Preloader");
    if (preloader) {
      preloader.remove();
      document.body.style.overflow = "visible";
    }
  }, delay);
});

在functions.php中加载JS #

添加脚本加载逻辑，确保JS在footer加载，同时可传递动态变量（可选）：

function devnuru_enqueue_preloader_script() {
  if (!is_admin() && $GLOBALS["pagenow"] !== "wp-login.php") {
    // 加载独立JS文件，最后一个参数true表示在footer输出
    wp_enqueue_script(
      'devnuru-preloader',
      get_template_directory_uri() . '/js/preloader.js',
      array(),
      '1.0',
      true
    );

    // 可选：传递PHP变量到前端JS，方便动态修改延迟或图标地址
    wp_localize_script('devnuru-preloader', 'devnuruPreloader', array(
      'delay' => 1 * 1000,
      'loaderUrl' => esc_url('http://devnuru.local/wp-content/uploads/2024/09/devnuru-spinner.svg')
    ));
  }
}
add_action('wp_enqueue_scripts', 'devnuru_enqueue_preloader_script');

如果使用了本地化变量，JS中的delay可改为devnuruPreloader.delay。

关键注意事项 #

• 确保主题主CSS文件在<head>中加载，避免Preloader出现无样式闪烁
• JS必须在footer加载（wp_enqueue_script最后参数设为true），确保DOM元素已存在
• JS中先判断Preloader元素是否存在再执行移除，避免控制台报错
• 所有前端输出都保留后台与登录页的排除逻辑，避免干扰后台操作

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