SiteGround Cache Buster Skill

绕过SiteGround缓存（SG CachePress + LiteSpeed）用于WordPress开发。为实时开发测试向子主题添加缓存破坏代码。

⛔ 重要：仅限暂存环境 - 严禁生产环境

Claude严禁部署到生产环境。

操作	允许？
部署到暂存环境	✅ 是
部署到生产环境	❌ 绝对禁止
从生产环境读取	✅ 是（只读）
写入生产环境	❌ 绝对禁止

如果用户要求部署到生产环境：

拒绝请求
解释生产环境部署必须由用户手动完成
提供给暂存环境部署的选项

**生产环境路径被封锁。**任何不包含“暂存”的路径都禁止写入。

所需信息

在使用此技能之前，Claude将询问：

FTP/SFTP 凭证
- 主机名（例如，ftp.example.com）
- 用户名
- 密码
- 端口（FTP通常为21，SFTP为22）
网站URL
- 暂存URL（例如，https://staging.example.com）
- ~~生产URL~~（不需要 - Claude不会部署到那里）
主题路径
- 子主题文件夹名称（例如，theme-child）

将凭证存储在项目的CLAUDE.local.md（gitignored）以供未来会话使用。

仅限暂存环境的工作流程

本地开发 → 暂存网站 → [用户手动] → 生产环境
        ↑              ↑                   ↑
     Claude编辑   Claude部署     用户部署

Claude处理：本地编辑 + 暂存环境部署用户处理：生产环境部署（通过SiteGround、FTP客户端或手动）

它的作用

为管理员禁用服务器端缓存 - LiteSpeed Cache + SG CachePress
添加无缓存头部 - 防止CDN/代理缓存
破坏浏览器缓存 - 向CSS/JS URL添加时间戳
显示版本横幅 - 仅管理员可见的视觉确认主题正在加载

代码

PHP代码片段（添加到functions.php）

/**
 * SiteGround Cache Buster for Development
 * Disables caching for logged-in administrators
 * REMOVE OR DISABLE IN PRODUCTION when done testing
 */

// Development mode banner (shows version to confirm theme is active)
add_action('wp_head', 'sg_dev_mode_banner');
function sg_dev_mode_banner() {
    if (current_user_can('administrator')) {
        $theme = wp_get_theme();
        $version = $theme->get('Version');
        $name = $theme->get('Name');
        echo '<style>
            .sg-dev-banner {
                position: fixed;
                bottom: 20px;
                right: 20px;
                background: #34889A;
                color: white;
                padding: 10px 20px;
                border-radius: 8px;
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
                font-size: 12px;
                z-index: 999999;
                box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            }
        </style>
        <div class="sg-dev-banner">
            ' . esc_html($name) . ' v' . esc_html($version) . ' - ' . date('M j, H:i') . '
        </div>';
    }
}

// Disable all caching for administrators
add_action('init', 'sg_disable_cache_for_dev');
function sg_disable_cache_for_dev() {
    if (current_user_can('administrator')) {
        // Disable LiteSpeed Cache
        if (!defined('LSCACHE_NO_CACHE')) {
            define('LSCACHE_NO_CACHE', true);
        }

        // Disable SG Optimizer/CachePress
        if (!defined('SG_CACHEPRESS_NO_CACHE')) {
            define('SG_CACHEPRESS_NO_CACHE', true);
        }

        // Send no-cache headers
        nocache_headers();

        // Additional headers for CDN bypass
        header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');
        header('Pragma: no-cache');
        header('Expires: Thu, 01 Jan 1970 00:00:00 GMT');
    }
}

// Bust browser cache by adding timestamp to theme CSS/JS
add_filter('style_loader_src', 'sg_bust_asset_cache', 999);
add_filter('script_loader_src', 'sg_bust_asset_cache', 999);
function sg_bust_asset_cache($src) {
    if (current_user_can('administrator')) {
        // Only bust cache for theme assets
        $theme_uri = get_stylesheet_directory_uri();
        $parent_uri = get_template_directory_uri();

        if (strpos($src, $theme_uri) !== false || strpos($src, $parent_uri) !== false) {
            $src = add_query_arg('v', time(), $src);
        }
    }
    return $src;
}

