WordPress與GitHub集成中JS版本加載失敗的解決方案

來自：素雅營(yíng)銷研究院

方知筆記

2025年07月01日 11:24

問題背景

許多WordPress開發(fā)者喜歡將項(xiàng)目托管在GitHub上，并通過GitHub Actions等工具實(shí)現(xiàn)自動(dòng)化部署。然而在實(shí)際操作中，經(jīng)常會(huì)遇到一個(gè)典型問題：當(dāng)從GitHub倉(cāng)庫(kù)部署WordPress項(xiàng)目時(shí)，JavaScript文件版本無法正確加載，導(dǎo)致前端功能異常。

常見原因分析

緩存問題：WordPress默認(rèn)會(huì)為靜態(tài)資源添加版本號(hào)（如script.js?ver=5.2.1），但GitHub的CDN可能不支持這種查詢字符串形式的版本控制
路徑錯(cuò)誤：從GitHub部署后，文件路徑結(jié)構(gòu)發(fā)生變化，導(dǎo)致JS文件引用路徑失效
權(quán)限問題：GitHub部署的文件權(quán)限可能不正確，導(dǎo)致JS文件無法被讀取
.htaccess配置：GitHub部署可能覆蓋了WordPress原有的.htaccess文件，影響資源加載規(guī)則

解決方案

方法一：禁用查詢字符串版本控制

在主題的functions.php文件中添加以下代碼：

function remove_script_version($src) {
return remove_query_arg('ver', $src);
}
add_filter('script_loader_src', 'remove_script_version', 15, 1);
add_filter('style_loader_src', 'remove_script_version', 15, 1);

方法二：使用文件修改時(shí)間作為版本號(hào)

function add_file_mtime_version($src) {
if(strpos($src, 'wp-includes') === false) {
$path = parse_url($src, PHP_URL_PATH);
$file = $_SERVER['DOCUMENT_ROOT'] . $path;
if(file_exists($file)) {
$src = add_query_arg('ver', filemtime($file), $src);
}
}
return $src;
}
add_filter('script_loader_src', 'add_file_mtime_version');
add_filter('style_loader_src', 'add_file_mtime_version');

方法三：正確配置GitHub Actions工作流

確保部署工作流正確處理WordPress資源：

name: Deploy WordPress to Server

on:
push:
branches: [ main ]

jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Rsync Deploy
uses: burnett01/rsync-deployments@5.1
with:
switches: -avzr --delete
path: ./
remote_path: /var/www/your-site/
remote_host: ${{ secrets.SSH_HOST }}
remote_user: ${{ secrets.SSH_USER }}
remote_key: ${{ secrets.SSH_PRIVATE_KEY }}