WordPress站点从根目录迁移至子目录后前端CSS失效如何解决

1. 校验核心URL配置 #

• 登录WordPress后台，进入「设置」-「常规」页面，确认两个配置项：
  • WordPress地址（URL）：填写WordPress核心文件实际存放的子目录地址，例：https://你的域名/子目录名称
  • 站点地址（URL）：填写用户实际访问站点的地址，若希望用户直接通过根域名访问则填根域名，若希望访问路径带目录则填和上面一致的子目录地址
• 若后台无法修改配置，可直接进入phpMyAdmin打开站点数据库的wp_options表，核对siteurl和home两个字段的option_value值是否正确，避免拼写错误、多/少斜杠的问题。

2. 排查wp-config.php硬编码规则 #

• 打开子目录下的wp-config.php文件，检查是否存在硬编码的URL配置，若有则确保值和上一步的配置一致，若没有也可手动添加以下两行强制覆盖数据库配置，避免缓存问题：

// 示例：根域名访问，文件存放在wordpress子目录
define('WP_HOME', 'https://你的域名');
define('WP_SITEURL', 'https://你的域名/wordpress');

3. 清理所有缓存与静态资源替换 #

• 前端页面右键选择「查看网页源代码」，找到CSS/JS资源的加载链接，确认资源路径是否正确带有子目录前缀，若还是指向旧的根目录地址，则需要批量替换站点内的旧域名/旧路径：
  • 可在后台安装搜索替换类插件，全站匹配旧地址替换为新的正确地址
  • 清理所有缓存：包括WordPress缓存插件缓存、服务器层面缓存、CDN缓存，之后使用浏览器硬刷新（快捷键Ctrl+F5）重新加载页面

4. 修正.htaccess伪静态规则 #

场景A：用户通过根域名直接访问子目录站点 #

需要分别配置根目录和子目录下的.htaccess文件：

• 根目录.htaccess规则：

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_HOST} ^你的域名$ [NC,OR]
RewriteCond %{HTTP_HOST} ^www.你的域名$
RewriteCond %{REQUEST_URI} !^/子目录名称/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /子目录名称/$1
RewriteCond %{HTTP_HOST} ^你的域名$ [NC,OR]
RewriteCond %{HTTP_HOST} ^www.你的域名$
RewriteRule ^(/)?$ 子目录名称/index.php [L]
</IfModule>

• 子目录.htaccess规则：

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /子目录名称/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /子目录名称/index.php [L]
</IfModule>
# END WordPress

场景B：用户访问路径也携带子目录前缀 #

仅需配置子目录下的.htaccess，直接使用上方场景A给出的子目录规则即可。

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