使用方法

方法1：通过脚本自动注入

# 导航到你的项目
cd /path/to/wordpress-project

# 运行注入脚本
/root/.claude/skills/siteground-cache/add-cache-buster.sh ./wp-content/themes/your-child-theme

方法2：手动复制

复制上面的PHP代码
粘贴到你的子主题的functions.php末尾
仅通过FTP上传到暂存环境
以管理员身份访问暂存网站 - 你应该看到版本横幅

方法3：通过Claude

只需询问：

“添加SiteGround缓存破坏到这个主题”
“启用SiteGround的dev模式”
“添加缓存破坏到functions.php”

Claude只会部署到暂存环境。

部署工作流程（仅限暂存环境）

第1步：获取凭证（询问用户）

部署前，询问用户：

我需要FTP凭证部署到暂存环境。请提供：
1. FTP主机（例如，ftp.yourdomain.com）
2. FTP用户名
3. FTP密码
4. 暂存网站路径（例如，staging.yourdomain.com/public_html）

第2步：部署到暂存环境

# 仅限暂存环境 - 严禁生产！
lftp -u "user,password" -e "
    set ssl:verify-certificate no
    mirror -R ./child-theme staging.example.com/public_html/wp-content/themes/child-theme
    bye
" ftp://ftp.example.com

第3步：在暂存环境验证

以管理员身份访问暂存网站
确认开发横幅出现（右下角）
测试CSS/JS更改是否可见
检查PHP错误

第4步：用户部署到生产环境

**Claude不执行这一步。**告诉用户：

暂存网站上的更改已准备好。要部署到生产环境：

选项1：SiteGround Site Tools
  - 转到Site Tools > WordPress > Staging
  - 点击"推送到Live"

选项2：FTP客户端（FileZilla、Cyberduck等）
  - 从暂存环境下载
  - 上传到生产环境

选项3：通过FTP手动复制文件

各部分工作原理

1. LiteSpeed Cache Bypass

define('LSCACHE_NO_CACHE', true);

LiteSpeed Cache插件检查此常量并在设置时跳过缓存。

2. SG CachePress Bypass

define('SG_CACHEPRESS_NO_CACHE', true);

SiteGround的缓存插件尊重此常量。

3. HTTP头部

nocache_headers();
header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');

告诉浏览器和CDN不要缓存响应。

4. 资产缓存破坏

add_query_arg('v', time(), $src);

向CSS/JS URL添加?v=1704567890。由于时间戳每秒变化，浏览器始终获取新文件。

故障排除

横幅没有显示？

确保你以管理员身份登录
检查子主题是否激活（外观 > 主题）
查看错误日志中的PHP错误

仍然看到缓存内容？

尝试隐身/私密浏览器窗口
手动清除浏览器缓存
检查SiteGround Site Tools > 速度 > 缓存 > 清除缓存
检查Cloudflare是否在前面（也需要在那里清除）

CSS更改没有出现？

查看页面源代码，检查CSS URL上是否有?v=时间戳
硬刷新：Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）

此技能中的文件

/root/.claude/skills/siteground-cache/
├── SKILL.md                 # 此文档
├── add-cache-buster.sh      # 自动注入脚本
├── cache-buster.php         # 独立的PHP代码片段
└── remove-cache-buster.sh   # 移除脚本

CLAUDE.local.md示例模板

将此存储在项目中（gitignored）：

# SiteGround凭证（不要提交）

## FTP访问
- 主机：ftp.example.com
- 用户：user@example.com
- 密码：your-password
- 端口：21

## 网站URL
- 暂存：https://staging.example.com
- 生产：https://example.com（Claude只读）

## 主题路径
- 暂存：staging.example.com/public_html/wp-content/themes/theme-child
- 生产：限制区域（用户手动部署）