特定页面按需加载css

style.css 是 WordPress 主题的全局样式文件，默认会在所有页面加载。比如我的特定页面-退款政策页面，如果将 “仅退款政策页面需要的 CSS” 从 style.css 中移除，放入页面内的<style>标签，能直接减小 style.css 的文件体积，这样可以：

1：全局加载的 style.css 变小，所有页面加载时的 CSS 传输量减少，尤其对移动端或低网速环境更友好。避免其他页面加载 “用不到到的 CSS”，减少浏览器解析冗余样式的时间。

2：页面内的<style>标签中的 CSS 只会在当前页面（退款政策页）加载时生效，其他页面完全不会加载这部分代码：

但这样有个缺点，页面内的<style>标签中的 CSS 不会被浏览器缓存（每次外部 CSS 文件会被缓存）。如果你的退款政策页面 CSS 代码量很大（比如几百行以上），或该页面访问量极高，频繁重复加载内联 CSS 可能反而增加性能开销。

对此，还有更有方案：

创建独立的 CSS 文件（如 refund-policy.css），仅包含该页面的样式。然后通过 wp_enqueue_style() 在模板中条件加载（只在当前页面加载），示例：

<?php
// 在模板顶部添加
function load_refund_policy_css() {
  // 只在当前页面加载该CSS
  if (is_page_template('refund-policy.php')) {
    wp_enqueue_style(
      'refund-policy', 
      get_template_directory_uri() . '/css/refund-policy.css', 
      array(), 
      '1.0', 
      'all'
    );
  }
}
add_action('wp_enqueue_scripts', 'load_refund_policy_css');
?>