woocommerce购物站点设置Cloudflare CDN的步骤

✅ 一、准备工作

1. 已有 WordPress + WooCommerce 网站
2. 可用的域名
3. 域名 DNS 可由你控制（如阿里云、腾讯云、Namecheap、GoDaddy等）

✅ 二、注册并接入 Cloudflare

步骤1：注册 Cloudflare

• 访问 https://www.cloudflare.com/
• 注册一个免费账户并登录。

步骤2：添加你的网站

• 登录 Cloudflare 后点击 “Add site”
• 输入你的域名（例如 example.com），点击 “Add site”
• 选择“Free”免费套餐，点击“Continue”

步骤3：导入并检查 DNS 记录

Cloudflare 会扫描你的 DNS 记录：

• 保持原有记录不动（例如 A 记录、CNAME、MX 等）
• 重点检查：
  • 确保 example.com 和 www.example.com 的 A 记录正确指向你的服务器 IP
  • A 记录右边的小云朵图标为橙色（代理模式），表示启用 CDN（推荐）

点击 “Continue”

步骤4：更换域名 DNS

Cloudflare 会提示你修改域名的 DNS 服务器地址：

• 登录你注册域名的平台（如阿里云、腾讯云、GoDaddy）
• 找到该域名的 DNS 设置页面
• 将域名的 DNS 修改为 Cloudflare 提供的两个地址（例如 lisa.ns.cloudflare.com, mark.ns.cloudflare.com）
• 等待 DNS 生效（通常几分钟至 24 小时）

Cloudflare 会自动检测是否接入成功。

✅ 三、配置 WordPress 和 Cloudflare

步骤5：安装 Cloudflare 插件（可选但推荐）

在 WordPress 后台安装插件：

插件名称：Cloudflare

• 安装并激活
• 进入插件设置页面，使用 Cloudflare 账号登录并关联你的网站
• 可启用如下功能：
  • 自动缓存清理
  • 优化 WordPress 设置（如自动压缩、HTTPS重写等）

步骤6：开启 HTTPS（SSL）

在 Cloudflare 面板中：

• 进入你的站点 > “SSL/TLS” > “Overview”
• 模式选择：Full（严格）（推荐，前提是你服务器已配置证书）
  • 如果没有证书，也可选择“Flexible（灵活）”，但有兼容性问题

建议你自己在服务器配置 Let’s Encrypt 免费证书（宝塔可一键申请）

步骤7：启用性能优化功能（Speed）

在 Cloudflare 面板中，进入：

• “Speed” > “Optimization”
  • Auto Minify（HTML、CSS、JavaScript压缩）：开启
  • Brotli：开启
  • Rocket Loader：可选开启（注意与部分JS插件可能冲突）
• “Caching” 设置缓存级别为“标准”
• “Page Rules” 中可添加规则让 WooCommerce 的购物车、结账页不缓存：

text复制编辑URL: *example.com/cart*
设置：
 - Cache Level: Bypass
 - Disable Performance

再加一个规则：

text复制编辑URL: *example.com/checkout*
设置同上

✅ 页面规则 2：跳过 WooCommerce 购物车/结账缓存
分别添加以下两条：

规则 2.1：
| 匹配 URL | example.com/cart* | | 设置 | 缓存级别（Cache Level）= 绕过（Bypass） |

规则 2.2：
| 匹配 URL | example.com/checkout* | | 设置 | 缓存级别（Cache Level）= 绕过（Bypass） |

（可选）规则 2.3：
| 匹配 URL | example.com/my-account* | | 设置 | 缓存级别（Cache Level）= 绕过（Bypass） |

📌 说明：这些页面不能缓存，否则购物车功能可能失效。

✅ 四、WooCommerce 特别说明

为了防止 Cloudflare 缓存购物流程页面导致用户数据出错：

• 请确保以下路径不被缓存：
  • /cart
  • /checkout
  • /my-account
• 可以在 Cloudflare 的 Page Rules 设置这些路径为“Bypass Cache”

✅ 五、测试和验证

• 访问你的网站，确保：
  • 正常加载，未出现 HTTPS 报错
  • 购物流程正常
  • 浏览器开发者工具中响应头出现 cf-cache-status 字段，说明 Cloudflare 正常工作
• 使用 https://gtmetrix.com/ 或 https://pagespeed.web.dev/ 测试网站性能是否提升